Load EasyMDE/CodeMirror dynamically, remove RequireEasyMDE (#18069)
This PR makes frontend load EasyMDE/CodeMirror dynamically, and removes `RequireEasyMDE`.tokarchuk/v1.17
wxiaoguang
3 years ago
committed by
GitHub
parent
0572c78938
commit
a38ba634a4
@ -1,7 +0,0 @@ |
||||
import EasyMDE from 'easymde'; |
||||
|
||||
import CodeMirror from 'codemirror/lib/codemirror.js'; |
||||
|
||||
window.EasyMDE = EasyMDE; |
||||
window.CodeMirror = CodeMirror; |
||||
|
||||
@ -1,186 +1,191 @@ |
||||
import {initMarkupContent} from '../markup/content.js'; |
||||
import {attachEasyMDEToElements, validateTextareaNonEmpty} from './comp/CommentEasyMDE.js'; |
||||
import {attachEasyMDEToElements, importEasyMDE, validateTextareaNonEmpty} from './comp/EasyMDE.js'; |
||||
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; |
||||
|
||||
const {csrfToken} = window.config; |
||||
|
||||
export function initRepoWikiForm() { |
||||
async function initRepoWikiFormEditor() { |
||||
const $editArea = $('.repository.wiki textarea#edit_area'); |
||||
if (!$editArea.length) return; |
||||
|
||||
let sideBySideChanges = 0; |
||||
let sideBySideTimeout = null; |
||||
let hasEasyMDE = true; |
||||
|
||||
if ($editArea.length > 0) { |
||||
const $form = $('.repository.wiki.new .ui.form'); |
||||
const easyMDE = new window.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; |
||||
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(); |
||||
}); |
||||
}; |
||||
|
||||
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; |
||||
} |
||||
$.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(); |
||||
}); |
||||
}; |
||||
|
||||
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...'; |
||||
sideBySideTimeout = setTimeout(render, 600); |
||||
} |
||||
return preview.innerHTML; |
||||
}, |
||||
renderingConfig: { |
||||
singleLineBreaks: false |
||||
}, 0); |
||||
if (!easyMDE.isSideBySideActive()) { |
||||
return 'Loading...'; |
||||
} |
||||
return preview.innerHTML; |
||||
}, |
||||
renderingConfig: { |
||||
singleLineBreaks: false |
||||
}, |
||||
indentWithTabs: false, |
||||
tabSize: 4, |
||||
spellChecker: false, |
||||
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)', |
||||
}, |
||||
indentWithTabs: false, |
||||
tabSize: 4, |
||||
spellChecker: false, |
||||
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(); |
||||
}, |
||||
{ |
||||
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', |
||||
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', |
||||
}, |
||||
] |
||||
}); |
||||
|
||||
attachEasyMDEToElements(easyMDE); |
||||
|
||||
attachEasyMDEToElements(easyMDE); |
||||
const $mdeInputField = $(easyMDE.codemirror.getInputField()); |
||||
$mdeInputField.addClass('js-quick-submit'); |
||||
|
||||
const $mdeInputField = $(easyMDE.codemirror.getInputField()); |
||||
$mdeInputField.addClass('js-quick-submit'); |
||||
$form.on('submit', () => { |
||||
if (!validateTextareaNonEmpty($editArea)) { |
||||
return false; |
||||
} |
||||
}); |
||||
|
||||
$form.on('submit', () => { |
||||
if (!validateTextareaNonEmpty($editArea)) { |
||||
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'); |
||||
} |
||||
|
||||
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(); |
||||
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')) { |
||||
$bPreview.trigger('click'); |
||||
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; |
||||
}); |
||||
$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); |
||||
} |
||||
|
||||
return false; |
||||
}); |
||||
$bSideBySide.on('click', () => { |
||||
sideBySideChanges = 10; |
||||
}); |
||||
}, 0); |
||||
} |
||||
export function initRepoWikiForm() { |
||||
initRepoWikiFormEditor(); |
||||
} |
||||
|
||||
Loading…
Reference in new issue