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 <[email protected]>

Author: wxiaoguang

modules/web/route.go

@@ -9,6 +9,7 @@ import (
 	"reflect"
 	"strings"
 
+	"code.gitea.io/gitea/modules/htmlutil"
 	"code.gitea.io/gitea/modules/setting"
 	"code.gitea.io/gitea/modules/web/middleware"
 
@@ -214,7 +215,9 @@ func (r *Router) normalizeRequestPath(resp http.ResponseWriter, req *http.Reques
 			normalizedPath = "/"
 		} else if !strings.HasPrefix(normalizedPath+"/", "/v2/") {
 			// do not respond to other requests, to simulate a real sub-path environment
-			http.Error(resp, "404 page not found, sub-path is: "+setting.AppSubURL, http.StatusNotFound)
+			resp.Header().Add("Content-Type", "text/html; charset=utf-8")
+			resp.WriteHeader(http.StatusNotFound)
+			_, _ = resp.Write([]byte(htmlutil.HTMLFormat(`404 page not found, sub-path is: <a href="%s">%s</a>`, setting.AppSubURL, setting.AppSubURL)))
 			return
 		}
 		normalized = true

options/locale/locale_en-US.ini

@@ -2590,7 +2590,6 @@ diff.generated = generated
 diff.vendored = vendored
 diff.comment.add_line_comment = Add line comment
 diff.comment.placeholder = Leave a comment
-diff.comment.markdown_info = Styling with markdown is supported.
 diff.comment.add_single_comment = Add single comment
 diff.comment.add_review_comment = Add comment
 diff.comment.start_review = Start review

routers/web/web.go

@@ -485,6 +485,8 @@ func registerRoutes(m *web.Router) {
 		m.Methods("GET, HEAD", "/*", public.FileHandlerFunc())
 	}, optionsCorsHandler())
 
+	m.Post("/-/markup", reqSignIn, web.Bind(structs.MarkupOption{}), misc.Markup)
+
 	m.Group("/explore", func() {
 		m.Get("", func(ctx *context.Context) {
 			ctx.Redirect(setting.AppSubURL + "/explore/repos")

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}}

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}}">

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>

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>

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}}

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"
 				)}}

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>