From 57afb60b99fd9a6b9fde1ff549b22d2cd50cf643 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 15 Jan 2024 21:33:44 +0100
Subject: [PATCH] fix: use selector loop to manually render all charts on a
 page (#488)

---
 package-lock.json |  3 ++-
 package.json      |  1 +
 src/js/mermaid.js | 35 ++++++++++++++++++++++-------------
 3 files changed, 25 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0a91ef1..652f36e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,7 +25,7 @@
         "eslint-plugin-prettier": "5.1.3",
         "favicons": "7.1.5",
         "favicons-webpack-plugin": "6.0.1",
-        "html-validate": "^8.9.1",
+        "html-validate": "8.9.1",
         "npm-run-all": "4.1.5",
         "postcss-loader": "7.3.4",
         "prettier": "3.2.2",
@@ -34,6 +34,7 @@
         "shx": "0.3.4",
         "svg-sprite": "2.0.2",
         "svgtofont": "4.1.1",
+        "uuid": "9.0.1",
         "webpack": "5.89.0",
         "webpack-cli": "5.1.4",
         "webpack-manifest-plugin": "5.0.0",
diff --git a/package.json b/package.json
index 87ef82f..fa4471f 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "shx": "0.3.4",
     "svg-sprite": "2.0.2",
     "svgtofont": "4.1.1",
+    "uuid": "9.0.1",
     "webpack": "5.89.0",
     "webpack-cli": "5.1.4",
     "webpack-manifest-plugin": "5.0.0",
diff --git a/src/js/mermaid.js b/src/js/mermaid.js
index af64ad7..39cbddf 100644
--- a/src/js/mermaid.js
+++ b/src/js/mermaid.js
@@ -1,30 +1,39 @@
 const Storage = require("store2")
+const { v4: uuidv4 } = require("uuid")
 const { COLOR_THEME_DARK, THEME, COLOR_THEME_AUTO } = require("./config.js")
 
+import mermaid from "mermaid"
+
 document.addEventListener("DOMContentLoaded", function (event) {
   let lstore = Storage.namespace(THEME)
-  let currentColorTheme = lstore.get("color-theme") || COLOR_THEME_AUTO
+  let currentMode = lstore.get("color-theme") || COLOR_THEME_AUTO
   let darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)")
   let darkMode = false
   let theme = "default"
 
   if (
-    currentColorTheme === COLOR_THEME_DARK ||
-    (currentColorTheme === COLOR_THEME_AUTO && darkModeQuery.matches)
+    currentMode === COLOR_THEME_DARK ||
+    (currentMode === COLOR_THEME_AUTO && darkModeQuery.matches)
   ) {
     darkMode = true
     theme = "dark"
   }
 
-  import("mermaid")
-    .then(({ default: md }) => {
-      md.initialize({
-        flowchart: { useMaxWidth: true },
-        theme: theme,
-        themeVariables: {
-          darkMode: darkMode
-        }
-      })
+  mermaid.initialize({
+    startOnLoad: false,
+    flowchart: { useMaxWidth: true },
+    theme: theme,
+    themeVariables: {
+      darkMode: darkMode
+    }
+  })
+
+  document.querySelectorAll(".mermaid").forEach(function (el) {
+    let id = "graph-" + uuidv4()
+
+    mermaid.render(id, el.innerText).then(({ svg, bindFunctions }) => {
+      el.innerHTML = svg
+      bindFunctions?.(el)
     })
-    .catch((error) => console.error(error))
+  })
 })