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 {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'; |
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; |
||||||
|
|
||||||
const {csrfToken} = window.config; |
const {csrfToken} = window.config; |
||||||
|
|
||||||
export function initRepoWikiForm() { |
async function initRepoWikiFormEditor() { |
||||||
const $editArea = $('.repository.wiki textarea#edit_area'); |
const $editArea = $('.repository.wiki textarea#edit_area'); |
||||||
|
if (!$editArea.length) return; |
||||||
|
|
||||||
let sideBySideChanges = 0; |
let sideBySideChanges = 0; |
||||||
let sideBySideTimeout = null; |
let sideBySideTimeout = null; |
||||||
let hasEasyMDE = true; |
let hasEasyMDE = true; |
||||||
|
|
||||||
if ($editArea.length > 0) { |
const $form = $('.repository.wiki.new .ui.form'); |
||||||
const $form = $('.repository.wiki.new .ui.form'); |
const EasyMDE = await importEasyMDE(); |
||||||
const easyMDE = new window.EasyMDE({ |
const easyMDE = new EasyMDE({ |
||||||
autoDownloadFontAwesome: false, |
autoDownloadFontAwesome: false, |
||||||
element: $editArea[0], |
element: $editArea[0], |
||||||
forceSync: true, |
forceSync: true, |
||||||
previewRender(plainText, preview) { // Async method
|
previewRender(plainText, preview) { // Async method
|
||||||
// FIXME: still send render request when return back to edit mode
|
// FIXME: still send render request when return back to edit mode
|
||||||
const render = function () { |
const render = function () { |
||||||
sideBySideChanges = 0; |
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) { |
if (sideBySideTimeout !== null) { |
||||||
clearTimeout(sideBySideTimeout); |
clearTimeout(sideBySideTimeout); |
||||||
sideBySideTimeout = null; |
sideBySideTimeout = null; |
||||||
} |
} |
||||||
$.post($editArea.data('url'), { |
sideBySideTimeout = setTimeout(render, 600); |
||||||
_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...'; |
|
||||||
} |
} |
||||||
return preview.innerHTML; |
}, 0); |
||||||
}, |
if (!easyMDE.isSideBySideActive()) { |
||||||
renderingConfig: { |
return 'Loading...'; |
||||||
singleLineBreaks: false |
} |
||||||
|
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, |
name: 'checkbox-checked', |
||||||
spellChecker: false, |
action(e) { |
||||||
toolbar: ['bold', 'italic', 'strikethrough', '|', |
const cm = e.codemirror; |
||||||
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', |
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); |
||||||
{ |
cm.focus(); |
||||||
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)', |
|
||||||
}, |
}, |
||||||
{ |
className: 'fa fa-check-square-o', |
||||||
name: 'checkbox-checked', |
title: 'Add Checkbox (checked)', |
||||||
action(e) { |
}, '|', |
||||||
const cm = e.codemirror; |
'unordered-list', 'ordered-list', '|', |
||||||
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`); |
'link', 'image', 'table', 'horizontal-rule', '|', |
||||||
cm.focus(); |
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', |
||||||
}, |
{ |
||||||
className: 'fa fa-check-square-o', |
name: 'revert-to-textarea', |
||||||
title: 'Add Checkbox (checked)', |
action(e) { |
||||||
}, '|', |
e.toTextArea(); |
||||||
'unordered-list', 'ordered-list', '|', |
hasEasyMDE = false; |
||||||
'link', 'image', 'table', 'horizontal-rule', '|', |
const $root = $form.find('.field.content'); |
||||||
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', |
const loading = $root.data('loading'); |
||||||
{ |
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`); |
||||||
name: 'revert-to-textarea', |
initCompMarkupContentPreviewTab($form); |
||||||
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-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()); |
$form.on('submit', () => { |
||||||
$mdeInputField.addClass('js-quick-submit'); |
if (!validateTextareaNonEmpty($editArea)) { |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
$form.on('submit', () => { |
setTimeout(() => { |
||||||
if (!validateTextareaNonEmpty($editArea)) { |
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; |
return false; |
||||||
} |
} |
||||||
}); |
e.stopImmediatePropagation(); |
||||||
|
if ($toolbar.hasClass('disabled-for-preview')) { |
||||||
|
$bPreview.trigger('click'); |
||||||
|
} |
||||||
|
|
||||||
setTimeout(() => { |
return false; |
||||||
const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]'); |
}); |
||||||
const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]'); |
$bPrev.on('click', (e) => { |
||||||
const $toolbar = $('.editor-toolbar'); |
if (!hasEasyMDE) { |
||||||
const $bPreview = $('.editor-toolbar button.preview'); |
return false; |
||||||
const $bSideBySide = $('.editor-toolbar a.fa-columns'); |
} |
||||||
$bEdit.on('click', (e) => { |
e.stopImmediatePropagation(); |
||||||
if (!hasEasyMDE) { |
if (!$toolbar.hasClass('disabled-for-preview')) { |
||||||
return false; |
$bPreview.trigger('click'); |
||||||
} |
} |
||||||
e.stopImmediatePropagation(); |
return false; |
||||||
|
}); |
||||||
|
$bPreview.on('click', () => { |
||||||
|
setTimeout(() => { |
||||||
if ($toolbar.hasClass('disabled-for-preview')) { |
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; |
return false; |
||||||
}); |
}); |
||||||
$bPrev.on('click', (e) => { |
$bSideBySide.on('click', () => { |
||||||
if (!hasEasyMDE) { |
sideBySideChanges = 10; |
||||||
return false; |
}); |
||||||
} |
}, 0); |
||||||
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; |
export function initRepoWikiForm() { |
||||||
}); |
initRepoWikiFormEditor(); |
||||||
$bSideBySide.on('click', () => { |
|
||||||
sideBySideChanges = 10; |
|
||||||
}); |
|
||||||
}, 0); |
|
||||||
} |
|
||||||
} |
} |
||||||
|
|||||||
Loading…
Reference in new issue