code.gitea.io/gitea@v1.21.7/web_src/js/features/repo-wiki.js (about) 1 import $ from 'jquery'; 2 import {initMarkupContent} from '../markup/content.js'; 3 import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js'; 4 import {fomanticMobileScreen} from '../modules/fomantic.js'; 5 6 const {csrfToken} = window.config; 7 8 async function initRepoWikiFormEditor() { 9 const $editArea = $('.repository.wiki .combo-markdown-editor textarea'); 10 if (!$editArea.length) return; 11 12 const $form = $('.repository.wiki.new .ui.form'); 13 const $editorContainer = $form.find('.combo-markdown-editor'); 14 let editor; 15 16 let renderRequesting = false; 17 let lastContent; 18 const renderEasyMDEPreview = function () { 19 if (renderRequesting) return; 20 21 const $previewFull = $editorContainer.find('.EasyMDEContainer .editor-preview-active'); 22 const $previewSide = $editorContainer.find('.EasyMDEContainer .editor-preview-active-side'); 23 const $previewTarget = $previewSide.length ? $previewSide : $previewFull; 24 const newContent = $editArea.val(); 25 if (editor && $previewTarget.length && lastContent !== newContent) { 26 renderRequesting = true; 27 $.post(editor.previewUrl, { 28 _csrf: csrfToken, 29 mode: editor.previewMode, 30 context: editor.previewContext, 31 text: newContent, 32 wiki: editor.previewWiki, 33 }).done((data) => { 34 lastContent = newContent; 35 $previewTarget.html(`<div class="markup ui segment">${data}</div>`); 36 initMarkupContent(); 37 }).always(() => { 38 renderRequesting = false; 39 setTimeout(renderEasyMDEPreview, 1000); 40 }); 41 } else { 42 setTimeout(renderEasyMDEPreview, 1000); 43 } 44 }; 45 renderEasyMDEPreview(); 46 47 editor = await initComboMarkdownEditor($editorContainer, { 48 useScene: 'wiki', 49 // EasyMDE has some problems of height definition, it has inline style height 300px by default, so we also use inline styles to override it. 50 // And another benefit is that we only need to write the style once for both editors. 51 // TODO: Move height style to CSS after EasyMDE removal. 52 editorHeights: {minHeight: '300px', height: 'calc(100vh - 600px)'}, 53 previewMode: 'gfm', 54 previewWiki: true, 55 easyMDEOptions: { 56 previewRender: (_content, previewTarget) => previewTarget.innerHTML, // disable builtin preview render 57 toolbar: ['bold', 'italic', 'strikethrough', '|', 58 'heading-1', 'heading-2', 'heading-3', 'heading-bigger', 'heading-smaller', '|', 59 'gitea-code-inline', 'code', 'quote', '|', 'gitea-checkbox-empty', 'gitea-checkbox-checked', '|', 60 'unordered-list', 'ordered-list', '|', 61 'link', 'image', 'table', 'horizontal-rule', '|', 62 'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea' 63 ], 64 }, 65 }); 66 67 $form.on('submit', () => { 68 if (!validateTextareaNonEmpty($editArea)) { 69 return false; 70 } 71 }); 72 } 73 74 function collapseWikiTocForMobile(collapse) { 75 if (collapse) { 76 document.querySelector('.wiki-content-toc details')?.removeAttribute('open'); 77 } 78 } 79 80 export function initRepoWikiForm() { 81 if (!document.querySelector('.page-content.repository.wiki')) return; 82 83 fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches)); 84 collapseWikiTocForMobile(fomanticMobileScreen.matches); 85 86 initRepoWikiFormEditor(); 87 }