2021-10-17 01:28:04 +08:00
|
|
|
import {initMarkupContent} from '../markup/content.js';
|
2022-01-04 00:53:53 +08:00
|
|
|
import {attachEasyMDEToElements, validateTextareaNonEmpty} from './comp/CommentEasyMDE.js';
|
2021-10-17 01:28:04 +08:00
|
|
|
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
|
|
|
|
|
2021-10-21 15:37:43 +08:00
|
|
|
const {csrfToken} = window.config;
|
2021-10-17 01:28:04 +08:00
|
|
|
|
|
|
|
export function initRepoWikiForm() {
|
|
|
|
const $editArea = $('.repository.wiki textarea#edit_area');
|
|
|
|
let sideBySideChanges = 0;
|
|
|
|
let sideBySideTimeout = null;
|
2021-12-10 10:51:27 +08:00
|
|
|
let hasEasyMDE = true;
|
2021-10-27 12:33:22 +08:00
|
|
|
|
2021-10-17 01:28:04 +08:00
|
|
|
if ($editArea.length > 0) {
|
2021-10-27 12:33:22 +08:00
|
|
|
const $form = $('.repository.wiki.new .ui.form');
|
2021-12-10 10:51:27 +08:00
|
|
|
const easyMDE = new window.EasyMDE({
|
2021-10-17 01:28:04 +08:00
|
|
|
autoDownloadFontAwesome: false,
|
|
|
|
element: $editArea[0],
|
|
|
|
forceSync: true,
|
|
|
|
previewRender(plainText, preview) { // Async method
|
|
|
|
// 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'), {
|
2021-10-21 15:37:43 +08:00
|
|
|
_csrf: csrfToken,
|
2021-10-17 01:28:04 +08:00
|
|
|
mode: 'gfm',
|
|
|
|
context: $editArea.data('context'),
|
|
|
|
text: plainText,
|
|
|
|
wiki: true
|
|
|
|
}, (data) => {
|
|
|
|
preview.innerHTML = `<div class="markup ui segment">${data}</div>`;
|
|
|
|
initMarkupContent();
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
setTimeout(() => {
|
2021-12-10 10:51:27 +08:00
|
|
|
if (!easyMDE.isSideBySideActive()) {
|
2021-10-17 01:28:04 +08:00
|
|
|
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);
|
2021-12-10 10:51:27 +08:00
|
|
|
if (!easyMDE.isSideBySideActive()) {
|
2021-10-17 01:28:04 +08:00
|
|
|
return 'Loading...';
|
|
|
|
}
|
|
|
|
return preview.innerHTML;
|
|
|
|
},
|
|
|
|
renderingConfig: {
|
|
|
|
singleLineBreaks: false
|
|
|
|
},
|
|
|
|
indentWithTabs: false,
|
|
|
|
tabSize: 4,
|
|
|
|
spellChecker: false,
|
|
|
|
toolbar: ['bold', 'italic', 'strikethrough', '|',
|
|
|
|
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
|
|
|
|
{
|
|
|
|
name: 'code-inline',
|
|
|
|
action(e) {
|
|
|
|
const cm = e.codemirror;
|
|
|
|
const selection = cm.getSelection();
|
|
|
|
cm.replaceSelection(`\`${selection}\``);
|
|
|
|
if (!selection) {
|
|
|
|
const cursorPos = cm.getCursor();
|
|
|
|
cm.setCursor(cursorPos.line, cursorPos.ch - 1);
|
|
|
|
}
|
|
|
|
cm.focus();
|
|
|
|
},
|
|
|
|
className: 'fa fa-angle-right',
|
|
|
|
title: 'Add Inline Code',
|
|
|
|
}, 'code', 'quote', '|', {
|
|
|
|
name: 'checkbox-empty',
|
|
|
|
action(e) {
|
|
|
|
const cm = e.codemirror;
|
|
|
|
cm.replaceSelection(`\n- [ ] ${cm.getSelection()}`);
|
|
|
|
cm.focus();
|
|
|
|
},
|
|
|
|
className: 'fa fa-square-o',
|
|
|
|
title: 'Add Checkbox (empty)',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'checkbox-checked',
|
|
|
|
action(e) {
|
|
|
|
const cm = e.codemirror;
|
|
|
|
cm.replaceSelection(`\n- [x] ${cm.getSelection()}`);
|
|
|
|
cm.focus();
|
|
|
|
},
|
|
|
|
className: 'fa fa-check-square-o',
|
|
|
|
title: 'Add Checkbox (checked)',
|
|
|
|
}, '|',
|
|
|
|
'unordered-list', 'ordered-list', '|',
|
|
|
|
'link', 'image', 'table', 'horizontal-rule', '|',
|
|
|
|
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|',
|
|
|
|
{
|
|
|
|
name: 'revert-to-textarea',
|
|
|
|
action(e) {
|
|
|
|
e.toTextArea();
|
2021-12-10 10:51:27 +08:00
|
|
|
hasEasyMDE = false;
|
2021-10-17 01:28:04 +08:00
|
|
|
const $root = $form.find('.field.content');
|
|
|
|
const loading = $root.data('loading');
|
|
|
|
$root.append(`<div class="ui bottom tab markup" data-tab="preview">${loading}</div>`);
|
|
|
|
initCompMarkupContentPreviewTab($form);
|
|
|
|
},
|
|
|
|
className: 'fa fa-file',
|
|
|
|
title: 'Revert to simple textarea',
|
|
|
|
},
|
|
|
|
]
|
|
|
|
});
|
2021-10-27 12:33:22 +08:00
|
|
|
|
2022-01-04 00:53:53 +08:00
|
|
|
attachEasyMDEToElements(easyMDE);
|
2021-10-27 12:33:22 +08:00
|
|
|
|
2022-01-04 00:53:53 +08:00
|
|
|
const $mdeInputField = $(easyMDE.codemirror.getInputField());
|
|
|
|
$mdeInputField.addClass('js-quick-submit');
|
|
|
|
|
|
|
|
$form.on('submit', () => {
|
|
|
|
if (!validateTextareaNonEmpty($editArea)) {
|
|
|
|
return false;
|
|
|
|
}
|
2021-10-27 12:33:22 +08:00
|
|
|
});
|
2021-10-17 01:28:04 +08:00
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
const $bEdit = $('.repository.wiki.new .previewtabs a[data-tab="write"]');
|
|
|
|
const $bPrev = $('.repository.wiki.new .previewtabs a[data-tab="preview"]');
|
|
|
|
const $toolbar = $('.editor-toolbar');
|
|
|
|
const $bPreview = $('.editor-toolbar button.preview');
|
|
|
|
const $bSideBySide = $('.editor-toolbar a.fa-columns');
|
|
|
|
$bEdit.on('click', (e) => {
|
2021-12-10 10:51:27 +08:00
|
|
|
if (!hasEasyMDE) {
|
2021-10-17 01:28:04 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
if ($toolbar.hasClass('disabled-for-preview')) {
|
|
|
|
$bPreview.trigger('click');
|
|
|
|
}
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
$bPrev.on('click', (e) => {
|
2021-12-10 10:51:27 +08:00
|
|
|
if (!hasEasyMDE) {
|
2021-10-17 01:28:04 +08:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
e.stopImmediatePropagation();
|
|
|
|
if (!$toolbar.hasClass('disabled-for-preview')) {
|
|
|
|
$bPreview.trigger('click');
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
$bPreview.on('click', () => {
|
|
|
|
setTimeout(() => {
|
|
|
|
if ($toolbar.hasClass('disabled-for-preview')) {
|
|
|
|
if ($bEdit.hasClass('active')) {
|
|
|
|
$bEdit.removeClass('active');
|
|
|
|
}
|
|
|
|
if (!$bPrev.hasClass('active')) {
|
|
|
|
$bPrev.addClass('active');
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (!$bEdit.hasClass('active')) {
|
|
|
|
$bEdit.addClass('active');
|
|
|
|
}
|
|
|
|
if ($bPrev.hasClass('active')) {
|
|
|
|
$bPrev.removeClass('active');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}, 0);
|
|
|
|
|
|
|
|
return false;
|
|
|
|
});
|
|
|
|
$bSideBySide.on('click', () => {
|
|
|
|
sideBySideChanges = 10;
|
|
|
|
});
|
|
|
|
}, 0);
|
|
|
|
}
|
|
|
|
}
|