Quartz sync: Jun 2, 2025, 2:25 AM

Author: codeyoma

quartz/components/scripts/mindmap.inline.ts

@@ -4,6 +4,7 @@ import { GlobalMindmapConfig, LocalMindmapConfig } from '../Mindmap'
 import { Markmap, deriveOptions } from "markmap-view"
 import { Toolbar } from "markmap-toolbar"
 import { IPureNode } from 'markmap-common'
+import { h } from 'preact'
 
 const externalIcon = `
 <svg aria-hidden="true" class="external-icon" style="max-width:0.8em;max-height:0.8em; margin-left:0.2em;" viewBox="0 0 512 512">
@@ -29,6 +30,24 @@ const exitIcon = `
         d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/>
 </svg>`
 
+function fixForeignObjectReplaceElementErrorInSafari(layout: HTMLElement) {
+  layout.querySelectorAll("video, audio, iframe").forEach(el => {
+    const src = el.getAttribute("data-src") ?? el.getAttribute("src") ?? el.querySelector("source")?.getAttribute("src")
+    if (!src) return
+    const type = el.getAttribute("data-type") ?? el.tagName.toLowerCase()
+    const place = el.getAttribute("data-place") ?? "internal"
+
+    const a = Object.assign(document.createElement("a"), {
+      href: src,
+      target: "_blank",
+      className: `media-fallback ${place}`,
+      textContent: `${type} - ${src}`,
+    })
+
+    el.parentElement?.replaceChild(a, el)
+    a.style.display = "inline-block"
+  })
+}
 
 function renderMermaidInMindmap(svg: SVGSVGElement) {
   requestAnimationFrame(async () => {
@@ -164,7 +183,7 @@ function addExternalIcon(svg: SVGSVGElement) {
   })
 }
 
-async function renderMindmap(mindmap: HTMLElement) {
+async function renderMindmap(mindmap: HTMLElement, isSafari = false) {
   removeAllChildren(mindmap)
 
   if (!mindmap.dataset["mindmap"]) {
@@ -186,8 +205,9 @@ async function renderMindmap(mindmap: HTMLElement) {
 
   renderToolbar(mindmap, mm, option)
   renderMermaidInMindmap(svg)
-  addExternalIcon(svg)
   renderPopoverInMindmap()
+  isSafari && fixForeignObjectReplaceElementErrorInSafari(mindmap)
+  addExternalIcon(svg)
 
   return () => {
     mindmap.innerHTML = ""
@@ -220,7 +240,7 @@ document.addEventListener("nav", async () => {
     const mindmapContainers = document.getElementsByClassName("mindmap-container")
     for (const container of mindmapContainers) {
       isSafari && container.classList.add("is-safari")
-      localMindmapCleanups.push(await renderMindmap(container as HTMLElement))
+      localMindmapCleanups.push(await renderMindmap(container as HTMLElement, isSafari))
     }
   }
 
@@ -247,7 +267,7 @@ document.addEventListener("nav", async () => {
       registerEscapeHandler(container, hideGlobalMindmap)
       if (mindmapContainer) {
         isSafari && mindmapContainer.classList.add("is-safari")
-        globalMindmapCleanups.push(await renderMindmap(mindmapContainer))
+        globalMindmapCleanups.push(await renderMindmap(mindmapContainer, isSafari))
       }
     }
   }

quartz/components/styles/mindmap.scss

@@ -30,6 +30,7 @@
       img {
         margin-top: 1em;
         margin-bottom: 0;
+        max-width: 300px;
       }
 
       blockquote {
@@ -46,6 +47,24 @@
         }
       }
 
+      audio {
+        width: 500px;
+      }
+
+      video {
+        width: 500px;
+        height: auto;
+      }
+
+      iframe.youtube {
+        width: 500px;
+      }
+
+      iframe.pdf {
+        width: 960px;
+        height: 540px;
+      }
+
       foreignObject,
       foreignObject * {
         user-select: none !important;

quartz/plugins/transformers/mindmap.ts

@@ -91,17 +91,21 @@ function wikilinkReplacement(currentSlug: FullSlug, transformOptions: TransformO
         const imageEmbedMatch = imageEmbedRegex.exec(displayText || "")
         const width = imageEmbedMatch?.groups?.width ? imageEmbedMatch?.groups?.width + "px" : "auto"
         const height = imageEmbedMatch?.groups?.height ? imageEmbedMatch?.groups?.height + "px" : "auto"
-        return `<img src="${url}" alt="${fragment ?? displayText ?? link}" style="height:${height}; width:${width}; max-width: 640px;" />`
+        return `<img src="${url}" alt="${fragment ?? displayText ?? link}" style="height:${height}; width:${width};" />`
+      }
+      else if (/\.(mp4|webm|ogv|avi|mov|flv|wmv|mkv|mpg|mpeg|m4v)$/.test(link)) {
+        return `
+            <video src="${url}" data-type="video" controls width="640px" height="360px"/>
+        `
+      } else if (/\.(mp3|wav|m4a|ogg|3gp|flac)$/.test(link)) {
+        return `
+            <audio src="${url}" data-type="audio" controls />
+        `
+      } else if (/\.(pdf)$/.test(link)) {
+        return `
+            <iframe src="${url}" class="pdf" data-type="pdf" />
+        `
       }
-      //  else if (/\.(mp4|webm|ogv|avi|mov|flv|wmv|mkv|mpg|mpeg|m4v)$/.test(link)) {
-      //   return `
-      //   <video src="${url}" controls/>
-      //   `
-      // } else if (/\.(mp3|wav|m4a|ogg|3gp|flac)$/.test(link)) {
-      //   return `<audio src="${url}" controls />`
-      // } else if (/\.(pdf)$/.test(link)) {
-      //   return `<iframe src="${url}" class="pdf" />`
-      // }
 
       return `<a href="${url}" class="internal">${displayText || link}</a>`
     } else if (tag) {
@@ -117,16 +121,16 @@ function ytLinkReplacement() {
       const embedUrl = toYouTubeEmbedURL(match[1])
       if (embedUrl) {
         return `
-          <a href="${embedUrl}" class="external" target="_blank" > ${match[1]}</a>
+          <iframe
+            data-type="youtube"
+            data-place="external"
+            data-src="${match[1]}"
+            class="external-embed youtube"
+            allow="fullscreen"
+            frameborder="0"
+            src="${embedUrl}">
+          </iframe>
         `
-        // return `
-        //   <iframe
-        //     class="external-embed youtube"
-        //     allow="fullscreen"
-        //     frameborder="0"
-        //     src="${embedUrl}">
-        //   </iframe>
-        // `
       }
     }
     return match[0]