@bizapps/design-system-testing 1.7.1 → 1.8.0

package/dist/editor.cjs

@@ -981,6 +981,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,8 +1105,10 @@ function useRichTextEditor({
   onInsertImage,
   extraExtensions = [],
   extraToolbar = [],
+  replaceToolbar,
   contentClassName,
-  allowBase64Images = false
+  allowBase64Images = false,
+  editorProps
 }) {
   const [linkNeedsText, setLinkNeedsText] = react.useState(false);
   const editor = react$1.useEditor({
@@ -1057,6 +1131,7 @@ function useRichTextEditor({
     // repaint as the selection and attributes change.
     shouldRerenderOnTransaction: true,
     editorProps: {
+      ...editorProps,
       attributes: {
         // ProseMirror's editable div needs its own accessible name: a
         // visible <Label> beside it is decoration, and a screen reader
@@ -1226,7 +1301,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) {
@@ -1243,8 +1320,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));
@@ -1384,78 +1462,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;