fix(assets): prevent mermaid render temp div from expanding body height

Pass the host element as container to mermaid.render() so the temporary
render div is created inside the element instead of document.body.

assets/js/lib/mermaid.ts

@@ -269,7 +269,7 @@ async function renderMermaidElement(el: Element | null, options: RenderOptions):
 
     const id = `fixit-mermaid-${++mermaidIdSeq}`
     try {
-      const result = await mermaid.render(id, source)
+      const result = await mermaid.render(id, source, el)
       const svg = result?.svg ?? ''
       el.innerHTML = svg
       if (typeof result?.bindFunctions === 'function') {
@@ -296,10 +296,9 @@ async function renderMermaidElement(el: Element | null, options: RenderOptions):
       }
     }
     catch (error) {
-      const errDiv = document.getElementById(`d${id}`)
+      const errDiv = el.querySelector<HTMLElement>(`#d${id}`)
       if (errDiv) {
         el.innerHTML = errDiv.innerHTML
-        errDiv.remove()
       }
       el.removeAttribute('data-processing')
       el.setAttribute('data-processed', '')

assets/js/types/third-party.ts

@@ -18,7 +18,7 @@ export interface MermaidRenderResult {
 export interface MermaidRuntimeModule {
   startOnLoad: boolean
   initialize: (config: Record<string, unknown>) => void
-  render: (id: string, source: string) => Promise<MermaidRenderResult>
+  render: (id: string, source: string, container?: Element) => Promise<MermaidRenderResult>
   registerExternalDiagrams?: (diagrams: unknown[]) => Promise<void>
   registerLayoutLoaders?: (loaders: unknown[]) => void
 }

layouts/_partials/init/index.html

@@ -1,4 +1,4 @@
-{{- hugo.Store.Set "version" "v1.0.0-mqw63fvq" -}}
+{{- hugo.Store.Set "version" "v1.0.0-mqwhji8o" -}}
 {{- .Store.Set "this" dict -}}
 
 {{- partial "init/detection-env.html" . -}}