-
-
Notifications
You must be signed in to change notification settings - Fork 5.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
6e895b5
commit 5f40044
Showing
3 changed files
with
168 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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(); | ||
| } |