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 // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can not overwrite the default styles. const [{default: EasyMDE}, {default: CodeMirror}] = await Promise.all([ import(/* webpackChunkName: "easymde" */'easymde'), import(/* webpackChunkName: "codemirror" */'codemirror'), ]); // 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 async function createCommentEasyMDE(textarea) { if (textarea instanceof jQuery) { textarea = textarea[0]; } if (!textarea) { return null; } const EasyMDE = await importEasyMDE(); const easyMDE = new EasyMDE({ autoDownloadFontAwesome: false, element: textarea, forceSync: true, renderingConfig: { singleLineBreaks: false, }, indentWithTabs: false, tabSize: 4, spellChecker: false, toolbar: ['bold', 'italic', 'strikethrough', '|', 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', 'code', 'quote', '|', { 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)', }, { 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', '|', { name: 'revert-to-textarea', action(e) { e.toTextArea(); }, className: 'fa fa-file', title: 'Revert to simple textarea', }, ], }); const inputField = easyMDE.codemirror.getInputField(); inputField.classList.add('js-quick-submit'); easyMDE.codemirror.setOption('extraKeys', { Enter: () => { const tributeContainer = document.querySelector('.tribute-container'); if (!tributeContainer || tributeContainer.style.display === 'none') { return window.CodeMirror.Pass; } }, Backspace: (cm) => { if (cm.getInputField().trigger) { cm.getInputField().trigger('input'); } cm.execCommand('delCharBefore'); }, }); attachTribute(inputField, {mentions: true, emoji: true}); attachEasyMDEToElements(easyMDE); return easyMDE; } /** * attach the EasyMDE object to its input elements (InputField, TextArea) * @param {EasyMDE} easyMDE */ export function attachEasyMDEToElements(easyMDE) { // TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement // InputField is used by CodeMirror to accept user input const inputField = easyMDE.codemirror.getInputField(); inputField._data_easyMDE = easyMDE; // TextArea is the real textarea element in the form const textArea = easyMDE.codemirror.getTextArea(); textArea._data_easyMDE = easyMDE; } /** * get the attached EasyMDE editor created by createCommentEasyMDE * @param el jQuery or HTMLElement * @returns {null|EasyMDE} */ export function getAttachedEasyMDE(el) { if (el instanceof jQuery) { el = el[0]; } if (!el) { return null; } return el._data_easyMDE; } /** * validate if the given EasyMDE textarea is is non-empty. * @param {jQuery} $textarea * @returns {boolean} returns true if validation succeeded. */ export function validateTextareaNonEmpty($textarea) { const $mdeInputField = $(getAttachedEasyMDE($textarea).codemirror.getInputField()); // The original edit area HTML element is hidden and replaced by the // SimpleMDE/EasyMDE editor, breaking HTML5 input validation if the text area is empty. // This is a workaround for this upstream bug. // See https://github.com/sparksuite/simplemde-markdown-editor/issues/324 if (!$textarea.val()) { $mdeInputField.prop('required', true); const $form = $textarea.parents('form'); if (!$form.length) { // this should never happen. we put a alert here in case the textarea would be forgotten to be put in a form alert('Require non-empty content'); } else { $form[0].reportValidity(); } return false; } $mdeInputField.prop('required', false); return true; }