From 11b58a57e0e8145274d7f5b11271107a88a6bebe Mon Sep 17 00:00:00 2001 From: Michael Gnehr Date: Tue, 18 Jun 2019 18:14:09 +0200 Subject: [PATCH 1/5] 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 --- public/js/index.js | 60 +++++++++++++++++++++++++++++++++++----------- 1 file changed, 46 insertions(+), 14 deletions(-) diff --git a/public/js/index.js b/public/js/index.js index 28023e1061bbf..f4cde079e7de3 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1129,6 +1129,8 @@ function initTeamSettings() { function initWikiForm() { var $editArea = $('.repository.wiki textarea#edit_area'); + var sideBySideChanges = 0; + var sideBySideTimeout = null; if ($editArea.length > 0) { var simplemde = new SimpleMDE({ autoDownloadFontAwesome: false, @@ -1137,20 +1139,45 @@ function initWikiForm() { previewRender: function (plainText, preview) { // Async method setTimeout(function () { // 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 - }, - function (data) { - preview.innerHTML = '
' + data + '
'; - 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 + }, + function (data) { + preview.innerHTML = '
' + data + '
'; + emojify.run($('.editor-preview')[0]); + } + ); + }; + 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, 1000); + } }, 0); - - return "Loading..."; + if (!simplemde.isSideBySideActive()){ + return "Loading..."; + } else { + return preview.innerHTML; + } }, renderingConfig: { singleLineBreaks: false @@ -1163,8 +1190,13 @@ function initWikiForm() { "code", "quote", "|", "unordered-list", "ordered-list", "|", "link", "image", "table", "horizontal-rule", "|", - "clean-block", "preview", "fullscreen"] - }) + "clean-block", "preview", "fullscreen", { + name: "side-by-side", + action: SimpleMDE.toggleSideBySide, + className: "fa fa-columns no-disable no-mobile", + title: "Toggle Side by Side (F9)", + }], + }); $(simplemde.codemirror.getInputField()).addClass("js-quick-submit"); } } From 0cc350f13be21d750afb51ddd5f285e5ff22d6b6 Mon Sep 17 00:00:00 2001 From: Michael Gnehr Date: Tue, 18 Jun 2019 18:56:51 +0200 Subject: [PATCH 2/5] decrease timeinterval user need to stop before rendering is triggered Signed-off-by: Michael Gnehr --- public/js/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/index.js b/public/js/index.js index f4cde079e7de3..ed546fb413cde 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1170,7 +1170,7 @@ function initWikiForm() { clearTimeout(sideBySideTimeout); sideBySideTimeout = null; } - sideBySideTimeout = setTimeout(render, 1000); + sideBySideTimeout = setTimeout(render, 600); } }, 0); if (!simplemde.isSideBySideActive()){ From c1c0f182d1dce8a6c9e588877af80f9c34b5c70f Mon Sep 17 00:00:00 2001 From: Michael Gnehr Date: Thu, 20 Jun 2019 02:42:44 +0200 Subject: [PATCH 3/5] removed not needed code with simpleMDE placeholder Signed-off-by: Michael Gnehr --- public/js/index.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/public/js/index.js b/public/js/index.js index ed546fb413cde..8358c2ef5ed6d 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1190,12 +1190,7 @@ function initWikiForm() { "code", "quote", "|", "unordered-list", "ordered-list", "|", "link", "image", "table", "horizontal-rule", "|", - "clean-block", "preview", "fullscreen", { - name: "side-by-side", - action: SimpleMDE.toggleSideBySide, - className: "fa fa-columns no-disable no-mobile", - title: "Toggle Side by Side (F9)", - }], + "clean-block", "preview", "fullscreen", "side-by-side"], }); $(simplemde.codemirror.getInputField()).addClass("js-quick-submit"); } From 84f3b4f84cdf219428bc559e3ecc7c01e03b3758 Mon Sep 17 00:00:00 2001 From: Michael Gnehr Date: Thu, 20 Jun 2019 03:59:55 +0200 Subject: [PATCH 4/5] run highlight.js on markdown preview Signed-off-by: Michael Gnehr --- public/js/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public/js/index.js b/public/js/index.js index 8358c2ef5ed6d..eba527527b88d 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -1154,6 +1154,9 @@ function initWikiForm() { function (data) { preview.innerHTML = '
' + data + '
'; emojify.run($('.editor-preview')[0]); + $(preview).find('pre code').each(function(_,e){ + hljs.highlightBlock(e); + }); } ); }; From d4be8a7b49e77a5bef7d3895adbdef531ad6f13c Mon Sep 17 00:00:00 2001 From: Michael Gnehr Date: Fri, 28 Jun 2019 00:31:54 +0200 Subject: [PATCH 5/5] fix white border around side-by-side preview Signed-off-by: Michael Gnehr --- public/css/theme-arc-green.css | 4 ++-- public/less/themes/arc-green.less | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/public/css/theme-arc-green.css b/public/css/theme-arc-green.css index f165ea8c84bc3..cbe2d10375e72 100644 --- a/public/css/theme-arc-green.css +++ b/public/css/theme-arc-green.css @@ -96,8 +96,8 @@ footer{background:#2e323e;border-top:1px solid #313131} .markdown:not(code) table thead tr:nth-child(2n-1){background-color:#464c5d!important} .markdown:not(code) table td,.markdown:not(code) table th{border-color:#4c505c!important} .repository.file.editor.edit,.repository.wiki.new .CodeMirror{border-right:1px solid rgba(187,187,187,.6);border-left:1px solid rgba(187,187,187,.6);border-bottom:1px solid rgba(187,187,187,.6)} -.repository.file.editor.edit .editor-preview,.repository.file.editor.edit .editor-preview-side,.repository.wiki.new .CodeMirror .editor-preview,.repository.wiki.new .CodeMirror .editor-preview-side{background:#353945} -.repository.file.editor.edit .editor-preview .markdown:not(code).ui.segment,.repository.file.editor.edit .editor-preview-side .markdown:not(code).ui.segment,.repository.wiki.new .CodeMirror .editor-preview .markdown:not(code).ui.segment,.repository.wiki.new .CodeMirror .editor-preview-side .markdown:not(code).ui.segment{border-width:0} +.repository.file.editor.edit .editor-preview,.repository.file.editor.edit .editor-preview-side,.repository.file.editor.edit+.editor-preview-side,.repository.wiki.new .CodeMirror .editor-preview,.repository.wiki.new .CodeMirror .editor-preview-side,.repository.wiki.new .CodeMirror+.editor-preview-side{background:#353945} +.repository.file.editor.edit .editor-preview .markdown:not(code).ui.segment,.repository.file.editor.edit .editor-preview-side .markdown:not(code).ui.segment,.repository.file.editor.edit+.editor-preview-side .markdown:not(code).ui.segment,.repository.wiki.new .CodeMirror .editor-preview .markdown:not(code).ui.segment,.repository.wiki.new .CodeMirror .editor-preview-side .markdown:not(code).ui.segment,.repository.wiki.new .CodeMirror+.editor-preview-side .markdown:not(code).ui.segment{border-width:0} .ui.dropdown .menu{background:#2c303a} .ui.dropdown .menu>.message:not(.ui){color:#636363} .ui.input{color:#dbdbdb} diff --git a/public/less/themes/arc-green.less b/public/less/themes/arc-green.less index e4f3095154d5f..0cd4ff7e89a73 100644 --- a/public/less/themes/arc-green.less +++ b/public/less/themes/arc-green.less @@ -521,7 +521,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 {