2022-02-16 12:28:29 +09:00
|
|
|
import {isDarkTheme} from '../utils.js';
|
2021-10-21 16:37:43 +09:00
|
|
|
const {mermaidMaxSourceCharacters} = window.config;
|
2020-08-05 04:56:37 +09:00
|
|
|
|
2022-02-16 12:28:29 +09:00
|
|
|
const iframeCss = `
|
2022-11-01 05:57:31 +09:00
|
|
|
:root {color-scheme: normal}
|
2022-11-25 05:56:57 +09:00
|
|
|
body {margin: 0; padding: 0; overflow: hidden}
|
2022-02-16 12:28:29 +09:00
|
|
|
#mermaid {display: block; margin: 0 auto}
|
|
|
|
|
`;
|
|
|
|
|
|
2020-08-05 04:56:37 +09:00
|
|
|
function displayError(el, err) {
|
|
|
|
|
el.closest('pre').classList.remove('is-loading');
|
|
|
|
|
const errorNode = document.createElement('div');
|
2021-05-07 17:43:41 +09:00
|
|
|
errorNode.setAttribute('class', 'ui message error markup-block-error mono');
|
2020-08-05 04:56:37 +09:00
|
|
|
errorNode.textContent = err.str || err.message || String(err);
|
|
|
|
|
el.closest('pre').before(errorNode);
|
|
|
|
|
}
|
2020-07-27 15:24:09 +09:00
|
|
|
|
2021-11-16 17:16:05 +09:00
|
|
|
export async function renderMermaid() {
|
|
|
|
|
const els = document.querySelectorAll('.markup code.language-mermaid');
|
|
|
|
|
if (!els.length) return;
|
2020-07-27 15:24:09 +09:00
|
|
|
|
2021-10-19 16:23:58 +09:00
|
|
|
const {default: mermaid} = await import(/* webpackChunkName: "mermaid" */'mermaid');
|
2020-07-27 15:24:09 +09:00
|
|
|
|
2020-08-05 04:56:37 +09:00
|
|
|
mermaid.initialize({
|
2022-02-16 12:28:29 +09:00
|
|
|
startOnLoad: false,
|
|
|
|
|
theme: isDarkTheme() ? 'dark' : 'neutral',
|
2020-07-27 15:24:09 +09:00
|
|
|
securityLevel: 'strict',
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
for (const el of els) {
|
2022-02-16 12:28:29 +09:00
|
|
|
const source = el.textContent;
|
|
|
|
|
|
|
|
|
|
if (mermaidMaxSourceCharacters >= 0 && source.length > mermaidMaxSourceCharacters) {
|
|
|
|
|
displayError(el, new Error(`Mermaid source of ${source.length} characters exceeds the maximum allowed length of ${mermaidMaxSourceCharacters}.`));
|
2020-08-05 04:56:37 +09:00
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let valid;
|
|
|
|
|
try {
|
2022-02-16 12:28:29 +09:00
|
|
|
valid = mermaid.parse(source);
|
2020-08-05 04:56:37 +09:00
|
|
|
} catch (err) {
|
|
|
|
|
displayError(el, err);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!valid) {
|
|
|
|
|
el.closest('pre').classList.remove('is-loading');
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
2022-02-16 12:28:29 +09: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
|
|
|
|
|
mermaid.mermaidAPI.render('mermaid', source, (svgStr) => {
|
2022-10-16 07:04:00 +09:00
|
|
|
const heightStr = (svgStr.match(/viewBox="(.+?)"/) || ['', ''])[1].split(/\s+/)[3];
|
2022-02-16 12:28:29 +09:00
|
|
|
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>`;
|
|
|
|
|
el.closest('pre').replaceWith(iframe);
|
2020-08-05 04:56:37 +09:00
|
|
|
});
|
|
|
|
|
} catch (err) {
|
|
|
|
|
displayError(el, err);
|
|
|
|
|
}
|
2020-07-27 15:24:09 +09:00
|
|
|
}
|
|
|
|
|
}
|
