diff options
Diffstat (limited to 'web_src/js/markup/mermaid.js')
-rw-r--r-- | web_src/js/markup/mermaid.js | 41 |
1 files changed, 20 insertions, 21 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js index 60f53d2b3..b519e2dcd 100644 --- a/web_src/js/markup/mermaid.js +++ b/web_src/js/markup/mermaid.js @@ -37,14 +37,10 @@ export async function renderMermaid() { continue; } - let valid; try { - valid = mermaid.parse(source); + await mermaid.parse(source); } catch (err) { displayError(el, err); - } - - if (!valid) { el.closest('pre').classList.remove('is-loading'); continue; } @@ -52,22 +48,25 @@ export async function renderMermaid() { 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 - mermaid.mermaidAPI.render('mermaid', source, (svgStr) => { - const heightStr = (svgStr.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3]; - if (!heightStr) return displayError(el, new Error('Could not determine chart height')); - const iframe = document.createElement('iframe'); - iframe.classList.add('markup-render'); - iframe.sandbox = 'allow-scripts'; - iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; - iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svgStr}</body></html>`; - const mermaidBlock = document.createElement('div'); - mermaidBlock.classList.add('mermaid-block'); - mermaidBlock.append(iframe); - const btn = makeCodeCopyButton(); - btn.setAttribute('data-clipboard-text', source); - mermaidBlock.append(btn); - el.closest('pre').replaceWith(mermaidBlock); - }); + const {svg} = await mermaid.render('mermaid', source); + const heightStr = (svg.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3]; + if (!heightStr) return displayError(el, new Error('Could not determine chart height')); + + const iframe = document.createElement('iframe'); + iframe.classList.add('markup-render'); + iframe.sandbox = 'allow-scripts'; + iframe.style.height = `${Math.ceil(parseFloat(heightStr))}px`; + iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`; + + const mermaidBlock = document.createElement('div'); + mermaidBlock.classList.add('mermaid-block'); + mermaidBlock.append(iframe); + + const btn = makeCodeCopyButton(); + btn.setAttribute('data-clipboard-text', source); + + mermaidBlock.append(btn); + el.closest('pre').replaceWith(mermaidBlock); } catch (err) { displayError(el, err); } |