1
0
mirror of https://github.com/go-gitea/gitea.git synced 2025-05-08 08:31:53 +00:00
wxiaoguang 3f9c3e7bc3
Refactor render system ()
There were too many patches to the Render system, it's really difficult
to make further improvements.

This PR clears the legacy problems and fix TODOs.

1. Rename `RenderContext.Type` to `RenderContext.MarkupType` to clarify
its usage.
2. Use `ContentMode` to replace `meta["mode"]` and `IsWiki`, to clarify
the rendering behaviors.
3. Use "wiki" mode instead of "mode=gfm + wiki=true"
4. Merge `renderByType` and `renderByFile`
5. Add more comments

----

The problem of "mode=document": in many cases it is not set, so many
non-comment places use comment's hard line break incorrectly
2024-11-14 05:02:11 +00:00

88 lines
3.5 KiB
TypeScript

import {initMarkupContent} from '../markup/content.ts';
import {validateTextareaNonEmpty, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {fomanticMobileScreen} from '../modules/fomantic.ts';
import {POST} from '../modules/fetch.ts';
async function initRepoWikiFormEditor() {
const editArea = document.querySelector<HTMLTextAreaElement>('.repository.wiki .combo-markdown-editor textarea');
if (!editArea) return;
const form = document.querySelector('.repository.wiki.new .ui.form');
const editorContainer = form.querySelector<HTMLElement>('.combo-markdown-editor');
let editor;
let renderRequesting = false;
let lastContent;
const renderEasyMDEPreview = async function () {
if (renderRequesting) return;
const previewFull = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active');
const previewSide = editorContainer.querySelector('.EasyMDEContainer .editor-preview-active-side');
const previewTarget = previewSide || previewFull;
const newContent = editArea.value;
if (editor && previewTarget && lastContent !== newContent) {
renderRequesting = true;
const formData = new FormData();
formData.append('mode', editor.previewMode);
formData.append('context', editor.previewContext);
formData.append('text', newContent);
try {
const response = await POST(editor.previewUrl, {data: formData});
const data = await response.text();
lastContent = newContent;
previewTarget.innerHTML = `<div class="markup ui segment">${data}</div>`;
initMarkupContent();
} catch (error) {
console.error('Error rendering preview:', error);
} finally {
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: 'wiki',
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', '|',
'preview', 'fullscreen', 'side-by-side', '|', 'gitea-switch-to-textarea',
],
},
});
form.addEventListener('submit', (e) => {
if (!validateTextareaNonEmpty(editArea)) {
e.preventDefault();
e.stopPropagation();
}
});
}
function collapseWikiTocForMobile(collapse) {
if (collapse) {
document.querySelector('.wiki-content-toc details')?.removeAttribute('open');
}
}
export function initRepoWikiForm() {
if (!document.querySelector('.page-content.repository.wiki')) return;
fomanticMobileScreen.addEventListener('change', (e) => collapseWikiTocForMobile(e.matches));
collapseWikiTocForMobile(fomanticMobileScreen.matches);
initRepoWikiFormEditor();
}