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>
release/v1.15
Cherrg 2019-11-16 03:20:07 +01:00 committed by Lunny Xiao
parent 11208f3381
commit 6fbfffeeb8
5 changed files with 48 additions and 17 deletions

View File

@ -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 thead tr:nth-child(2n-1){background-color:#464c5d!important}
.markdown:not(code) table td,.markdown:not(code) table th{border-color:#4c505c!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,.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{background:#2c303a}
.ui.dropdown .menu>.message:not(.ui){color:#636363} .ui.dropdown .menu>.message:not(.ui){color:#636363}
.ui.input{color:#dbdbdb} .ui.input{color:#dbdbdb}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1134,6 +1134,8 @@ function initTeamSettings() {
function initWikiForm() { function initWikiForm() {
const $editArea = $('.repository.wiki textarea#edit_area'); const $editArea = $('.repository.wiki textarea#edit_area');
let sideBySideChanges = 0;
let sideBySideTimeout = null;
if ($editArea.length > 0) { if ($editArea.length > 0) {
const simplemde = new SimpleMDE({ const simplemde = new SimpleMDE({
autoDownloadFontAwesome: false, autoDownloadFontAwesome: false,
@ -1142,18 +1144,46 @@ function initWikiForm() {
previewRender(plainText, preview) { // Async method previewRender(plainText, preview) { // Async method
setTimeout(() => { setTimeout(() => {
// 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 () {
sideBySideChanges = 0;
if (sideBySideTimeout != null) {
clearTimeout(sideBySideTimeout);
sideBySideTimeout = null;
}
$.post($editArea.data('url'), { $.post($editArea.data('url'), {
_csrf: csrf, _csrf: csrf,
mode: 'gfm', mode: 'gfm',
context: $editArea.data('context'), context: $editArea.data('context'),
text: plainText text: plainText
}, (data) => { },
(data) => {
preview.innerHTML = `<div class="markdown ui segment">${data}</div>`; preview.innerHTML = `<div class="markdown ui segment">${data}</div>`;
emojify.run($('.editor-preview')[0]); 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); }, 0);
if (!simplemde.isSideBySideActive()) {
return 'Loading...'; return 'Loading...';
}
return preview.innerHTML;
}, },
renderingConfig: { renderingConfig: {
singleLineBreaks: false singleLineBreaks: false
@ -1199,7 +1229,7 @@ function initWikiForm() {
}, '|', }, '|',
'unordered-list', 'ordered-list', '|', 'unordered-list', 'ordered-list', '|',
'link', 'image', 'table', 'horizontal-rule', '|', 'link', 'image', 'table', 'horizontal-rule', '|',
'clean-block', 'preview', 'fullscreen'] 'clean-block', 'preview', 'fullscreen', 'side-by-side']
}); });
$(simplemde.codemirror.getInputField()).addClass('js-quick-submit'); $(simplemde.codemirror.getInputField()).addClass('js-quick-submit');
} }

View File

@ -553,7 +553,8 @@ a.ui.basic.green.label:hover {
border-bottom: 1px solid rgba(187, 187, 187, 0.6); border-bottom: 1px solid rgba(187, 187, 187, 0.6);
.editor-preview, .editor-preview,
.editor-preview-side { .editor-preview-side,
& + .editor-preview-side {
background: #353945; background: #353945;
.markdown:not(code).ui.segment { .markdown:not(code).ui.segment {