diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-10-11 10:27:00 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-10-11 10:27:00 +0000 |
| commit | 65aa53fc52ff15efe54df4147564828d535837f8 (patch) | |
| tree | 31c51dad04fdcca80e6d3043c8bd49d2f1a51f83 /web_src/js/markup/mermaid.js | |
| parent | Initial commit. (diff) | |
| download | forgejo-debian.tar.xz forgejo-debian.zip | |
Adding upstream version 8.0.3.HEADupstream/8.0.3upstreamdebian
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'web_src/js/markup/mermaid.js')
| -rw-r--r-- | web_src/js/markup/mermaid.js | 74 |
1 files changed, 74 insertions, 0 deletions
diff --git a/web_src/js/markup/mermaid.js b/web_src/js/markup/mermaid.js new file mode 100644 index 00000000..0549fb3e --- /dev/null +++ b/web_src/js/markup/mermaid.js @@ -0,0 +1,74 @@ +import {isDarkTheme} from '../utils.js'; +import {makeCodeCopyButton} from './codecopy.js'; +import {displayError} from './common.js'; + +const {mermaidMaxSourceCharacters} = window.config; + +// margin removal is for https://github.com/mermaid-js/mermaid/issues/4907 +const iframeCss = `:root {color-scheme: normal} +body {margin: 0; padding: 0; overflow: hidden} +#mermaid {display: block; margin: 0 auto} +blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0}`; + +export async function renderMermaid() { + const els = document.querySelectorAll('.markup code.language-mermaid'); + if (!els.length) return; + + const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid'); + + mermaid.initialize({ + startOnLoad: false, + theme: isDarkTheme() ? 'dark' : 'neutral', + securityLevel: 'strict', + }); + + for (const el of els) { + const pre = el.closest('pre'); + if (pre.hasAttribute('data-render-done')) continue; + + const source = el.textContent; + if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) { + displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`)); + continue; + } + + try { + await mermaid.parse(source); + } catch (err) { + displayError(pre, err); + continue; + } + + 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); + + const iframe = document.createElement('iframe'); + iframe.classList.add('markup-render', 'tw-invisible'); + iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`; + + const mermaidBlock = document.createElement('div'); + mermaidBlock.classList.add('mermaid-block', 'is-loading', 'tw-hidden'); + mermaidBlock.append(iframe); + + const btn = makeCodeCopyButton(); + btn.setAttribute('data-clipboard-text', source); + mermaidBlock.append(btn); + + iframe.addEventListener('load', () => { + pre.replaceWith(mermaidBlock); + mermaidBlock.classList.remove('tw-hidden'); + iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`; + setTimeout(() => { // avoid flash of iframe background + mermaidBlock.classList.remove('is-loading'); + iframe.classList.remove('tw-invisible'); + }, 0); + }); + + document.body.append(mermaidBlock); + } catch (err) { + displayError(pre, err); + } + } +} |