123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164 |
- import $ from 'jquery';
- import attachTribute from '../tribute.js';
- import {handleGlobalEnterQuickSubmit} from '../common-global.js';
-
- /**
- * @returns {EasyMDE}
- */
- export async function importEasyMDE() {
- // EasyMDE's CSS should be loaded via webpack config, otherwise our own styles can
- // not overwrite the default styles.
- const {default: EasyMDE} = await import(/* webpackChunkName: "easymde" */'easymde');
- return EasyMDE;
- }
-
- /**
- * create an EasyMDE editor for comment
- * @param textarea jQuery or HTMLElement
- * @param easyMDEOptions the options for EasyMDE
- * @returns {null|EasyMDE}
- */
- export async function createCommentEasyMDE(textarea, easyMDEOptions = {}) {
- if (textarea instanceof $) {
- 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',
- },
- ], ...easyMDEOptions});
-
- const inputField = easyMDE.codemirror.getInputField();
-
- easyMDE.codemirror.setOption('extraKeys', {
- 'Cmd-Enter': codeMirrorQuickSubmit,
- 'Ctrl-Enter': codeMirrorQuickSubmit,
- Enter: (cm) => {
- const tributeContainer = document.querySelector('.tribute-container');
- if (!tributeContainer || tributeContainer.style.display === 'none') {
- cm.execCommand('newlineAndIndent');
- }
- },
- 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 $) {
- 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;
- }
-
- /**
- * there is no guarantee that the CodeMirror object is inside the same form as the textarea,
- * so can not call handleGlobalEnterQuickSubmit directly.
- * @param {CodeMirror.EditorFromTextArea} codeMirror
- */
- export function codeMirrorQuickSubmit(codeMirror) {
- handleGlobalEnterQuickSubmit(codeMirror.getTextArea());
- }
|