Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)

The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details> ![image](https://user-images.githubusercontent.com/2114189/229363558-7e44dcd4-fb6d-48a0-92f8-bd12f57bb0a0.png) ![image](https://user-images.githubusercontent.com/2114189/229363566-781489c8-5306-4347-9714-d71af5d5b0b1.png) ![image](https://user-images.githubusercontent.com/2114189/229363771-1717bf5c-0f2a-4fc2-ba84-4f5b2a343a11.png) ![image](https://user-images.githubusercontent.com/2114189/229363793-ad362d0f-a045-47bd-8f9d-05a9a842bb39.png) </details> --------- Co-authored-by: silverwind <me@silverwind.io>
go-gitea · Apr 3, 2023 · 5cc0801 · 5cc0801
1 parent d67e406
commit 5cc0801
Show file tree

Hide file tree

Showing 46 changed files with 761 additions and 831 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "@citation-js/plugin-csl": "0.6.7",
     "@citation-js/plugin-software-formats": "0.6.1",
     "@claviska/jquery-minicolors": "2.3.6",
+    "@github/markdown-toolbar-element": "2.1.1",
     "@mcaptcha/vanilla-glue": "0.1.0-alpha-3",
     "@primer/octicons": "18.3.0",
     "@vue/compiler-sfc": "3.2.47",

diff --git a/routers/web/devtest/devtest.go b/routers/web/devtest/devtest.go
@@ -0,0 +1,35 @@
+// Copyright 2023 The Gitea Authors. All rights reserved.
+// SPDX-License-Identifier: MIT
+
+package devtest
+
+import (
+	"net/http"
+	"path"
+	"strings"
+
+	"code.gitea.io/gitea/modules/base"
+	"code.gitea.io/gitea/modules/context"
+	"code.gitea.io/gitea/modules/templates"
+)
+
+// List all devtest templates, they will be used for e2e tests for the UI components
+func List(ctx *context.Context) {
+	templateNames := templates.GetTemplateAssetNames()
+	var subNames []string
+	const prefix = "templates/devtest/"
+	for _, tmplName := range templateNames {
+		if strings.HasPrefix(tmplName, prefix) {
+			subName := strings.TrimSuffix(strings.TrimPrefix(tmplName, prefix), ".tmpl")
+			if subName != "list" {
+				subNames = append(subNames, subName)
+			}
+		}
+	}
+	ctx.Data["SubNames"] = subNames
+	ctx.HTML(http.StatusOK, "devtest/list")
+}
+
+func Tmpl(ctx *context.Context) {
+	ctx.HTML(http.StatusOK, base.TplName("devtest"+path.Clean("/"+ctx.Params("sub"))))
+}
diff --git a/routers/web/misc/markup.go b/routers/web/misc/markup.go
@@ -15,24 +15,6 @@ import (
 
 // Markup render markup document to HTML
 func Markup(ctx *context.Context) {
-	// swagger:operation POST /markup miscellaneous renderMarkup
-	// ---
-	// summary: Render a markup document as HTML
-	// parameters:
-	// - name: body
-	//   in: body
-	//   schema:
-	//     "$ref": "#/definitions/MarkupOption"
-	// consumes:
-	// - application/json
-	// produces:
-	//     - text/html
-	// responses:
-	//   "200":
-	//     "$ref": "#/responses/MarkupRender"
-	//   "422":
-	//     "$ref": "#/responses/validationError"
-
 	form := web.GetForm(ctx).(*api.MarkupOption)
 
 	if ctx.HasAPIError() {

diff --git a/routers/web/org/setting.go b/routers/web/org/setting.go
@@ -246,7 +246,6 @@ func Labels(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.labels")
 	ctx.Data["PageIsOrgSettings"] = true
 	ctx.Data["PageIsOrgSettingsLabels"] = true
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["LabelTemplates"] = repo_module.LabelTemplates
 	ctx.HTML(http.StatusOK, tplSettingsLabels)
 }
diff --git a/routers/web/repo/commit.go b/routers/web/repo/commit.go
@@ -253,7 +253,6 @@ func FileHistory(ctx *context.Context) {
 // Diff show different from current commit to previous commit
 func Diff(ctx *context.Context) {
 	ctx.Data["PageIsDiff"] = true
-	ctx.Data["RequireTribute"] = true
 
 	userName := ctx.Repo.Owner.Name
 	repoName := ctx.Repo.Repository.Name

diff --git a/routers/web/repo/compare.go b/routers/web/repo/compare.go
@@ -781,7 +781,6 @@ func CompareDiff(ctx *context.Context) {
 
 	ctx.Data["IsRepoToolbarCommits"] = true
 	ctx.Data["IsDiffCompare"] = true
-	ctx.Data["RequireTribute"] = true
 	templateErrs := setTemplateIfExists(ctx, pullRequestTemplateKey, pullRequestTemplateCandidates)
 
 	if len(templateErrs) > 0 {

diff --git a/routers/web/repo/editor.go b/routers/web/repo/editor.go
@@ -538,7 +538,6 @@ func DeleteFilePost(ctx *context.Context) {
 // UploadFile render upload file page
 func UploadFile(ctx *context.Context) {
 	ctx.Data["PageIsUpload"] = true
-	ctx.Data["RequireTribute"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 	treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -573,7 +572,6 @@ func UploadFile(ctx *context.Context) {
 func UploadFilePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.UploadRepoFileForm)
 	ctx.Data["PageIsUpload"] = true
-	ctx.Data["RequireTribute"] = true
 	upload.AddUploadContext(ctx, "repo")
 	canCommit := renderCommitRights(ctx)
 

diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go
@@ -849,7 +849,6 @@ func NewIssue(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.issues.new")
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["NewIssueChooseTemplate"] = ctx.HasIssueTemplatesOrContactLinks()
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	title := ctx.FormString("title")
 	ctx.Data["TitleQuery"] = title
@@ -1295,7 +1294,6 @@ func ViewIssue(ctx *context.Context) {
 		ctx.Data["IssueType"] = "all"
 	}
 
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects)
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "comment")

diff --git a/routers/web/repo/issue_label.go b/routers/web/repo/issue_label.go
@@ -28,7 +28,6 @@ func Labels(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.labels")
 	ctx.Data["PageIsIssueList"] = true
 	ctx.Data["PageIsLabels"] = true
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["LabelTemplates"] = repo_module.LabelTemplates
 	ctx.HTML(http.StatusOK, tplLabels)
 }

diff --git a/routers/web/repo/pull.go b/routers/web/repo/pull.go
@@ -791,7 +791,6 @@ func ViewPullFiles(ctx *context.Context) {
 
 	setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
 
-	ctx.Data["RequireTribute"] = true
 	if ctx.Data["Assignees"], err = repo_model.GetRepoAssignees(ctx, ctx.Repo.Repository); err != nil {
 		ctx.ServerError("GetAssignees", err)
 		return
@@ -1160,7 +1159,6 @@ func CompareAndPullRequestPost(ctx *context.Context) {
 	ctx.Data["PageIsComparePull"] = true
 	ctx.Data["IsDiffCompare"] = true
 	ctx.Data["IsRepoToolbarCommits"] = true
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "comment")

diff --git a/routers/web/repo/release.go b/routers/web/repo/release.go
@@ -308,7 +308,6 @@ func LatestRelease(ctx *context.Context) {
 func NewRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
 	if tagName := ctx.FormString("tag"); len(tagName) > 0 {
 		rel, err := repo_model.GetRelease(ctx.Repo.Repository.ID, tagName)
@@ -351,7 +350,6 @@ func NewReleasePost(ctx *context.Context) {
 	form := web.GetForm(ctx).(*forms.NewReleaseForm)
 	ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
 	ctx.Data["PageIsReleaseList"] = true
-	ctx.Data["RequireTribute"] = true
 
 	if ctx.HasError() {
 		ctx.HTML(http.StatusOK, tplReleaseNew)
@@ -469,7 +467,6 @@ func EditRelease(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireTribute"] = true
 	ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
 	upload.AddUploadContext(ctx, "release")
 
@@ -514,7 +511,6 @@ func EditReleasePost(ctx *context.Context) {
 	ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
 	ctx.Data["PageIsReleaseList"] = true
 	ctx.Data["PageIsEditRelease"] = true
-	ctx.Data["RequireTribute"] = true
 
 	tagName := ctx.Params("*")
 	rel, err := repo_model.GetRelease(ctx.Repo.Repository.ID, tagName)

diff --git a/routers/web/web.go b/routers/web/web.go
@@ -27,6 +27,7 @@ import (
 	"code.gitea.io/gitea/modules/web/routing"
 	"code.gitea.io/gitea/routers/web/admin"
 	"code.gitea.io/gitea/routers/web/auth"
+	"code.gitea.io/gitea/routers/web/devtest"
 	"code.gitea.io/gitea/routers/web/events"
 	"code.gitea.io/gitea/routers/web/explore"
 	"code.gitea.io/gitea/routers/web/feed"
@@ -1491,6 +1492,12 @@ func RegisterRoutes(m *web.Route) {
 	if setting.API.EnableSwagger {
 		m.Get("/swagger.v1.json", SwaggerV1Json)
 	}
+
+	if !setting.IsProd {
+		m.Any("/devtest", devtest.List)
+		m.Any("/devtest/{sub}", devtest.Tmpl)
+	}
+
 	m.NotFound(func(w http.ResponseWriter, req *http.Request) {
 		ctx := context.GetContext(req)
 		ctx.NotFound("", nil)

diff --git a/templates/base/head_script.tmpl b/templates/base/head_script.tmpl
@@ -15,23 +15,19 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
 		useServiceWorker: {{UseServiceWorker}},
 		csrfToken: '{{.CsrfToken}}',
 		pageData: {{.PageData}},
-		requireTribute: {{.RequireTribute}},
 		notificationSettings: {{NotificationSettings}}, {{/*a map provided by NewFuncMap in helper.go*/}}
 		enableTimeTracking: {{EnableTimetracking}},
-		{{if .RequireTribute}}
+		{{if or .Participants .Assignees .MentionableTeams}}
 		tributeValues: Array.from(new Map([
-			{{range .Participants}}
-			['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}',
-			name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
-			{{end}}
-			{{range .Assignees}}
-			['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}',
-			name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
-			{{end}}
-			{{range .MentionableTeams}}
-				['{{$.MentionableTeamsOrg}}/{{.Name}}', {key: '{{$.MentionableTeamsOrg}}/{{.Name}}', value: '{{$.MentionableTeamsOrg}}/{{.Name}}',
-				name: '{{$.MentionableTeamsOrg}}/{{.Name}}', avatar: '{{$.MentionableTeamsOrgAvatar}}'}],
-			{{end}}
+			{{- range .Participants -}}
+				['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}', name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
+			{{- end -}}
+			{{- range .Assignees -}}
+				['{{.Name}}', {key: '{{.Name}} {{.FullName}}', value: '{{.Name}}', name: '{{.Name}}', fullname: '{{.FullName}}', avatar: '{{.AvatarLink $.Context}}'}],
+			{{- end -}}
+			{{- range .MentionableTeams -}}
+				['{{$.MentionableTeamsOrg}}/{{.Name}}', {key: '{{$.MentionableTeamsOrg}}/{{.Name}}', value: '{{$.MentionableTeamsOrg}}/{{.Name}}', name: '{{$.MentionableTeamsOrg}}/{{.Name}}', avatar: '{{$.MentionableTeamsOrgAvatar}}'}],
+			{{- end -}}
 		]).values()),
 		{{end}}
 		mermaidMaxSourceCharacters: {{MermaidMaxSourceCharacters}},

diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl
@@ -0,0 +1,12 @@
+{{template "base/head" .}}
+<div class="page-content devtest">
+	<div>
+		<gitea-origin-url data-url="test/url"></gitea-origin-url>
+		<gitea-origin-url data-url="/test/url"></gitea-origin-url>
+	</div>
+	<div>
+		<span data-tooltip-content="test tooltip">text with tooltip</span>
+	</div>
+	{{template "shared/combomarkdowneditor" .}}
+</div>
+{{template "base/footer" .}}
diff --git a/templates/devtest/list.tmpl b/templates/devtest/list.tmpl
@@ -0,0 +1,5 @@
+<ul>
+	{{range .SubNames}}
+	<li><a href="{{AppSubUrl}}/devtest/{{.}}">{{.}}</a></li>
+	{{end}}
+</ul>
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
@@ -198,24 +198,21 @@
 		</div>
 
 		{{if not $.Repository.IsArchived}}
-			<div class="gt-hidden" id="edit-content-form">
+			<template id="issue-comment-editor-template">
 				<div class="ui comment form">
-					<div class="ui top attached tabular menu">
-						<a class="active write item">{{$.locale.Tr "write"}}</a>
-						<a class="preview item" data-url="{{$.Repository.Link}}/markup" data-context="{{$.RepoLink}}">{{$.locale.Tr "preview"}}</a>
-					</div>
-					<div class="ui bottom attached active write tab segment">
-						<textarea class="review-textarea js-quick-submit" tabindex="1" name="content"></textarea>
-					</div>
-					<div class="ui bottom attached tab preview segment markup">
-					{{$.locale.Tr "loading"}}
-					</div>
+					{{template "shared/combomarkdowneditor" (dict
+						"locale" $.locale
+						"MarkdownPreviewUrl" (print $.Repository.Link "/markup")
+						"MarkdownPreviewContext" $.RepoLink
+						"TextareaName" "content"
+						"DropzoneParentContainer" ".ui.form"
+					)}}
 					<div class="text right edit buttons">
 						<button class="ui basic primary cancel button" tabindex="3">{{.locale.Tr "repo.issues.cancel"}}</button>
 						<button class="ui green save button" tabindex="2">{{.locale.Tr "repo.issues.save"}}</button>
 					</div>
 				</div>
-			</div>
+			</template>
 		{{end}}
 
 		{{template "repo/issue/view_content/reference_issue_dialog" .}}

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
@@ -9,18 +9,16 @@
 		<input type="hidden" name="diff_start_cid">
 		<input type="hidden" name="diff_end_cid">
 		<input type="hidden" name="diff_base_cid">
-		<div class="ui top tabular menu" data-write="write" data-preview="preview">
-			<a class="active item" data-tab="write">{{$.root.locale.Tr "write"}}</a>
-			<a class="item" data-tab="preview" data-url="{{$.root.Repository.Link}}/markup" data-context="{{$.root.RepoLink}}">{{$.root.locale.Tr "preview"}}</a>
-		</div>
-		<div class="field">
-			<div class="ui active tab" data-tab="write">
-				<textarea name="content" placeholder="{{$.root.locale.Tr "repo.diff.comment.placeholder"}}"></textarea>
-			</div>
-			<div class="ui tab markup" data-tab="preview">
-			{{.locale.Tr "loading"}}
-			</div>
-		</div>
+
+		{{template "shared/combomarkdowneditor" (dict
+			"locale" $.root.locale
+			"MarkdownPreviewUrl" (print $.root.Repository.Link "/markup")
+			"MarkdownPreviewContext" $.root.RepoLink
+			"TextareaName" "content"
+			"TextareaPlaceholder" ($.locale.Tr "repo.diff.comment.placeholder")
+			"DropzoneParentContainer" "form"
+		)}}
+
 		<div class="field footer gt-mx-3">
 			<span class="markup-info">{{svg "octicon-markup"}} {{$.root.locale.Tr "repo.diff.comment.markdown_info"}}</span>
 			<div class="ui right">

diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl
@@ -7,14 +7,19 @@
 	<div class="review-box-panel tippy-target">
 		<div class="ui segment">
 			<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
-			{{.CsrfTokenHtml}}
+				{{.CsrfTokenHtml}}
 				<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
 				<div class="header gt-df gt-ac gt-pb-3">
 					<div class="gt-f1">{{$.locale.Tr "repo.diff.review.header"}}</div>
 					<a class="muted close gt-px-3">{{svg "octicon-x" 16}}</a>
 				</div>
 				<div class="ui field">
-					<textarea name="content" tabindex="0" rows="2" placeholder="{{$.locale.Tr "repo.diff.review.placeholder"}}"></textarea>
+					{{template "shared/combomarkdowneditor" (dict
+						"locale" $.locale
+						"TextareaName" "content"
+						"TextareaPlaceholder" ($.locale.Tr "repo.diff.review.placeholder")
+						"DropzoneParentContainer" "form"
+					)}}
 				</div>
 				{{if .IsAttachmentEnabled}}
 					<div class="field">

diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
@@ -1,17 +1,17 @@
-	<div class="ui top tabular menu" data-write="write" data-preview="preview">
-		<a class="active item" data-tab="write">{{.locale.Tr "write"}}</a>
-		<a class="item" data-tab="preview" data-url="{{.Repository.Link}}/markup" data-context="{{.RepoLink}}">{{.locale.Tr "preview"}}</a>
-	</div>
-	<div class="field">
-		<div class="ui bottom active tab" data-tab="write">
-		<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.Link}}/markup" data-context="{{.Repo.RepoLink}}">
-			{{- if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end -}}
-		</textarea>
-		</div>
-		<div class="ui bottom tab markup" data-tab="preview">
-			{{.locale.Tr "loading"}}
-		</div>
-	</div>
+{{$textareaContent := .BodyQuery}}
+{{if not $textareaContent}}{{$textareaContent = .IssueTemplate}}{{end}}
+{{if not $textareaContent}}{{$textareaContent = .PullRequestTemplate}}{{end}}
+{{if not $textareaContent}}{{$textareaContent = .content}}{{end}}
+
+{{template "shared/combomarkdowneditor" (dict
+	"locale" $.locale
+	"MarkdownPreviewUrl" (print .Repository.Link "/markup")
+	"MarkdownPreviewContext" .RepoLink
+	"TextareaName" "content"
+	"TextareaContent" $textareaContent
+	"DropzoneParentContainer" "form, .ui.form"
+)}}
+
 {{if .IsAttachmentEnabled}}
 	<div class="field">
 		{{template "repo/upload" .}}

diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl
@@ -2,5 +2,5 @@
 	{{template "repo/issue/fields/header" .}}
 	{{/* FIXME: preview markdown result */}}
 	{{/* FIXME: required validation for markdown editor */}}
-	<textarea name="form-field-{{.item.ID}}" placeholder="{{.item.Attributes.placeholder}}" class="edit_area {{if .item.Attributes.render}}no-easymde{{end}}" {{if and .item.Validations.required .item.Attributes.render}}required{{end}}>{{.item.Attributes.value}}</textarea>
+	<textarea name="form-field-{{.item.ID}}" placeholder="{{.item.Attributes.placeholder}}" {{if and .item.Validations.required .item.Attributes.render}}required{{end}}>{{.item.Attributes.value}}</textarea>
 </div>