Skip to content

Commit c9e582c

Browse files
wxiaoguangsilverwind
wxiaoguang
and
silverwind
authored
Refactor markdown editor and use it for milestone description editor (#32688)
Refactor markdown editor to clarify its "preview" behavior and remove jQuery code. Close #15045 --------- Co-authored-by: silverwind <[email protected]>
1 parent 2f43536 commit c9e582c

29 files changed

+147
-116
lines changed

‎modules/web/route.go

+4-1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import (
99
"reflect"
1010
"strings"
1111

12+
"code.gitea.io/gitea/modules/htmlutil"
1213
"code.gitea.io/gitea/modules/setting"
1314
"code.gitea.io/gitea/modules/web/middleware"
1415

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

‎options/locale/locale_en-US.ini

-1
Original file line numberDiff line numberDiff line change
@@ -2590,7 +2590,6 @@ diff.generated = generated
25902590
diff.vendored = vendored
25912591
diff.comment.add_line_comment = Add line comment
25922592
diff.comment.placeholder = Leave a comment
2593-
diff.comment.markdown_info = Styling with markdown is supported.
25942593
diff.comment.add_single_comment = Add single comment
25952594
diff.comment.add_review_comment = Add comment
25962595
diff.comment.start_review = Start review

‎routers/web/web.go

+2
Original file line numberDiff line numberDiff line change
@@ -485,6 +485,8 @@ func registerRoutes(m *web.Router) {
485485
m.Methods("GET, HEAD", "/*", public.FileHandlerFunc())
486486
}, optionsCorsHandler())
487487

488+
m.Post("/-/markup", reqSignIn, web.Bind(structs.MarkupOption{}), misc.Markup)
489+
488490
m.Group("/explore", func() {
489491
m.Get("", func(ctx *context.Context) {
490492
ctx.Redirect(setting.AppSubURL + "/explore/repos")

‎templates/devtest/devtest-footer.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{{/* TODO: the devtest.js is isolated from index.js, so no module is shared and many index.js functions do not work in devtest.ts */}}
22
<script src="{{AssetUrlPrefix}}/js/devtest.js?v={{AssetVersion}}"></script>
3-
{{template "base/footer" dict}}
3+
{{template "base/footer" ctx.RootData}}

‎templates/devtest/devtest-header.tmpl

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
{{template "base/head" dict}}
1+
{{template "base/head" ctx.RootData}}
22
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/devtest.css?v={{AssetVersion}}">

‎templates/devtest/gitea-ui.tmpl

+1-2
Original file line numberDiff line numberDiff line change
@@ -183,8 +183,7 @@
183183

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

190189
<h1>Tailwind CSS Demo</h1>

‎templates/org/settings/options.tmpl

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<input id="email" name="email" type="email" value="{{.Org.Email}}" maxlength="255">
2424
</div>
2525
<div class="field {{if .Err_Description}}error{{end}}">
26+
{{/* it is rendered as markdown, but the length is limited, so at the moment we do not use the markdown editor here */}}
2627
<label for="description">{{ctx.Locale.Tr "org.org_desc"}}</label>
2728
<textarea id="description" name="description" rows="2" maxlength="255">{{.Org.Description}}</textarea>
2829
</div>

‎templates/projects/new.tmpl

+10-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,16 @@
1818
</div>
1919
<div class="field">
2020
<label>{{ctx.Locale.Tr "repo.projects.description"}}</label>
21-
<textarea name="content" placeholder="{{ctx.Locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea>
21+
{{/* TODO: repo-level project and org-level project have different behaviros to render */}}
22+
{{/* the "Repository" is nil when the project is org-level */}}
23+
{{template "shared/combomarkdowneditor" (dict
24+
"MarkdownPreviewInRepo" $.Repository
25+
"MarkdownPreviewContext" (Iif $.Repository "" .HomeLink)
26+
"MarkdownPreviewMode" (Iif $.Repository "comment")
27+
"TextareaName" "content"
28+
"TextareaContent" .content
29+
"TextareaPlaceholder" (ctx.Locale.Tr "repo.projects.description_placeholder")
30+
)}}
2231
</div>
2332

2433
{{if not .PageIsEditProjects}}

‎templates/repo/diff/box.tmpl

+3-2
Original file line numberDiff line numberDiff line change
@@ -240,8 +240,9 @@
240240
<template id="issue-comment-editor-template">
241241
<div class="ui form comment">
242242
{{template "shared/combomarkdowneditor" (dict
243-
"MarkdownPreviewUrl" (print $.Repository.Link "/markup")
244-
"MarkdownPreviewContext" $.RepoLink
243+
"CustomInit" true
244+
"MarkdownPreviewInRepo" $.Repository
245+
"MarkdownPreviewMode" "comment"
245246
"TextareaName" "content"
246247
"DropzoneParentContainer" ".ui.form"
247248
)}}

‎templates/repo/diff/comment_form.tmpl

+6-6
Original file line numberDiff line numberDiff line change
@@ -9,24 +9,24 @@
99
<input type="hidden" name="diff_start_cid">
1010
<input type="hidden" name="diff_end_cid">
1111
<input type="hidden" name="diff_base_cid">
12-
12+
<div class="field">
1313
{{template "shared/combomarkdowneditor" (dict
14-
"MarkdownPreviewUrl" (print $.root.Repository.Link "/markup")
15-
"MarkdownPreviewContext" $.root.RepoLink
14+
"CustomInit" true
15+
"MarkdownPreviewInRepo" $.root.Repository
16+
"MarkdownPreviewMode" "comment"
1617
"TextareaName" "content"
1718
"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.comment.placeholder")
1819
"DropzoneParentContainer" "form"
1920
"DisableAutosize" "true"
2021
)}}
21-
22+
</div>
2223
{{if $.root.IsAttachmentEnabled}}
2324
<div class="field">
2425
{{template "repo/upload" $.root}}
2526
</div>
2627
{{end}}
2728

28-
<div class="field footer tw-mx-2">
29-
<span class="markup-info">{{svg "octicon-markdown"}} {{ctx.Locale.Tr "repo.diff.comment.markdown_info"}}</span>
29+
<div class="field footer">
3030
<div class="tw-text-right">
3131
{{if $.reply}}
3232
<button class="ui submit primary tiny button btn-reply" type="submit">{{ctx.Locale.Tr "repo.diff.comment.reply"}}</button>

‎templates/repo/diff/new_review.tmpl

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
</div>
1717
<div class="field">
1818
{{template "shared/combomarkdowneditor" (dict
19-
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
20-
"MarkdownPreviewContext" .RepoLink
19+
"MarkdownPreviewInRepo" $.Repository
20+
"MarkdownPreviewMode" "comment"
2121
"TextareaName" "content"
2222
"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.review.placeholder")
2323
"DropzoneParentContainer" "form"

‎templates/repo/issue/comment_tab.tmpl

+4-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,12 @@
55

66
<div class="field">
77
{{template "shared/combomarkdowneditor" (dict
8-
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
9-
"MarkdownPreviewContext" .RepoLink
8+
"CustomInit" true
9+
"MarkdownPreviewInRepo" $.Repository
10+
"MarkdownPreviewMode" "comment"
1011
"TextareaName" "content"
1112
"TextareaContent" $textareaContent
12-
"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.comment.placeholder")
13+
"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.comment.placeholder")
1314
"DropzoneParentContainer" "form, .ui.form"
1415
)}}
1516
</div>

‎templates/repo/issue/fields/textarea.tmpl

+4-3
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,12 @@
77

88
{{if $useMarkdownEditor}}
99
{{template "shared/combomarkdowneditor" (dict
10+
"CustomInit" true
1011
"ContainerClasses" "tw-hidden"
11-
"MarkdownPreviewUrl" (print .root.RepoLink "/markup")
12-
"MarkdownPreviewContext" .root.RepoLink
12+
"MarkdownPreviewInRepo" $.root.Repository
13+
"MarkdownPreviewMode" "comment"
1314
"TextareaContent" .item.Attributes.value
14-
"TextareaPlaceholder" .item.Attributes.placeholder
15+
"TextareaPlaceholder" .item.Attributes.placeholder
1516
"DropzoneParentContainer" ".combo-editor-dropzone"
1617
)}}
1718

‎templates/repo/issue/milestone_new.tmpl

+7-2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,14 @@
3636
</div>
3737
<div class="field">
3838
<label>{{ctx.Locale.Tr "repo.milestones.desc"}}</label>
39-
<textarea name="content">{{.content}}</textarea>
39+
{{template "shared/combomarkdowneditor" (dict
40+
"MarkdownPreviewInRepo" $.Repository
41+
"MarkdownPreviewMode" "comment"
42+
"TextareaName" "content"
43+
"TextareaContent" .content
44+
"TextareaPlaceholder" (ctx.Locale.Tr "repo.milestones.desc")
45+
)}}
4046
</div>
41-
<div class="divider"></div>
4247
<div class="tw-text-right">
4348
{{if .PageIsEditMilestone}}
4449
<a class="ui primary basic button" href="{{.RepoLink}}/milestones">

‎templates/repo/issue/view_content.tmpl

+3-2
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,9 @@
142142
<div class="ui form comment">
143143
<div class="field">
144144
{{template "shared/combomarkdowneditor" (dict
145-
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
146-
"MarkdownPreviewContext" .RepoLink
145+
"CustomInit" true
146+
"MarkdownPreviewInRepo" $.Repository
147+
"MarkdownPreviewMode" "comment"
147148
"TextareaName" "content"
148149
"DropzoneParentContainer" ".ui.form"
149150
)}}

‎templates/repo/release/new.tmpl

+2-3
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,11 @@
5050
</div>
5151
<div class="field">
5252
{{template "shared/combomarkdowneditor" (dict
53-
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
54-
"MarkdownPreviewContext" .RepoLink
53+
"MarkdownPreviewInRepo" $.Repository
54+
"MarkdownPreviewMode" "comment"
5555
"TextareaName" "content"
5656
"TextareaContent" .content
5757
"TextareaPlaceholder" (ctx.Locale.Tr "repo.release.message")
58-
"TextareaAriaLabel" (ctx.Locale.Tr "repo.release.message")
5958
"DropzoneParentContainer" "form"
6059
)}}
6160
</div>

‎templates/repo/wiki/new.tmpl

+4-4
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,12 @@
2323
{{$content = ctx.Locale.Tr "repo.wiki.welcome"}}
2424
{{end}}
2525
{{template "shared/combomarkdowneditor" (dict
26-
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
27-
"MarkdownPreviewContext" .RepoLink
26+
"CustomInit" true
27+
"MarkdownPreviewInRepo" $.Repository
28+
"MarkdownPreviewMode" "wiki"
2829
"TextareaName" "content"
29-
"TextareaPlaceholder" (ctx.Locale.Tr "repo.wiki.page_content")
30-
"TextareaAriaLabel" (ctx.Locale.Tr "repo.wiki.page_content")
3130
"TextareaContent" $content
31+
"TextareaPlaceholder" (ctx.Locale.Tr "repo.wiki.page_content")
3232
)}}
3333

3434
<div class="field tw-mt-4">

‎templates/shared/combomarkdowneditor.tmpl

+31-7
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,39 @@
11
{{/*
22
Template Attributes:
3+
* CustomInit: do not initialize the editor automatically
34
* ContainerId: id attribute for the container element
45
* ContainerClasses: additional classes for the container element
5-
* MarkdownPreviewUrl: preview url for the preview tab
6-
* MarkdownPreviewContext: preview context for the preview tab
6+
* MarkdownPreviewInRepo: the repo to preview markdown
7+
* MarkdownPreviewContext: preview context (the related url path when rendering) for the preview tab, eg: repo link or user home link
8+
* MarkdownPreviewMode: content mode for the editor, eg: wiki, comment or default
79
* TextareaName: name attribute for the textarea
810
* TextareaContent: content for the textarea
11+
* TextareaMaxLength: maxlength attribute for the textarea
912
* TextareaPlaceholder: placeholder attribute for the textarea
1013
* TextareaAriaLabel: aria-label attribute for the textarea
1114
* DropzoneParentContainer: container for file upload (leave it empty if no upload)
1215
* DisableAutosize: whether to disable automatic height resizing
1316
*/}}
14-
<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
15-
{{if .MarkdownPreviewUrl}}
17+
{{$ariaLabel := or .TextareaAriaLabel .TextareaPlaceholder}}
18+
{{$repo := .MarkdownPreviewInRepo}}
19+
{{$previewContext := .MarkdownPreviewContext}}
20+
{{$previewMode := .MarkdownPreviewMode}}
21+
{{$previewUrl := print AppSubUrl "/-/markup"}}
22+
{{if $repo}}
23+
{{$previewUrl = print $repo.Link "/markup"}}
24+
{{end}}
25+
{{$supportEasyMDE := or (eq $previewMode "comment") (eq $previewMode "wiki")}}
26+
<div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{if .CustomInit}}custom-init{{end}} {{.ContainerClasses}}"
27+
data-dropzone-parent-container="{{.DropzoneParentContainer}}"
28+
data-content-mode="{{$previewMode}}"
29+
data-support-easy-mde="{{$supportEasyMDE}}"
30+
data-preview-url="{{$previewUrl}}"
31+
data-preview-context="{{$previewContext}}"
32+
>
1633
<div class="ui top tabular menu">
1734
<a class="active item" data-tab-for="markdown-writer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "write")}}</a>
18-
<a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
35+
<a class="item" data-tab-for="markdown-previewer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
1936
</div>
20-
{{end}}
2137
<div class="ui tab active" data-tab-panel="markdown-writer">
2238
<markdown-toolbar>
2339
<div class="markdown-toolbar-group">
@@ -40,17 +56,25 @@ Template Attributes:
4056
<md-task-list class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.list.task.tooltip"}}">{{svg "octicon-tasklist"}}</md-task-list>
4157
<button class="markdown-toolbar-button markdown-button-table-add" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.table.add.tooltip"}}">{{svg "octicon-table"}}</button>
4258
</div>
59+
{{if eq $previewMode "comment"}}
4360
<div class="markdown-toolbar-group">
4461
<md-mention class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.mention.tooltip"}}">{{svg "octicon-mention"}}</md-mention>
4562
<md-ref class="markdown-toolbar-button" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.ref.tooltip"}}">{{svg "octicon-cross-reference"}}</md-ref>
4663
</div>
64+
{{end}}
4765
<div class="markdown-toolbar-group">
4866
<button class="markdown-toolbar-button markdown-switch-monospace" role="switch" data-enable-text="{{ctx.Locale.Tr "editor.buttons.enable_monospace_font"}}" data-disable-text="{{ctx.Locale.Tr "editor.buttons.disable_monospace_font"}}">{{svg "octicon-typography"}}</button>
67+
{{if $supportEasyMDE}}
4968
<button class="markdown-toolbar-button markdown-switch-easymde" data-tooltip-content="{{ctx.Locale.Tr "editor.buttons.switch_to_legacy.tooltip"}}">{{svg "octicon-arrow-switch"}}</button>
69+
{{end}}
5070
</div>
5171
</markdown-toolbar>
5272
<text-expander keys=": @ #" multiword="#" suffix="">
53-
<textarea class="markdown-text-editor"{{if .TextareaName}} name="{{.TextareaName}}"{{end}}{{if .TextareaPlaceholder}} placeholder="{{.TextareaPlaceholder}}"{{end}}{{if .TextareaAriaLabel}} aria-label="{{.TextareaAriaLabel}}"{{end}}{{if .DisableAutosize}} data-disable-autosize="{{.DisableAutosize}}"{{end}}>{{.TextareaContent}}</textarea>
73+
<textarea class="markdown-text-editor"
74+
{{if .TextareaName}}name="{{.TextareaName}}"{{end}} {{if .TextareaMaxLength}}maxlength="{{.TextareaMaxLength}}"{{end}}
75+
{{if .TextareaPlaceholder}}placeholder="{{.TextareaPlaceholder}}"{{end}} {{if $ariaLabel}}aria-label="{{$ariaLabel}}"{{end}}
76+
{{if .DisableAutosize}}data-disable-autosize="{{.DisableAutosize}}"{{end}}
77+
>{{.TextareaContent}}</textarea>
5478
</text-expander>
5579
<script>
5680
if (localStorage?.getItem('markdown-editor-monospace') === 'true') {

‎templates/user/settings/profile.tmpl

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
<p id="signed-user-email">{{.SignedUser.Email}}</p>
3030
</div>
3131
<div class="field {{if .Err_Description}}error{{end}}">
32+
{{/* it is rendered as markdown, but the length is limited, so at the moment we do not use the markdown editor here */}}
3233
<label for="description">{{ctx.Locale.Tr "user.user_bio"}}</label>
3334
<textarea id="description" name="description" rows="2" placeholder="{{ctx.Locale.Tr "settings.biography_placeholder"}}" maxlength="255">{{.SignedUser.Description}}</textarea>
3435
</div>

‎web_src/css/editor/combomarkdowneditor.css

+5
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,11 @@
9696
font-size: 0.85em;
9797
}
9898

99+
.combo-markdown-editor .ui.tab.markup[data-tab-panel="markdown-previewer"] {
100+
border-bottom: 1px solid var(--color-secondary);
101+
padding-bottom: 1rem;
102+
}
103+
99104
text-expander {
100105
display: block;
101106
position: relative;

‎web_src/css/repo.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1005,7 +1005,7 @@ td .commit-summary {
10051005
}
10061006

10071007
.repository.view.issue .comment-list .code-comment .comment-content {
1008-
margin-left: 36px;
1008+
margin-left: 24px;
10091009
}
10101010

10111011
.repository.view.issue .comment-list .comment > .avatar {

‎web_src/css/review.css

-25
Original file line numberDiff line numberDiff line change
@@ -102,19 +102,11 @@
102102
cursor: pointer;
103103
}
104104

105-
.comment-code-cloud .ui.active.tab {
106-
padding: 0.5em;
107-
}
108-
109105
.comment-code-cloud .ui.active.tab.markup {
110106
padding: 1em;
111107
min-height: 168px;
112108
}
113109

114-
.comment-code-cloud .ui.tabular.menu {
115-
margin: 0.5em;
116-
}
117-
118110
.comment-code-cloud .editor-statusbar {
119111
display: none;
120112
}
@@ -123,23 +115,6 @@
123115
padding: 10px 0;
124116
}
125117

126-
.comment-code-cloud .footer .markup-info {
127-
display: inline-block;
128-
margin: 5px 0;
129-
font-size: 12px;
130-
color: var(--color-text-light);
131-
}
132-
133-
.comment-code-cloud .footer .ui.right.floated {
134-
padding-top: 6px;
135-
}
136-
137-
.comment-code-cloud .footer::after {
138-
clear: both;
139-
content: "";
140-
display: block;
141-
}
142-
143118
.diff-file-body .comment-form {
144119
margin: 0 0 0 3em;
145120
}

‎web_src/js/features/common-form.ts

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import {applyAreYouSure, initAreYouSure} from '../vendor/jquery.are-you-sure.ts';
22
import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.ts';
3+
import {queryElems} from '../utils/dom.ts';
4+
import {initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
35

46
export function initGlobalFormDirtyLeaveConfirm() {
57
initAreYouSure(window.jQuery);
@@ -11,7 +13,7 @@ export function initGlobalFormDirtyLeaveConfirm() {
1113
}
1214

1315
export function initGlobalEnterQuickSubmit() {
14-
document.addEventListener('keydown', (e) => {
16+
document.addEventListener('keydown', (e: KeyboardEvent & {target: HTMLElement}) => {
1517
if (e.key !== 'Enter') return;
1618
const hasCtrlOrMeta = ((e.ctrlKey || e.metaKey) && !e.altKey);
1719
if (hasCtrlOrMeta && e.target.matches('textarea')) {
@@ -27,3 +29,7 @@ export function initGlobalEnterQuickSubmit() {
2729
}
2830
});
2931
}
32+
33+
export function initGlobalComboMarkdownEditor() {
34+
queryElems<HTMLElement>(document, '.combo-markdown-editor:not(.custom-init)', (el) => initComboMarkdownEditor(el));
35+
}

0 commit comments

Comments
 (0)