gitea/web_src/js/features/comp/EasyMDE.js

179 lines
5.5 KiB
JavaScript
Raw Normal View History

import $ from 'jquery';
import {attachTribute} from '../tribute.js';
import {handleGlobalEnterQuickSubmit} from './QuickSubmit.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,
inputStyle: 'contenteditable', // nativeSpellcheck requires contenteditable
nativeSpellcheck: true,
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');
},
Up: (cm) => {
const tributeContainer = document.querySelector('.tribute-container');
if (!tributeContainer || tributeContainer.style.display === 'none') {
return cm.execCommand('goLineUp');
}
},
Down: (cm) => {
const tributeContainer = document.querySelector('.tribute-container');
if (!tributeContainer || tributeContainer.style.display === 'none') {
return cm.execCommand('goLineDown');
}
},
});
Support Issue forms and PR forms (#20987) * feat: extend issue template for yaml * feat: support yaml template * feat: render form to markdown * feat: support yaml template for pr * chore: rename to Fields * feat: template unmarshal * feat: split template * feat: render to markdown * feat: use full name as template file name * chore: remove useless file * feat: use dropdown of fomantic ui * feat: update input style * docs: more comments * fix: render text without render * chore: fix lint error * fix: support use description as about in markdown * fix: add field class in form * chore: generate swagger * feat: validate template * feat: support is_nummber and regex * test: fix broken unit tests * fix: ignore empty body of md template * fix: make multiple easymde editors work in one page * feat: better UI * fix: js error in pr form * chore: generate swagger * feat: support regex validation * chore: generate swagger * fix: refresh each markdown editor * chore: give up required validation * fix: correct issue template candidates * fix: correct checkboxes style * chore: ignore .hugo_build.lock in docs * docs: separate out a new doc for merge templates * docs: introduce syntax of yaml template * feat: show a alert for invalid templates * test: add case for a valid template * fix: correct attributes of required checkbox * fix: add class not-under-easymde for dropzone * fix: use more back-quotes * chore: remove translation in zh-CN * fix EasyMDE statusbar margin * fix: remove repeated blocks * fix: reuse regex for quotes Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2022-09-02 09:58:49 +02:00
await attachTribute(inputField, {mentions: true, emoji: true});
2022-01-03 17:53:53 +01:00
attachEasyMDEToElements(easyMDE);
return easyMDE;
}
2022-01-03 17:53:53 +01:00
/**
* 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
2022-01-03 17:53:53 +01:00
// InputField is used by CodeMirror to accept user input
const inputField = easyMDE.codemirror.getInputField();
inputField._data_easyMDE = easyMDE;
2022-01-03 17:53:53 +01:00
// TextArea is the real textarea element in the form
const textArea = easyMDE.codemirror.getTextArea();
textArea._data_easyMDE = easyMDE;
}
2022-01-03 17:53:53 +01:00
/**
* 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;
}
/**
2022-01-03 17:53:53 +01:00
* validate if the given EasyMDE textarea is is non-empty.
* @param {jQuery} $textarea
* @returns {boolean} returns true if validation succeeded.
*/
2022-01-03 17:53:53 +01:00
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
2022-01-03 17:53:53 +01: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();
}
return false;
}
2022-01-03 17:53:53 +01:00
$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());
}