fix: load mermaid as normal now that inline is safely below bundle size

Author: jackyzha0

quartz/components/renderPage.tsx

@@ -9,9 +9,6 @@ import { visit } from "unist-util-visit"
 import { Root, Element, ElementContent } from "hast"
 import { GlobalConfiguration } from "../cfg"
 import { i18n } from "../i18n"
-// @ts-ignore
-import mermaidScript from "./scripts/mermaid.inline"
-import mermaidStyle from "./styles/mermaid.inline.scss"
 import { QuartzPluginData } from "../plugins/vfile"
 
 interface RenderComponents {
@@ -65,17 +62,6 @@ export function pageResources(
     contentType: "external",
   })
 
-  // dynamic afterDOMReady must come after postscript.js
-  if (fileData.hasMermaidDiagram) {
-    resources.js.push({
-      script: mermaidScript,
-      loadTime: "afterDOMReady",
-      moduleType: "module",
-      contentType: "inline",
-    })
-    resources.css.push({ content: mermaidStyle, inline: true })
-  }
-
   return resources
 }
 

quartz/components/scripts/mermaid.inline.ts

@@ -1,4 +1,4 @@
-import { removeAllChildren } from "./util"
+import { registerEscapeHandler, removeAllChildren } from "./util"
 
 interface Position {
   x: number
@@ -158,7 +158,7 @@ document.addEventListener("nav", async () => {
   )
 
   mermaidImport ||= await import(
-    //@ts-ignore
+    // @ts-ignore
     "https://cdnjs.cloudflare.com/ajax/libs/mermaid/11.4.0/mermaid.esm.min.mjs"
   )
   const mermaid = mermaidImport.default
@@ -237,12 +237,12 @@ document.addEventListener("nav", async () => {
 
     closeBtn.addEventListener("click", hideMermaid)
     expandBtn.addEventListener("click", showMermaid)
+    registerEscapeHandler(popupContainer, hideMermaid)
     document.addEventListener("keydown", handleEscape)
 
     window.addCleanup(() => {
       closeBtn.removeEventListener("click", hideMermaid)
       expandBtn.removeEventListener("click", showMermaid)
-      document.removeEventListener("keydown", handleEscape)
     })
   }
 })

quartz/plugins/transformers/ofm.ts

@@ -16,9 +16,12 @@ import path from "path"
 import { splitAnchor } from "../../util/path"
 import { JSResource, CSSResource } from "../../util/resources"
 // @ts-ignore
-import calloutScript from "../../components/scripts/callout.inline.ts"
+import calloutScript from "../../components/scripts/callout.inline"
 // @ts-ignore
-import checkboxScript from "../../components/scripts/checkbox.inline.ts"
+import checkboxScript from "../../components/scripts/checkbox.inline"
+// @ts-ignore
+import mermaidScript from "../../components/scripts/mermaid.inline"
+import mermaidStyle from "../../components/styles/mermaid.inline.scss"
 import { FilePath, pathToRoot, slugTag, slugifyFilePath } from "../../util/path"
 import { toHast } from "mdast-util-to-hast"
 import { toHtml } from "hast-util-to-html"
@@ -806,6 +809,20 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>>
         })
       }
 
+      if (opts.mermaid) {
+        js.push({
+          script: mermaidScript,
+          loadTime: "afterDOMReady",
+          contentType: "inline",
+          moduleType: "module",
+        })
+
+        css.push({
+          content: mermaidStyle,
+          inline: true,
+        })
+      }
+
       return { js, css }
     },
   }