Added support for binding functions for Mermaid diagrams

material/base.html

@@ -22,7 +22,7 @@
         <link rel="canonical" href="{{ page.canonical_url }}">
       {% endif %}
       <link rel="icon" href="{{ config.theme.favicon | url }}">
-      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-8.5.10">
+      <meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-material-8.5.11">
     {% endblock %}
     {% block htmltitle %}
       {% if page.meta and page.meta.title %}
@@ -245,14 +245,14 @@
       </script>
     {% endblock %}
     {% block scripts %}
-      <script src="{{ 'assets/javascripts/bundle.5a2dcb6a.min.js' | url }}"></script>
+      <script src="{{ 'assets/javascripts/bundle.568dd72e.min.js' | url }}"></script>
       {% for path in config.extra_javascript %}
         <script src="{{ path | url }}"></script>
       {% endfor %}
     {% endblock %}
     {% if page.meta and page.meta.ᴴₒᴴₒᴴₒ %}
-      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.0d2c79a8.min.css' | url }}">
+      <link rel="stylesheet" href="{{ 'assets/stylesheets/extra.983f85ee.min.css' | url }}">
-      <script src="{{ 'assets/javascripts/extra/bundle.5f09fbc3.min.js' | url }}" defer></script>
+      <script src="{{ 'assets/javascripts/extra/bundle.4cea3041.min.js' | url }}" defer></script>
     {% endif %}
   </body>
 </html>

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)