git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
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
Download patch file Download diff file Expand all files Collapse all files

60
web_src/js/features/comp/CommentEasyMDE.js → web_src/js/features/comp/EasyMDE.js
View file

@ -1,11 +1,58 @@
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
* @param textarea jQuery or HTMLElement
* @returns {null|EasyMDE}
*/
export function createCommentEasyMDE(textarea) {
export async function createCommentEasyMDE(textarea) {
if (textarea instanceof jQuery) {
textarea = textarea[0];
}
@ -13,12 +60,13 @@ export function createCommentEasyMDE(textarea) {
return null;
}
const easyMDE = new window.EasyMDE({
const EasyMDE = await importEasyMDE();
const easyMDE = new EasyMDE({
autoDownloadFontAwesome: false,
element: textarea,
forceSync: true,
renderingConfig: {
singleLineBreaks: false
singleLineBreaks: false,
},
indentWithTabs: false,
tabSize: 4,
@ -56,7 +104,7 @@ export function createCommentEasyMDE(textarea) {
className: 'fa fa-file',
title: 'Revert to simple textarea',
},
]
],
});
const inputField = easyMDE.codemirror.getInputField();
inputField.classList.add('js-quick-submit');
@ -64,7 +112,7 @@ export function createCommentEasyMDE(textarea) {
Enter: () => {
const tributeContainer = document.querySelector('.tribute-container');
if (!tributeContainer || tributeContainer.style.display === 'none') {
return CodeMirror.Pass;
return window.CodeMirror.Pass;
}
},
Backspace: (cm) => {
@ -72,7 +120,7 @@ export function createCommentEasyMDE(textarea) {
cm.getInputField().trigger('input');
}
cm.execCommand('delCharBefore');
}
},
});
attachTribute(inputField, {mentions: true, emoji: true});
attachEasyMDEToElements(easyMDE);