Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-12 06:52:57 +02:00
Code Issues Activity

Fix various mermaid bugs (#36547) (#36552)

Browse Source 
Backport #36547
This commit is contained in:
wxiaoguang 2026-02-08 19:24:35 +08:00 committed by GitHub
parent dcce96c08d
commit 4098032aa8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
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 {queryElems} from '../utils/dom.ts';
@ -43,12 +43,19 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
try { try {
// can't use bindFunctions here because we can't cross the iframe boundary. This // 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 // means js-based interactions won't work but they aren't intended to work either
const {svg} = await mermaid.render('mermaid', source); const {svg} = await mermaid.render('mermaid', source, pre);
const svgDoc = parseDom(svg, 'image/svg+xml');
const svgNode = (svgDoc.documentElement as unknown) as SVGSVGElement;
const iframe = document.createElement('iframe'); const iframe = document.createElement('iframe');
iframe.classList.add('markup-content-iframe', 'tw-invisible'); iframe.classList.add('markup-content-iframe', 'tw-invisible');
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>${htmlRaw(svg)}</body></html>`;
// although the "viewBox" is optional, mermaid's output should always have a correct viewBox with width and height
const iframeHeightFromViewBox = Math.ceil(svgNode.viewBox?.baseVal?.height ?? 0);
if (iframeHeightFromViewBox) iframe.style.height = `${iframeHeightFromViewBox}px`;
// FIXME: the logic is not right, the full fix is on main branch
const mermaidBlock = document.createElement('div'); const mermaidBlock = document.createElement('div');
mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden');
mermaidBlock.append(iframe); mermaidBlock.append(iframe);
@ -59,11 +66,12 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise<void
const updateIframeHeight = () => { const updateIframeHeight = () => {
const body = iframe.contentWindow?.document?.body; const body = iframe.contentWindow?.document?.body;
if (body) { if (body?.clientHeight) {
iframe.style.height = `${body.clientHeight}px`; iframe.style.height = `${body.clientHeight}px`;
} }
}; };
// FIXME: the logic is not right, the full fix is on main branch
iframe.addEventListener('load', () => { iframe.addEventListener('load', () => {
pre.replaceWith(mermaidBlock); pre.replaceWith(mermaidBlock);
mermaidBlock.classList.remove('tw-hidden'); mermaidBlock.classList.remove('tw-hidden');