Added support for binding functions for Mermaid diagrams

This commit is contained in:
squidfunk
2022-11-30 22:19:39 +01:00
parent 907705a519
commit 3c326e80d2
11 changed files with 26 additions and 20 deletions

View File

@@ -107,15 +107,21 @@ export function mountMermaid(
mermaid$.subscribe(() => {
el.classList.add("mermaid") // Hack: mitigate https://bit.ly/3CiN6Du
const id = `__mermaid_${sequence++}`
/* Create host element to replace code block */
const host = h("div", { class: "mermaid" })
mermaid.mermaidAPI.render(id, el.textContent, (svg: string) => {
const text = el.textContent
/* Render and inject diagram */
mermaid.mermaidAPI.render(id, text, (svg: string, fn: Function) => {
/* Create a shadow root and inject diagram */
const shadow = host.attachShadow({ mode: "closed" })
shadow.innerHTML = svg
/* Replace code block with diagram */
/* Replace code block with diagram and bind functions */
el.replaceWith(host)
fn?.(shadow)
})
})