2022-02-15 22:28:29 -05:00
|
|
|
import {isDarkTheme} from '../utils.js';
|
2022-12-25 12:17:48 -05:00
|
|
|
import {makeCodeCopyButton} from './codecopy.js';
|
2023-04-17 06:10:22 -04:00
|
|
|
import {displayError} from './common.js';
|
2022-12-25 12:17:48 -05:00
|
|
|
|
2021-10-21 03:37:43 -04:00
|
|
|
const {mermaidMaxSourceCharacters} = window.config;
|
2020-08-04 15:56:37 -04:00
|
|
|
|
2023-10-07 23:20:12 -04:00
|
|
|
// margin removal is for https://github.com/mermaid-js/mermaid/issues/4907
|
2023-04-17 06:10:22 -04:00
|
|
|
const iframeCss = `:root {color-scheme: normal}
|
|
|
|
|
body {margin: 0; padding: 0; overflow: hidden}
|
2023-10-07 23:20:12 -04:00
|
|
|
#mermaid {display: block; margin: 0 auto}
|
|
|
|
|
blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {margin: 0}`;
|
2020-07-27 02:24:09 -04:00
|
|
|
|
2021-11-16 03:16:05 -05:00
|
|
|
export async function renderMermaid() {
|
|
|
|
|
const els = document.querySelectorAll('.markup code.language-mermaid');
|
|
|
|
|
if (!els.length) return;
|
2020-07-27 02:24:09 -04:00
|
|
|
|
2021-10-19 03:23:58 -04:00
|
|
|
const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
|
2020-07-27 02:24:09 -04:00
|
|
|
|
2020-08-04 15:56:37 -04:00
|
|
|
mermaid.initialize({
|
2022-02-15 22:28:29 -05:00
|
|
|
startOnLoad: false,
|
|
|
|
|
theme: isDarkTheme() ? 'dark' : 'neutral',
|
2020-07-27 02:24:09 -04:00
|
|
|
securityLevel: 'strict',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
for (const el of els) {
|
2023-04-17 06:10:22 -04:00
|
|
|
const pre = el.closest('pre');
|
|
|
|
|
if (pre.hasAttribute('data-render-done')) continue;
|
2022-02-15 22:28:29 -05:00
|
|
|
|
2023-04-17 06:10:22 -04:00
|
|
|
const source = el.textContent;
|
2022-02-15 22:28:29 -05:00
|
|
|
if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
|
2023-04-17 06:10:22 -04:00
|
|
|
displayError(pre, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
|
2020-08-04 15:56:37 -04:00
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
2023-03-04 00:39:07 -05:00
|
|
|
await mermaid.parse(source);
|
2020-08-04 15:56:37 -04:00
|
|
|
} catch (err) {
|
2023-04-17 06:10:22 -04:00
|
|
|
displayError(pre, err);
|
2020-08-04 15:56:37 -04:00
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
2022-02-15 22:28:29 -05:00
|
|
|
// 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
|
2023-03-04 00:39:07 -05:00
|
|
|
const {svg} = await mermaid.render('mermaid', source);
|
|
|
|
|
|
|
|
|
|
const iframe = document.createElement('iframe');
|
2023-04-17 06:10:22 -04:00
|
|
|
iframe.classList.add('markup-render', 'gt-invisible');
|
2023-03-04 00:39:07 -05:00
|
|
|
iframe.srcdoc = `<html><head><style>${iframeCss}</style></head><body>${svg}</body></html>`;
|
|
|
|
|
|
|
|
|
|
const mermaidBlock = document.createElement('div');
|
2023-04-17 06:10:22 -04:00
|
|
|
mermaidBlock.classList.add('mermaid-block', 'is-loading', 'gt-hidden');
|
2023-03-04 00:39:07 -05:00
|
|
|
mermaidBlock.append(iframe);
|
|
|
|
|
|
|
|
|
|
const btn = makeCodeCopyButton();
|
|
|
|
|
btn.setAttribute('data-clipboard-text', source);
|
|
|
|
|
mermaidBlock.append(btn);
|
2023-04-17 06:10:22 -04:00
|
|
|
|
|
|
|
|
iframe.addEventListener('load', () => {
|
|
|
|
|
pre.replaceWith(mermaidBlock);
|
|
|
|
|
mermaidBlock.classList.remove('gt-hidden');
|
|
|
|
|
iframe.style.height = `${iframe.contentWindow.document.body.clientHeight}px`;
|
|
|
|
|
setTimeout(() => { // avoid flash of iframe background
|
|
|
|
|
mermaidBlock.classList.remove('is-loading');
|
|
|
|
|
iframe.classList.remove('gt-invisible');
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
document.body.append(mermaidBlock);
|
2020-08-04 15:56:37 -04:00
|
|
|
} catch (err) {
|
2023-04-17 06:10:22 -04:00
|
|
|
displayError(pre, err);
|
2020-08-04 15:56:37 -04:00
|
|
|
}
|
2020-07-27 02:24:09 -04:00
|
|
|
}
|
|
|
|
|
}
|
