Load EasyMDE/CodeMirror dynamically, remove RequireEasyMDE (#18069)

This PR makes frontend load EasyMDE/CodeMirror dynamically, and removes `RequireEasyMDE`.
This commit is contained in:
wxiaoguang 2022-01-05 20:17:25 +08:00 committed by GitHub
parent 0572c78938
commit a38ba634a4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 239 additions and 223 deletions

View File

@ -254,7 +254,6 @@ func FileHistory(ctx *context.Context) {
func Diff(ctx *context.Context) { func Diff(ctx *context.Context) {
ctx.Data["PageIsDiff"] = true ctx.Data["PageIsDiff"] = true
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
userName := ctx.Repo.Owner.Name userName := ctx.Repo.Owner.Name

View File

@ -764,7 +764,6 @@ func CompareDiff(ctx *context.Context) {
ctx.Data["IsRepoToolbarCommits"] = true ctx.Data["IsRepoToolbarCommits"] = true
ctx.Data["IsDiffCompare"] = true ctx.Data["IsDiffCompare"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["RequireEasyMDE"] = true
setTemplateIfExists(ctx, pullRequestTemplateKey, nil, pullRequestTemplateCandidates) setTemplateIfExists(ctx, pullRequestTemplateKey, nil, pullRequestTemplateCandidates)
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
upload.AddUploadContext(ctx, "comment") upload.AddUploadContext(ctx, "comment")

View File

@ -69,7 +69,6 @@ func editFile(ctx *context.Context, isNewFile bool) {
ctx.Data["PageIsEdit"] = true ctx.Data["PageIsEdit"] = true
ctx.Data["IsNewFile"] = isNewFile ctx.Data["IsNewFile"] = isNewFile
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
canCommit := renderCommitRights(ctx) canCommit := renderCommitRights(ctx)
treePath := cleanUploadFileName(ctx.Repo.TreePath) treePath := cleanUploadFileName(ctx.Repo.TreePath)
@ -200,7 +199,6 @@ func editFilePost(ctx *context.Context, form forms.EditRepoFileForm, isNewFile b
ctx.Data["PageHasPosted"] = true ctx.Data["PageHasPosted"] = true
ctx.Data["IsNewFile"] = isNewFile ctx.Data["IsNewFile"] = isNewFile
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["TreePath"] = form.TreePath ctx.Data["TreePath"] = form.TreePath
ctx.Data["TreeNames"] = treeNames ctx.Data["TreeNames"] = treeNames
ctx.Data["TreePaths"] = treePaths ctx.Data["TreePaths"] = treePaths
@ -544,7 +542,6 @@ func DeleteFilePost(ctx *context.Context) {
func UploadFile(ctx *context.Context) { func UploadFile(ctx *context.Context) {
ctx.Data["PageIsUpload"] = true ctx.Data["PageIsUpload"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["RequireEasyMDE"] = true
upload.AddUploadContext(ctx, "repo") upload.AddUploadContext(ctx, "repo")
canCommit := renderCommitRights(ctx) canCommit := renderCommitRights(ctx)
treePath := cleanUploadFileName(ctx.Repo.TreePath) treePath := cleanUploadFileName(ctx.Repo.TreePath)
@ -580,7 +577,6 @@ func UploadFilePost(ctx *context.Context) {
form := web.GetForm(ctx).(*forms.UploadRepoFileForm) form := web.GetForm(ctx).(*forms.UploadRepoFileForm)
ctx.Data["PageIsUpload"] = true ctx.Data["PageIsUpload"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["RequireEasyMDE"] = true
upload.AddUploadContext(ctx, "repo") upload.AddUploadContext(ctx, "repo")
canCommit := renderCommitRights(ctx) canCommit := renderCommitRights(ctx)

View File

@ -789,7 +789,6 @@ func NewIssue(ctx *context.Context) {
ctx.Data["PageIsIssueList"] = true ctx.Data["PageIsIssueList"] = true
ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0 ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
title := ctx.FormString("title") title := ctx.FormString("title")
@ -962,7 +961,6 @@ func NewIssuePost(ctx *context.Context) {
ctx.Data["PageIsIssueList"] = true ctx.Data["PageIsIssueList"] = true
ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0 ctx.Data["NewIssueChooseTemplate"] = len(ctx.IssueTemplatesFromDefaultBranch()) > 0
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
upload.AddUploadContext(ctx, "comment") upload.AddUploadContext(ctx, "comment")
@ -1147,7 +1145,6 @@ func ViewIssue(ctx *context.Context) {
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects) ctx.Data["IsProjectsEnabled"] = ctx.Repo.CanRead(unit.TypeProjects)
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
upload.AddUploadContext(ctx, "comment") upload.AddUploadContext(ctx, "comment")

View File

@ -738,7 +738,6 @@ func ViewPullFiles(ctx *context.Context) {
setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name) setCompareContext(ctx, baseCommit, commit, ctx.Repo.Owner.Name, ctx.Repo.Repository.Name)
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
if ctx.Data["Assignees"], err = models.GetRepoAssignees(ctx.Repo.Repository); err != nil { if ctx.Data["Assignees"], err = models.GetRepoAssignees(ctx.Repo.Repository); err != nil {
ctx.ServerError("GetAssignees", err) ctx.ServerError("GetAssignees", err)
@ -1098,7 +1097,6 @@ func CompareAndPullRequestPost(ctx *context.Context) {
ctx.Data["IsDiffCompare"] = true ctx.Data["IsDiffCompare"] = true
ctx.Data["IsRepoToolbarCommits"] = true ctx.Data["IsRepoToolbarCommits"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireHighlightJS"] = true ctx.Data["RequireHighlightJS"] = true
ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes ctx.Data["PullRequestWorkInProgressPrefixes"] = setting.Repository.PullRequest.WorkInProgressPrefixes
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled

View File

@ -262,7 +262,6 @@ func LatestRelease(ctx *context.Context) {
func NewRelease(ctx *context.Context) { func NewRelease(ctx *context.Context) {
ctx.Data["Title"] = ctx.Tr("repo.release.new_release") ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
ctx.Data["PageIsReleaseList"] = true ctx.Data["PageIsReleaseList"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch ctx.Data["tag_target"] = ctx.Repo.Repository.DefaultBranch
if tagName := ctx.FormString("tag"); len(tagName) > 0 { if tagName := ctx.FormString("tag"); len(tagName) > 0 {
@ -296,7 +295,6 @@ func NewReleasePost(ctx *context.Context) {
form := web.GetForm(ctx).(*forms.NewReleaseForm) form := web.GetForm(ctx).(*forms.NewReleaseForm)
ctx.Data["Title"] = ctx.Tr("repo.release.new_release") ctx.Data["Title"] = ctx.Tr("repo.release.new_release")
ctx.Data["PageIsReleaseList"] = true ctx.Data["PageIsReleaseList"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
if ctx.HasError() { if ctx.HasError() {
@ -415,7 +413,6 @@ func EditRelease(ctx *context.Context) {
ctx.Data["Title"] = ctx.Tr("repo.release.edit_release") ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
ctx.Data["PageIsReleaseList"] = true ctx.Data["PageIsReleaseList"] = true
ctx.Data["PageIsEditRelease"] = true ctx.Data["PageIsEditRelease"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled ctx.Data["IsAttachmentEnabled"] = setting.Attachment.Enabled
upload.AddUploadContext(ctx, "release") upload.AddUploadContext(ctx, "release")
@ -454,7 +451,6 @@ func EditReleasePost(ctx *context.Context) {
ctx.Data["Title"] = ctx.Tr("repo.release.edit_release") ctx.Data["Title"] = ctx.Tr("repo.release.edit_release")
ctx.Data["PageIsReleaseList"] = true ctx.Data["PageIsReleaseList"] = true
ctx.Data["PageIsEditRelease"] = true ctx.Data["PageIsEditRelease"] = true
ctx.Data["RequireEasyMDE"] = true
ctx.Data["RequireTribute"] = true ctx.Data["RequireTribute"] = true
tagName := ctx.Params("*") tagName := ctx.Params("*")

View File

@ -622,7 +622,6 @@ func WikiRaw(ctx *context.Context) {
func NewWiki(ctx *context.Context) { func NewWiki(ctx *context.Context) {
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page") ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
ctx.Data["PageIsWiki"] = true ctx.Data["PageIsWiki"] = true
ctx.Data["RequireEasyMDE"] = true
if !ctx.Repo.Repository.HasWiki() { if !ctx.Repo.Repository.HasWiki() {
ctx.Data["title"] = "Home" ctx.Data["title"] = "Home"
@ -639,7 +638,6 @@ func NewWikiPost(ctx *context.Context) {
form := web.GetForm(ctx).(*forms.NewWikiForm) form := web.GetForm(ctx).(*forms.NewWikiForm)
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page") ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
ctx.Data["PageIsWiki"] = true ctx.Data["PageIsWiki"] = true
ctx.Data["RequireEasyMDE"] = true
if ctx.HasError() { if ctx.HasError() {
ctx.HTML(http.StatusOK, tplWikiNew) ctx.HTML(http.StatusOK, tplWikiNew)
@ -677,7 +675,6 @@ func NewWikiPost(ctx *context.Context) {
func EditWiki(ctx *context.Context) { func EditWiki(ctx *context.Context) {
ctx.Data["PageIsWiki"] = true ctx.Data["PageIsWiki"] = true
ctx.Data["PageIsWikiEdit"] = true ctx.Data["PageIsWikiEdit"] = true
ctx.Data["RequireEasyMDE"] = true
if !ctx.Repo.Repository.HasWiki() { if !ctx.Repo.Repository.HasWiki() {
ctx.Redirect(ctx.Repo.RepoLink + "/wiki") ctx.Redirect(ctx.Repo.RepoLink + "/wiki")
@ -697,7 +694,6 @@ func EditWikiPost(ctx *context.Context) {
form := web.GetForm(ctx).(*forms.NewWikiForm) form := web.GetForm(ctx).(*forms.NewWikiForm)
ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page") ctx.Data["Title"] = ctx.Tr("repo.wiki.new_page")
ctx.Data["PageIsWiki"] = true ctx.Data["PageIsWiki"] = true
ctx.Data["RequireEasyMDE"] = true
if ctx.HasError() { if ctx.HasError() {
ctx.HTML(http.StatusOK, tplWikiNew) ctx.HTML(http.StatusOK, tplWikiNew)

View File

@ -12,14 +12,6 @@
{{template "custom/body_outer_post" .}} {{template "custom/body_outer_post" .}}
{{template "base/footer_content" .}} {{template "base/footer_content" .}}
{{if .RequireEasyMDE}}
<script src="{{AssetUrlPrefix}}/js/easymde.js?v={{MD5 AppVer}}"></script>
<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js"></script>
<script src="{{AssetUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js"></script>
<script>
CodeMirror.modeURL = '{{AssetUrlPrefix}}/vendor/plugins/codemirror/mode/%N/%N.js';
</script>
{{end}}
<!-- Third-party libraries --> <!-- Third-party libraries -->
{{if .RequireU2F}} {{if .RequireU2F}}

View File

@ -59,9 +59,6 @@
</script> </script>
<link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml"> <link rel="icon" href="{{AssetUrlPrefix}}/img/logo.svg" type="image/svg+xml">
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png"> <link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
{{if .RequireEasyMDE}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/easymde.css?v={{MD5 AppVer}}">
{{end}}
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}"> <link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}">
<noscript> <noscript>
<style> <style>

View File

@ -1,7 +0,0 @@
import EasyMDE from 'easymde';
import CodeMirror from 'codemirror/lib/codemirror.js';
window.EasyMDE = EasyMDE;
window.CodeMirror = CodeMirror;

View File

@ -1,11 +1,58 @@
import attachTribute from '../tribute.js'; import attachTribute from '../tribute.js';
const {appSubUrl} = window.config;
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.async = true;
script.addEventListener('load', () => {
resolve();
});
script.addEventListener('error', (e) => {
reject(e.error);
});
script.src = url;
document.body.appendChild(script);
});
}
/**
* @returns {EasyMDE}
*/
export async function importEasyMDE() {
// for CodeMirror: the plugins should be loaded dynamically
// https://github.com/codemirror/CodeMirror/issues/5484
// https://github.com/codemirror/CodeMirror/issues/4838
const [{default: EasyMDE}, {default: CodeMirror}] = await Promise.all([
import(/* webpackChunkName: "easymde" */'easymde'),
import(/* webpackChunkName: "codemirror" */'codemirror'),
import(/* webpackChunkName: "easymde" */'easymde/dist/easymde.min.css'),
]);
// CodeMirror plugins must be loaded by a "Plain browser env"
window.CodeMirror = CodeMirror;
await Promise.all([
loadScript(`${appSubUrl}/assets/vendor/plugins/codemirror/addon/mode/loadmode.js`),
loadScript(`${appSubUrl}/assets/vendor/plugins/codemirror/mode/meta.js`),
]);
// the loadmode.js/meta.js would set the modeURL/modeInfo properties, so we check it to make sure our loading works
if (!CodeMirror.modeURL || !CodeMirror.modeInfo) {
throw new Error('failed to load plugins for CodeMirror');
}
CodeMirror.modeURL = `${appSubUrl}/assets/vendor/plugins/codemirror/mode/%N/%N.js`;
return EasyMDE;
}
/** /**
* create an EasyMDE editor for comment * create an EasyMDE editor for comment
* @param textarea jQuery or HTMLElement * @param textarea jQuery or HTMLElement
* @returns {null|EasyMDE} * @returns {null|EasyMDE}
*/ */
export function createCommentEasyMDE(textarea) { export async function createCommentEasyMDE(textarea) {
if (textarea instanceof jQuery) { if (textarea instanceof jQuery) {
textarea = textarea[0]; textarea = textarea[0];
} }
@ -13,12 +60,13 @@ export function createCommentEasyMDE(textarea) {
return null; return null;
} }
const easyMDE = new window.EasyMDE({ const EasyMDE = await importEasyMDE();
const easyMDE = new EasyMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
element: textarea, element: textarea,
forceSync: true, forceSync: true,
renderingConfig: { renderingConfig: {
singleLineBreaks: false singleLineBreaks: false,
}, },
indentWithTabs: false, indentWithTabs: false,
tabSize: 4, tabSize: 4,
@ -56,7 +104,7 @@ export function createCommentEasyMDE(textarea) {
className: 'fa fa-file', className: 'fa fa-file',
title: 'Revert to simple textarea', title: 'Revert to simple textarea',
}, },
] ],
}); });
const inputField = easyMDE.codemirror.getInputField(); const inputField = easyMDE.codemirror.getInputField();
inputField.classList.add('js-quick-submit'); inputField.classList.add('js-quick-submit');
@ -64,7 +112,7 @@ export function createCommentEasyMDE(textarea) {
Enter: () => { Enter: () => {
const tributeContainer = document.querySelector('.tribute-container'); const tributeContainer = document.querySelector('.tribute-container');
if (!tributeContainer || tributeContainer.style.display === 'none') { if (!tributeContainer || tributeContainer.style.display === 'none') {
return CodeMirror.Pass; return window.CodeMirror.Pass;
} }
}, },
Backspace: (cm) => { Backspace: (cm) => {
@ -72,7 +120,7 @@ export function createCommentEasyMDE(textarea) {
cm.getInputField().trigger('input'); cm.getInputField().trigger('input');
} }
cm.execCommand('delCharBefore'); cm.execCommand('delCharBefore');
} },
}); });
attachTribute(inputField, {mentions: true, emoji: true}); attachTribute(inputField, {mentions: true, emoji: true});
attachEasyMDEToElements(easyMDE); attachEasyMDEToElements(easyMDE);

View File

@ -1,6 +1,6 @@
import {initCompReactionSelector} from './comp/ReactionSelector.js'; import {initCompReactionSelector} from './comp/ReactionSelector.js';
import {initRepoIssueContentHistory} from './repo-issue-content.js'; import {initRepoIssueContentHistory} from './repo-issue-content.js';
import {validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
export function initRepoDiffReviewButton() { export function initRepoDiffReviewButton() {

View File

@ -1,6 +1,6 @@
import {htmlEscape} from 'escape-goat'; import {htmlEscape} from 'escape-goat';
import attachTribute from './tribute.js'; import attachTribute from './tribute.js';
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js'; import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
import {initCompImagePaste} from './comp/ImagePaste.js'; import {initCompImagePaste} from './comp/ImagePaste.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
@ -439,16 +439,17 @@ export function initRepoPullRequestReview() {
$(`#show-outdated-${id}`).removeClass('hide'); $(`#show-outdated-${id}`).removeClass('hide');
}); });
$(document).on('click', 'button.comment-form-reply', function (e) { $(document).on('click', 'button.comment-form-reply', async function (e) {
e.preventDefault(); e.preventDefault();
$(this).hide(); $(this).hide();
const form = $(this).closest('.comment-code-cloud').find('.comment-form'); const form = $(this).closest('.comment-code-cloud').find('.comment-form');
form.removeClass('hide'); form.removeClass('hide');
const $textarea = form.find('textarea'); const $textarea = form.find('textarea');
let easyMDE = getAttachedEasyMDE($textarea); let easyMDE = getAttachedEasyMDE($textarea);
if (!easyMDE) { if (!easyMDE) {
attachTribute($textarea.get(), {mentions: true, emoji: true}); await attachTribute($textarea.get(), {mentions: true, emoji: true});
easyMDE = createCommentEasyMDE($textarea); easyMDE = await createCommentEasyMDE($textarea);
} }
$textarea.focus(); $textarea.focus();
easyMDE.codemirror.focus(); easyMDE.codemirror.focus();
@ -515,8 +516,8 @@ export function initRepoPullRequestReview() {
td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed'); td.find("input[name='side']").val(side === 'left' ? 'previous' : 'proposed');
td.find("input[name='path']").val(path); td.find("input[name='path']").val(path);
const $textarea = commentCloud.find('textarea'); const $textarea = commentCloud.find('textarea');
attachTribute($textarea.get(), {mentions: true, emoji: true}); await attachTribute($textarea.get(), {mentions: true, emoji: true});
const easyMDE = createCommentEasyMDE($textarea); const easyMDE = await createCommentEasyMDE($textarea);
$textarea.focus(); $textarea.focus();
easyMDE.codemirror.focus(); easyMDE.codemirror.focus();
} }

View File

@ -1,4 +1,4 @@
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js'; import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js';
import { import {
@ -256,6 +256,7 @@ export function initRepoCommentForm() {
async function onEditContent(event) { async function onEditContent(event) {
event.preventDefault(); event.preventDefault();
$(this).closest('.dropdown').find('.menu').toggle('visible'); $(this).closest('.dropdown').find('.menu').toggle('visible');
const $segment = $(this).closest('.header').next(); const $segment = $(this).closest('.header').next();
const $editContentZone = $segment.find('.edit-content-zone'); const $editContentZone = $segment.find('.edit-content-zone');
@ -341,7 +342,7 @@ async function onEditContent(event) {
$tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview')); $tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
$editContentForm.find('.write').attr('data-tab', $editContentZone.data('write')); $editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
$editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview')); $editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
easyMDE = createCommentEasyMDE($textarea); easyMDE = await createCommentEasyMDE($textarea);
initCompMarkupContentPreviewTab($editContentForm); initCompMarkupContentPreviewTab($editContentForm);
if ($dropzone.length === 1) { if ($dropzone.length === 1) {

View File

@ -1,7 +1,7 @@
import attachTribute from './tribute.js'; import attachTribute from './tribute.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
import {createCommentEasyMDE} from './comp/CommentEasyMDE.js'; import {createCommentEasyMDE} from './comp/EasyMDE.js';
export function initRepoRelease() { export function initRepoRelease() {
$(document).on('click', '.remove-rel-attach', function() { $(document).on('click', '.remove-rel-attach', function() {
@ -19,11 +19,13 @@ export function initRepoReleaseEditor() {
return false; return false;
} }
const $textarea = $editor.find('textarea'); (async () => {
attachTribute($textarea.get(), {mentions: false, emoji: true}); const $textarea = $editor.find('textarea');
const $files = $editor.parent().find('.files'); await attachTribute($textarea.get(), {mentions: false, emoji: true});
const easyMDE = createCommentEasyMDE($textarea); const $files = $editor.parent().find('.files');
initCompMarkupContentPreviewTab($editor); const easyMDE = await createCommentEasyMDE($textarea);
const dropzone = $editor.parent().find('.dropzone')[0]; initCompMarkupContentPreviewTab($editor);
initEasyMDEImagePaste(easyMDE, dropzone, $files); const dropzone = $editor.parent().find('.dropzone')[0];
initEasyMDEImagePaste(easyMDE, dropzone, $files);
})();
} }

View File

@ -1,186 +1,191 @@
import {initMarkupContent} from '../markup/content.js'; import {initMarkupContent} from '../markup/content.js';
import {attachEasyMDEToElements, validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; import {attachEasyMDEToElements, importEasyMDE, validateTextareaNonEmpty} from './comp/EasyMDE.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
const {csrfToken} = window.config; const {csrfToken} = window.config;
export function initRepoWikiForm() { async function initRepoWikiFormEditor() {
const $editArea = $('.repository.wiki textarea#edit_area'); const $editArea = $('.repository.wiki textarea#edit_area');
if (!$editArea.length) return;
let sideBySideChanges = 0; let sideBySideChanges = 0;
let sideBySideTimeout = null; let sideBySideTimeout = null;
let hasEasyMDE = true; let hasEasyMDE = true;
if ($editArea.length > 0) { const $form = $('.repository.wiki.new .ui.form');
const $form = $('.repository.wiki.new .ui.form'); const EasyMDE = await importEasyMDE();
const easyMDE = new window.EasyMDE({ const easyMDE = new EasyMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
element: $editArea[0], element: $editArea[0],
forceSync: true, forceSync: true,
previewRender(plainText, preview) { // Async method previewRender(plainText, preview) { // Async method
// FIXME: still send render request when return back to edit mode // FIXME: still send render request when return back to edit mode
const render = function () { const render = function () {
sideBySideChanges = 0; 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 = `<div class="markup ui segment">${data}</div>`;
initMarkupContent();
});
};
setTimeout(() => {
if (!easyMDE.isSideBySideActive()) {
render();
} else {
// delay preview by keystroke counting
sideBySideChanges++;
if (sideBySideChanges > 10) {
render();
}
// or delay preview by timeout
if (sideBySideTimeout !== null) { if (sideBySideTimeout !== null) {
clearTimeout(sideBySideTimeout); clearTimeout(sideBySideTimeout);
sideBySideTimeout = null; sideBySideTimeout = null;
} }
$.post($editArea.data('url'), { sideBySideTimeout = setTimeout(render, 600);
_csrf: csrfToken,
mode: 'gfm',
context: $editArea.data('context'),
text: plainText,
wiki: true
}, (data) => {
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
initMarkupContent();
});
};
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; }, 0);
}, if (!easyMDE.isSideBySideActive()) {
renderingConfig: { return 'Loading...';
singleLineBreaks: false }
}, return preview.innerHTML;
indentWithTabs: false, },
tabSize: 4, renderingConfig: {
spellChecker: false, singleLineBreaks: false
toolbar: ['bold', 'italic', 'strikethrough', '|', },
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', indentWithTabs: false,
{ tabSize: 4,
name: 'code-inline', spellChecker: false,
action(e) { toolbar: ['bold', 'italic', 'strikethrough', '|',
const cm = e.codemirror; 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
const selection = cm.getSelection(); {
cm.replaceSelection(`\`${selection}\``); name: 'code-inline',
if (!selection) { action(e) {
const cursorPos = cm.getCursor(); const cm = e.codemirror;
cm.setCursor(cursorPos.line, cursorPos.ch - 1); const selection = cm.getSelection();
} cm.replaceSelection(`\`${selection}\``);
cm.focus(); if (!selection) {
}, const cursorPos = cm.getCursor();
className: 'fa fa-angle-right', cm.setCursor(cursorPos.line, cursorPos.ch - 1);
title: 'Add Inline Code', }
}, 'code', 'quote', '|', { cm.focus();
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)',
}, },
{ className: 'fa fa-angle-right',
name: 'checkbox-checked', title: 'Add Inline Code',
action(e) { }, 'code', 'quote', '|', {
const cm = e.codemirror; name: 'checkbox-empty',
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); action(e) {
cm.focus(); const cm = e.codemirror;
}, cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
className: 'fa fa-check-square-o', cm.focus();
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(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
initCompMarkupContentPreviewTab($form);
},
className: 'fa fa-file',
title: 'Revert to simple textarea',
}, },
] 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(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
initCompMarkupContentPreviewTab($form);
},
className: 'fa fa-file',
title: 'Revert to simple textarea',
},
]
});
attachEasyMDEToElements(easyMDE); attachEasyMDEToElements(easyMDE);
const $mdeInputField = $(easyMDE.codemirror.getInputField()); const $mdeInputField = $(easyMDE.codemirror.getInputField());
$mdeInputField.addClass('js-quick-submit'); $mdeInputField.addClass('js-quick-submit');
$form.on('submit', () => { $form.on('submit', () => {
if (!validateTextareaNonEmpty($editArea)) { 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; return false;
} }
e.stopImmediatePropagation();
if ($toolbar.hasClass('disabled-for-preview')) {
$bPreview.trigger('click');
}
return false;
}); });
$bPrev.on('click', (e) => {
setTimeout(() => { if (!hasEasyMDE) {
const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]'); return false;
const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]'); }
const $toolbar = $('.editor-toolbar'); e.stopImmediatePropagation();
const $bPreview = $('.editor-toolbar button.preview'); if (!$toolbar.hasClass('disabled-for-preview')) {
const $bSideBySide = $('.editor-toolbar a.fa-columns'); $bPreview.trigger('click');
$bEdit.on('click', (e) => { }
if (!hasEasyMDE) { return false;
return false; });
} $bPreview.on('click', () => {
e.stopImmediatePropagation(); setTimeout(() => {
if ($toolbar.hasClass('disabled-for-preview')) { if ($toolbar.hasClass('disabled-for-preview')) {
$bPreview.trigger('click'); if ($bEdit.hasClass('active')) {
} $bEdit.removeClass('active');
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); 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; return false;
}); });
$bSideBySide.on('click', () => { $bSideBySide.on('click', () => {
sideBySideChanges = 10; sideBySideChanges = 10;
}); });
}, 0); }, 0);
} }
export function initRepoWikiForm() {
initRepoWikiFormEditor();
} }

View File

@ -60,10 +60,6 @@ export default {
'eventsource.sharedworker': [ 'eventsource.sharedworker': [
resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'), resolve(__dirname, 'web_src/js/features/eventsource.sharedworker.js'),
], ],
'easymde': [
resolve(__dirname, 'web_src/js/easymde.js'),
resolve(__dirname, 'node_modules/easymde/dist/easymde.min.css'),
],
...themes, ...themes,
}, },
devtool: false, devtool: false,