diff options
| author | Cherrg <michael@gnehr.de> | 2019-11-16 03:20:07 +0100 |
|---|---|---|
| committer | Lunny Xiao <xiaolunwen@gmail.com> | 2019-11-16 10:20:07 +0800 |
| commit | 6fbfffeeb8fa23327660e8f8e168644bc93bf42b (patch) | |
| tree | eec265cf9d24bf3def0880e7c094bf437d4beb6a /web_src | |
| parent | 11208f33818ae3fe2f32581285c358b5cfcf5992 (diff) | |
| download | gitea-6fbfffeeb8fa23327660e8f8e168644bc93bf42b.tar.gz gitea-6fbfffeeb8fa23327660e8f8e168644bc93bf42b.zip | |
wiki - editor - enable side-by-side button (#7242)
* wiki - enable side-by-side button in editor
and add some delay so side-by-side live preview is updated
* every 10th keypress
* if keypress < 10 -> apter no input for 1 sec
affects #5436
Signed-off-by: Michael Gnehr <michael@gnehr.de>
* decrease timeinterval user need to stop before rendering is triggered
Signed-off-by: Michael Gnehr <michael@gnehr.de>
* removed not needed code with simpleMDE placeholder
Signed-off-by: Michael Gnehr <michael@gnehr.de>
* run highlight.js on markdown preview
Signed-off-by: Michael Gnehr <michael@gnehr.de>
* fix white border around side-by-side preview
Signed-off-by: Michael Gnehr <michael@gnehr.de>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/js/index.js | 54 | ||||
| -rw-r--r-- | web_src/less/themes/arc-green.less | 3 |
2 files changed, 44 insertions, 13 deletions
diff --git a/web_src/js/index.js b/web_src/js/index.js index e25568d9b8..8ca46832d5 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -1134,6 +1134,8 @@ function initTeamSettings() { function initWikiForm() { const $editArea = $('.repository.wiki textarea#edit_area'); + let sideBySideChanges = 0; + let sideBySideTimeout = null; if ($editArea.length > 0) { const simplemde = new SimpleMDE({ autoDownloadFontAwesome: false, @@ -1142,18 +1144,46 @@ function initWikiForm() { previewRender(plainText, preview) { // Async method setTimeout(() => { // FIXME: still send render request when return back to edit mode - $.post($editArea.data('url'), { - _csrf: csrf, - mode: 'gfm', - context: $editArea.data('context'), - text: plainText - }, (data) => { - preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; - emojify.run($('.editor-preview')[0]); - }); + const render = function () { + sideBySideChanges = 0; + if (sideBySideTimeout != null) { + clearTimeout(sideBySideTimeout); + sideBySideTimeout = null; + } + $.post($editArea.data('url'), { + _csrf: csrf, + mode: 'gfm', + context: $editArea.data('context'), + text: plainText + }, + (data) => { + preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; + emojify.run($('.editor-preview')[0]); + $(preview).find('pre code').each((_, e) => { + hljs.highlightBlock(e); + }); + }); + }; + if (!simplemde.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); - - return 'Loading...'; + if (!simplemde.isSideBySideActive()) { + return 'Loading...'; + } + return preview.innerHTML; }, renderingConfig: { singleLineBreaks: false @@ -1199,7 +1229,7 @@ function initWikiForm() { }, '|', 'unordered-list', 'ordered-list', '|', 'link', 'image', 'table', 'horizontal-rule', '|', - 'clean-block', 'preview', 'fullscreen'] + 'clean-block', 'preview', 'fullscreen', 'side-by-side'] }); $(simplemde.codemirror.getInputField()).addClass('js-quick-submit'); } diff --git a/web_src/less/themes/arc-green.less b/web_src/less/themes/arc-green.less index 06e7c78d41..7ff9eacf09 100644 --- a/web_src/less/themes/arc-green.less +++ b/web_src/less/themes/arc-green.less @@ -553,7 +553,8 @@ a.ui.basic.green.label:hover { border-bottom: 1px solid rgba(187, 187, 187, 0.6); .editor-preview, - .editor-preview-side { + .editor-preview-side, + & + .editor-preview-side { background: #353945; .markdown:not(code).ui.segment { |