|
|
|
@ -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); |