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>
This commit is contained in:
parent
11208f3381
commit
6fbfffeeb8
5 changed files with 48 additions and 17 deletions
|
@ -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 .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}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -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');
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
Reference in a new issue