Added support for binding functions for Mermaid diagrams

src/assets/javascripts/components/content/code/mermaid/index.ts

@@ -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)
     })
   })
 

src/assets/javascripts/extra/bundle.ts

@@ -49,12 +49,12 @@ const container = document.createElement("div")
 document.body.appendChild(container)
 
 /* Append button next to palette toggle */
-const header = document.querySelector(".md-header__option")
+const header = document.querySelector(".md-header__title")
 if (header) {
   const button = document.createElement("button")
   button.className = "md-header__button md-icon ᴴₒᴴₒᴴₒ__button"
   if (header.parentElement)
-    header.parentElement.insertBefore(button, header)
+    header.insertAdjacentElement("afterend", button)
 
   /* Toggle animation */
   const on$ = new ReplaySubject<boolean>(1)