1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
const MAX_SOURCE_CHARACTERS = 5000;
function displayError(el, err) {
el.closest('pre').classList.remove('is-loading');
const errorNode = document.createElement('div');
errorNode.setAttribute('class', 'ui message error markdown-block-error mono');
errorNode.textContent = err.str || err.message || String(err);
el.closest('pre').before(errorNode);
}
export async function renderMermaid(els) {
if (!els || !els.length) return;
const mermaid = await import(/* webpackChunkName: "mermaid" */'mermaid');
mermaid.initialize({
mermaid: {
startOnLoad: false,
},
flowchart: {
useMaxWidth: true,
htmlLabels: false,
},
theme: 'neutral',
securityLevel: 'strict',
});
for (const el of els) {
if (el.textContent.length > MAX_SOURCE_CHARACTERS) {
displayError(el, new Error(`Mermaid source of ${el.textContent.length} characters exceeds the maximum allowed length of ${MAX_SOURCE_CHARACTERS}.`));
continue;
}
let valid;
try {
valid = mermaid.parse(el.textContent);
} catch (err) {
displayError(el, err);
}
if (!valid) {
el.closest('pre').classList.remove('is-loading');
continue;
}
try {
mermaid.init(undefined, el, (id) => {
const svg = document.getElementById(id);
svg.classList.add('mermaid-chart');
svg.closest('pre').replaceWith(svg);
});
} catch (err) {
displayError(el, err);
}
}
}
|
