Refactor markdown editor and use it for milestone description editor (#32688)

Refactor markdown editor to clarify its "preview" behavior and remove jQuery code. Close #15045 --------- Co-authored-by: silverwind <me@silverwind.io>
2025-07-22 18:28:37 +00:00 · 2024-12-04 10:11:34 +08:00
parent 2f43536c3e
commit c9e582c6b6
29 changed files with 147 additions and 116 deletions
--- a/templates/devtest/devtest-footer.tmpl
+++ b/templates/devtest/devtest-footer.tmpl
@@ -1,3 +1,3 @@
 {{/* TODO: the devtest.js is isolated from index.js, so no module is shared and many index.js functions do not work in devtest.ts */}}
 <script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
-{{template "base/footer" dict}}
+{{template "base/footer" ctx.RootData}}
--- a/templates/devtest/devtest-header.tmpl
+++ b/templates/devtest/devtest-header.tmpl
@@ -1,2 +1,2 @@
-{{template "base/head" dict}}
+{{template "base/head" ctx.RootData}}
 <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">
--- a/templates/devtest/gitea-ui.tmpl
+++ b/templates/devtest/gitea-ui.tmpl
@@ -183,8 +183,7 @@

 	<div>
 		<h1>ComboMarkdownEditor</h1>
-		<div>ps: no JS code attached, so just a layout</div>
-		{{template "shared/combomarkdowneditor" .}}
+		{{template "shared/combomarkdowneditor" dict "MarkdownPreviewContext" "/owner/path"}}
 	</div>

 	<h1>Tailwind CSS Demo</h1>
--- a/templates/org/settings/options.tmpl
+++ b/templates/org/settings/options.tmpl
@@ -23,6 +23,7 @@
 							<input id="email" name="email" type="email" value="{{.Org.Email}}" maxlength="255">
 						</div>
 						<div class="field {{if .Err_Description}}error{{end}}">
+							{{/* it is rendered as markdown, but the length is limited, so at the moment we do not use the markdown editor here */}}
 							<label for="description">{{ctx.Locale.Tr "org.org_desc"}}</label>
 							<textarea id="description" name="description" rows="2" maxlength="255">{{.Org.Description}}</textarea>
 						</div>
--- a/templates/projects/new.tmpl
+++ b/templates/projects/new.tmpl
@@ -18,7 +18,16 @@
 		</div>
 		<div class="field">
 			<label>{{ctx.Locale.Tr "repo.projects.description"}}</label>
-			<textarea name="content" placeholder="{{ctx.Locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea>
+			{{/* TODO: repo-level project and org-level project have different behaviros to render */}}
+			{{/* the "Repository" is nil when the project is org-level */}}
+			{{template "shared/combomarkdowneditor" (dict
+				"MarkdownPreviewInRepo" $.Repository
+				"MarkdownPreviewContext" (Iif $.Repository "" .HomeLink)
+				"MarkdownPreviewMode" (Iif $.Repository "comment")
+				"TextareaName" "content"
+				"TextareaContent" .content
+				"TextareaPlaceholder" (ctx.Locale.Tr "repo.projects.description_placeholder")
+			)}}
 		</div>

 		{{if not .PageIsEditProjects}}
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -240,8 +240,9 @@
 		<template id="issue-comment-editor-template">
 			<div class="ui form comment">
 				{{template "shared/combomarkdowneditor" (dict
-					"MarkdownPreviewUrl" (print $.Repository.Link "/markup")
-					"MarkdownPreviewContext" $.RepoLink
+					"CustomInit" true
+					"MarkdownPreviewInRepo" $.Repository
+					"MarkdownPreviewMode" "comment"
 					"TextareaName" "content"
 					"DropzoneParentContainer" ".ui.form"
 				)}}
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -9,24 +9,24 @@
 		<input type="hidden" name="diff_start_cid">
 		<input type="hidden" name="diff_end_cid">
 		<input type="hidden" name="diff_base_cid">
-
+		<div class="field">
 		{{template "shared/combomarkdowneditor" (dict
-			"MarkdownPreviewUrl" (print $.root.Repository.Link "/markup")
-			"MarkdownPreviewContext" $.root.RepoLink
+			"CustomInit" true
+			"MarkdownPreviewInRepo" $.root.Repository
+			"MarkdownPreviewMode" "comment"
 			"TextareaName" "content"
 			"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.comment.placeholder")
 			"DropzoneParentContainer" "form"
 			"DisableAutosize" "true"
 		)}}
-
+		</div>
 		{{if $.root.IsAttachmentEnabled}}
 			<div class="field">
 				{{template "repo/upload" $.root}}
 			</div>
 		{{end}}

-		<div class="field footer tw-mx-2">
-			<span class="markup-info">{{svg "octicon-markdown"}} {{ctx.Locale.Tr "repo.diff.comment.markdown_info"}}</span>
+		<div class="field footer">
 			<div class="tw-text-right">
 				{{if $.reply}}
 					<button class="ui submit primary tiny button btn-reply" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>
--- a/templates/repo/diff/new_review.tmpl
+++ b/templates/repo/diff/new_review.tmpl
@@ -16,8 +16,8 @@
 				</div>
 				<div class="field">
 					{{template "shared/combomarkdowneditor" (dict
-						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-						"MarkdownPreviewContext" .RepoLink
+						"MarkdownPreviewInRepo" $.Repository
+						"MarkdownPreviewMode" "comment"
 						"TextareaName" "content"
 						"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.review.placeholder")
 						"DropzoneParentContainer" "form"
--- a/templates/repo/issue/comment_tab.tmpl
+++ b/templates/repo/issue/comment_tab.tmpl
@@ -5,11 +5,12 @@

 <div class="field">
 	{{template "shared/combomarkdowneditor" (dict
-		"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-		"MarkdownPreviewContext" .RepoLink
+		"CustomInit" true
+		"MarkdownPreviewInRepo" $.Repository
+		"MarkdownPreviewMode" "comment"
 		"TextareaName" "content"
 		"TextareaContent" $textareaContent
-		"TextareaPlaceholder"  (ctx.Locale.Tr "repo.diff.comment.placeholder")
+		"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.comment.placeholder")
 		"DropzoneParentContainer" "form, .ui.form"
 	)}}
 </div>
--- a/templates/repo/issue/fields/textarea.tmpl
+++ b/templates/repo/issue/fields/textarea.tmpl
@@ -7,11 +7,12 @@

 	{{if $useMarkdownEditor}}
 		{{template "shared/combomarkdowneditor" (dict
+			"CustomInit" true
 			"ContainerClasses" "tw-hidden"
-			"MarkdownPreviewUrl" (print .root.RepoLink "/markup")
-			"MarkdownPreviewContext" .root.RepoLink
+			"MarkdownPreviewInRepo" $.root.Repository
+			"MarkdownPreviewMode" "comment"
 			"TextareaContent" .item.Attributes.value
-			"TextareaPlaceholder"  .item.Attributes.placeholder
+			"TextareaPlaceholder" .item.Attributes.placeholder
 			"DropzoneParentContainer" ".combo-editor-dropzone"
 		)}}

--- a/templates/repo/issue/milestone_new.tmpl
+++ b/templates/repo/issue/milestone_new.tmpl
@@ -36,9 +36,14 @@
 				</div>
 				<div class="field">
 					<label>{{ctx.Locale.Tr "repo.milestones.desc"}}</label>
-					<textarea name="content">{{.content}}</textarea>
+					{{template "shared/combomarkdowneditor" (dict
+						"MarkdownPreviewInRepo" $.Repository
+						"MarkdownPreviewMode" "comment"
+						"TextareaName" "content"
+						"TextareaContent" .content
+						"TextareaPlaceholder" (ctx.Locale.Tr "repo.milestones.desc")
+					)}}
 				</div>
-				<div class="divider"></div>
 				<div class="tw-text-right">
 					{{if .PageIsEditMilestone}}
 						<a class="ui primary basic button" href="{{.RepoLink}}/milestones">
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -142,8 +142,9 @@
 	<div class="ui form comment">
 		<div class="field">
 			{{template "shared/combomarkdowneditor" (dict
-				"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-				"MarkdownPreviewContext" .RepoLink
+				"CustomInit" true
+				"MarkdownPreviewInRepo" $.Repository
+				"MarkdownPreviewMode" "comment"
 				"TextareaName" "content"
 				"DropzoneParentContainer" ".ui.form"
 			)}}
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -50,12 +50,11 @@
 				</div>
 				<div class="field">
 					{{template "shared/combomarkdowneditor" (dict
-						"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-						"MarkdownPreviewContext" .RepoLink
+						"MarkdownPreviewInRepo" $.Repository
+						"MarkdownPreviewMode" "comment"
 						"TextareaName" "content"
 						"TextareaContent" .content
 						"TextareaPlaceholder" (ctx.Locale.Tr "repo.release.message")
-						"TextareaAriaLabel" (ctx.Locale.Tr "repo.release.message")
 						"DropzoneParentContainer" "form"
 					)}}
 				</div>
--- a/templates/repo/wiki/new.tmpl
+++ b/templates/repo/wiki/new.tmpl
@@ -23,12 +23,12 @@
 				{{$content = ctx.Locale.Tr "repo.wiki.welcome"}}
 			{{end}}
 			{{template "shared/combomarkdowneditor" (dict
-				"MarkdownPreviewUrl" (print .Repository.Link "/markup")
-				"MarkdownPreviewContext" .RepoLink
+				"CustomInit" true
+				"MarkdownPreviewInRepo" $.Repository
+				"MarkdownPreviewMode" "wiki"
 				"TextareaName" "content"
-				"TextareaPlaceholder" (ctx.Locale.Tr "repo.wiki.page_content")
-				"TextareaAriaLabel" (ctx.Locale.Tr "repo.wiki.page_content")
 				"TextareaContent" $content
+				"TextareaPlaceholder" (ctx.Locale.Tr "repo.wiki.page_content")
 			)}}

 			<div class="field tw-mt-4">
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -1,23 +1,39 @@
 {{/*
 Template Attributes:
+* CustomInit: do not initialize the editor automatically
 * ContainerId: id attribute for the container element
 * ContainerClasses: additional classes for the container element
-* MarkdownPreviewUrl: preview url for the preview tab
-* MarkdownPreviewContext: preview context for the preview tab
+* MarkdownPreviewInRepo: the repo to preview markdown
+* MarkdownPreviewContext: preview context (the related url path when rendering) for the preview tab, eg: repo link or user home link
+* MarkdownPreviewMode: content mode for the editor, eg: wiki, comment or default
 * TextareaName: name attribute for the textarea
 * TextareaContent: content for the textarea
+* TextareaMaxLength: maxlength attribute for the textarea
 * TextareaPlaceholder: placeholder attribute for the textarea
 * TextareaAriaLabel: aria-label attribute for the textarea
 * DropzoneParentContainer: container for file upload (leave it empty if no upload)
 * DisableAutosize: whether to disable automatic height resizing
 */}}
-<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
-	{{if .MarkdownPreviewUrl}}
+{{$ariaLabel := or .TextareaAriaLabel .TextareaPlaceholder}}
+{{$repo := .MarkdownPreviewInRepo}}
+{{$previewContext := .MarkdownPreviewContext}}
+{{$previewMode := .MarkdownPreviewMode}}
+{{$previewUrl := print AppSubUrl "/-/markup"}}
+{{if $repo}}
+	{{$previewUrl = print $repo.Link "/markup"}}
+{{end}}
+{{$supportEasyMDE := or (eq $previewMode "comment") (eq $previewMode "wiki")}}
+<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{if .CustomInit}}custom-init{{end}} {{.ContainerClasses}}"
+		data-dropzone-parent-container="{{.DropzoneParentContainer}}"
+		data-content-mode="{{$previewMode}}"
+		data-support-easy-mde="{{$supportEasyMDE}}"
+		data-preview-url="{{$previewUrl}}"
+		data-preview-context="{{$previewContext}}"
+>
 	<div class="ui top tabular menu">
 		<a class="active item" data-tab-for="markdown-writer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "write")}}</a>
-		<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
+		<a class="item" data-tab-for="markdown-previewer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
 	</div>
-	{{end}}
 	<div class="ui tab active" data-tab-panel="markdown-writer">
 		<markdown-toolbar>
 			<div class="markdown-toolbar-group">
@@ -40,17 +56,25 @@ Template Attributes:
 				<md-task-list class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
 				<button class="markdown-toolbar-button markdown-button-table-add" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.add.tooltip"}}">{{svg "octicon-table"}}</button>
 			</div>
+			{{if eq $previewMode "comment"}}
 			<div class="markdown-toolbar-group">
 				<md-mention class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
 				<md-ref class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
 			</div>
+			{{end}}
 			<div class="markdown-toolbar-group">
 				<button class="markdown-toolbar-button markdown-switch-monospace" role="switch" data-enable-text="{{ctx.Locale.Tr "editor.buttons.enable_monospace_font"}}" data-disable-text="{{ctx.Locale.Tr "editor.buttons.disable_monospace_font"}}">{{svg "octicon-typography"}}</button>
+				{{if $supportEasyMDE}}
 				<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
+				{{end}}
 			</div>
 		</markdown-toolbar>
 		<text-expander keys=": @ #" multiword="#" suffix="">
-			<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
+			<textarea class="markdown-text-editor"
+				{{if .TextareaName}}name="{{.TextareaName}}"{{end}} {{if .TextareaMaxLength}}maxlength="{{.TextareaMaxLength}}"{{end}}
+				{{if .TextareaPlaceholder}}placeholder="{{.TextareaPlaceholder}}"{{end}} {{if $ariaLabel}}aria-label="{{$ariaLabel}}"{{end}}
+				{{if .DisableAutosize}}data-disable-autosize="{{.DisableAutosize}}"{{end}}
+			>{{.TextareaContent}}</textarea>
 		</text-expander>
 		<script>
 			if (localStorage?.getItem('markdown-editor-monospace') === 'true') {
--- a/templates/user/settings/profile.tmpl
+++ b/templates/user/settings/profile.tmpl
@@ -29,6 +29,7 @@
 					<p id="signed-user-email">{{.SignedUser.Email}}</p>
 				</div>
 				<div class="field {{if .Err_Description}}error{{end}}">
+					{{/* it is rendered as markdown, but the length is limited, so at the moment we do not use the markdown editor here */}}
 					<label for="description">{{ctx.Locale.Tr "user.user_bio"}}</label>
 					<textarea id="description" name="description" rows="2" placeholder="{{ctx.Locale.Tr "settings.biography_placeholder"}}" maxlength="255">{{.SignedUser.Description}}</textarea>
 				</div>