test/gitea-mirror
1
0
Fork 0
mirror of https://gitea.com/gitea/gitea-mirror.git synced 2026-03-20 11:50:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix various mermaid bugs (#36547)

Browse Source 
* Fix #36515
* Fix #23076
* Remove unnecessary `mermaid.parse`
* Fix data race when using `data-render-done`
* Remove unnecessary `Promise.all`
* Fix duplicate `load` event and duplicate SVG node rendering
* Remove unnecessary `IntersectionObserver`
* Add `bindFunctions` call, the old comment seems not true
This commit is contained in:
wxiaoguang
2026-02-08 12:21:11 +08:00
committed by GitHub
parent 49e6d5f6d6
commit a60201a071
3 changed files with 74 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web_src/js/markup/codecopy.ts
View File

@@ -1,10 +1,13 @@
import {svg} from '../svg.ts'; import {svg} from '../svg.ts';
import {queryElems} from '../utils/dom.ts'; import {queryElems} from '../utils/dom.ts';
export function makeCodeCopyButton(): HTMLButtonElement { export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButtonElement {
const button = document.createElement('button'); const button = document.createElement('button');
button.classList.add('code-copy', 'ui', 'button'); button.classList.add('code-copy', 'ui', 'button');
button.innerHTML = svg('octicon-copy'); button.innerHTML = svg('octicon-copy');
for (const [key, value] of Object.entries(attrs)) {
button.setAttribute(key, value);
}
return button; return button;
} }

32
web_src/js/markup/mermaid.test.ts
View File

@@ -1,37 +1,37 @@
import {sourcesContainElk} from './mermaid.ts'; import {sourceNeedsElk} from './mermaid.ts';
import {dedent} from '../utils/testhelper.ts'; import {dedent} from '../utils/testhelper.ts';
test('sourcesContainElk', () => { test('MermaidConfigLayoutCheck', () => {
expect(sourcesContainElk([dedent(` expect(sourceNeedsElk(dedent(`
flowchart TB flowchart TB
elk --> B elk --> B
`)])).toEqual(false); `))).toEqual(false);
expect(sourcesContainElk([dedent(` expect(sourceNeedsElk(dedent(`
--- ---
config: config:
layout : elk layout : elk
--- ---
flowchart TB flowchart TB
A --> B A --> B
`)])).toEqual(true); `))).toEqual(true);
expect(sourcesContainElk([dedent(` expect(sourceNeedsElk(dedent(`
--- ---
config: config:
layout: elk.layered layout: elk.layered
--- ---
flowchart TB flowchart TB
A --> B A --> B
`)])).toEqual(true); `))).toEqual(true);
expect(sourcesContainElk([` expect(sourceNeedsElk(`
%%{ init : { "flowchart": { "defaultRenderer": "elk" } } }%% %%{ init : { "flowchart": { "defaultRenderer": "elk" } } }%%
flowchart TB flowchart TB
A --> B A --> B
`])).toEqual(true); `)).toEqual(true);
expect(sourcesContainElk([` expect(sourceNeedsElk(dedent(`
--- ---
config: config:
layout: 123 layout: 123
@@ -39,21 +39,21 @@ test('sourcesContainElk', () => {
%%{ init : { "class": { "defaultRenderer": "elk.any" } } }%% %%{ init : { "class": { "defaultRenderer": "elk.any" } } }%%
flowchart TB flowchart TB
A --> B A --> B
`])).toEqual(true); `))).toEqual(true);
expect(sourcesContainElk([` expect(sourceNeedsElk(`
%%{init:{ %%{init:{
"layout" : "elk.layered" "layout" : "elk.layered"
}}%% }}%%
flowchart TB flowchart TB
A --> B A --> B
`])).toEqual(true); `)).toEqual(true);
expect(sourcesContainElk([` expect(sourceNeedsElk(`
%%{ initialize: { %%{ initialize: {
'layout' : 'elk.layered' 'layout' : 'elk.layered'
}}%% }}%%
flowchart TB flowchart TB
A --> B A --> B
`])).toEqual(true); `)).toEqual(true);
}); });

131
web_src/js/markup/mermaid.ts
View File

@@ -1,7 +1,7 @@
import {isDarkTheme} from '../utils.ts'; import {isDarkTheme, parseDom} from '../utils.ts';
import {makeCodeCopyButton} from './codecopy.ts'; import {makeCodeCopyButton} from './codecopy.ts';
import {displayError} from './common.ts'; import {displayError} from './common.ts';
import {queryElems} from '../utils/dom.ts'; import {createElementFromAttrs, queryElems} from '../utils/dom.ts';
import {html, htmlRaw} from '../utils/html.ts'; import {html, htmlRaw} from '../utils/html.ts';
import {load as loadYaml} from 'js-yaml'; import {load as loadYaml} from 'js-yaml';
import type {MermaidConfig} from 'mermaid'; import type {MermaidConfig} from 'mermaid';
@@ -58,29 +58,18 @@ function configContainsElk(config: MermaidConfig | null) {
// * config.{any-diagram-config}.defaultRenderer // * config.{any-diagram-config}.defaultRenderer
// Although only a few diagram types like "flowchart" support "defaultRenderer", // Although only a few diagram types like "flowchart" support "defaultRenderer",
// as long as there is no side effect, here do a general check for all properties of "config", for ease of maintenance // as long as there is no side effect, here do a general check for all properties of "config", for ease of maintenance
return configValueIsElk(config.layout) || Object.values(config).some((value) => configValueIsElk(value?.defaultRenderer)); return configValueIsElk(config.layout) || Object.values(config).some((diagCfg) => configValueIsElk(diagCfg?.defaultRenderer));
} }
/** detect whether mermaid sources contain elk layout configuration */ export function sourceNeedsElk(source: string) {
export function sourcesContainElk(sources: Array<string>) { if (isSourceTooLarge(source)) return false;
for (const source of sources) { const configYaml = parseYamlInitConfig(source), configJson = parseJsonInitConfig(source);
if (isSourceTooLarge(source)) continue; return configContainsElk(configYaml) || configContainsElk(configJson);
const yamlConfig = parseYamlInitConfig(source);
if (configContainsElk(yamlConfig)) return true;
const jsonConfig = parseJsonInitConfig(source);
if (configContainsElk(jsonConfig)) return true;
}
return false;
} }
async function loadMermaid(sources: Array<string>) { async function loadMermaid(needElkRender: boolean) {
const mermaidPromise = import(/* webpackChunkName: "mermaid" */'mermaid'); const mermaidPromise = import(/* webpackChunkName: "mermaid" */'mermaid');
const elkPromise = sourcesContainElk(sources) ? const elkPromise = needElkRender ? import(/* webpackChunkName: "mermaid-layout-elk" */'@mermaid-js/layout-elk') : null;
import(/* webpackChunkName: "mermaid-layout-elk" */'@mermaid-js/layout-elk') : null;
const results = await Promise.all([mermaidPromise, elkPromise]); const results = await Promise.all([mermaidPromise, elkPromise]);
return { return {
mermaid: results[0].default, mermaid: results[0].default,
@@ -92,86 +81,74 @@ let elkLayoutsRegistered = false;
export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void> { export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void> {
// .markup code.language-mermaid // .markup code.language-mermaid
const els = Array.from(queryElems(elMarkup, 'code.language-mermaid')); const mermaidBlocks: Array<{source: string, parentContainer: HTMLElement}> = [];
if (!els.length) return; const attrMermaidRendered = 'data-markup-mermaid-rendered';
const sources = Array.from(els, (el) => el.textContent ?? ''); let needElkRender = false;
const {mermaid, elkLayouts} = await loadMermaid(sources); for (const elCodeBlock of queryElems(elMarkup, 'code.language-mermaid')) {
const parentContainer = elCodeBlock.closest('pre')!; // it must exist, if no, there must be a bug
if (parentContainer.hasAttribute(attrMermaidRendered)) continue;
parentContainer.setAttribute(attrMermaidRendered, 'true');
const source = elCodeBlock.textContent ?? '';
needElkRender = needElkRender || sourceNeedsElk(source);
mermaidBlocks.push({source, parentContainer});
}
if (!mermaidBlocks.length) return;
const {mermaid, elkLayouts} = await loadMermaid(needElkRender);
if (elkLayouts && !elkLayoutsRegistered) { if (elkLayouts && !elkLayoutsRegistered) {
mermaid.registerLayoutLoaders(elkLayouts); mermaid.registerLayoutLoaders(elkLayouts);
elkLayoutsRegistered = true; elkLayoutsRegistered = true;
} }
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, startOnLoad: false,
theme: isDarkTheme() ? 'dark' : 'neutral', theme: isDarkTheme() ? 'dark' : 'neutral', // TODO: maybe it should use "darkMode" to adopt more user-specified theme instead of just "dark" or "neutral"
securityLevel: 'strict', securityLevel: 'strict',
suppressErrorRendering: true, suppressErrorRendering: true,
}); });
await Promise.all(els.map(async (el, index) => { // mermaid is a globally shared instance, its document also says "Multiple calls to this function will be enqueued to run serially."
const source = sources[index]; // so here we just simply render the mermaid blocks one by one, no need to do "Promise.all" concurrently
const pre = el.closest('pre'); for (const block of mermaidBlocks) {
const {source, parentContainer} = block;
if (!pre || pre.hasAttribute('data-render-done')) {
return;
}
if (isSourceTooLarge(source)) { if (isSourceTooLarge(source)) {
displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`)); displayError(parentContainer, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
return; continue;
} }
try { try {
await mermaid.parse(source); // render the mermaid diagram to svg text, and parse it to a DOM node
} catch (err) { const {svg: svgText, bindFunctions} = await mermaid.render('mermaid', source, parentContainer);
displayError(pre, err); const svgDoc = parseDom(svgText, 'image/svg+xml');
return; const svgNode = (svgDoc.documentElement as unknown) as SVGSVGElement;
}
try {
// can't use bindFunctions here because we can't cross the iframe boundary. This
// means js-based interactions won't work but they aren't intended to work either
const {svg} = await mermaid.render('mermaid', source);
// create an iframe to sandbox the svg with styles, and set correct height by reading svg's viewBox height
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.classList.add('markup-content-iframe', 'tw-invisible'); iframe.classList.add('markup-content-iframe', 'is-loading');
iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeCss)}</style></head><body>${htmlRaw(svg)}</body></html>`; iframe.srcdoc = html`<html><head><style>${htmlRaw(iframeCss)}</style></head><body></body></html>`;
const mermaidBlock = document.createElement('div'); // although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
mermaidBlock.append(iframe); if (iframeHeightFromViewBox) iframe.style.height = `${iframeHeightFromViewBox}px`;
const btn = makeCodeCopyButton();
btn.setAttribute('data-clipboard-text', source);
mermaidBlock.append(btn);
const updateIframeHeight = () => {
const body = iframe.contentWindow?.document?.body;
if (body) {
iframe.style.height = `${body.clientHeight}px`;
}
};
// the iframe will be fully reloaded if its DOM context is changed (e.g.: moved in the DOM tree).
// to avoid unnecessary reloading, we should insert the iframe to its final position only once.
iframe.addEventListener('load', () => { iframe.addEventListener('load', () => {
pre.replaceWith(mermaidBlock); // same origin, so we can operate "iframe body" and all elements directly
mermaidBlock.classList.remove('tw-hidden'); const iframeBody = iframe.contentDocument!.body;
updateIframeHeight(); iframeBody.append(svgNode);
setTimeout(() => { // avoid flash of iframe background bindFunctions?.(iframeBody); // follow "mermaid.render" doc, attach event handlers to the svg's container
mermaidBlock.classList.remove('is-loading');
iframe.classList.remove('tw-invisible');
}, 0);
// update height when element's visibility state changes, for example when the diagram is inside // according to mermaid, the viewBox height should always exist, here just a fallback for unknown cases.
// a <details> + <summary> block and the <details> block becomes visible upon user interaction, it // and keep in mind: clientHeight can be 0 if the element is hidden (display: none).
// would initially set a incorrect height and the correct height is set during this callback. if (!iframeHeightFromViewBox && iframeBody.clientHeight) iframe.style.height = `${iframeBody.clientHeight}px`;
(new IntersectionObserver(() => { iframe.classList.remove('is-loading');
updateIframeHeight();
}, {root: document.documentElement})).observe(iframe);
}); });
document.body.append(mermaidBlock); const container = createElementFromAttrs('div', {class: 'mermaid-block'}, iframe, makeCodeCopyButton({'data-clipboard-text': source}));
parentContainer.replaceWith(container);
} catch (err) { } catch (err) {
displayError(pre, err); displayError(parentContainer, err);
} }
})); }
} }