2021-10-17 01:28:04 +08:00
|
|
|
import attachTribute from '../tribute.js';
|
|
|
|
|
2022-01-05 20:17:25 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
|
2021-12-10 10:51:27 +08:00
|
|
|
/**
|
|
|
|
* create an EasyMDE editor for comment
|
|
|
|
* @param textarea jQuery or HTMLElement
|
|
|
|
* @returns {null|EasyMDE}
|
|
|
|
*/
|
2022-01-05 20:17:25 +08:00
|
|
|
export async function createCommentEasyMDE(textarea) {
|
2021-12-10 10:51:27 +08:00
|
|
|
if (textarea instanceof jQuery) {
|
|
|
|
textarea = textarea[0];
|
|
|
|
}
|
|
|
|
if (!textarea) {
|
2021-10-17 01:28:04 +08:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2022-01-05 20:17:25 +08:00
|
|
|
const EasyMDE = await importEasyMDE();
|
|
|
|
const easyMDE = new EasyMDE({
|
2021-10-17 01:28:04 +08:00
|
|
|
autoDownloadFontAwesome: false,
|
2021-12-10 10:51:27 +08:00
|
|
|
element: textarea,
|
2021-10-17 01:28:04 +08:00
|
|
|
forceSync: true,
|
|
|
|
renderingConfig: {
|
2022-01-05 20:17:25 +08:00
|
|
|
singleLineBreaks: false,
|
2021-10-17 01:28:04 +08:00
|
|
|
},
|
|
|
|
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',
|
|
|
|
},
|
2022-01-05 20:17:25 +08:00
|
|
|
],
|
2021-10-17 01:28:04 +08:00
|
|
|
});
|
2021-12-10 10:51:27 +08:00
|
|
|
const inputField = easyMDE.codemirror.getInputField();
|
|
|
|
inputField.classList.add('js-quick-submit');
|
|
|
|
easyMDE.codemirror.setOption('extraKeys', {
|
2021-10-17 01:28:04 +08:00
|
|
|
Enter: () => {
|
|
|
|
const tributeContainer = document.querySelector('.tribute-container');
|
|
|
|
if (!tributeContainer || tributeContainer.style.display === 'none') {
|
2022-01-05 20:17:25 +08:00
|
|
|
return window.CodeMirror.Pass;
|
2021-10-17 01:28:04 +08:00
|
|
|
}
|
|
|
|
},
|
|
|
|
Backspace: (cm) => {
|
|
|
|
if (cm.getInputField().trigger) {
|
|
|
|
cm.getInputField().trigger('input');
|
|
|
|
}
|
|
|
|
cm.execCommand('delCharBefore');
|
2022-01-05 20:17:25 +08:00
|
|
|
},
|
2021-10-17 01:28:04 +08:00
|
|
|
});
|
2021-12-10 10:51:27 +08:00
|
|
|
attachTribute(inputField, {mentions: true, emoji: true});
|
2022-01-04 00:53:53 +08:00
|
|
|
attachEasyMDEToElements(easyMDE);
|
|
|
|
return easyMDE;
|
|
|
|
}
|
2021-12-10 10:51:27 +08:00
|
|
|
|
2022-01-04 00:53:53 +08:00
|
|
|
/**
|
|
|
|
* attach the EasyMDE object to its input elements (InputField, TextArea)
|
|
|
|
* @param {EasyMDE} easyMDE
|
|
|
|
*/
|
|
|
|
export function attachEasyMDEToElements(easyMDE) {
|
2021-12-10 10:51:27 +08:00
|
|
|
// TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
|
2022-01-04 00:53:53 +08:00
|
|
|
|
|
|
|
// InputField is used by CodeMirror to accept user input
|
|
|
|
const inputField = easyMDE.codemirror.getInputField();
|
2021-12-10 10:51:27 +08:00
|
|
|
inputField._data_easyMDE = easyMDE;
|
2022-01-04 00:53:53 +08:00
|
|
|
|
|
|
|
// TextArea is the real textarea element in the form
|
|
|
|
const textArea = easyMDE.codemirror.getTextArea();
|
|
|
|
textArea._data_easyMDE = easyMDE;
|
2021-12-10 10:51:27 +08:00
|
|
|
}
|
|
|
|
|
2022-01-04 00:53:53 +08:00
|
|
|
|
2021-12-10 10:51:27 +08:00
|
|
|
/**
|
|
|
|
* 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;
|
2021-10-17 01:28:04 +08:00
|
|
|
}
|
2022-01-03 06:31:03 +08:00
|
|
|
|
|
|
|
/**
|
2022-01-04 00:53:53 +08:00
|
|
|
* validate if the given EasyMDE textarea is is non-empty.
|
|
|
|
* @param {jQuery} $textarea
|
2022-01-03 06:31:03 +08:00
|
|
|
* @returns {boolean} returns true if validation succeeded.
|
|
|
|
*/
|
2022-01-04 00:53:53 +08:00
|
|
|
export function validateTextareaNonEmpty($textarea) {
|
|
|
|
const $mdeInputField = $(getAttachedEasyMDE($textarea).codemirror.getInputField());
|
2022-01-03 06:31:03 +08:00
|
|
|
// 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
|
2022-01-04 00:53:53 +08:00
|
|
|
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();
|
|
|
|
}
|
2022-01-03 06:31:03 +08:00
|
|
|
return false;
|
|
|
|
}
|
2022-01-04 00:53:53 +08:00
|
|
|
$mdeInputField.prop('required', false);
|
2022-01-03 06:31:03 +08:00
|
|
|
return true;
|
|
|
|
}
|