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

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