@jvs-milkdown/crepe 1.2.18 → 1.2.21

package/lib/cjs/index.js

@@ -4902,6 +4902,10 @@ function decrementPopupCount() {
     listeners.forEach((fn) => fn());
   }
 }
+function resetPopupCount() {
+  _popupCount = 0;
+  listeners.forEach((fn) => fn());
+}
 
 function getGroups(config, ctx) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
@@ -5757,7 +5761,8 @@ const Toolbar = vue.defineComponent({
       const container = toolbarContainerRef.value;
       if (!isFixed) {
         const view = ctx.get(core.editorViewCtx);
-        container.style.maxWidth = `${view.dom.clientWidth - 32}px`;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        container.style.maxWidth = `${containerDOM.clientWidth - 32}px`;
       }
       let containerWidth;
       if (isFixed) {
@@ -5777,16 +5782,13 @@ const Toolbar = vue.defineComponent({
         }
       } else {
         const view = ctx.get(core.editorViewCtx);
-        containerWidth = view.dom.clientWidth - 32;
-      }
-      if (containerWidth === lastContainerWidth) {
-        return;
+        const containerDOM = view.dom.closest(".milkdown-editor-container") || view.dom.closest(".milkdown") || view.dom;
+        containerWidth = containerDOM.clientWidth - 32;
       }
-      lastContainerWidth = containerWidth;
       if (showOverflowMenu.value) {
         showOverflowMenu.value = false;
       }
-      const MORE_BUTTON_WIDTH = 44;
+      const MORE_BUTTON_WIDTH = 56;
       const children = Array.from(container.children);
       const toolbarChildren = children.filter(
         (el) => el.style.position !== "fixed" && el.dataset.overflowButton !== "true"
@@ -5796,6 +5798,13 @@ const Toolbar = vue.defineComponent({
         const child = toolbarChildren[i];
         totalWidth += measureChild(child, i);
       }
+      if (totalWidth === 0) {
+        return;
+      }
+      if (containerWidth === lastContainerWidth) {
+        return;
+      }
+      lastContainerWidth = containerWidth;
       if (totalWidth <= containerWidth) {
         overflowVisibleCount.value = Infinity;
         totalSectionCount.value = toolbarChildren.length;
@@ -5988,6 +5997,14 @@ const Toolbar = vue.defineComponent({
       } else {
         const view = ctx.get(core.editorViewCtx);
         overflowResizeObserver.observe(view.dom);
+        const containerDOM = view.dom.closest(".milkdown-editor-container");
+        if (containerDOM) {
+          overflowResizeObserver.observe(containerDOM);
+        }
+        const rootDOM = view.dom.closest(".milkdown");
+        if (rootDOM) {
+          overflowResizeObserver.observe(rootDOM);
+        }
       }
       computeOverflow();
     };
@@ -6016,6 +6033,20 @@ const Toolbar = vue.defineComponent({
       lastContainerWidth = 0;
       setTimeout(computeOverflow, 0);
     });
+    vue.watch(
+      () => {
+        var _a;
+        return (_a = props.show) == null ? void 0 : _a.value;
+      },
+      (val) => {
+        if (val) {
+          cachedWidths.clear();
+          overflowVisibleCount.value = Infinity;
+          lastContainerWidth = 0;
+          setTimeout(computeOverflow, 0);
+        }
+      }
+    );
     const onClick = (fn) => (e) => {
       e.preventDefault();
       if (ctx) fn(ctx);
@@ -6474,7 +6505,7 @@ const Toolbar = vue.defineComponent({
           {
             style: {
               position: "relative",
-              display: isSectionOverflowed(0) ? "none" : "flex",
+              display: isSectionOverflowed(1) ? "none" : "flex",
               flexShrink: 0
             }
           },
@@ -6519,7 +6550,7 @@ const Toolbar = vue.defineComponent({
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(1) ? "none" : void 0,
+              display: isSectionOverflowed(2) ? "none" : void 0,
               flexShrink: 0
             }
           }
@@ -6532,7 +6563,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleFontFamilyLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(2) ? "none" : "flex",
+              display: isSectionOverflowed(3) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "50px",
@@ -6574,7 +6605,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleFontSizeLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(3) ? "none" : "flex",
+              display: isSectionOverflowed(4) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               minWidth: "40px",
@@ -6602,7 +6633,7 @@ const Toolbar = vue.defineComponent({
             style: {
               margin: "0 4px",
               alignSelf: "center",
-              display: isSectionOverflowed(4) ? "none" : void 0,
+              display: isSectionOverflowed(5) ? "none" : void 0,
               flexShrink: 0
             }
           }
@@ -6615,7 +6646,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleAlignLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(5) ? "none" : "flex",
+              display: isSectionOverflowed(6) ? "none" : "flex",
               alignItems: "center",
               padding: "0 6px",
               flexShrink: 0
@@ -6644,7 +6675,7 @@ const Toolbar = vue.defineComponent({
             onMouseleave: handleColorLeave,
             style: {
               position: "relative",
-              display: isSectionOverflowed(6) ? "none" : "flex",
+              display: isSectionOverflowed(7) ? "none" : "flex",
               alignItems: "center",
               padding: "0 4px",
               flexShrink: 0
@@ -6672,7 +6703,7 @@ const Toolbar = vue.defineComponent({
           )
         ),
         (() => {
-          let sectionIdx = 7;
+          let sectionIdx = 8;
           return nonHeadingGroups.map((group, groupIndex) => {
             const items = group.items.map((item) => {
               const idx = sectionIdx;
@@ -7592,7 +7623,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (2 >= cutoff) {
+            if (3 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -7605,7 +7636,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (3 >= cutoff) {
+            if (4 >= cutoff) {
               items.push(
                 renderIconButton(
                   textIcon,
@@ -7618,7 +7649,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (5 >= cutoff) {
+            if (6 >= cutoff) {
               items.push(
                 renderIconButton(
                   currentAlignIndent.value.align === "center" ? alignCenterIcon : currentAlignIndent.value.align === "right" ? alignRightIcon : alignLeftIcon,
@@ -7631,7 +7662,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            if (6 >= cutoff) {
+            if (7 >= cutoff) {
               items.push(
                 renderIconButton(
                   fontColorIcon,
@@ -7644,7 +7675,7 @@ const Toolbar = vue.defineComponent({
                 )
               );
             }
-            let fmtIdx = 7;
+            let fmtIdx = 8;
             for (const group of nonHeadingGroups) {
               for (const item of group.items) {
                 const idx = fmtIdx;
@@ -7739,7 +7770,7 @@ const ToggleSwitch = vue.defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    return () => /* @__PURE__ */ vue.h(
+    return () => /* @__PURE__ */ h(
       "div",
       {
         onClick: (e) => {
@@ -7756,7 +7787,7 @@ const ToggleSwitch = vue.defineComponent({
           transition: "background-color 0.2s"
         }
       },
-      /* @__PURE__ */ vue.h(
+      /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -7855,7 +7886,7 @@ const MenuBar = vue.defineComponent({
     const hasSubmenu = (key) => key === "view";
     return () => {
       const state = viewState.value;
-      return /* @__PURE__ */ vue.h(
+      return /* @__PURE__ */ h(
         "div",
         {
           class: "milkdown-menu-bar",
@@ -7867,7 +7898,7 @@ const MenuBar = vue.defineComponent({
             position: "relative"
           }
         },
-        /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h(
           "div",
           {
             ref: buttonRef,
@@ -7890,7 +7921,7 @@ const MenuBar = vue.defineComponent({
                 e.currentTarget.style.backgroundColor = "transparent";
             }
           },
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -7901,9 +7932,9 @@ const MenuBar = vue.defineComponent({
                 justifyContent: "center"
               }
             },
-            /* @__PURE__ */ vue.h(component.Icon, { icon: menuIcon })
+            /* @__PURE__ */ h(component.Icon, { icon: menuIcon })
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "span",
             {
               style: {
@@ -7916,7 +7947,7 @@ const MenuBar = vue.defineComponent({
             "\u83DC\u5355"
           )
         ),
-        showMenu.value ? /* @__PURE__ */ vue.h(
+        showMenu.value ? /* @__PURE__ */ h(
           "div",
           {
             ref: mainRef,
@@ -7943,7 +7974,7 @@ const MenuBar = vue.defineComponent({
           menuKeys.value.map((menuKey) => {
             const isHovered = activeSubmenu.value === menuKey;
             const label = i18n(props.ctx, `menuBar.${menuKey}`) || menuKey;
-            return /* @__PURE__ */ vue.h(
+            return /* @__PURE__ */ h(
               "div",
               {
                 key: menuKey,
@@ -7965,7 +7996,7 @@ const MenuBar = vue.defineComponent({
                   backgroundColor: isHovered ? "var(--crepe-color-hover, #f5f5f5)" : "transparent"
                 }
               },
-              /* @__PURE__ */ vue.h(
+              /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7975,7 +8006,7 @@ const MenuBar = vue.defineComponent({
                 },
                 label
               ),
-              hasSubmenu(menuKey) ? /* @__PURE__ */ vue.h(
+              hasSubmenu(menuKey) ? /* @__PURE__ */ h(
                 "span",
                 {
                   style: {
@@ -7984,7 +8015,7 @@ const MenuBar = vue.defineComponent({
                     display: "flex"
                   }
                 },
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "svg",
                   {
                     width: "12",
@@ -7996,10 +8027,10 @@ const MenuBar = vue.defineComponent({
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round"
                   },
-                  /* @__PURE__ */ vue.h("polyline", { points: "9 18 15 12 9 6" })
+                  /* @__PURE__ */ h("polyline", { points: "9 18 15 12 9 6" })
                 )
               ) : null,
-              menuKey === "view" && isHovered ? /* @__PURE__ */ vue.h(
+              menuKey === "view" && isHovered ? /* @__PURE__ */ h(
                 "div",
                 {
                   style: {
@@ -8017,7 +8048,7 @@ const MenuBar = vue.defineComponent({
                     cursor: "default"
                   }
                 },
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8027,7 +8058,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -8037,7 +8068,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.title") || "\u6807\u9898"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.showTitle,
@@ -8045,7 +8076,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8055,7 +8086,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -8065,7 +8096,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.outline") || "\u5927\u7EB2"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.outlineVisible,
@@ -8073,7 +8104,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8083,7 +8114,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -8093,7 +8124,7 @@ const MenuBar = vue.defineComponent({
                     },
                     i18n(props.ctx, "view.cover") || "\u5C01\u9762"
                   ),
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     ToggleSwitch,
                     {
                       modelValue: state.showCover,
@@ -8109,7 +8140,7 @@ const MenuBar = vue.defineComponent({
                     }
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8119,7 +8150,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8129,7 +8160,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -8140,7 +8171,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.docBackground") || "\u6587\u6863\u80CC\u666F"
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8150,7 +8181,7 @@ const MenuBar = vue.defineComponent({
                       gap: "6px"
                     }
                   },
-                  bgColors.map((bg) => /* @__PURE__ */ vue.h(
+                  bgColors.map((bg) => /* @__PURE__ */ h(
                     "div",
                     {
                       key: bg.value || "default",
@@ -8172,7 +8203,7 @@ const MenuBar = vue.defineComponent({
                         justifyContent: "center"
                       }
                     },
-                    bg.value === null ? /* @__PURE__ */ vue.h(
+                    bg.value === null ? /* @__PURE__ */ h(
                       "div",
                       {
                         style: {
@@ -8185,7 +8216,7 @@ const MenuBar = vue.defineComponent({
                           borderRadius: "3px"
                         }
                       },
-                      /* @__PURE__ */ vue.h(
+                      /* @__PURE__ */ h(
                         "div",
                         {
                           style: {
@@ -8203,7 +8234,7 @@ const MenuBar = vue.defineComponent({
                     ) : null
                   ))
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8213,7 +8244,7 @@ const MenuBar = vue.defineComponent({
                     }
                   }
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8223,7 +8254,7 @@ const MenuBar = vue.defineComponent({
                       alignItems: "center"
                     }
                   },
-                  /* @__PURE__ */ vue.h(
+                  /* @__PURE__ */ h(
                     "span",
                     {
                       style: {
@@ -8234,7 +8265,7 @@ const MenuBar = vue.defineComponent({
                     i18n(props.ctx, "view.editorWidth") || "\u5185\u5BB9\u5BBD\u5EA6"
                   )
                 ),
-                /* @__PURE__ */ vue.h(
+                /* @__PURE__ */ h(
                   "div",
                   {
                     style: {
@@ -8256,7 +8287,7 @@ const MenuBar = vue.defineComponent({
                       key: "full",
                       labelKey: "view.widthFull"
                     }
-                  ].map(({ key, labelKey }) => /* @__PURE__ */ vue.h(
+                  ].map(({ key, labelKey }) => /* @__PURE__ */ h(
                     "button",
                     {
                       key,
@@ -8502,7 +8533,7 @@ const FixedToolbarComponent = vue.defineComponent({
       props.selection.value;
       const canUndo = (typeof props.canUndo === "boolean" ? props.canUndo : (_a = props.canUndo) == null ? void 0 : _a.value) || false;
       const canRedo = (typeof props.canRedo === "boolean" ? props.canRedo : (_b = props.canRedo) == null ? void 0 : _b.value) || false;
-      return /* @__PURE__ */ vue.h(
+      return /* @__PURE__ */ h(
         "div",
         {
           style: {
@@ -8510,12 +8541,14 @@ const FixedToolbarComponent = vue.defineComponent({
             alignItems: "center",
             justifyContent: "center",
             width: "100%",
-            gap: "0px"
+            gap: "0px",
+            minWidth: "0",
+            overflow: "hidden"
           }
         },
         ((_c = props.config) == null ? void 0 : _c.showMenuBar) !== false && [
-          /* @__PURE__ */ vue.h(MenuBar, { ctx: props.ctx, config: props.config }),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(MenuBar, { ctx: props.ctx, config: props.config }),
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -8528,7 +8561,7 @@ const FixedToolbarComponent = vue.defineComponent({
           )
         ],
         ((_d = props.config) == null ? void 0 : _d.showHistory) !== false && [
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -8559,7 +8592,7 @@ const FixedToolbarComponent = vue.defineComponent({
                 "--toolbar-icon-color": canUndo ? "#363b4c" : "#c0c4cc"
               }
             },
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: { display: "inline-flex", alignItems: "center" },
@@ -8567,7 +8600,7 @@ const FixedToolbarComponent = vue.defineComponent({
               }
             )
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -8598,7 +8631,7 @@ const FixedToolbarComponent = vue.defineComponent({
                 "--toolbar-icon-color": canRedo ? "#363b4c" : "#c0c4cc"
               }
             },
-            /* @__PURE__ */ vue.h(
+            /* @__PURE__ */ h(
               "span",
               {
                 style: { display: "inline-flex", alignItems: "center" },
@@ -8606,7 +8639,7 @@ const FixedToolbarComponent = vue.defineComponent({
               }
             )
           ),
-          /* @__PURE__ */ vue.h(
+          /* @__PURE__ */ h(
             "div",
             {
               style: {
@@ -8618,7 +8651,7 @@ const FixedToolbarComponent = vue.defineComponent({
             }
           )
         ],
-        /* @__PURE__ */ vue.h(
+        /* @__PURE__ */ h(
           Toolbar,
           {
             ctx: props.ctx,
@@ -8629,7 +8662,7 @@ const FixedToolbarComponent = vue.defineComponent({
             isFixed: true
           }
         ),
-        showShortcuts.value && /* @__PURE__ */ vue.h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
+        showShortcuts.value && /* @__PURE__ */ h(ShortcutHelpModal, { ctx: props.ctx, visible: showShortcuts })
       );
     };
   }
@@ -12147,6 +12180,7 @@ class Crepe extends CrepeBuilder {
   /// Calling the constructor will not create the editor, you need to call `create` to create the editor.
   constructor(config = {}) {
     var _a;
+    resetPopupCount();
     const { features = {}, featureConfigs = {}, ...crepeBuilderConfig } = config;
     const finalConfigs = lodashEs.defaultsDeep(featureConfigs, defaultConfig);
     const fixedToolbarConfig = finalConfigs[CrepeFeature.FixedToolbar];
@@ -12167,6 +12201,10 @@ class Crepe extends CrepeBuilder {
       }
     }
     super(crepeBuilderConfig);
+    this.destroy = () => {
+      resetPopupCount();
+      return this.editor.destroy();
+    };
     const enabledFeatures = Object.entries({
       ...defaultFeatures,
       ...features
@@ -12179,24 +12217,47 @@ class Crepe extends CrepeBuilder {
       this.on((listener) => {
         listener.markdownUpdated((_, markdown) => {
           try {
-            const stored = localStorage.getItem("jvs-milkdown-data");
-            let parsed = {};
-            if (stored) {
-              parsed = JSON.parse(stored);
-            }
-            if (!parsed.content) {
-              parsed.content = {};
-            }
             const html = this.editor.action(utils$1.getHTML());
             const docId = fixedToolbarConfig.id || "default";
-            const currentEntry = parsed.content[docId];
-            const hasChanged = !currentEntry || typeof currentEntry === "string" && currentEntry !== markdown || typeof currentEntry === "object" && (currentEntry.markdown !== markdown || currentEntry.html !== html);
-            if (hasChanged) {
-              parsed.content[docId] = {
-                markdown,
-                html
-              };
-              localStorage.setItem("jvs-milkdown-data", JSON.stringify(parsed));
+            const saveToLocalStorage = (mdVal, htmlVal) => {
+              try {
+                const stored = localStorage.getItem("jvs-milkdown-data");
+                let parsed = {};
+                if (stored) {
+                  parsed = JSON.parse(stored);
+                }
+                if (!parsed.content) {
+                  parsed.content = {};
+                }
+                const currentEntry = parsed.content[docId];
+                const hasChanged = !currentEntry || typeof currentEntry === "string" && currentEntry !== mdVal || typeof currentEntry === "object" && (currentEntry.markdown !== mdVal || currentEntry.html !== htmlVal);
+                if (hasChanged) {
+                  parsed.content[docId] = {
+                    markdown: mdVal,
+                    html: htmlVal
+                  };
+                  localStorage.setItem(
+                    "jvs-milkdown-data",
+                    JSON.stringify(parsed)
+                  );
+                }
+              } catch (e) {
+                console.error("Error saving content to localStorage:", e);
+              }
+            };
+            const hasBlobUrl = /blob:https?:\/\//.test(markdown) || /blob:https?:\/\//.test(html);
+            if (hasBlobUrl) {
+              Promise.all([
+                replaceBlobUrlsWithBase64(markdown),
+                replaceBlobUrlsWithBase64(html)
+              ]).then(([base64Markdown, base64Html]) => {
+                saveToLocalStorage(base64Markdown, base64Html);
+              }).catch((e) => {
+                console.error("Error converting blob URLs:", e);
+                saveToLocalStorage(markdown, html);
+              });
+            } else {
+              saveToLocalStorage(markdown, html);
             }
           } catch (e) {
             console.error("Error saving content to localStorage:", e);
@@ -12208,6 +12269,29 @@ class Crepe extends CrepeBuilder {
 }
 /// This is an alias for the `CrepeFeature` enum.
 Crepe.Feature = CrepeFeature;
+async function replaceBlobUrlsWithBase64(content) {
+  const blobRegex = /blob:https?:\/\/[^\s'")>]+/g;
+  const matches = content.match(blobRegex);
+  if (!matches) return content;
+  let result = content;
+  const uniqueBlobs = Array.from(new Set(matches));
+  for (const blobUrl of uniqueBlobs) {
+    try {
+      const response = await fetch(blobUrl);
+      const blob = await response.blob();
+      const base64 = await new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsDataURL(blob);
+      });
+      result = result.replaceAll(blobUrl, base64);
+    } catch (e) {
+      console.error("Failed to convert blob URL to base64:", blobUrl, e);
+    }
+  }
+  return result;
+}
 
 exports.Crepe = Crepe;
 exports.CrepeBuilder = CrepeBuilder;