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>

public/css/theme-arc-green.css

@@ -101,8 +101,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,.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.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 .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}

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'), {
+          const render = function () {
-            _csrf: csrf,
+            sideBySideChanges = 0;
-            mode: 'gfm',
+            if (sideBySideTimeout != null) {
-            context: $editArea.data('context'),
+              clearTimeout(sideBySideTimeout);
-            text: plainText
+              sideBySideTimeout = null;
-          }, (data) => {
+            }
-            preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
+            $.post($editArea.data('url'), {
-            emojify.run($('.editor-preview')[0]);
+              _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);
-
+        if (!simplemde.isSideBySideActive()) {
-        return 'Loading...';
+          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');
   }

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 {