nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Refactor markdown math render (#32831)

Browse source 
Add more tests
This commit is contained in:
wxiaoguang 2024-12-14 13:43:05 +08:00 • committed by GitHub
parent 82c59d52ea
commit cc5ff98e0d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 137 additions and 151 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web_src/js/markup/math.ts
View file

@ -1,8 +1,14 @@
import {displayError} from './common.ts';
function targetElement(el: Element) {
function targetElement(el: Element): {target: Element, displayAsBlock: boolean} {
// The target element is either the parent "code block with loading indicator", or itself
return el.closest('.code-block.is-loading') ?? el;
// It is designed to work for 2 cases (guaranteed by backend code):
// * <pre class="code-block is-loading"><code class="language-math display">...</code></pre>
// * <code class="language-math">...</code>
return {
target: el.closest('.code-block.is-loading') ?? el,
displayAsBlock: el.classList.contains('display'),
};
}
export async function renderMath(): Promise<void> {
@ -19,7 +25,7 @@ export async function renderMath(): Promise<void> {
const MAX_EXPAND = 1000;
for (const el of els) {
const target = targetElement(el);
const {target, displayAsBlock} = targetElement(el);
if (target.hasAttribute('data-render-done')) continue;
const source = el.textContent;
@ -27,16 +33,12 @@ export async function renderMath(): Promise<void> {
displayError(target, new Error(`Math source of ${source.length} characters exceeds the maximum allowed length of ${MAX_CHARS}.`));
continue;
}
const displayMode = el.classList.contains('display');
const nodeName = displayMode ? 'p' : 'span';
try {
const tempEl = document.createElement(nodeName);
const tempEl = document.createElement(displayAsBlock ? 'p' : 'span');
katex.render(source, tempEl, {
maxSize: MAX_SIZE,
maxExpand: MAX_EXPAND,
displayMode,
displayMode: displayAsBlock, // katex: true for display (block) mode, false for inline mode
});
target.replaceWith(tempEl);
} catch (error) {