From 5cc0801de90d16b4d528e62de11c9b525be5d122 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Mon, 3 Apr 2023 18:06:57 +0800 Subject: [PATCH] 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:
![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)
--------- Co-authored-by: silverwind --- package-lock.json | 6 + package.json | 1 + routers/web/devtest/devtest.go | 35 ++ routers/web/misc/markup.go | 18 - routers/web/org/setting.go | 1 - routers/web/repo/commit.go | 1 - routers/web/repo/compare.go | 1 - routers/web/repo/editor.go | 2 - routers/web/repo/issue.go | 2 - routers/web/repo/issue_label.go | 1 - routers/web/repo/pull.go | 2 - routers/web/repo/release.go | 4 - routers/web/web.go | 7 + templates/base/head_script.tmpl | 24 +- templates/devtest/gitea-ui.tmpl | 12 + templates/devtest/list.tmpl | 5 + templates/repo/diff/box.tmpl | 21 +- templates/repo/diff/comment_form.tmpl | 22 +- templates/repo/diff/new_review.tmpl | 9 +- templates/repo/issue/comment_tab.tmpl | 28 +- templates/repo/issue/fields/textarea.tmpl | 2 +- .../repo/issue/labels/edit_delete_label.tmpl | 2 +- templates/repo/issue/labels/label_new.tmpl | 2 +- templates/repo/issue/view_content.tmpl | 25 +- templates/repo/release/new.tmpl | 21 +- templates/repo/wiki/new.tmpl | 21 +- templates/shared/combomarkdowneditor.tmpl | 47 +++ web_src/css/editor-markdown.css | 25 ++ web_src/css/editor.css | 1 - web_src/css/index.css | 1 + web_src/css/repository.css | 4 - web_src/css/review.css | 5 + .../js/features/comp/ComboMarkdownEditor.js | 277 +++++++++++++++ web_src/js/features/comp/EasyMDE.js | 181 ---------- web_src/js/features/comp/ImagePaste.js | 51 +-- .../js/features/comp/MarkupContentPreview.js | 25 -- web_src/js/features/contextpopup.js | 13 +- web_src/js/features/repo-diff.js | 2 +- web_src/js/features/repo-issue.js | 74 +--- web_src/js/features/repo-legacy.js | 331 ++++++++---------- web_src/js/features/repo-release.js | 17 +- web_src/js/features/repo-wiki.js | 220 +++--------- web_src/js/features/tribute.js | 33 +- web_src/js/index.js | 3 - web_src/js/utils.js | 5 - web_src/js/utils.test.js | 6 +- 46 files changed, 763 insertions(+), 833 deletions(-) create mode 100644 routers/web/devtest/devtest.go create mode 100644 templates/devtest/gitea-ui.tmpl create mode 100644 templates/devtest/list.tmpl create mode 100644 templates/shared/combomarkdowneditor.tmpl create mode 100644 web_src/css/editor-markdown.css create mode 100644 web_src/js/features/comp/ComboMarkdownEditor.js delete mode 100644 web_src/js/features/comp/EasyMDE.js delete mode 100644 web_src/js/features/comp/MarkupContentPreview.js diff --git a/package-lock.json b/package-lock.json index 9d0c83f656..b9d998a69d 100644 --- a/package-lock.json +++ b/package-lock.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", @@ -838,6 +839,11 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@github/markdown-toolbar-element": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/@github/markdown-toolbar-element/-/markdown-toolbar-element-2.1.1.tgz", + "integrity": "sha512-J++rpd5H9baztabJQB82h26jtueOeBRSTqetk9Cri+Lj/s28ndu6Tovn0uHQaOKtBWDobFunk9b5pP5vcqt7cA==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", diff --git a/package.json b/package.json index 8ac5c312f6..3ccf0c0840 100644 --- 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 new file mode 100644 index 0000000000..eb77d0b927 --- /dev/null +++ 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 index f678316f44..1690378945 100644 --- 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 index 654e9000fa..7d84c101d8 100644 --- 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 index 843b1d8dfd..7439c2411b 100644 --- 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 index d7e7bac7b7..c49eb762d8 100644 --- 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 index 2b66be22ae..f65e1ad3d8 100644 --- 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 index 612222598f..e4f1172dd9 100644 --- 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 index 31bf85fedb..3123359a65 100644 --- 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 index 4f99687738..c37d52640f 100644 --- 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 index 3ffadd34ac..b8c5f67f45 100644 --- 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 index 4bd2f76c57..6b62ff6f83 100644 --- 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 index 62fb10d89f..670d146b56 100644 --- 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 new file mode 100644 index 0000000000..c5ab863d00 --- /dev/null +++ b/templates/devtest/gitea-ui.tmpl @@ -0,0 +1,12 @@ +{{template "base/head" .}} +
+
+ + +
+
+ text with tooltip +
+ {{template "shared/combomarkdowneditor" .}} +
+{{template "base/footer" .}} diff --git a/templates/devtest/list.tmpl b/templates/devtest/list.tmpl new file mode 100644 index 0000000000..3a519c328e --- /dev/null +++ b/templates/devtest/list.tmpl @@ -0,0 +1,5 @@ + diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl index 36e669276e..21ea63cc0a 100644 --- a/templates/repo/diff/box.tmpl +++ b/templates/repo/diff/box.tmpl @@ -198,24 +198,21 @@ {{if not $.Repository.IsArchived}} -
+ {{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 index 394a392bb9..109f167967 100644 --- a/templates/repo/diff/comment_form.tmpl +++ b/templates/repo/diff/comment_form.tmpl @@ -9,18 +9,16 @@ -
- {{$.root.locale.Tr "write"}} - {{$.root.locale.Tr "preview"}} -
-
-
- -
-
- {{.locale.Tr "loading"}} -
-
+ + {{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" + )}} +
{{svg "octicon-markup"}} {{$.root.locale.Tr "repo.diff.comment.markdown_info"}}
diff --git a/templates/repo/diff/new_review.tmpl b/templates/repo/diff/new_review.tmpl index 9d2208e289..bb97303034 100644 --- a/templates/repo/diff/new_review.tmpl +++ b/templates/repo/diff/new_review.tmpl @@ -7,14 +7,19 @@
- {{.CsrfTokenHtml}} + {{.CsrfTokenHtml}}
{{$.locale.Tr "repo.diff.review.header"}}
{{svg "octicon-x" 16}}
- + {{template "shared/combomarkdowneditor" (dict + "locale" $.locale + "TextareaName" "content" + "TextareaPlaceholder" ($.locale.Tr "repo.diff.review.placeholder") + "DropzoneParentContainer" "form" + )}}
{{if .IsAttachmentEnabled}}
diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl index 47d6ca9587..2212d99a10 100644 --- a/templates/repo/issue/comment_tab.tmpl +++ b/templates/repo/issue/comment_tab.tmpl @@ -1,17 +1,17 @@ -
- {{.locale.Tr "write"}} - {{.locale.Tr "preview"}} -
-
-
- -
-
- {{.locale.Tr "loading"}} -
-
+{{$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}}
{{template "repo/upload" .}} diff --git a/templates/repo/issue/fields/textarea.tmpl b/templates/repo/issue/fields/textarea.tmpl index 4b390fc9d6..ad3c5efa04 100644 --- 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 */}} - +
diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl index 568195880d..52e586b783 100644 --- a/templates/repo/issue/labels/edit_delete_label.tmpl +++ b/templates/repo/issue/labels/edit_delete_label.tmpl @@ -20,7 +20,7 @@
- +
diff --git a/templates/repo/issue/labels/label_new.tmpl b/templates/repo/issue/labels/label_new.tmpl index 0286f8f228..65b1cbe886 100644 --- a/templates/repo/issue/labels/label_new.tmpl +++ b/templates/repo/issue/labels/label_new.tmpl @@ -8,7 +8,7 @@
- +
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 99337c531f..2781db4329 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -164,25 +164,22 @@ {{template "repo/issue/view_content/sidebar" .}}
-
+ {{template "repo/issue/view_content/reference_issue_dialog" .}} diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl index 1cd37d2dd3..589fe12cea 100644 --- a/templates/repo/release/new.tmpl +++ b/templates/repo/release/new.tmpl @@ -49,18 +49,17 @@
-
+
-
- {{$.locale.Tr "write"}} - {{$.locale.Tr "preview"}} -
-
- -
-
- {{$.locale.Tr "loading"}} -
+ + {{template "shared/combomarkdowneditor" (dict + "locale" $.locale + "MarkdownPreviewUrl" (print .Repository.Link "/markup") + "MarkdownPreviewContext" .RepoLink + "TextareaName" "content" + "TextareaContent" .content + "DropzoneParentContainer" "form" + )}}
{{range .attachments}}
diff --git a/templates/repo/wiki/new.tmpl b/templates/repo/wiki/new.tmpl index 085af4cbc9..03d710bb20 100644 --- a/templates/repo/wiki/new.tmpl +++ b/templates/repo/wiki/new.tmpl @@ -19,15 +19,18 @@
{{.locale.Tr "repo.wiki.page_name_desc"}}
-
- {{.locale.Tr "write"}} - {{$.locale.Tr "preview"}} -
-
-
- -
-
+ + {{$content := .content}} + {{if not .PageIsWikiEdit}} + {{$content = .locale.Tr "repo.wiki.welcome"}} + {{end}} + {{template "shared/combomarkdowneditor" (dict + "locale" $.locale + "MarkdownPreviewUrl" (print .Repository.Link "/markup") + "MarkdownPreviewContext" .RepoLink + "TextareaName" "content" + )}} +
diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl new file mode 100644 index 0000000000..0027ce8427 --- /dev/null +++ b/templates/shared/combomarkdowneditor.tmpl @@ -0,0 +1,47 @@ +{{/* +Template Attributes: +* locale +* ContainerId / ContainerClasses : for the container element +* MarkdownPreviewUrl / MarkdownPreviewContext: for the preview tab +* TextareaName / TextareaContent / TextareaPlaceholder: for the main textarea +* DropzoneParentContainer: for file upload (leave it empty if no upload) +*/}} +
+ {{if .MarkdownPreviewUrl}} +
+ {{.locale.Tr "write"}} + {{.locale.Tr "preview"}} +
+ {{end}} +
+ +
+ {{svg "octicon-heading"}} + {{svg "octicon-bold"}} + {{svg "octicon-italic"}} +
+
+ {{svg "octicon-quote"}} + {{svg "octicon-code"}} + {{svg "octicon-link"}} +
+
+ {{svg "octicon-list-unordered"}} + {{svg "octicon-list-ordered"}} + {{svg "octicon-tasklist"}} +
+
+ {{svg "octicon-mention"}} + {{svg "octicon-cross-reference"}} +
+
+
+ {{svg "octicon-arrow-switch"}} +
+ + +
+
+ {{.locale.Tr "loading"}} +
+
diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css new file mode 100644 index 0000000000..31ffeb06d0 --- /dev/null +++ b/web_src/css/editor-markdown.css @@ -0,0 +1,25 @@ +.combo-markdown-editor { + width: 100%; +} + +.combo-markdown-editor markdown-toolbar { + cursor: default; + display: block; + padding-bottom: 10px; +} + +.combo-markdown-editor .markdown-toolbar-group { + display: inline-block; +} + +.combo-markdown-editor .markdown-toolbar-button { + user-select: none; + padding: 5px; + cursor: pointer; +} + +.combo-markdown-editor .markdown-text-editor { + display: block; + width: 100%; + height: 200px; +} diff --git a/web_src/css/editor.css b/web_src/css/editor.css index d3f9edeb2d..ba35036e4f 100644 --- a/web_src/css/editor.css +++ b/web_src/css/editor.css @@ -13,7 +13,6 @@ } .editor-toolbar { - max-width: calc(100vw - 80px); border-color: var(--color-secondary); } diff --git a/web_src/css/index.css b/web_src/css/index.css index dd5f739379..e8d4e290d0 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -29,6 +29,7 @@ @import "./form.css"; @import "./repository.css"; @import "./editor.css"; +@import "./editor-markdown.css"; @import "./organization.css"; @import "./user.css"; @import "./dashboard.css"; diff --git a/web_src/css/repository.css b/web_src/css/repository.css index 27d6a51cdd..fb5c75b73c 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -2116,10 +2116,6 @@ height: 48px; } -.repository.wiki.new .ui.attached.tabular.menu.previewtabs { - margin-bottom: 15px; -} - .repository.wiki.view > .markup { padding: 15px 30px; } diff --git a/web_src/css/review.css b/web_src/css/review.css index 3deb2192fc..913a7e9df2 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -248,6 +248,11 @@ a.blob-excerpt:hover { } } +.review-box-panel .combo-markdown-editor textarea { + width: 730px; + max-width: calc(100vw - 70px); +} + #review-box { position: relative; } diff --git a/web_src/js/features/comp/ComboMarkdownEditor.js b/web_src/js/features/comp/ComboMarkdownEditor.js new file mode 100644 index 0000000000..4905ec2341 --- /dev/null +++ b/web_src/js/features/comp/ComboMarkdownEditor.js @@ -0,0 +1,277 @@ +import '@github/markdown-toolbar-element'; +import {attachTribute} from '../tribute.js'; +import {hideElem, showElem} from '../../utils/dom.js'; +import {initEasyMDEImagePaste, initTextareaImagePaste} from './ImagePaste.js'; +import $ from 'jquery'; +import {initMarkupContent} from '../../markup/content.js'; +import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js'; +import {attachRefIssueContextPopup} from '../contextpopup.js'; + +let elementIdCounter = 0; + +/** + * validate if the given textarea is non-empty. + * @param {jQuery} $textarea + * @returns {boolean} returns true if validation succeeded. + */ +export function validateTextareaNonEmpty($textarea) { + // When using EasyMDE, the original edit area HTML element is hidden, breaking HTML5 input validation. + // The workaround (https://github.com/sparksuite/simplemde-markdown-editor/issues/324) doesn't work with contenteditable, so we just show an alert. + if (!$textarea.val()) { + if ($textarea.is(':visible')) { + $textarea.prop('required', true); + const $form = $textarea.parents('form'); + $form[0]?.reportValidity(); + } else { + // The alert won't hurt users too much, because we are dropping the EasyMDE and the check only occurs in a few places. + alert('Require non-empty content'); + } + return false; + } + return true; +} + +class ComboMarkdownEditor { + constructor(container, options = {}) { + container._giteaComboMarkdownEditor = this; + this.options = options; + this.container = container; + } + + async init() { + this.textarea = this.container.querySelector('.markdown-text-editor'); + this.textarea._giteaComboMarkdownEditor = this; + this.textarea.id = `_combo_markdown_editor_${String(elementIdCounter)}`; + this.textarea.addEventListener('input', (e) => {this.options?.onContentChanged?.(this, e)}); + this.textareaMarkdownToolbar = this.container.querySelector('markdown-toolbar'); + this.textareaMarkdownToolbar.setAttribute('for', this.textarea.id); + + elementIdCounter++; + + this.switchToEasyMDEButton = this.container.querySelector('.markdown-switch-easymde'); + this.switchToEasyMDEButton?.addEventListener('click', async (e) => { + e.preventDefault(); + await this.switchToEasyMDE(); + }); + + await attachTribute(this.textarea, {mentions: true, emoji: true}); + + const dropzoneParentContainer = this.container.getAttribute('data-dropzone-parent-container'); + if (dropzoneParentContainer) { + this.dropzone = this.container.closest(this.container.getAttribute('data-dropzone-parent-container'))?.querySelector('.dropzone'); + initTextareaImagePaste(this.textarea, this.dropzone); + } + + this.setupTab(); + this.prepareEasyMDEToolbarActions(); + } + + setupTab() { + const $container = $(this.container); + const $tabMenu = $container.find('.tabular.menu'); + const $tabs = $tabMenu.find('> .item'); + + // Fomantic Tab requires the "data-tab" to be globally unique. + // So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic. + const $tabEditor = $tabs.filter(`.item[data-tab-for="markdown-writer"]`); + const $tabPreviewer = $tabs.filter(`.item[data-tab-for="markdown-previewer"]`); + $tabEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); + $tabPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); + const $panelEditor = $container.find('.ui.tab[data-tab-panel="markdown-writer"]'); + const $panelPreviewer = $container.find('.ui.tab[data-tab-panel="markdown-previewer"]'); + $panelEditor.attr('data-tab', `markdown-writer-${elementIdCounter}`); + $panelPreviewer.attr('data-tab', `markdown-previewer-${elementIdCounter}`); + elementIdCounter++; + + $tabs.tab(); + + this.previewUrl = $tabPreviewer.attr('data-preview-url'); + this.previewContext = $tabPreviewer.attr('data-preview-context'); + this.previewMode = this.options.previewMode ?? 'comment'; + this.previewWiki = this.options.previewWiki ?? false; + $tabPreviewer.on('click', () => { + $.post(this.previewUrl, { + _csrf: window.config.csrfToken, + mode: this.previewMode, + context: this.previewContext, + text: this.value(), + wiki: this.previewWiki, + }, (data) => { + $panelPreviewer.html(data); + initMarkupContent(); + + const refIssues = $panelPreviewer.find('p .ref-issue'); + attachRefIssueContextPopup(refIssues); + }); + }); + } + + prepareEasyMDEToolbarActions() { + this.easyMDEToolbarDefault = [ + 'bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', + 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|', + 'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', 'horizontal-rule', '|', 'clean-block', '|', + 'gitea-switch-to-textarea', + ]; + + this.easyMDEToolbarActions = { + 'gitea-checkbox-empty': { + action(e) { + const cm = e.codemirror; + cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`); + cm.focus(); + }, + className: 'fa fa-square-o', + title: 'Add Checkbox (empty)', + }, + 'gitea-checkbox-checked': { + action(e) { + const cm = e.codemirror; + cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); + cm.focus(); + }, + className: 'fa fa-check-square-o', + title: 'Add Checkbox (checked)', + }, + 'gitea-switch-to-textarea': { + action: this.switchToTextarea.bind(this), + className: 'fa fa-file', + title: 'Revert to simple textarea', + }, + 'gitea-code-inline': { + action(e) { + const cm = e.codemirror; + const selection = cm.getSelection(); + cm.replaceSelection(`\`${selection}\``); + if (!selection) { + const cursorPos = cm.getCursor(); + cm.setCursor(cursorPos.line, cursorPos.ch - 1); + } + cm.focus(); + }, + className: 'fa fa-angle-right', + title: 'Add Inline Code', + } + }; + } + + parseEasyMDEToolbar(actions) { + const processed = []; + for (const action of actions) { + if (action.startsWith('gitea-')) { + const giteaAction = this.easyMDEToolbarActions[action]; + if (!giteaAction) throw new Error(`Unknown EasyMDE toolbar action ${action}`); + processed.push(giteaAction); + } else { + processed.push(action); + } + } + return processed; + } + + async switchToTextarea() { + showElem(this.textareaMarkdownToolbar); + if (this.easyMDE) { + this.easyMDE.toTextArea(); + this.easyMDE = null; + } + } + + async switchToEasyMDE() { + // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles. + const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde'); + const easyMDEOpt = { + autoDownloadFontAwesome: false, + element: this.textarea, + forceSync: true, + renderingConfig: {singleLineBreaks: false}, + indentWithTabs: false, + tabSize: 4, + spellChecker: false, + inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable + nativeSpellcheck: true, + ...this.options.easyMDEOptions, + }; + easyMDEOpt.toolbar = this.parseEasyMDEToolbar(easyMDEOpt.toolbar ?? this.easyMDEToolbarDefault); + + this.easyMDE = new EasyMDE(easyMDEOpt); + this.easyMDE.codemirror.on('change', (...args) => {this.options?.onContentChanged?.(this, ...args)}); + this.easyMDE.codemirror.setOption('extraKeys', { + 'Cmd-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()), + 'Ctrl-Enter': (cm) => handleGlobalEnterQuickSubmit(cm.getTextArea()), + Enter: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + cm.execCommand('newlineAndIndent'); + } + }, + Up: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + return cm.execCommand('goLineUp'); + } + }, + Down: (cm) => { + const tributeContainer = document.querySelector('.tribute-container'); + if (!tributeContainer || tributeContainer.style.display === 'none') { + return cm.execCommand('goLineDown'); + } + }, + }); + await attachTribute(this.easyMDE.codemirror.getInputField(), {mentions: true, emoji: true}); + initEasyMDEImagePaste(this.easyMDE, this.dropzone); + hideElem(this.textareaMarkdownToolbar); + } + + value(v = undefined) { + if (v === undefined) { + if (this.easyMDE) { + return this.easyMDE.value(); + } + return this.textarea.value; + } + + if (this.easyMDE) { + this.easyMDE.value(v); + } else { + this.textarea.value = v; + } + } + + focus() { + if (this.easyMDE) { + this.easyMDE.codemirror.focus(); + } else { + this.textarea.focus(); + } + } + + moveCursorToEnd() { + this.textarea.focus(); + this.textarea.setSelectionRange(this.textarea.value.length, this.textarea.value.length); + if (this.easyMDE) { + this.easyMDE.codemirror.focus(); + this.easyMDE.codemirror.setCursor(this.easyMDE.codemirror.lineCount(), 0); + } + } +} + +export function getComboMarkdownEditor(el) { + if (el instanceof $) el = el[0]; + return el?._giteaComboMarkdownEditor; +} + +export async function initComboMarkdownEditor(container, options = {}) { + if (container instanceof $) { + if (container.length !== 1) { + throw new Error('initComboMarkdownEditor: container must be a single element'); + } + container = container[0]; + } + if (!container) { + throw new Error('initComboMarkdownEditor: container is null'); + } + const editor = new ComboMarkdownEditor(container, options); + await editor.init(); + return editor; +} diff --git a/web_src/js/features/comp/EasyMDE.js b/web_src/js/features/comp/EasyMDE.js deleted file mode 100644 index 2979627b00..0000000000 --- a/web_src/js/features/comp/EasyMDE.js +++ /dev/null @@ -1,181 +0,0 @@ -import $ from 'jquery'; -import {attachTribute} from '../tribute.js'; -import {handleGlobalEnterQuickSubmit} from './QuickSubmit.js'; - -/** - * @returns {EasyMDE} - */ -export async function importEasyMDE() { - // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can - // not overwrite the default styles. - const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde'); - return EasyMDE; -} - -/** - * create an EasyMDE editor for comment - * @param textarea jQuery or HTMLElement - * @param easyMDEOptions the options for EasyMDE - * @returns {null|EasyMDE} - */ -export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) { - if (textarea instanceof $) { - textarea = textarea[0]; - } - if (!textarea) { - return null; - } - - const EasyMDE = await importEasyMDE(); - - const easyMDE = new EasyMDE({ - autoDownloadFontAwesome: false, - element: textarea, - forceSync: true, - renderingConfig: { - singleLineBreaks: false, - }, - indentWithTabs: false, - tabSize: 4, - spellChecker: false, - inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable - nativeSpellcheck: true, - toolbar: ['bold', 'italic', 'strikethrough', '|', - 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', - 'code', 'quote', '|', { - name: 'checkbox-empty', - action(e) { - const cm = e.codemirror; - cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`); - cm.focus(); - }, - className: 'fa fa-square-o', - title: 'Add Checkbox (empty)', - }, - { - name: 'checkbox-checked', - action(e) { - const cm = e.codemirror; - cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); - cm.focus(); - }, - className: 'fa fa-check-square-o', - title: 'Add Checkbox (checked)', - }, '|', - 'unordered-list', 'ordered-list', '|', - 'link', 'image', 'table', 'horizontal-rule', '|', - 'clean-block', '|', - { - name: 'revert-to-textarea', - action(e) { - e.toTextArea(); - }, - className: 'fa fa-file', - title: 'Revert to simple textarea', - }, - ], ...easyMDEOptions}); - - const inputField = easyMDE.codemirror.getInputField(); - - easyMDE.codemirror.on('change', (...args) => { - easyMDEOptions?.onChange?.(...args); - }); - easyMDE.codemirror.setOption('extraKeys', { - 'Cmd-Enter': codeMirrorQuickSubmit, - 'Ctrl-Enter': codeMirrorQuickSubmit, - Enter: (cm) => { - const tributeContainer = document.querySelector('.tribute-container'); - if (!tributeContainer || tributeContainer.style.display === 'none') { - cm.execCommand('newlineAndIndent'); - } - }, - Backspace: (cm) => { - if (cm.getInputField().trigger) { - cm.getInputField().trigger('input'); - } - cm.execCommand('delCharBefore'); - }, - Up: (cm) => { - const tributeContainer = document.querySelector('.tribute-container'); - if (!tributeContainer || tributeContainer.style.display === 'none') { - return cm.execCommand('goLineUp'); - } - }, - Down: (cm) => { - const tributeContainer = document.querySelector('.tribute-container'); - if (!tributeContainer || tributeContainer.style.display === 'none') { - return cm.execCommand('goLineDown'); - } - }, - }); - await attachTribute(inputField, {mentions: true, emoji: true}); - attachEasyMDEToElements(easyMDE); - return easyMDE; -} - -/** - * attach the EasyMDE object to its input elements (InputField, TextArea) - * @param {EasyMDE} easyMDE - */ -export function attachEasyMDEToElements(easyMDE) { - // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement - - // InputField is used by CodeMirror to accept user input - const inputField = easyMDE.codemirror.getInputField(); - inputField._data_easyMDE = easyMDE; - - // TextArea is the real textarea element in the form - const textArea = easyMDE.codemirror.getTextArea(); - textArea._data_easyMDE = easyMDE; -} - - -/** - * get the attached EasyMDE editor created by createCommentEasyMDE - * @param el jQuery or HTMLElement - * @returns {null|EasyMDE} - */ -export function getAttachedEasyMDE(el) { - if (el instanceof $) { - el = el[0]; - } - if (!el) { - return null; - } - return el._data_easyMDE; -} - -/** - * validate if the given EasyMDE textarea is is non-empty. - * @param {jQuery} $textarea - * @returns {boolean} returns true if validation succeeded. - */ -export function validateTextareaNonEmpty($textarea) { - const $mdeInputField = $(getAttachedEasyMDE($textarea).codemirror.getInputField()); - // The original edit area HTML element is hidden and replaced by the - // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty. - // This is a workaround for this upstream bug. - // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 - if (!$textarea.val()) { - $mdeInputField.prop('required', true); - const $form = $textarea.parents('form'); - if (!$form.length) { - // this should never happen. we put a alert here in case the textarea would be forgotten to be put in a form - alert('Require non-empty content'); - } else { - $form[0].reportValidity(); - } - return false; - } - $mdeInputField.prop('required', false); - return true; -} - -/** - * there is no guarantee that the CodeMirror object is inside the same form as the textarea, - * so can not call handleGlobalEnterQuickSubmit directly. - * @param {CodeMirror.EditorFromTextArea} codeMirror - */ -export function codeMirrorQuickSubmit(codeMirror) { - handleGlobalEnterQuickSubmit(codeMirror.getTextArea()); -} diff --git a/web_src/js/features/comp/ImagePaste.js b/web_src/js/features/comp/ImagePaste.js index da41e7611a..9145b24062 100644 --- a/web_src/js/features/comp/ImagePaste.js +++ b/web_src/js/features/comp/ImagePaste.js @@ -88,38 +88,43 @@ class CodeMirrorEditor { } -export function initEasyMDEImagePaste(easyMDE, $dropzone) { +const uploadClipboardImage = async (editor, dropzone, e) => { + const $dropzone = $(dropzone); const uploadUrl = $dropzone.attr('data-upload-url'); const $files = $dropzone.find('.files'); if (!uploadUrl || !$files.length) return; - const uploadClipboardImage = async (editor, e) => { - const pastedImages = clipboardPastedImages(e); - if (!pastedImages || pastedImages.length === 0) { - return; - } - e.preventDefault(); - e.stopPropagation(); + const pastedImages = clipboardPastedImages(e); + if (!pastedImages || pastedImages.length === 0) { + return; + } + e.preventDefault(); + e.stopPropagation(); - for (const img of pastedImages) { - const name = img.name.slice(0, img.name.lastIndexOf('.')); + for (const img of pastedImages) { + const name = img.name.slice(0, img.name.lastIndexOf('.')); - const placeholder = `![${name}](uploading ...)`; - editor.insertPlaceholder(placeholder); - const data = await uploadFile(img, uploadUrl); - editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`); + const placeholder = `![${name}](uploading ...)`; + editor.insertPlaceholder(placeholder); + const data = await uploadFile(img, uploadUrl); + editor.replacePlaceholder(placeholder, `![${name}](/attachments/${data.uuid})`); - const $input = $(``).attr('id', data.uuid).val(data.uuid); - $files.append($input); - } - }; + const $input = $(``).attr('id', data.uuid).val(data.uuid); + $files.append($input); + } +}; +export function initEasyMDEImagePaste(easyMDE, dropzone) { + if (!dropzone) return; easyMDE.codemirror.on('paste', async (_, e) => { - return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), e); - }); - - $(easyMDE.element).on('paste', async (e) => { - return uploadClipboardImage(new TextareaEditor(easyMDE.element), e.originalEvent); + return uploadClipboardImage(new CodeMirrorEditor(easyMDE.codemirror), dropzone, e); + }); +} + +export function initTextareaImagePaste(textarea, dropzone) { + if (!dropzone) return; + $(textarea).on('paste', async (e) => { + return uploadClipboardImage(new TextareaEditor(textarea), dropzone, e.originalEvent); }); } diff --git a/web_src/js/features/comp/MarkupContentPreview.js b/web_src/js/features/comp/MarkupContentPreview.js deleted file mode 100644 index a32bf30184..0000000000 --- a/web_src/js/features/comp/MarkupContentPreview.js +++ /dev/null @@ -1,25 +0,0 @@ -import $ from 'jquery'; -import {initMarkupContent} from '../../markup/content.js'; -import {attachRefIssueContextPopup} from '../contextpopup.js'; - -const {csrfToken} = window.config; - -export function initCompMarkupContentPreviewTab($form) { - const $tabMenu = $form.find('.tabular.menu'); - $tabMenu.find('.item').tab(); - $tabMenu.find(`.item[data-tab="${$tabMenu.data('preview')}"]`).on('click', function () { - const $this = $(this); - $.post($this.data('url'), { - _csrf: csrfToken, - mode: 'comment', - context: $this.data('context'), - text: $form.find(`.tab[data-tab="${$tabMenu.data('write')}"] textarea`).val() - }, (data) => { - const $previewPanel = $form.find(`.tab[data-tab="${$tabMenu.data('preview')}"]`); - $previewPanel.html(data); - const refIssues = $previewPanel.find('p .ref-issue'); - attachRefIssueContextPopup(refIssues); - initMarkupContent(); - }); - }); -} diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js index 7b37035547..5c5733b35a 100644 --- a/web_src/js/features/contextpopup.js +++ b/web_src/js/features/contextpopup.js @@ -10,17 +10,16 @@ export function initContextPopups() { } export function attachRefIssueContextPopup(refIssues) { - if (!refIssues.length) return; - refIssues.each(function () { - if ($(this).hasClass('ref-external-issue')) { + for (const refIssue of refIssues) { + if (refIssue.classList.contains('ref-external-issue')) { return; } - const {owner, repo, index} = parseIssueHref($(this).attr('href')); + const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href')); if (!owner) return; const el = document.createElement('div'); - this.parentNode.insertBefore(el, this.nextSibling); + refIssue.parentNode.insertBefore(el, refIssue.nextSibling); const view = createApp(ContextPopup); @@ -31,7 +30,7 @@ export function attachRefIssueContextPopup(refIssues) { el.textContent = 'ContextPopup failed to load'; } - createTippy(this, { + createTippy(refIssue, { content: el, placement: 'top-start', interactive: true, @@ -40,5 +39,5 @@ export function attachRefIssueContextPopup(refIssues) { el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}})); } }); - }); + } } diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index 458f11c6f2..df66db7f6c 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -1,8 +1,8 @@ import $ from 'jquery'; import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js'; -import {validateTextareaNonEmpty} from './comp/EasyMDE.js'; import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js'; +import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; const {csrfToken} = window.config; diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js index 3f1b73d91e..03c9977f49 100644 --- a/web_src/js/features/repo-issue.js +++ b/web_src/js/features/repo-issue.js @@ -1,12 +1,9 @@ import $ from 'jquery'; import {htmlEscape} from 'escape-goat'; -import {attachTribute} from './tribute.js'; -import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; -import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; -import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {showTemporaryTooltip, createTippy} from '../modules/tippy.js'; import {hideElem, showElem, toggleElem} from '../utils/dom.js'; import {setFileFolding} from './file-fold.js'; +import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; const {appSubUrl, csrfToken} = window.config; @@ -223,21 +220,6 @@ export function initRepoIssueCodeCommentCancel() { }); } -export function initRepoIssueStatusButton() { - // Change status - const $statusButton = $('#status-button'); - $('#comment-form textarea').on('keyup', function () { - const easyMDE = getAttachedEasyMDE(this); - const value = easyMDE?.value() || $(this).val(); - $statusButton.text($statusButton.data(value.length === 0 ? 'status' : 'status-and-comment')); - }); - $statusButton.on('click', (e) => { - e.preventDefault(); - $('#status').val($statusButton.data('status-val')); - $('#comment-form').trigger('submit'); - }); -} - export function initRepoPullRequestUpdate() { // Pull Request update button const $pullUpdateButton = $('.update-button > button'); @@ -402,35 +384,18 @@ export function initRepoIssueComments() { }); } - -function assignMenuAttributes(menu) { - const id = Math.floor(Math.random() * Math.floor(1000000)); - menu.attr('data-write', menu.attr('data-write') + id); - menu.attr('data-preview', menu.attr('data-preview') + id); - menu.find('.item').each(function () { - const tab = $(this).attr('data-tab') + id; - $(this).attr('data-tab', tab); - }); - menu.parent().find("*[data-tab='write']").attr('data-tab', `write${id}`); - menu.parent().find("*[data-tab='preview']").attr('data-tab', `preview${id}`); - initCompMarkupContentPreviewTab(menu.parent('.form')); - return id; -} - export async function handleReply($el) { hideElem($el); const form = $el.closest('.comment-code-cloud').find('.comment-form'); form.removeClass('gt-hidden'); + const $textarea = form.find('textarea'); - let easyMDE = getAttachedEasyMDE($textarea); - if (!easyMDE) { - await attachTribute($textarea.get(), {mentions: true, emoji: true}); - easyMDE = await createCommentEasyMDE($textarea); + let editor = getComboMarkdownEditor($textarea); + if (!editor) { + editor = await initComboMarkdownEditor(form.find('.combo-markdown-editor')); } - $textarea.focus(); - easyMDE.codemirror.focus(); - assignMenuAttributes(form.find('.menu')); - return easyMDE; + editor.focus(); + return editor; } export function initRepoPullRequestReview() { @@ -494,14 +459,7 @@ export function initRepoPullRequestReview() { const $reviewBox = $('.review-box-panel'); if ($reviewBox.length === 1) { - (async () => { - // the editor's height is too large in some cases, and the panel cannot be scrolled with page now because there is `.repository .diff-detail-box.sticky { position: sticky; }` - // the temporary solution is to make the editor's height smaller (about 4 lines). GitHub also only show 4 lines for default. We can improve the UI (including Dropzone area) in future - // EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set max-height for .CodeMirror-scroll in CSS. - const $reviewTextarea = $reviewBox.find('textarea'); - const easyMDE = await createCommentEasyMDE($reviewTextarea, {minHeight: '80px'}); - initEasyMDEImagePaste(easyMDE, $reviewBox.find('.dropzone')); - })(); + const _promise = initComboMarkdownEditor($reviewBox.find('.combo-markdown-editor')); } // The following part is only for diff views @@ -565,20 +523,16 @@ export function initRepoPullRequestReview() { } const td = ntr.find(`.add-comment-${side}`); - let commentCloud = td.find('.comment-code-cloud'); + const commentCloud = td.find('.comment-code-cloud'); if (commentCloud.length === 0 && !ntr.find('button[name="pending_review"]').length) { - const data = await $.get($(this).closest('[data-new-comment-url]').data('new-comment-url')); - td.html(data); - commentCloud = td.find('.comment-code-cloud'); - assignMenuAttributes(commentCloud.find('.menu')); + const html = await $.get($(this).closest('[data-new-comment-url]').attr('data-new-comment-url')); + td.html(html); td.find("input[name='line']").val(idx); td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed'); td.find("input[name='path']").val(path); - const $textarea = commentCloud.find('textarea'); - await attachTribute($textarea.get(), {mentions: true, emoji: true}); - const easyMDE = await createCommentEasyMDE($textarea); - $textarea.focus(); - easyMDE.codemirror.focus(); + + const editor = await initComboMarkdownEditor(td.find('.combo-markdown-editor')); + editor.focus(); } }); } diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 3689c34272..2e39d3762f 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -1,11 +1,8 @@ import $ from 'jquery'; -import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; -import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; -import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import { initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete, initRepoIssueComments, initRepoIssueDependencyDelete, initRepoIssueReferenceIssue, - initRepoIssueStatusButton, initRepoIssueTitleEdit, initRepoIssueWipToggle, + initRepoIssueTitleEdit, initRepoIssueWipToggle, initRepoPullRequestUpdate, updateIssuesMeta, handleReply } from './repo-issue.js'; import {initUnicodeEscapeButton} from './repo-unicode-escape.js'; @@ -19,27 +16,27 @@ import { import {initCitationFileCopyContent} from './citation.js'; import {initCompLabelEdit} from './comp/LabelEdit.js'; import {initRepoDiffConversationNav} from './repo-diff.js'; -import {attachTribute} from './tribute.js'; import {createDropzone} from './dropzone.js'; import {initCommentContent, initMarkupContent} from '../markup/content.js'; import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initRepoSettingBranches} from './repo-settings.js'; import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js'; import {hideElem, showElem} from '../utils/dom.js'; +import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; import {attachRefIssueContextPopup} from './contextpopup.js'; const {csrfToken} = window.config; -// if there are draft comments (more than 20 chars), confirm before reloading, to avoid losing comments +// if there are draft comments, confirm before reloading, to avoid losing comments function reloadConfirmDraftComment() { const commentTextareas = [ document.querySelector('.edit-content-zone:not(.gt-hidden) textarea'), - document.querySelector('.edit_area'), + document.querySelector('#comment-form textarea'), ]; for (const textarea of commentTextareas) { - // Most users won't feel too sad if they lose a comment with 10 or 20 chars, they can re-type these in seconds. + // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds. // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy. - if (textarea && textarea.value.trim().length > 20) { + if (textarea && textarea.value.trim().length > 10) { textarea.parentElement.scrollIntoView(); if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) { return; @@ -85,25 +82,20 @@ export function initRepoCommentForm() { }); } - (async () => { - const $statusButton = $('#status-button'); - for (const textarea of $commentForm.find('textarea:not(.review-textarea, .no-easymde)')) { - // Don't initialize EasyMDE for the dormant #edit-content-form - if (textarea.closest('#edit-content-form')) { - continue; - } - const easyMDE = await createCommentEasyMDE(textarea, { - 'onChange': () => { - const value = easyMDE?.value().trim(); - $statusButton.text($statusButton.attr(value.length === 0 ? 'data-status' : 'data-status-and-comment')); - }, - }); - initEasyMDEImagePaste(easyMDE, $commentForm.find('.dropzone')); - } - })(); + const $statusButton = $('#status-button'); + $statusButton.on('click', (e) => { + e.preventDefault(); + $('#status').val($statusButton.data('status-val')); + $('#comment-form').trigger('submit'); + }); + + const _promise = initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), { + onContentChanged(editor) { + $statusButton.text($statusButton.attr(editor.value().trim() ? 'data-status-and-comment' : 'data-status')); + }, + }); initBranchSelector(); - initCompMarkupContentPreviewTab($commentForm); // List submits function initListSubmits(selector, outerSelector) { @@ -275,7 +267,7 @@ export function initRepoCommentForm() { } else if (input_id === '#project_id') { icon = svg('octicon-project', 18, 'gt-mr-3'); } else if (input_id === '#assignee_id') { - icon = ``; + icon = `avatar`; } $list.find('.selected').html(` @@ -322,162 +314,148 @@ async function onEditContent(event) { const $editContentZone = $segment.find('.edit-content-zone'); const $renderContent = $segment.find('.render-content'); const $rawContent = $segment.find('.raw-content'); - let $textarea; - let easyMDE; - // Setup new form - if ($editContentZone.html().length === 0) { - $editContentZone.html($('#edit-content-form').html()); - $textarea = $editContentZone.find('textarea'); - await attachTribute($textarea.get(), {mentions: true, emoji: true}); + let comboMarkdownEditor; - let dz; - const $dropzone = $editContentZone.find('.dropzone'); - if ($dropzone.length === 1) { - $dropzone.data('saved', false); + const setupDropzone = async ($dropzone) => { + if ($dropzone.length === 0) return null; + $dropzone.data('saved', false); - const fileUuidDict = {}; - dz = await createDropzone($dropzone[0], { - url: $dropzone.data('upload-url'), - headers: {'X-Csrf-Token': csrfToken}, - maxFiles: $dropzone.data('max-file'), - maxFilesize: $dropzone.data('max-size'), - acceptedFiles: (['*/*', ''].includes($dropzone.data('accepts'))) ? null : $dropzone.data('accepts'), - addRemoveLinks: true, - dictDefaultMessage: $dropzone.data('default-message'), - dictInvalidFileType: $dropzone.data('invalid-input-type'), - dictFileTooBig: $dropzone.data('file-too-big'), - dictRemoveFile: $dropzone.data('remove-file'), - timeout: 0, - thumbnailMethod: 'contain', - thumbnailWidth: 480, - thumbnailHeight: 480, - init() { - this.on('success', (file, data) => { - file.uuid = data.uuid; - fileUuidDict[file.uuid] = {submitted: false}; - const input = $(``).val(data.uuid); - $dropzone.find('.files').append(input); + const fileUuidDict = {}; + const dz = await createDropzone($dropzone[0], { + url: $dropzone.data('upload-url'), + headers: {'X-Csrf-Token': csrfToken}, + maxFiles: $dropzone.data('max-file'), + maxFilesize: $dropzone.data('max-size'), + acceptedFiles: (['*/*', ''].includes($dropzone.data('accepts'))) ? null : $dropzone.data('accepts'), + addRemoveLinks: true, + dictDefaultMessage: $dropzone.data('default-message'), + dictInvalidFileType: $dropzone.data('invalid-input-type'), + dictFileTooBig: $dropzone.data('file-too-big'), + dictRemoveFile: $dropzone.data('remove-file'), + timeout: 0, + thumbnailMethod: 'contain', + thumbnailWidth: 480, + thumbnailHeight: 480, + init() { + this.on('success', (file, data) => { + file.uuid = data.uuid; + fileUuidDict[file.uuid] = {submitted: false}; + const input = $(``).val(data.uuid); + $dropzone.find('.files').append(input); + }); + this.on('removedfile', (file) => { + $(`#${file.uuid}`).remove(); + if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) { + $.post($dropzone.data('remove-url'), { + file: file.uuid, + _csrf: csrfToken, + }); + } + }); + this.on('submit', () => { + $.each(fileUuidDict, (fileUuid) => { + fileUuidDict[fileUuid].submitted = true; }); - this.on('removedfile', (file) => { - $(`#${file.uuid}`).remove(); - if ($dropzone.data('remove-url') && !fileUuidDict[file.uuid].submitted) { - $.post($dropzone.data('remove-url'), { - file: file.uuid, - _csrf: csrfToken, - }); - } - }); - this.on('submit', () => { - $.each(fileUuidDict, (fileUuid) => { - fileUuidDict[fileUuid].submitted = true; + }); + this.on('reload', () => { + $.getJSON($editContentZone.data('attachment-url'), (data) => { + dz.removeAllFiles(true); + $dropzone.find('.files').empty(); + $.each(data, function () { + const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`; + dz.emit('addedfile', this); + dz.emit('thumbnail', this, imgSrc); + dz.emit('complete', this); + dz.files.push(this); + fileUuidDict[this.uuid] = {submitted: true}; + $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%'); + const input = $(``).val(this.uuid); + $dropzone.find('.files').append(input); }); }); - this.on('reload', () => { - $.getJSON($editContentZone.data('attachment-url'), (data) => { - dz.removeAllFiles(true); - $dropzone.find('.files').empty(); - $.each(data, function () { - const imgSrc = `${$dropzone.data('link-url')}/${this.uuid}`; - dz.emit('addedfile', this); - dz.emit('thumbnail', this, imgSrc); - dz.emit('complete', this); - dz.files.push(this); - fileUuidDict[this.uuid] = {submitted: true}; - $dropzone.find(`img[src='${imgSrc}']`).css('max-width', '100%'); - const input = $(``).val(this.uuid); - $dropzone.find('.files').append(input); - }); - }); - }); - }, - }); + }); + }, + }); + dz.emit('reload'); + return dz; + }; + + const cancelAndReset = (dz) => { + showElem($renderContent); + hideElem($editContentZone); + if (dz) { dz.emit('reload'); } - // Give new write/preview data-tab name to distinguish from others - const $editContentForm = $editContentZone.find('.ui.comment.form'); - const $tabMenu = $editContentForm.find('.tabular.menu'); - $tabMenu.attr('data-write', $editContentZone.data('write')); - $tabMenu.attr('data-preview', $editContentZone.data('preview')); - $tabMenu.find('.write.item').attr('data-tab', $editContentZone.data('write')); - $tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview')); - $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write')); - $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview')); - easyMDE = await createCommentEasyMDE($textarea); + }; - initCompMarkupContentPreviewTab($editContentForm); - initEasyMDEImagePaste(easyMDE, $dropzone); + const saveAndRefresh = (dz, $dropzone) => { + showElem($renderContent); + hideElem($editContentZone); + const $attachments = $dropzone.find('.files').find('[name=files]').map(function () { + return $(this).val(); + }).get(); + $.post($editContentZone.data('update-url'), { + _csrf: csrfToken, + content: comboMarkdownEditor.value(), + context: $editContentZone.data('context'), + files: $attachments, + }, (data) => { + if (!data.content) { + $renderContent.html($('#no-content').html()); + $rawContent.text(''); + } else { + $renderContent.html(data.content); + $rawContent.text(comboMarkdownEditor.value()); - const $saveButton = $editContentZone.find('.save.button'); - $textarea.on('ce-quick-submit', () => { - $saveButton.trigger('click'); - }); - - $editContentZone.find('.cancel.button').on('click', (e) => { - e.preventDefault(); - showElem($renderContent); - hideElem($editContentZone); - if (dz) { - dz.emit('reload'); + const refIssues = $renderContent.find('p .ref-issue'); + attachRefIssueContextPopup(refIssues); } - }); - - $saveButton.on('click', () => { - showElem($renderContent); - hideElem($editContentZone); - const $attachments = $dropzone.find('.files').find('[name=files]').map(function () { - return $(this).val(); - }).get(); - $.post($editContentZone.data('update-url'), { - _csrf: csrfToken, - content: $textarea.val(), - context: $editContentZone.data('context'), - files: $attachments, - }, (data) => { - if (data.length === 0 || data.content.length === 0) { - $renderContent.html($('#no-content').html()); - $rawContent.text(''); - } else { - $renderContent.html(data.content); - $rawContent.text($textarea.val()); - const refIssues = $renderContent.find('p .ref-issue'); - attachRefIssueContextPopup(refIssues); - } - const $content = $segment; - if (!$content.find('.dropzone-attachments').length) { - if (data.attachments !== '') { - $content.append(`
`); - $content.find('.dropzone-attachments').replaceWith(data.attachments); - } - } else if (data.attachments === '') { - $content.find('.dropzone-attachments').remove(); - } else { + const $content = $segment; + if (!$content.find('.dropzone-attachments').length) { + if (data.attachments !== '') { + $content.append(`
`); $content.find('.dropzone-attachments').replaceWith(data.attachments); } - if (dz) { - dz.emit('submit'); - dz.emit('reload'); - } - initMarkupContent(); - initCommentContent(); - }); + } else if (data.attachments === '') { + $content.find('.dropzone-attachments').remove(); + } else { + $content.find('.dropzone-attachments').replaceWith(data.attachments); + } + if (dz) { + dz.emit('submit'); + dz.emit('reload'); + } + initMarkupContent(); + initCommentContent(); }); - } else { // use existing form - $textarea = $segment.find('textarea'); - easyMDE = getAttachedEasyMDE($textarea); + }; + + if (!$editContentZone.html()) { + $editContentZone.html($('#issue-comment-editor-template').html()); + comboMarkdownEditor = await initComboMarkdownEditor($editContentZone.find('.combo-markdown-editor')); + + const $dropzone = $editContentZone.find('.dropzone'); + const dz = await setupDropzone($dropzone); + $editContentZone.find('.cancel.button').on('click', (e) => { + e.preventDefault(); + cancelAndReset(dz); + }); + $editContentZone.find('.save.button').on('click', (e) => { + e.preventDefault(); + saveAndRefresh(dz, $dropzone); + }); + } else { + comboMarkdownEditor = getComboMarkdownEditor($editContentZone.find('.combo-markdown-editor')); } // Show write/preview tab and copy raw content as needed showElem($editContentZone); hideElem($renderContent); - if ($textarea.val().length === 0) { - $textarea.val($rawContent.text()); - easyMDE.value($rawContent.text()); + if (!comboMarkdownEditor.value()) { + comboMarkdownEditor.value($rawContent.text()); } - requestAnimationFrame(() => { - $textarea.focus(); - easyMDE.codemirror.focus(); - }); + comboMarkdownEditor.focus(); } export function initRepository() { @@ -575,7 +553,6 @@ export function initRepository() { initRepoIssueCommentDelete(); initRepoIssueDependencyDelete(); initRepoIssueCodeCommentCancel(); - initRepoIssueStatusButton(); initRepoPullRequestUpdate(); initCompReactionSelector(); @@ -592,12 +569,6 @@ export function initRepository() { const $form = $repoComparePull.find('.pullrequest-form'); showElem($form); - $form.find('textarea.edit_area').each(function() { - const easyMDE = getAttachedEasyMDE($(this)); - if (easyMDE) { - easyMDE.codemirror.refresh(); - } - }); }); } @@ -614,24 +585,22 @@ function initRepoIssueCommentEdit() { const target = $(this).data('target'); const quote = $(`#${target}`).text().replace(/\n/g, '\n> '); const content = `> ${quote}\n\n`; - let easyMDE; + let editor; if ($(this).hasClass('quote-reply-diff')) { const $replyBtn = $(this).closest('.comment-code-cloud').find('button.comment-form-reply'); - easyMDE = await handleReply($replyBtn); + editor = await handleReply($replyBtn); } else { // for normal issue/comment page - easyMDE = getAttachedEasyMDE($('#comment-form .edit_area')); + editor = getComboMarkdownEditor($('#comment-form .combo-markdown-editor')); } - if (easyMDE) { - if (easyMDE.value() !== '') { - easyMDE.value(`${easyMDE.value()}\n\n${content}`); + if (editor) { + if (editor.value()) { + editor.value(`${editor.value()}\n\n${content}`); } else { - easyMDE.value(`${content}`); + editor.value(content); } - requestAnimationFrame(() => { - easyMDE.codemirror.focus(); - easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0); - }); + editor.focus(); + editor.moveCursorToEnd(); } }); } diff --git a/web_src/js/features/repo-release.js b/web_src/js/features/repo-release.js index a230d7765e..5cc6f1e3cd 100644 --- a/web_src/js/features/repo-release.js +++ b/web_src/js/features/repo-release.js @@ -1,9 +1,6 @@ import $ from 'jquery'; -import {attachTribute} from './tribute.js'; -import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; -import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; -import {createCommentEasyMDE} from './comp/EasyMDE.js'; import {hideElem, showElem} from '../utils/dom.js'; +import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; export function initRepoRelease() { $(document).on('click', '.remove-rel-attach', function() { @@ -51,17 +48,9 @@ function initTagNameEditor() { } function initRepoReleaseEditor() { - const $editor = $('.repository.new.release .content-editor'); + const $editor = $('.repository.new.release .combo-markdown-editor'); if ($editor.length === 0) { return; } - - (async () => { - const $textarea = $editor.find('textarea'); - await attachTribute($textarea.get(), {mentions: true, emoji: true}); - const easyMDE = await createCommentEasyMDE($textarea); - initCompMarkupContentPreviewTab($editor); - const $dropzone = $editor.parent().find('.dropzone'); - initEasyMDEImagePaste(easyMDE, $dropzone); - })(); + const _promise = initComboMarkdownEditor($editor); } diff --git a/web_src/js/features/repo-wiki.js b/web_src/js/features/repo-wiki.js index 4555b32e5f..a48f63dcb1 100644 --- a/web_src/js/features/repo-wiki.js +++ b/web_src/js/features/repo-wiki.js @@ -1,194 +1,68 @@ import $ from 'jquery'; import {initMarkupContent} from '../markup/content.js'; -import {attachEasyMDEToElements, codeMirrorQuickSubmit, importEasyMDE, validateTextareaNonEmpty} from './comp/EasyMDE.js'; -import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; +import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; const {csrfToken} = window.config; async function initRepoWikiFormEditor() { - const $editArea = $('.repository.wiki textarea#edit_area'); + const $editArea = $('.repository.wiki .combo-markdown-editor textarea'); if (!$editArea.length) return; - let sideBySideChanges = 0; - let sideBySideTimeout = null; - let hasEasyMDE = true; - const $form = $('.repository.wiki.new .ui.form'); - const EasyMDE = await importEasyMDE(); - const easyMDE = new EasyMDE({ - autoDownloadFontAwesome: false, - element: $editArea[0], - forceSync: true, - previewRender(plainText, preview) { // Async method - // FIXME: still send render request when return back to edit mode - const render = function () { - sideBySideChanges = 0; - if (sideBySideTimeout !== null) { - clearTimeout(sideBySideTimeout); - sideBySideTimeout = null; - } - $.post($editArea.data('url'), { - _csrf: csrfToken, - mode: 'gfm', - context: $editArea.data('context'), - text: plainText, - wiki: true - }, (data) => { - preview.innerHTML = `
${data}
`; - initMarkupContent(); - }); - }; + const $editorContainer = $form.find('.combo-markdown-editor'); + let editor; - setTimeout(() => { - if (!easyMDE.isSideBySideActive()) { - render(); - } else { - // delay preview by keystroke counting - sideBySideChanges++; - if (sideBySideChanges > 10) { - render(); - } - // or delay preview by timeout - if (sideBySideTimeout !== null) { - clearTimeout(sideBySideTimeout); - sideBySideTimeout = null; - } - sideBySideTimeout = setTimeout(render, 600); - } - }, 0); - if (!easyMDE.isSideBySideActive()) { - return 'Loading...'; - } - return preview.innerHTML; + let renderRequesting = false; + let lastContent; + const renderEasyMDEPreview = function () { + if (renderRequesting) return; + + const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active'); + const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side'); + const $previewTarget = $previewSide.length ? $previewSide : $previewFull; + const newContent = $editArea.val(); + if (editor && $previewTarget.length && lastContent !== newContent) { + renderRequesting = true; + $.post(editor.previewUrl, { + _csrf: csrfToken, + mode: editor.previewMode, + context: editor.previewContext, + text: newContent, + wiki: editor.previewWiki, + }).done((data) => { + lastContent = newContent; + $previewTarget.html(`
${data}
`); + initMarkupContent(); + }).always(() => { + renderRequesting = false; + setTimeout(renderEasyMDEPreview, 1000); + }); + } else { + setTimeout(renderEasyMDEPreview, 1000); + } + }; + renderEasyMDEPreview(); + + editor = await initComboMarkdownEditor($editorContainer, { + previewMode: 'gfm', + previewWiki: true, + easyMDEOptions: { + previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render + toolbar: ['bold', 'italic', 'strikethrough', '|', + 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', + 'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|', + 'unordered-list', 'ordered-list', '|', + 'link', 'image', 'table', 'horizontal-rule', '|', + 'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea' + ], }, - renderingConfig: { - singleLineBreaks: false - }, - indentWithTabs: false, - tabSize: 4, - spellChecker: false, - inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable - nativeSpellcheck: true, - toolbar: ['bold', 'italic', 'strikethrough', '|', - 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', - { - name: 'code-inline', - action(e) { - const cm = e.codemirror; - const selection = cm.getSelection(); - cm.replaceSelection(`\`${selection}\``); - if (!selection) { - const cursorPos = cm.getCursor(); - cm.setCursor(cursorPos.line, cursorPos.ch - 1); - } - cm.focus(); - }, - className: 'fa fa-angle-right', - title: 'Add Inline Code', - }, 'code', 'quote', '|', { - name: 'checkbox-empty', - action(e) { - const cm = e.codemirror; - cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`); - cm.focus(); - }, - className: 'fa fa-square-o', - title: 'Add Checkbox (empty)', - }, - { - name: 'checkbox-checked', - action(e) { - const cm = e.codemirror; - cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); - cm.focus(); - }, - className: 'fa fa-check-square-o', - title: 'Add Checkbox (checked)', - }, '|', - 'unordered-list', 'ordered-list', '|', - 'link', 'image', 'table', 'horizontal-rule', '|', - 'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', - { - name: 'revert-to-textarea', - action(e) { - e.toTextArea(); - hasEasyMDE = false; - const $root = $form.find('.field.content'); - const loading = $root.data('loading'); - $root.append(`
${loading}
`); - initCompMarkupContentPreviewTab($form); - }, - className: 'fa fa-file', - title: 'Revert to simple textarea', - }, - ] }); - easyMDE.codemirror.setOption('extraKeys', { - 'Cmd-Enter': codeMirrorQuickSubmit, - 'Ctrl-Enter': codeMirrorQuickSubmit, - }); - - attachEasyMDEToElements(easyMDE); - $form.on('submit', () => { if (!validateTextareaNonEmpty($editArea)) { return false; } }); - - setTimeout(() => { - const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]'); - const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]'); - const $toolbar = $('.editor-toolbar'); - const $bPreview = $('.editor-toolbar button.preview'); - const $bSideBySide = $('.editor-toolbar a.fa-columns'); - $bEdit.on('click', (e) => { - if (!hasEasyMDE) { - return false; - } - e.stopImmediatePropagation(); - if ($toolbar.hasClass('disabled-for-preview')) { - $bPreview.trigger('click'); - } - - return false; - }); - $bPrev.on('click', (e) => { - if (!hasEasyMDE) { - return false; - } - e.stopImmediatePropagation(); - if (!$toolbar.hasClass('disabled-for-preview')) { - $bPreview.trigger('click'); - } - return false; - }); - $bPreview.on('click', () => { - setTimeout(() => { - if ($toolbar.hasClass('disabled-for-preview')) { - if ($bEdit.hasClass('active')) { - $bEdit.removeClass('active'); - } - if (!$bPrev.hasClass('active')) { - $bPrev.addClass('active'); - } - } else { - if (!$bEdit.hasClass('active')) { - $bEdit.addClass('active'); - } - if ($bPrev.hasClass('active')) { - $bPrev.removeClass('active'); - } - } - }, 0); - - return false; - }); - $bSideBySide.on('click', () => { - sideBySideChanges = 10; - }); - }, 0); } export function initRepoWikiForm() { diff --git a/web_src/js/features/tribute.js b/web_src/js/features/tribute.js index 94f3512a2e..e77ba29950 100644 --- a/web_src/js/features/tribute.js +++ b/web_src/js/features/tribute.js @@ -1,11 +1,10 @@ import {emojiKeys, emojiHTML, emojiString} from './emoji.js'; -import {uniq} from '../utils.js'; import {htmlEscape} from 'escape-goat'; function makeCollections({mentions, emoji}) { const collections = []; - if (mentions) { + if (emoji) { collections.push({ trigger: ':', requireLeadingSpace: true, @@ -30,14 +29,14 @@ function makeCollections({mentions, emoji}) { }); } - if (emoji) { + if (mentions) { collections.push({ values: window.config.tributeValues, requireLeadingSpace: true, menuItemTemplate: (item) => { return `
- + ${htmlEscape(item.original.name)} ${item.original.fullname && item.original.fullname !== '' ? `${htmlEscape(item.original.fullname)}` : ''}
@@ -49,30 +48,10 @@ function makeCollections({mentions, emoji}) { return collections; } -export async function attachTribute(elementOrNodeList, {mentions, emoji} = {}) { - if (!window.config.requireTribute || !elementOrNodeList) return; - const nodes = Array.from('length' in elementOrNodeList ? elementOrNodeList : [elementOrNodeList]); - if (!nodes.length) return; - - const mentionNodes = nodes.filter((node) => { - return mentions || node.id === 'content'; - }); - const emojiNodes = nodes.filter((node) => { - return emoji || node.id === 'content' || node.classList.contains('emoji-input'); - }); - const uniqueNodes = uniq([...mentionNodes, ...emojiNodes]); - if (!uniqueNodes.length) return; - +export async function attachTribute(element, {mentions, emoji} = {}) { const {default: Tribute} = await import(/* webpackChunkName: "tribute" */'tributejs'); - - const collections = makeCollections({ - mentions: mentions || mentionNodes.length > 0, - emoji: emoji || emojiNodes.length > 0, - }); - + const collections = makeCollections({mentions, emoji}); const tribute = new Tribute({collection: collections, noMatchTemplate: ''}); - for (const node of uniqueNodes) { - tribute.attach(node); - } + tribute.attach(element); return tribute; } diff --git a/web_src/js/index.js b/web_src/js/index.js index 839289e9d2..e727acfa06 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -4,7 +4,6 @@ import './bootstrap.js'; import {initRepoActivityTopAuthorsChart} from './components/RepoActivityTopAuthors.vue'; import {initDashboardRepoList} from './components/DashboardRepoList.vue'; -import {attachTribute} from './features/tribute.js'; import {initGlobalCopyToClipboardListener} from './features/clipboard.js'; import {initContextPopups} from './features/contextpopup.js'; import {initRepoGraphGit} from './features/repo-graph.js'; @@ -110,8 +109,6 @@ onDomReady(() => { initGlobalFormDirtyLeaveConfirm(); initGlobalLinkActions(); - attachTribute(document.querySelectorAll('#content, .emoji-input')); - initCommonIssue(); initCommonOrganization(); diff --git a/web_src/js/utils.js b/web_src/js/utils.js index b3ffbf2988..e72e55dc65 100644 --- a/web_src/js/utils.js +++ b/web_src/js/utils.js @@ -30,11 +30,6 @@ export function isDarkTheme() { return style.getPropertyValue('--is-dark-theme').trim().toLowerCase() === 'true'; } -// removes duplicate elements in an array -export function uniq(arr) { - return Array.from(new Set(arr)); -} - // strip from a string export function stripTags(text) { return text.replace(/<[^>]*>?/gm, ''); diff --git a/web_src/js/utils.test.js b/web_src/js/utils.test.js index 306acd34af..46fbb28de4 100644 --- a/web_src/js/utils.test.js +++ b/web_src/js/utils.test.js @@ -1,6 +1,6 @@ import {expect, test} from 'vitest'; import { - basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, + basename, extname, isObject, stripTags, joinPaths, parseIssueHref, prettyNumber, parseUrl, translateMonth, translateDay, blobToDataURI, toAbsoluteUrl, } from './utils.js'; @@ -62,10 +62,6 @@ test('isObject', () => { expect(isObject([])).toBeFalsy(); }); -test('uniq', () => { - expect(uniq([1, 1, 1, 2])).toEqual([1, 2]); -}); - test('stripTags', () => { expect(stripTags('test')).toEqual('test'); });