Skip to content

Commit a38ba63

Browse files
wxiaoguangwxiaoguang
authored
Load EasyMDE/CodeMirror dynamically, remove RequireEasyMDE (#18069)
This PR makes frontend load EasyMDE/CodeMirror dynamically, and removes `RequireEasyMDE`.
1 parent 0572c78 commit a38ba63

17 files changed

+237
-221
lines changed

‎routers/web/repo/commit.go

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,6 @@ func FileHistory(ctx *context.Context) {
254254
func Diff(ctx *context.Context) {
255255
ctx.Data["PageIsDiff"] = true
256256
ctx.Data["RequireHighlightJS"] = true
257-
ctx.Data["RequireEasyMDE"] = true
258257
ctx.Data["RequireTribute"] = true
259258

260259
userName := ctx.Repo.Owner.Name

‎routers/web/repo/compare.go

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -764,7 +764,6 @@ func CompareDiff(ctx *context.Context) {
764764
ctx.Data["IsRepoToolbarCommits"] = true
765765
ctx.Data["IsDiffCompare"] = true
766766
ctx.Data["RequireTribute"] = true
767-
ctx.Data["RequireEasyMDE"] = true
768767
setTemplateIfExists(ctx, pullRequestTemplateKey, nil, pullRequestTemplateCandidates)
769768
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
770769
upload.AddUploadContext(ctx, "comment")

‎routers/web/repo/editor.go

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,6 @@ func editFile(ctx *context.Context, isNewFile bool) {
6969
ctx.Data["PageIsEdit"] = true
7070
ctx.Data["IsNewFile"] = isNewFile
7171
ctx.Data["RequireHighlightJS"] = true
72-
ctx.Data["RequireEasyMDE"] = true
7372
canCommit := renderCommitRights(ctx)
7473

7574
treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -200,7 +199,6 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
200199
ctx.Data["PageHasPosted"] = true
201200
ctx.Data["IsNewFile"] = isNewFile
202201
ctx.Data["RequireHighlightJS"] = true
203-
ctx.Data["RequireEasyMDE"] = true
204202
ctx.Data["TreePath"] = form.TreePath
205203
ctx.Data["TreeNames"] = treeNames
206204
ctx.Data["TreePaths"] = treePaths
@@ -544,7 +542,6 @@ func DeleteFilePost(ctx *context.Context) {
544542
func UploadFile(ctx *context.Context) {
545543
ctx.Data["PageIsUpload"] = true
546544
ctx.Data["RequireTribute"] = true
547-
ctx.Data["RequireEasyMDE"] = true
548545
upload.AddUploadContext(ctx, "repo")
549546
canCommit := renderCommitRights(ctx)
550547
treePath := cleanUploadFileName(ctx.Repo.TreePath)
@@ -580,7 +577,6 @@ func UploadFilePost(ctx *context.Context) {
580577
form := web.GetForm(ctx).(*forms.UploadRepoFileForm)
581578
ctx.Data["PageIsUpload"] = true
582579
ctx.Data["RequireTribute"] = true
583-
ctx.Data["RequireEasyMDE"] = true
584580
upload.AddUploadContext(ctx, "repo")
585581
canCommit := renderCommitRights(ctx)
586582

‎routers/web/repo/issue.go

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -789,7 +789,6 @@ func NewIssue(ctx *context.Context) {
789789
ctx.Data["PageIsIssueList"] = true
790790
ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
791791
ctx.Data["RequireHighlightJS"] = true
792-
ctx.Data["RequireEasyMDE"] = true
793792
ctx.Data["RequireTribute"] = true
794793
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
795794
title := ctx.FormString("title")
@@ -962,7 +961,6 @@ func NewIssuePost(ctx *context.Context) {
962961
ctx.Data["PageIsIssueList"] = true
963962
ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
964963
ctx.Data["RequireHighlightJS"] = true
965-
ctx.Data["RequireEasyMDE"] = true
966964
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
967965
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
968966
upload.AddUploadContext(ctx, "comment")
@@ -1147,7 +1145,6 @@ func ViewIssue(ctx *context.Context) {
11471145

11481146
ctx.Data["RequireHighlightJS"] = true
11491147
ctx.Data["RequireTribute"] = true
1150-
ctx.Data["RequireEasyMDE"] = true
11511148
ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects)
11521149
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
11531150
upload.AddUploadContext(ctx, "comment")

‎routers/web/repo/pull.go

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -738,7 +738,6 @@ func ViewPullFiles(ctx *context.Context) {
738738
setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
739739

740740
ctx.Data["RequireHighlightJS"] = true
741-
ctx.Data["RequireEasyMDE"] = true
742741
ctx.Data["RequireTribute"] = true
743742
if ctx.Data["Assignees"], err = models.GetRepoAssignees(ctx.Repo.Repository); err != nil {
744743
ctx.ServerError("GetAssignees", err)
@@ -1098,7 +1097,6 @@ func CompareAndPullRequestPost(ctx *context.Context) {
10981097
ctx.Data["IsDiffCompare"] = true
10991098
ctx.Data["IsRepoToolbarCommits"] = true
11001099
ctx.Data["RequireTribute"] = true
1101-
ctx.Data["RequireEasyMDE"] = true
11021100
ctx.Data["RequireHighlightJS"] = true
11031101
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
11041102
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled

‎routers/web/repo/release.go

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -262,7 +262,6 @@ func LatestRelease(ctx *context.Context) {
262262
func NewRelease(ctx *context.Context) {
263263
ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
264264
ctx.Data["PageIsReleaseList"] = true
265-
ctx.Data["RequireEasyMDE"] = true
266265
ctx.Data["RequireTribute"] = true
267266
ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
268267
if tagName := ctx.FormString("tag"); len(tagName) > 0 {
@@ -296,7 +295,6 @@ func NewReleasePost(ctx *context.Context) {
296295
form := web.GetForm(ctx).(*forms.NewReleaseForm)
297296
ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
298297
ctx.Data["PageIsReleaseList"] = true
299-
ctx.Data["RequireEasyMDE"] = true
300298
ctx.Data["RequireTribute"] = true
301299

302300
if ctx.HasError() {
@@ -415,7 +413,6 @@ func EditRelease(ctx *context.Context) {
415413
ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
416414
ctx.Data["PageIsReleaseList"] = true
417415
ctx.Data["PageIsEditRelease"] = true
418-
ctx.Data["RequireEasyMDE"] = true
419416
ctx.Data["RequireTribute"] = true
420417
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
421418
upload.AddUploadContext(ctx, "release")
@@ -454,7 +451,6 @@ func EditReleasePost(ctx *context.Context) {
454451
ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
455452
ctx.Data["PageIsReleaseList"] = true
456453
ctx.Data["PageIsEditRelease"] = true
457-
ctx.Data["RequireEasyMDE"] = true
458454
ctx.Data["RequireTribute"] = true
459455

460456
tagName := ctx.Params("*")

‎routers/web/repo/wiki.go

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -622,7 +622,6 @@ func WikiRaw(ctx *context.Context) {
622622
func NewWiki(ctx *context.Context) {
623623
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
624624
ctx.Data["PageIsWiki"] = true
625-
ctx.Data["RequireEasyMDE"] = true
626625

627626
if !ctx.Repo.Repository.HasWiki() {
628627
ctx.Data["title"] = "Home"
@@ -639,7 +638,6 @@ func NewWikiPost(ctx *context.Context) {
639638
form := web.GetForm(ctx).(*forms.NewWikiForm)
640639
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
641640
ctx.Data["PageIsWiki"] = true
642-
ctx.Data["RequireEasyMDE"] = true
643641

644642
if ctx.HasError() {
645643
ctx.HTML(http.StatusOK, tplWikiNew)
@@ -677,7 +675,6 @@ func NewWikiPost(ctx *context.Context) {
677675
func EditWiki(ctx *context.Context) {
678676
ctx.Data["PageIsWiki"] = true
679677
ctx.Data["PageIsWikiEdit"] = true
680-
ctx.Data["RequireEasyMDE"] = true
681678

682679
if !ctx.Repo.Repository.HasWiki() {
683680
ctx.Redirect(ctx.Repo.RepoLink + "/wiki")
@@ -697,7 +694,6 @@ func EditWikiPost(ctx *context.Context) {
697694
form := web.GetForm(ctx).(*forms.NewWikiForm)
698695
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
699696
ctx.Data["PageIsWiki"] = true
700-
ctx.Data["RequireEasyMDE"] = true
701697

702698
if ctx.HasError() {
703699
ctx.HTML(http.StatusOK, tplWikiNew)

‎templates/base/footer.tmpl

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,6 @@
1212
{{template "custom/body_outer_post" .}}
1313

1414
{{template "base/footer_content" .}}
15-
{{if .RequireEasyMDE}}
16-
<script src="{{AssetUrlPrefix}}/js/easymde.js?v={{MD5 AppVer}}"></script>
17-
<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
18-
<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
19-
<script>
20-
CodeMirror.modeURL = '{{AssetUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js';
21-
</script>
22-
{{end}}
2315

2416
<!-- Third-party libraries -->
2517
{{if .RequireU2F}}

‎templates/base/head.tmpl

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,6 @@
5959
</script>
6060
<link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml">
6161
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
62-
{{if .RequireEasyMDE}}
63-
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
64-
{{end}}
6562
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
6663
<noscript>
6764
<style>

‎web_src/js/easymde.js

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎web_src/js/features/comp/CommentEasyMDE.js renamed to ‎web_src/js/features/comp/EasyMDE.js

Lines changed: 54 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,72 @@
11
import attachTribute from '../tribute.js';
22

3+
const {appSubUrl} = window.config;
4+
5+
function loadScript(url) {
6+
return new Promise((resolve, reject) => {
7+
const script = document.createElement('script');
8+
script.async = true;
9+
script.addEventListener('load', () => {
10+
resolve();
11+
});
12+
script.addEventListener('error', (e) => {
13+
reject(e.error);
14+
});
15+
script.src = url;
16+
document.body.appendChild(script);
17+
});
18+
}
19+
20+
/**
21+
* @returns {EasyMDE}
22+
*/
23+
export async function importEasyMDE() {
24+
// for CodeMirror: the plugins should be loaded dynamically
25+
// https://github.com/codemirror/CodeMirror/issues/5484
26+
// https://github.com/codemirror/CodeMirror/issues/4838
27+
28+
const [{default: EasyMDE}, {default: CodeMirror}] = await Promise.all([
29+
import(/* webpackChunkName: "easymde" */'easymde'),
30+
import(/* webpackChunkName: "codemirror" */'codemirror'),
31+
import(/* webpackChunkName: "easymde" */'easymde/dist/easymde.min.css'),
32+
]);
33+
34+
// CodeMirror plugins must be loaded by a "Plain browser env"
35+
window.CodeMirror = CodeMirror;
36+
await Promise.all([
37+
loadScript(`${appSubUrl}/assets/vendor/plugins/codemirror/addon/mode/loadmode.js`),
38+
loadScript(`${appSubUrl}/assets/vendor/plugins/codemirror/mode/meta.js`),
39+
]);
40+
41+
// the loadmode.js/meta.js would set the modeURL/modeInfo properties, so we check it to make sure our loading works
42+
if (!CodeMirror.modeURL || !CodeMirror.modeInfo) {
43+
throw new Error('failed to load plugins for CodeMirror');
44+
}
45+
46+
CodeMirror.modeURL = `${appSubUrl}/assets/vendor/plugins/codemirror/mode/%N/%N.js`;
47+
return EasyMDE;
48+
}
49+
350
/**
451
* create an EasyMDE editor for comment
552
* @param textarea jQuery or HTMLElement
653
* @returns {null|EasyMDE}
754
*/
8-
export function createCommentEasyMDE(textarea) {
55+
export async function createCommentEasyMDE(textarea) {
956
if (textarea instanceof jQuery) {
1057
textarea = textarea[0];
1158
}
1259
if (!textarea) {
1360
return null;
1461
}
1562

16-
const easyMDE = new window.EasyMDE({
63+
const EasyMDE = await importEasyMDE();
64+
const easyMDE = new EasyMDE({
1765
autoDownloadFontAwesome: false,
1866
element: textarea,
1967
forceSync: true,
2068
renderingConfig: {
21-
singleLineBreaks: false
69+
singleLineBreaks: false,
2270
},
2371
indentWithTabs: false,
2472
tabSize: 4,
@@ -56,23 +104,23 @@ export function createCommentEasyMDE(textarea) {
56104
className: 'fa fa-file',
57105
title: 'Revert to simple textarea',
58106
},
59-
]
107+
],
60108
});
61109
const inputField = easyMDE.codemirror.getInputField();
62110
inputField.classList.add('js-quick-submit');
63111
easyMDE.codemirror.setOption('extraKeys', {
64112
Enter: () => {
65113
const tributeContainer = document.querySelector('.tribute-container');
66114
if (!tributeContainer || tributeContainer.style.display === 'none') {
67-
return CodeMirror.Pass;
115+
return window.CodeMirror.Pass;
68116
}
69117
},
70118
Backspace: (cm) => {
71119
if (cm.getInputField().trigger) {
72120
cm.getInputField().trigger('input');
73121
}
74122
cm.execCommand('delCharBefore');
75-
}
123+
},
76124
});
77125
attachTribute(inputField, {mentions: true, emoji: true});
78126
attachEasyMDEToElements(easyMDE);

‎web_src/js/features/repo-diff.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {initCompReactionSelector} from './comp/ReactionSelector.js';
22
import {initRepoIssueContentHistory} from './repo-issue-content.js';
3-
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
3+
import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
44
const {csrfToken} = window.config;
55

66
export function initRepoDiffReviewButton() {

‎web_src/js/features/repo-issue.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {htmlEscape} from 'escape-goat';
22
import attachTribute from './tribute.js';
3-
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
3+
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
44
import {initCompImagePaste} from './comp/ImagePaste.js';
55
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
66

@@ -439,16 +439,17 @@ export function initRepoPullRequestReview() {
439439
$(`#show-outdated-${id}`).removeClass('hide');
440440
});
441441

442-
$(document).on('click', 'button.comment-form-reply', function (e) {
442+
$(document).on('click', 'button.comment-form-reply', async function (e) {
443443
e.preventDefault();
444+
444445
$(this).hide();
445446
const form = $(this).closest('.comment-code-cloud').find('.comment-form');
446447
form.removeClass('hide');
447448
const $textarea = form.find('textarea');
448449
let easyMDE = getAttachedEasyMDE($textarea);
449450
if (!easyMDE) {
450-
attachTribute($textarea.get(), {mentions: true, emoji: true});
451-
easyMDE = createCommentEasyMDE($textarea);
451+
await attachTribute($textarea.get(), {mentions: true, emoji: true});
452+
easyMDE = await createCommentEasyMDE($textarea);
452453
}
453454
$textarea.focus();
454455
easyMDE.codemirror.focus();
@@ -515,8 +516,8 @@ export function initRepoPullRequestReview() {
515516
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
516517
td.find("input[name='path']").val(path);
517518
const $textarea = commentCloud.find('textarea');
518-
attachTribute($textarea.get(), {mentions: true, emoji: true});
519-
const easyMDE = createCommentEasyMDE($textarea);
519+
await attachTribute($textarea.get(), {mentions: true, emoji: true});
520+
const easyMDE = await createCommentEasyMDE($textarea);
520521
$textarea.focus();
521522
easyMDE.codemirror.focus();
522523
}

‎web_src/js/features/repo-legacy.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
1+
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
22
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
33
import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js';
44
import {
@@ -256,6 +256,7 @@ export function initRepoCommentForm() {
256256

257257
async function onEditContent(event) {
258258
event.preventDefault();
259+
259260
$(this).closest('.dropdown').find('.menu').toggle('visible');
260261
const $segment = $(this).closest('.header').next();
261262
const $editContentZone = $segment.find('.edit-content-zone');
@@ -341,7 +342,7 @@ async function onEditContent(event) {
341342
$tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
342343
$editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
343344
$editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
344-
easyMDE = createCommentEasyMDE($textarea);
345+
easyMDE = await createCommentEasyMDE($textarea);
345346

346347
initCompMarkupContentPreviewTab($editContentForm);
347348
if ($dropzone.length === 1) {

‎web_src/js/features/repo-release.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import attachTribute from './tribute.js';
22
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
33
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
4-
import {createCommentEasyMDE} from './comp/CommentEasyMDE.js';
4+
import {createCommentEasyMDE} from './comp/EasyMDE.js';
55

66
export function initRepoRelease() {
77
$(document).on('click', '.remove-rel-attach', function() {
@@ -19,11 +19,13 @@ export function initRepoReleaseEditor() {
1919
return false;
2020
}
2121

22-
const $textarea = $editor.find('textarea');
23-
attachTribute($textarea.get(), {mentions: false, emoji: true});
24-
const $files = $editor.parent().find('.files');
25-
const easyMDE = createCommentEasyMDE($textarea);
26-
initCompMarkupContentPreviewTab($editor);
27-
const dropzone = $editor.parent().find('.dropzone')[0];
28-
initEasyMDEImagePaste(easyMDE, dropzone, $files);
22+
(async () => {
23+
const $textarea = $editor.find('textarea');
24+
await attachTribute($textarea.get(), {mentions: false, emoji: true});
25+
const $files = $editor.parent().find('.files');
26+
const easyMDE = await createCommentEasyMDE($textarea);
27+
initCompMarkupContentPreviewTab($editor);
28+
const dropzone = $editor.parent().find('.dropzone')[0];
29+
initEasyMDEImagePaste(easyMDE, dropzone, $files);
30+
})();
2931
}

0 commit comments

Comments
 (0)