@bizapps/design-system-testing 1.7.2 → 1.8.1

package/dist/editor.cjs

@@ -868,20 +868,21 @@ function ResizableImageView({ node, updateAttributes, selected, extension }) {
     if (sizeRef.current.width > 0 || fittedSrcRef.current === src) return;
     const fit = () => {
       const available = img.closest(".ProseMirror")?.clientWidth ?? 0;
-      if (!img.naturalWidth || !img.naturalHeight || available <= 0) return;
+      if (!img.naturalWidth || !img.naturalHeight || available <= 0) return false;
       fittedSrcRef.current = src;
       const nextWidth = Math.min(img.naturalWidth, available);
       updateAttributes({
         width: nextWidth,
         height: Math.round(nextWidth / (img.naturalWidth / img.naturalHeight))
       });
+      return true;
     };
-    if (img.complete) {
-      fit();
-      return;
-    }
-    img.addEventListener("load", fit, { once: true });
-    return () => img.removeEventListener("load", fit);
+    if (img.complete && fit()) return;
+    const onLoad = () => {
+      if (fit()) img.removeEventListener("load", onLoad);
+    };
+    img.addEventListener("load", onLoad);
+    return () => img.removeEventListener("load", onLoad);
   }, [src, updateAttributes]);
   const onPointerDown = react.useCallback(
     (event) => {
@@ -981,6 +982,78 @@ function createResizableImage(options) {
     }
   });
 }
+function LinkActions({ editor, labels, onEdit, onOpen }) {
+  const href = react$1.useEditorState({
+    editor,
+    selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "data-slot": "link-bubble-menu",
+      className: "bg-popover text-popover-foreground flex items-center gap-1 rounded-md border p-1 shadow-md",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            title: labels.open,
+            "aria-label": labels.open,
+            disabled: !href,
+            onClick: () => {
+              if (!href) return;
+              if (onOpen) {
+                onOpen(href);
+                return;
+              }
+              window.open(href, "_blank", "noopener,noreferrer");
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            title: labels.edit,
+            "aria-label": labels.edit,
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            className: "text-destructive",
+            title: labels.remove,
+            "aria-label": labels.remove,
+            onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlink, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
+  const shouldShow = react.useCallback(
+    // Only while the caret is actually in a link — otherwise this bar would
+    // compete with any other bubble menu the consumer adds.
+    ({ editor: current }) => current.isActive("link"),
+    []
+  );
+  const options = react.useMemo(() => ({ placement: "bottom", offset: 8 }), []);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsxRuntime.jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
+}
 function ListMenu({ editor, triggerLabel, icon, options }) {
   const active = options.find((option) => editor?.isActive(option.node));
   return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
@@ -1033,6 +1106,7 @@ function useRichTextEditor({
   onInsertImage,
   extraExtensions = [],
   extraToolbar = [],
+  replaceToolbar,
   contentClassName,
   allowBase64Images = false,
   editorProps
@@ -1228,7 +1302,9 @@ function useRichTextEditor({
         )
       }
     ];
-    let items = builtIn;
+    let items = replaceToolbar ? builtIn.map(
+      (item) => item.kind !== "separator" && replaceToolbar[item.id] ? replaceToolbar[item.id] : item
+    ) : builtIn;
     const appended = [];
     for (const group of extraToolbar) {
       if (!group.after) {
@@ -1245,8 +1321,9 @@ function useRichTextEditor({
       items = [...items.slice(0, at + 1), ...group.items, ...items.slice(at + 1)];
     }
     return [...items, ...appended];
-  }, [labels, extraToolbar, onInsertImage, openLink]);
-  return { editor, toolbar, linkNeedsText, currentLinkHref, applyLink };
+  }, [labels, extraToolbar, replaceToolbar, onInsertImage, openLink]);
+  const linkMenu = /* @__PURE__ */ jsxRuntime.jsx(LinkBubbleMenu, { editor, labels: labels.link, onEdit: openLink });
+  return { editor, toolbar, linkMenu, linkNeedsText, currentLinkHref, applyLink };
 }
 function ColorMenu({ editor, labels, icon, swatches }) {
   const active = swatches.find((swatch) => editor?.isActive(swatch.mark));
@@ -1386,78 +1463,6 @@ function InsertLinkDialog({
     ] })
   ] }) });
 }
-function LinkActions({ editor, labels, onEdit, onOpen }) {
-  const href = react$1.useEditorState({
-    editor,
-    selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-slot": "link-bubble-menu",
-      className: "bg-popover text-popover-foreground flex items-center gap-1 rounded-md border p-1 shadow-md",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            title: labels.open,
-            "aria-label": labels.open,
-            disabled: !href,
-            onClick: () => {
-              if (!href) return;
-              if (onOpen) {
-                onOpen(href);
-                return;
-              }
-              window.open(href, "_blank", "noopener,noreferrer");
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            title: labels.edit,
-            "aria-label": labels.edit,
-            onClick: onEdit,
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            className: "text-destructive",
-            title: labels.remove,
-            "aria-label": labels.remove,
-            onClick: () => editor.chain().focus().extendMarkRange("link").unsetLink().run(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Unlink, { className: "h-4 w-4" })
-          }
-        )
-      ]
-    }
-  );
-}
-function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
-  const shouldShow = react.useCallback(
-    // Only while the caret is actually in a link — otherwise this bar would
-    // compete with any other bubble menu the consumer adds.
-    ({ editor: current }) => current.isActive("link"),
-    []
-  );
-  const options = react.useMemo(() => ({ placement: "bottom", offset: 8 }), []);
-  if (!editor) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsxRuntime.jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
-}
 
 exports.ColorMenu = ColorMenu;
 exports.EDITOR_CONTENT_STYLE = EDITOR_CONTENT_STYLE;