0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-24 00:03:11 -05:00
forgejo/web_src/js/markup/mermaid.js
techknowlogick af4b00c283
update to mermaid v10 (#23178)
fix #23153

---------

Co-authored-by: silverwind <me@silverwind.io>
2023-03-04 00:39:07 -05:00

74 lines
2.5 KiB
JavaScript

import {isDarkTheme} from '../utils.js';
import {makeCodeCopyButton} from './codecopy.js';
const {mermaidMaxSourceCharacters} = window.config;
const iframeCss = `
:root {color-scheme: normal}
body {margin: 0; padding: 0; overflow: hidden}
#mermaid {display: block; margin: 0 auto}
`;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markup-block-error gt-mono');
errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode);
}
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 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}.`));
continue;
}
try {
await mermaid.parse(source);
} catch (err) {
displayError(el, err);
el.closest('pre').classList.remove('is-loading');
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 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);
}
}
}