feat(markdown): add hover download buttons on rendered SVGs

Attach SVG and PNG (×2) download buttons to every rendered SVG (TikZ,
Mermaid, …) once post-render finishes. Exports always use the original
colors with a white background baked in, regardless of theme.

src/hooks/useMarkdown.hook.ts

@@ -174,7 +174,7 @@ export const useShikiji = (): Promise<void> => {
 
 let mermaidInitialized = false
 
-export const runMermaid = (querySelector: string) => {
+export const runMermaid = (querySelector: string): Promise<void> => {
   if (!mermaidInitialized) {
     mermaidInitialized = true
     mermaid.initialize({
@@ -184,7 +184,7 @@ export const runMermaid = (querySelector: string) => {
     })
   }
 
-  mermaid.run({
+  return mermaid.run({
     querySelector
   })
 }

src/hooks/useMarkdownPostRender.hook.ts

@@ -6,6 +6,7 @@ import {
   runTikz,
   useShikiji
 } from "@/hooks/useMarkdown.hook"
+import { attachSvgDownloads } from "@/utils/svgDownload"
 
 interface MarkdownPostRenderOptions {
   onReady?: () => void
@@ -31,13 +32,16 @@ export const useMarkdownPostRender = (
       options.onReady?.()
 
       const scope = scopeSelector()
+      const wantsTikz = !!options.tikz
+      const wantsMermaid = !!options.mermaid?.()
 
-      if (options.tikz) {
-        void runTikz(`${scope} .tikz`)
+      const renderJobs: Promise<unknown>[] = []
+      if (wantsTikz) {
+        renderJobs.push(runTikz(`${scope} .tikz`))
       }
 
-      if (options.mermaid?.()) {
-        runMermaid(`${scope} .mermaid`)
+      if (wantsMermaid) {
+        renderJobs.push(runMermaid(`${scope} .mermaid`))
       }
 
       if (options.shikiji?.()) {
@@ -48,6 +52,12 @@ export const useMarkdownPostRender = (
       if (imagesSha) {
         useImages(imagesSha)
       }
+
+      if (wantsTikz || wantsMermaid) {
+        await Promise.allSettled(renderJobs)
+        await nextTick()
+        attachSvgDownloads(document.querySelector(scope))
+      }
     },
     { immediate: true }
   )