Introduce GitHub markdown editor, keep EasyMDE as fallback (#23876)
The first step of the plan * #23290 Thanks to @silverwind for the first try in #15394 . Close #10729 and a lot of related issues. The EasyMDE is not removed, now it works as a fallback, users can switch between these two editors. Editor list: * Issue / PR comment * Issue / PR comment edit * Issue / PR comment quote reply * PR diff view, inline comment * PR diff view, inline comment edit * PR diff view, inline comment quote reply * Release editor * Wiki editor Some editors have attached dropzone Screenshots: <details>     </details> --------- Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang
GitHub
parent
d67e40684f
commit
5cc0801de9
46 changed files with 763 additions and 833 deletions
|
|
@ -1,194 +1,68 @@
|
|||
import $ from 'jquery';
|
||||
import {initMarkupContent} from '../markup/content.js';
|
||||
import {attachEasyMDEToElements, codeMirrorQuickSubmit, importEasyMDE, validateTextareaNonEmpty} from './comp/EasyMDE.js';
|
||||
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
|
||||
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
|
||||
|
||||
const {csrfToken} = window.config;
|
||||
|
||||
async function initRepoWikiFormEditor() {
|
||||
const $editArea = $('.repository.wiki textarea#edit_area');
|
||||
const $editArea = $('.repository.wiki .combo-markdown-editor textarea');
|
||||
if (!$editArea.length) return;
|
||||
|
||||
let sideBySideChanges = 0;
|
||||
let sideBySideTimeout = null;
|
||||
let hasEasyMDE = true;
|
||||
|
||||
const $form = $('.repository.wiki.new .ui.form');
|
||||
const EasyMDE = await importEasyMDE();
|
||||
const easyMDE = new EasyMDE({
|
||||
autoDownloadFontAwesome: false,
|
||||
element: $editArea[0],
|
||||
forceSync: true,
|
||||
previewRender(plainText, preview) { // Async method
|
||||
// FIXME: still send render request when return back to edit mode
|
||||
const render = function () {
|
||||
sideBySideChanges = 0;
|
||||
if (sideBySideTimeout !== null) {
|
||||
clearTimeout(sideBySideTimeout);
|
||||
sideBySideTimeout = null;
|
||||
}
|
||||
$.post($editArea.data('url'), {
|
||||
_csrf: csrfToken,
|
||||
mode: 'gfm',
|
||||
context: $editArea.data('context'),
|
||||
text: plainText,
|
||||
wiki: true
|
||||
}, (data) => {
|
||||
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
|
||||
initMarkupContent();
|
||||
});
|
||||
};
|
||||
const $editorContainer = $form.find('.combo-markdown-editor');
|
||||
let editor;
|
||||
|
||||
setTimeout(() => {
|
||||
if (!easyMDE.isSideBySideActive()) {
|
||||
render();
|
||||
} else {
|
||||
// delay preview by keystroke counting
|
||||
sideBySideChanges++;
|
||||
if (sideBySideChanges > 10) {
|
||||
render();
|
||||
}
|
||||
// or delay preview by timeout
|
||||
if (sideBySideTimeout !== null) {
|
||||
clearTimeout(sideBySideTimeout);
|
||||
sideBySideTimeout = null;
|
||||
}
|
||||
sideBySideTimeout = setTimeout(render, 600);
|
||||
}
|
||||
}, 0);
|
||||
if (!easyMDE.isSideBySideActive()) {
|
||||
return 'Loading...';
|
||||
}
|
||||
return preview.innerHTML;
|
||||
let renderRequesting = false;
|
||||
let lastContent;
|
||||
const renderEasyMDEPreview = function () {
|
||||
if (renderRequesting) return;
|
||||
|
||||
const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active');
|
||||
const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side');
|
||||
const $previewTarget = $previewSide.length ? $previewSide : $previewFull;
|
||||
const newContent = $editArea.val();
|
||||
if (editor && $previewTarget.length && lastContent !== newContent) {
|
||||
renderRequesting = true;
|
||||
$.post(editor.previewUrl, {
|
||||
_csrf: csrfToken,
|
||||
mode: editor.previewMode,
|
||||
context: editor.previewContext,
|
||||
text: newContent,
|
||||
wiki: editor.previewWiki,
|
||||
}).done((data) => {
|
||||
lastContent = newContent;
|
||||
$previewTarget.html(`<div class="markup ui segment">${data}</div>`);
|
||||
initMarkupContent();
|
||||
}).always(() => {
|
||||
renderRequesting = false;
|
||||
setTimeout(renderEasyMDEPreview, 1000);
|
||||
});
|
||||
} else {
|
||||
setTimeout(renderEasyMDEPreview, 1000);
|
||||
}
|
||||
};
|
||||
renderEasyMDEPreview();
|
||||
|
||||
editor = await initComboMarkdownEditor($editorContainer, {
|
||||
previewMode: 'gfm',
|
||||
previewWiki: true,
|
||||
easyMDEOptions: {
|
||||
previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render
|
||||
toolbar: ['bold', 'italic', 'strikethrough', '|',
|
||||
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
|
||||
'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
|
||||
'unordered-list', 'ordered-list', '|',
|
||||
'link', 'image', 'table', 'horizontal-rule', '|',
|
||||
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
|
||||
],
|
||||
},
|
||||
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', '|',
|
||||
{
|
||||
name: 'code-inline',
|
||||
action(e) {
|
||||
const cm = e.codemirror;
|
||||
const selection = cm.getSelection();
|
||||
cm.replaceSelection(`\`${selection}\``);
|
||||
if (!selection) {
|
||||
const cursorPos = cm.getCursor();
|
||||
cm.setCursor(cursorPos.line, cursorPos.ch - 1);
|
||||
}
|
||||
cm.focus();
|
||||
},
|
||||
className: 'fa fa-angle-right',
|
||||
title: 'Add Inline Code',
|
||||
}, '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', 'preview', 'fullscreen', 'side-by-side', '|',
|
||||
{
|
||||
name: 'revert-to-textarea',
|
||||
action(e) {
|
||||
e.toTextArea();
|
||||
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>`);
|
||||
initCompMarkupContentPreviewTab($form);
|
||||
},
|
||||
className: 'fa fa-file',
|
||||
title: 'Revert to simple textarea',
|
||||
},
|
||||
]
|
||||
});
|
||||
|
||||
easyMDE.codemirror.setOption('extraKeys', {
|
||||
'Cmd-Enter': codeMirrorQuickSubmit,
|
||||
'Ctrl-Enter': codeMirrorQuickSubmit,
|
||||
});
|
||||
|
||||
attachEasyMDEToElements(easyMDE);
|
||||
|
||||
$form.on('submit', () => {
|
||||
if (!validateTextareaNonEmpty($editArea)) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');
|
||||
const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');
|
||||
const $toolbar = $('.editor-toolbar');
|
||||
const $bPreview = $('.editor-toolbar button.preview');
|
||||
const $bSideBySide = $('.editor-toolbar a.fa-columns');
|
||||
$bEdit.on('click', (e) => {
|
||||
if (!hasEasyMDE) {
|
||||
return false;
|
||||
}
|
||||
e.stopImmediatePropagation();
|
||||
if ($toolbar.hasClass('disabled-for-preview')) {
|
||||
$bPreview.trigger('click');
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
$bPrev.on('click', (e) => {
|
||||
if (!hasEasyMDE) {
|
||||
return false;
|
||||
}
|
||||
e.stopImmediatePropagation();
|
||||
if (!$toolbar.hasClass('disabled-for-preview')) {
|
||||
$bPreview.trigger('click');
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$bPreview.on('click', () => {
|
||||
setTimeout(() => {
|
||||
if ($toolbar.hasClass('disabled-for-preview')) {
|
||||
if ($bEdit.hasClass('active')) {
|
||||
$bEdit.removeClass('active');
|
||||
}
|
||||
if (!$bPrev.hasClass('active')) {
|
||||
$bPrev.addClass('active');
|
||||
}
|
||||
} else {
|
||||
if (!$bEdit.hasClass('active')) {
|
||||
$bEdit.addClass('active');
|
||||
}
|
||||
if ($bPrev.hasClass('active')) {
|
||||
$bPrev.removeClass('active');
|
||||
}
|
||||
}
|
||||
}, 0);
|
||||
|
||||
return false;
|
||||
});
|
||||
$bSideBySide.on('click', () => {
|
||||
sideBySideChanges = 10;
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
export function initRepoWikiForm() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue