forgejo/web_src/js/features/repo-wiki.js
wxiaoguang 93eb914438
Improve markdown editor: width, height, preferred (#23895)
Follow #23876


1. Fine tune the heights of the editors (like before)
    * Auto expand the editor (increase/decrease the height) when editing
2. Remember user's last used editor (textarea/easymde) in LocalStorage,
then next time the editor will be switched automatically
* No need to introduce extra config option, it satisfies all users,
including who prefer EasyMDE
3. Also fix the width problem of Review Panel

Screenshot:

<details>


![image](https://user-images.githubusercontent.com/2114189/229518585-2e05827e-8355-48f3-a20c-2c8b9e60ce74.png)


![image](https://user-images.githubusercontent.com/2114189/229518173-4caa6da7-6ad9-40e9-bf1a-ceddfcd4b37f.png)


![image](https://user-images.githubusercontent.com/2114189/229507886-148e9b84-9b58-46d1-ba3f-727e1396f476.png)


![image](https://user-images.githubusercontent.com/2114189/229518258-9f522294-1e64-4b06-91ab-ab43b0353aaa.png)


![image](https://user-images.githubusercontent.com/2114189/229507752-6d540ac7-7748-4bb6-bc09-28acab32d31b.png)


![image](https://user-images.githubusercontent.com/2114189/229510899-de322af5-57e8-4dc5-9a61-771a3b1bee79.png)


</details>

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-04-07 13:03:29 -04:00

75 lines
2.8 KiB
JavaScript

import $ from 'jquery';
import {initMarkupContent} from '../markup/content.js';
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
const {csrfToken} = window.config;
async function initRepoWikiFormEditor() {
const $editArea = $('.repository.wiki .combo-markdown-editor textarea');
if (!$editArea.length) return;
const $form = $('.repository.wiki.new .ui.form');
const $editorContainer = $form.find('.combo-markdown-editor');
let editor;
let renderRequesting = false;
let lastContent;
const renderEasyMDEPreview = function () {
if (renderRequesting) return;
const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active');
const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side');
const $previewTarget = $previewSide.length ? $previewSide : $previewFull;
const newContent = $editArea.val();
if (editor && $previewTarget.length && lastContent !== newContent) {
renderRequesting = true;
$.post(editor.previewUrl, {
_csrf: csrfToken,
mode: editor.previewMode,
context: editor.previewContext,
text: newContent,
wiki: editor.previewWiki,
}).done((data) => {
lastContent = newContent;
$previewTarget.html(`<div class="markup ui segment">${data}</div>`);
initMarkupContent();
}).always(() => {
renderRequesting = false;
setTimeout(renderEasyMDEPreview, 1000);
});
} else {
setTimeout(renderEasyMDEPreview, 1000);
}
};
renderEasyMDEPreview();
editor = await initComboMarkdownEditor($editorContainer, {
useScene: 'wiki',
// EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it.
// And another benefit is that we only need to write the style once for both editors.
// TODO: Move height style to CSS after EasyMDE removal.
editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'},
previewMode: 'gfm',
previewWiki: true,
easyMDEOptions: {
previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render
toolbar: ['bold', 'italic', 'strikethrough', '|',
'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|',
'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|',
'unordered-list', 'ordered-list', '|',
'link', 'image', 'table', 'horizontal-rule', '|',
'clean-block', 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea'
],
},
});
$form.on('submit', () => {
if (!validateTextareaNonEmpty($editArea)) {
return false;
}
});
}
export function initRepoWikiForm() {
initRepoWikiFormEditor();
}