mirror of
https://github.com/go-gitea/gitea
synced 2024-12-23 15:44:19 +01:00
0a9fcf63a4
Since we are using EasyMDE now, we do not need to keep the SimpleMDE code anymore. This PR removes all legacy SimpleMDE code, and makes some related changes: * `createCommentEasyMDE` can accept native DOM element, and it doesn't need `jQuery.data` to store EasyMDE editor object (as discussed about the frontend guideline). * introduce `getAttachedEasyMDE` to get the attached EasyMDE editor object, it's easier to find all the usage of EasyMDE. * rename variable names from `$simplemde` to `easyMDE`, the `$` was incorrect because it is a EasyMDE editor, not a jQuery object. With this PR, it will be easier to do more refactoring or replacing EasyMDE with other editors.
98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
import attachTribute from '../tribute.js';
|
|
|
|
/**
|
|
* create an EasyMDE editor for comment
|
|
* @param textarea jQuery or HTMLElement
|
|
* @returns {null|EasyMDE}
|
|
*/
|
|
export function createCommentEasyMDE(textarea) {
|
|
if (textarea instanceof jQuery) {
|
|
textarea = textarea[0];
|
|
}
|
|
if (!textarea) {
|
|
return null;
|
|
}
|
|
|
|
const easyMDE = new window.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 CodeMirror.Pass;
|
|
}
|
|
},
|
|
Backspace: (cm) => {
|
|
if (cm.getInputField().trigger) {
|
|
cm.getInputField().trigger('input');
|
|
}
|
|
cm.execCommand('delCharBefore');
|
|
}
|
|
});
|
|
attachTribute(inputField, {mentions: true, emoji: true});
|
|
|
|
// TODO: that's the only way we can do now to attach the EasyMDE object to a HTMLElement
|
|
inputField._data_easyMDE = easyMDE;
|
|
textarea._data_easyMDE = easyMDE;
|
|
return 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;
|
|
}
|