domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Clean legacy SimpleMDE code (#17926)

Browse source 
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.
This commit is contained in:
wxiaoguang 2021-12-10 10:51:27 +08:00 • committed by GitHub
parent 719bddcd76
commit 0a9fcf63a4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 104 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

46
web_src/js/features/comp/CommentSimpleMDE.js → web_src/js/features/comp/CommentEasyMDE.js
View file

@ -1,13 +1,21 @@
import attachTribute from '../tribute.js';
export function createCommentSimpleMDE($editArea) {
if ($editArea.length === 0) {
/**
* 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 simplemde = new SimpleMDE({
const easyMDE = new window.EasyMDE({
autoDownloadFontAwesome: false,
element: $editArea[0],
element: textarea,
forceSync: true,
renderingConfig: {
singleLineBreaks: false
@ -50,8 +58,9 @@ export function createCommentSimpleMDE($editArea) {
},
]
});
$(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
simplemde.codemirror.setOption('extraKeys', {
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') {
@ -65,8 +74,25 @@ export function createCommentSimpleMDE($editArea) {
cm.execCommand('delCharBefore');
}
});
attachTribute(simplemde.codemirror.getInputField(), {mentions: true, emoji: true});
$editArea.data('simplemde', simplemde);
$(simplemde.codemirror.getInputField()).data('simplemde', simplemde);
return simplemde;
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;
}

8
web_src/js/features/comp/ImagePaste.js
View file

@ -76,14 +76,14 @@ export function initCompImagePaste($target) {
});
}
export function initSimpleMDEImagePaste(simplemde, dropzone, files) {
export function initEasyMDEImagePaste(easyMDE, dropzone, files) {
const uploadUrl = dropzone.getAttribute('data-upload-url');
simplemde.codemirror.on('paste', async (_, e) => {
easyMDE.codemirror.on('paste', async (_, e) => {
for (const img of clipboardPastedImages(e)) {
const name = img.name.substr(0, img.name.lastIndexOf('.'));
const data = await uploadFile(img, uploadUrl);
const pos = simplemde.codemirror.getCursor();
simplemde.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
const pos = easyMDE.codemirror.getCursor();
easyMDE.codemirror.replaceRange(`![${name}](/attachments/${data.uuid})`, pos);
const input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
files.append(input);
}

23
web_src/js/features/repo-issue.js
View file

@ -1,6 +1,6 @@
import {htmlEscape} from 'escape-goat';
import attachTribute from './tribute.js';
import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
import {initCompImagePaste} from './comp/ImagePaste.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
@ -213,8 +213,8 @@ export function initRepoIssueStatusButton() {
// Change status
const $statusButton = $('#status-button');
$('#comment-form textarea').on('keyup', function () {
const $simplemde = $(this).data('simplemde');
const value = ($simplemde && $simplemde.value()) ? $simplemde.value() : $(this).val();
const easyMDE = getAttachedEasyMDE(this);
const value = easyMDE?.value() || $(this).val();
$statusButton.text($statusButton.data(value.length === 0 ? 'status' : 'status-and-comment'));
});
$statusButton.on('click', () => {
@ -445,22 +445,19 @@ export function initRepoPullRequestReview() {
const form = $(this).closest('.comment-code-cloud').find('.comment-form');
form.removeClass('hide');
const $textarea = form.find('textarea');
let $simplemde;
if ($textarea.data('simplemde')) {
$simplemde = $textarea.data('simplemde');
} else {
let easyMDE = getAttachedEasyMDE($textarea);
if (!easyMDE) {
attachTribute($textarea.get(), {mentions: true, emoji: true});
$simplemde = createCommentSimpleMDE($textarea);
$textarea.data('simplemde', $simplemde);
easyMDE = createCommentEasyMDE($textarea);
}
$textarea.focus();
$simplemde.codemirror.focus();
easyMDE.codemirror.focus();
assignMenuAttributes(form.find('.menu'));
});
const $reviewBox = $('.review-box');
if ($reviewBox.length === 1) {
createCommentSimpleMDE($reviewBox.find('textarea'));
createCommentEasyMDE($reviewBox.find('textarea'));
initCompImagePaste($reviewBox);
}
@ -519,9 +516,9 @@ export function initRepoPullRequestReview() {
td.find("input[name='path']").val(path);
const $textarea = commentCloud.find('textarea');
attachTribute($textarea.get(), {mentions: true, emoji: true});
const $simplemde = createCommentSimpleMDE($textarea);
const easyMDE = createCommentEasyMDE($textarea);
$textarea.focus();
$simplemde.codemirror.focus();
easyMDE.codemirror.focus();
}
});
}

40
web_src/js/features/repo-legacy.js
View file

@ -1,6 +1,6 @@
import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/CommentEasyMDE.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initCompImagePaste, initSimpleMDEImagePaste} from './comp/ImagePaste.js';
import {initCompImagePaste, initEasyMDEImagePaste} from './comp/ImagePaste.js';
import {
initRepoIssueBranchSelect, initRepoIssueCodeCommentCancel,
initRepoIssueCommentDelete,
@ -63,7 +63,7 @@ export function initRepoCommentForm() {
});
}
createCommentSimpleMDE($('.comment.form textarea:not(.review-textarea)'));
createCommentEasyMDE($('.comment.form textarea:not(.review-textarea)'));
initBranchSelector();
initCompMarkupContentPreviewTab($('.comment.form'));
initCompImagePaste($('.comment.form'));
@ -262,7 +262,7 @@ async function onEditContent(event) {
const $renderContent = $segment.find('.render-content');
const $rawContent = $segment.find('.raw-content');
let $textarea;
let $simplemde;
let easyMDE;
// Setup new form
if ($editContentZone.html().length === 0) {
@ -341,11 +341,11 @@ async function onEditContent(event) {
$tabMenu.find('.preview.item').attr('data-tab', $editContentZone.data('preview'));
$editContentForm.find('.write').attr('data-tab', $editContentZone.data('write'));
$editContentForm.find('.preview').attr('data-tab', $editContentZone.data('preview'));
$simplemde = createCommentSimpleMDE($textarea);
easyMDE = createCommentEasyMDE($textarea);
initCompMarkupContentPreviewTab($editContentForm);
if ($dropzone.length === 1) {
initSimpleMDEImagePaste($simplemde, $dropzone[0], $dropzone.find('.files'));
initEasyMDEImagePaste(easyMDE, $dropzone[0], $dropzone.find('.files'));
}
$editContentZone.find('.cancel.button').on('click', () => {
@ -395,7 +395,7 @@ async function onEditContent(event) {
});
} else {
$textarea = $segment.find('textarea');
$simplemde = $textarea.data('simplemde');
easyMDE = getAttachedEasyMDE($textarea);
}
// Show write/preview tab and copy raw content as needed
@ -403,11 +403,11 @@ async function onEditContent(event) {
$renderContent.hide();
if ($textarea.val().length === 0) {
$textarea.val($rawContent.text());
$simplemde.value($rawContent.text());
easyMDE.value($rawContent.text());
}
requestAnimationFrame(() => {
$textarea.focus();
$simplemde.codemirror.focus();
easyMDE.codemirror.focus();
});
}
@ -527,9 +527,9 @@ export function initRepository() {
$(this).parent().hide();
const $form = $repoComparePull.find('.pullrequest-form');
const $simplemde = $form.find('textarea.edit_area').data('simplemde');
const easyMDE = getAttachedEasyMDE($form.find('textarea.edit_area'));
$form.show();
$simplemde.codemirror.refresh();
easyMDE.codemirror.refresh();
});
}
}
@ -547,24 +547,24 @@ function initRepoIssueCommentEdit() {
const target = $(this).data('target');
const quote = $(`#comment-${target}`).text().replace(/\n/g, '\n> ');
const content = `> ${quote}\n\n`;
let $simplemde;
let easyMDE;
if ($(this).hasClass('quote-reply-diff')) {
const $parent = $(this).closest('.comment-code-cloud');
$parent.find('button.comment-form-reply').trigger('click');
$simplemde = $parent.find('[name="content"]').data('simplemde');
easyMDE = getAttachedEasyMDE($parent.find('[name="content"]'));
} else {
// for normal issue/comment page
$simplemde = $('#comment-form .edit_area').data('simplemde');
easyMDE = getAttachedEasyMDE($('#comment-form .edit_area'));
}
if ($simplemde) {
if ($simplemde.value() !== '') {
$simplemde.value(`${$simplemde.value()}\n\n${content}`);
if (easyMDE) {
if (easyMDE.value() !== '') {
easyMDE.value(`${easyMDE.value()}\n\n${content}`);
} else {
$simplemde.value(`${content}`);
easyMDE.value(`${content}`);
}
requestAnimationFrame(() => {
$simplemde.codemirror.focus();
$simplemde.codemirror.setCursor($simplemde.codemirror.lineCount(), 0);
easyMDE.codemirror.focus();
easyMDE.codemirror.setCursor(easyMDE.codemirror.lineCount(), 0);
});
}
event.preventDefault();

8
web_src/js/features/repo-release.js
View file

@ -1,7 +1,7 @@
import attachTribute from './tribute.js';
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
import {initSimpleMDEImagePaste} from './comp/ImagePaste.js';
import {createCommentSimpleMDE} from './comp/CommentSimpleMDE.js';
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
import {createCommentEasyMDE} from './comp/CommentEasyMDE.js';
export function initRepoRelease() {
$(document).on('click', '.remove-rel-attach', function() {
@ -22,8 +22,8 @@ export function initRepoReleaseEditor() {
const $textarea = $editor.find('textarea');
attachTribute($textarea.get(), {mentions: false, emoji: true});
const $files = $editor.parent().find('.files');
const $simplemde = createCommentSimpleMDE($textarea);
const easyMDE = createCommentEasyMDE($textarea);
initCompMarkupContentPreviewTab($editor);
const dropzone = $editor.parent().find('.dropzone')[0];
initSimpleMDEImagePaste($simplemde, dropzone, $files);
initEasyMDEImagePaste(easyMDE, dropzone, $files);
}

18
web_src/js/features/repo-wiki.js
View file

@ -7,11 +7,11 @@ export function initRepoWikiForm() {
const $editArea = $('.repository.wiki textarea#edit_area');
let sideBySideChanges = 0;
let sideBySideTimeout = null;
let hasSimpleMDE = true;
let hasEasyMDE = true;
if ($editArea.length > 0) {
const $form = $('.repository.wiki.new .ui.form');
const simplemde = new SimpleMDE({
const easyMDE = new window.EasyMDE({
autoDownloadFontAwesome: false,
element: $editArea[0],
forceSync: true,
@ -36,7 +36,7 @@ export function initRepoWikiForm() {
};
setTimeout(() => {
if (!simplemde.isSideBySideActive()) {
if (!easyMDE.isSideBySideActive()) {
render();
} else {
// delay preview by keystroke counting
@ -52,7 +52,7 @@ export function initRepoWikiForm() {
sideBySideTimeout = setTimeout(render, 600);
}
}, 0);
if (!simplemde.isSideBySideActive()) {
if (!easyMDE.isSideBySideActive()) {
return 'Loading...';
}
return preview.innerHTML;
@ -106,7 +106,7 @@ export function initRepoWikiForm() {
name: 'revert-to-textarea',
action(e) {
e.toTextArea();
hasSimpleMDE = false;
hasEasyMDE = false;
const $root = $form.find('.field.content');
const loading = $root.data('loading');
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
@ -118,12 +118,12 @@ export function initRepoWikiForm() {
]
});
const $markdownEditorTextArea = $(simplemde.codemirror.getInputField());
const $markdownEditorTextArea = $(easyMDE.codemirror.getInputField());
$markdownEditorTextArea.addClass('js-quick-submit');
$form.on('submit', function (e) {
// The original edit area HTML element is hidden and replaced by the
// SimpleMDE editor, breaking HTML5 input validation if the text area is empty.
// 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
const input = $editArea.val();
@ -143,7 +143,7 @@ export function initRepoWikiForm() {
const $bPreview = $('.editor-toolbar button.preview');
const $bSideBySide = $('.editor-toolbar a.fa-columns');
$bEdit.on('click', (e) => {
if (!hasSimpleMDE) {
if (!hasEasyMDE) {
return false;
}
e.stopImmediatePropagation();
@ -154,7 +154,7 @@ export function initRepoWikiForm() {
return false;
});
$bPrev.on('click', (e) => {
if (!hasSimpleMDE) {
if (!hasEasyMDE) {
return false;
}
e.stopImmediatePropagation();