diff --git a/web_src/js/markup/mermaid.ts b/web_src/js/markup/mermaid.ts index 33d9a1ed9b..56bc0125a0 100644 --- a/web_src/js/markup/mermaid.ts +++ b/web_src/js/markup/mermaid.ts @@ -1,4 +1,4 @@ -import {isDarkTheme} from '../utils.ts'; +import {isDarkTheme, parseDom} from '../utils.ts'; import {makeCodeCopyButton} from './codecopy.ts'; import {displayError} from './common.ts'; import {queryElems} from '../utils/dom.ts'; @@ -43,12 +43,19 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise${htmlRaw(svg)}`; + // 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'); mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); mermaidBlock.append(iframe); @@ -59,11 +66,12 @@ export async function initMarkupCodeMermaid(elMarkup: HTMLElement): Promise { const body = iframe.contentWindow?.document?.body; - if (body) { + if (body?.clientHeight) { iframe.style.height = `${body.clientHeight}px`; } }; + // FIXME: the logic is not right, the full fix is on main branch iframe.addEventListener('load', () => { pre.replaceWith(mermaidBlock); mermaidBlock.classList.remove('tw-hidden');