@bizapps/design-system-testing 1.7.1 → 1.8.0

package/dist/editor.d.cts

@@ -164,6 +164,36 @@ interface InsertImageDialogProps {
  */
 declare function InsertImageDialog({ open, onOpenChange, labels, url, onUrlChange, alt, onAltChange, file, onFileChange, uploading, onApply, onCancel, removable, onRemove, maxSizeBytes, accept, }: InsertImageDialogProps): react.JSX.Element;
 
+interface LinkBubbleMenuLabels {
+    open: string;
+    edit: string;
+    remove: string;
+}
+interface LinkBubbleMenuProps {
+    editor: Editor | null;
+    labels: LinkBubbleMenuLabels;
+    /** Opens the consumer's link dialog, pre-filled with the current href. */
+    onEdit: () => void;
+    /**
+     * Follows the link. Left to the consumer for the cases this package cannot
+     * judge — routing instead of navigating, or confirming first.
+     *
+     * Defaults to opening a new tab, which is also what Ctrl/Cmd-click does, so
+     * the author never loses unsaved work just by checking a URL.
+     */
+    onOpen?: (href: string) => void;
+}
+/**
+ * A floating bar that appears when the caret sits inside a link, offering to
+ * open, edit or unlink it.
+ *
+ * It exists because an editor cannot let a plain click navigate: clicking is how
+ * you place the caret to fix a typo, so `openOnClick` stays false and this gives
+ * the author a deliberate way out to the URL. Ctrl/Cmd-click is wired separately,
+ * on the editor itself, for people who expect the shortcut.
+ */
+declare function LinkBubbleMenu({ editor, labels, onEdit, onOpen }: LinkBubbleMenuProps): react.JSX.Element | null;
+
 /**
  * Whatever `useEditor` accepts in its `extensions` array.
  *
@@ -190,6 +220,8 @@ interface RichTextEditorLabels {
         bullet: string;
         ordered: string;
     };
+    /** The floating bar shown while the caret sits inside a link. */
+    link: LinkBubbleMenuLabels;
     table: TableMenuLabels;
     highlight: string;
 }
@@ -217,13 +249,38 @@ interface UseRichTextEditorOptions {
         after?: string;
         items: ToolbarItem[];
     }[];
+    /**
+     * Replaces a built-in entry, keyed by its id.
+     *
+     * For when a product needs a richer version of something the preset already
+     * provides — swapping the single highlight button for a palette of shades,
+     * say. Replacing rather than adding keeps the toolbar from carrying both.
+     */
+    replaceToolbar?: Record<string, ToolbarItem>;
     /** Merged on top of the built-in content styles. */
     contentClassName?: string;
     /** Allows data: URIs in images. Off by default: uploads belong in storage. */
     allowBase64Images?: boolean;
+    /**
+     * Merged into the editor's `editorProps`. For behaviour only a product can
+     * define — clamping pasted tables to a contract's row limit, say.
+     *
+     * `attributes` and `handleClick` are set by the hook and are not overridable:
+     * they carry the accessible name and the link shortcut, which are the
+     * defaults consumers were getting wrong by hand.
+     */
+    editorProps?: Omit<NonNullable<EditorOptions['editorProps']>, 'attributes' | 'handleClick'>;
 }
 interface UseRichTextEditorResult {
     editor: Editor | null;
+    /**
+     * The floating link bar, ready to render beside `<RichTextEditor />`.
+     *
+     * Returned as an element rather than left to the consumer because it is easy
+     * to forget, and an editor without it gives the author no way to reach or
+     * remove a link they have already inserted.
+     */
+    linkMenu: ReactNode;
     /** Ready for `<RichTextEditor items={...} />`. */
     toolbar: ToolbarItem[];
     /** True when the caret has no selection, so a new link needs its own text. */
@@ -245,7 +302,7 @@ interface UseRichTextEditorResult {
  * What stays with the consumer is what only it can know: the marks its document
  * contract allows, and the copy. Both arrive as options.
  */
-declare function useRichTextEditor({ labels, onUpdate, content, onInsertLink, onInsertImage, extraExtensions, extraToolbar, contentClassName, allowBase64Images, }: UseRichTextEditorOptions): UseRichTextEditorResult;
+declare function useRichTextEditor({ labels, onUpdate, content, onInsertLink, onInsertImage, extraExtensions, extraToolbar, replaceToolbar, contentClassName, allowBase64Images, editorProps, }: UseRichTextEditorOptions): UseRichTextEditorResult;
 
 /**
  * One entry in the palette.
@@ -354,36 +411,6 @@ interface InsertLinkDialogProps {
  */
 declare function InsertLinkDialog({ open, onOpenChange, labels, url, onUrlChange, text, onTextChange, needsText, onApply, onCancel, }: InsertLinkDialogProps): react.JSX.Element;
 
-interface LinkBubbleMenuLabels {
-    open: string;
-    edit: string;
-    remove: string;
-}
-interface LinkBubbleMenuProps {
-    editor: Editor | null;
-    labels: LinkBubbleMenuLabels;
-    /** Opens the consumer's link dialog, pre-filled with the current href. */
-    onEdit: () => void;
-    /**
-     * Follows the link. Left to the consumer for the cases this package cannot
-     * judge — routing instead of navigating, or confirming first.
-     *
-     * Defaults to opening a new tab, which is also what Ctrl/Cmd-click does, so
-     * the author never loses unsaved work just by checking a URL.
-     */
-    onOpen?: (href: string) => void;
-}
-/**
- * A floating bar that appears when the caret sits inside a link, offering to
- * open, edit or unlink it.
- *
- * It exists because an editor cannot let a plain click navigate: clicking is how
- * you place the caret to fix a typo, so `openOnClick` stays false and this gives
- * the author a deliberate way out to the URL. Ctrl/Cmd-click is wired separately,
- * on the editor itself, for people who expect the shortcut.
- */
-declare function LinkBubbleMenu({ editor, labels, onEdit, onOpen }: LinkBubbleMenuProps): react.JSX.Element | null;
-
 interface ResizableImageOptions {
     /** Already translated: names the resize handle for assistive tech. */
     resizeLabel: string;

package/dist/editor.d.ts

@@ -164,6 +164,36 @@ interface InsertImageDialogProps {
  */
 declare function InsertImageDialog({ open, onOpenChange, labels, url, onUrlChange, alt, onAltChange, file, onFileChange, uploading, onApply, onCancel, removable, onRemove, maxSizeBytes, accept, }: InsertImageDialogProps): react.JSX.Element;
 
+interface LinkBubbleMenuLabels {
+    open: string;
+    edit: string;
+    remove: string;
+}
+interface LinkBubbleMenuProps {
+    editor: Editor | null;
+    labels: LinkBubbleMenuLabels;
+    /** Opens the consumer's link dialog, pre-filled with the current href. */
+    onEdit: () => void;
+    /**
+     * Follows the link. Left to the consumer for the cases this package cannot
+     * judge — routing instead of navigating, or confirming first.
+     *
+     * Defaults to opening a new tab, which is also what Ctrl/Cmd-click does, so
+     * the author never loses unsaved work just by checking a URL.
+     */
+    onOpen?: (href: string) => void;
+}
+/**
+ * A floating bar that appears when the caret sits inside a link, offering to
+ * open, edit or unlink it.
+ *
+ * It exists because an editor cannot let a plain click navigate: clicking is how
+ * you place the caret to fix a typo, so `openOnClick` stays false and this gives
+ * the author a deliberate way out to the URL. Ctrl/Cmd-click is wired separately,
+ * on the editor itself, for people who expect the shortcut.
+ */
+declare function LinkBubbleMenu({ editor, labels, onEdit, onOpen }: LinkBubbleMenuProps): react.JSX.Element | null;
+
 /**
  * Whatever `useEditor` accepts in its `extensions` array.
  *
@@ -190,6 +220,8 @@ interface RichTextEditorLabels {
         bullet: string;
         ordered: string;
     };
+    /** The floating bar shown while the caret sits inside a link. */
+    link: LinkBubbleMenuLabels;
     table: TableMenuLabels;
     highlight: string;
 }
@@ -217,13 +249,38 @@ interface UseRichTextEditorOptions {
         after?: string;
         items: ToolbarItem[];
     }[];
+    /**
+     * Replaces a built-in entry, keyed by its id.
+     *
+     * For when a product needs a richer version of something the preset already
+     * provides — swapping the single highlight button for a palette of shades,
+     * say. Replacing rather than adding keeps the toolbar from carrying both.
+     */
+    replaceToolbar?: Record<string, ToolbarItem>;
     /** Merged on top of the built-in content styles. */
     contentClassName?: string;
     /** Allows data: URIs in images. Off by default: uploads belong in storage. */
     allowBase64Images?: boolean;
+    /**
+     * Merged into the editor's `editorProps`. For behaviour only a product can
+     * define — clamping pasted tables to a contract's row limit, say.
+     *
+     * `attributes` and `handleClick` are set by the hook and are not overridable:
+     * they carry the accessible name and the link shortcut, which are the
+     * defaults consumers were getting wrong by hand.
+     */
+    editorProps?: Omit<NonNullable<EditorOptions['editorProps']>, 'attributes' | 'handleClick'>;
 }
 interface UseRichTextEditorResult {
     editor: Editor | null;
+    /**
+     * The floating link bar, ready to render beside `<RichTextEditor />`.
+     *
+     * Returned as an element rather than left to the consumer because it is easy
+     * to forget, and an editor without it gives the author no way to reach or
+     * remove a link they have already inserted.
+     */
+    linkMenu: ReactNode;
     /** Ready for `<RichTextEditor items={...} />`. */
     toolbar: ToolbarItem[];
     /** True when the caret has no selection, so a new link needs its own text. */
@@ -245,7 +302,7 @@ interface UseRichTextEditorResult {
  * What stays with the consumer is what only it can know: the marks its document
  * contract allows, and the copy. Both arrive as options.
  */
-declare function useRichTextEditor({ labels, onUpdate, content, onInsertLink, onInsertImage, extraExtensions, extraToolbar, contentClassName, allowBase64Images, }: UseRichTextEditorOptions): UseRichTextEditorResult;
+declare function useRichTextEditor({ labels, onUpdate, content, onInsertLink, onInsertImage, extraExtensions, extraToolbar, replaceToolbar, contentClassName, allowBase64Images, editorProps, }: UseRichTextEditorOptions): UseRichTextEditorResult;
 
 /**
  * One entry in the palette.
@@ -354,36 +411,6 @@ interface InsertLinkDialogProps {
  */
 declare function InsertLinkDialog({ open, onOpenChange, labels, url, onUrlChange, text, onTextChange, needsText, onApply, onCancel, }: InsertLinkDialogProps): react.JSX.Element;
 
-interface LinkBubbleMenuLabels {
-    open: string;
-    edit: string;
-    remove: string;
-}
-interface LinkBubbleMenuProps {
-    editor: Editor | null;
-    labels: LinkBubbleMenuLabels;
-    /** Opens the consumer's link dialog, pre-filled with the current href. */
-    onEdit: () => void;
-    /**
-     * Follows the link. Left to the consumer for the cases this package cannot
-     * judge — routing instead of navigating, or confirming first.
-     *
-     * Defaults to opening a new tab, which is also what Ctrl/Cmd-click does, so
-     * the author never loses unsaved work just by checking a URL.
-     */
-    onOpen?: (href: string) => void;
-}
-/**
- * A floating bar that appears when the caret sits inside a link, offering to
- * open, edit or unlink it.
- *
- * It exists because an editor cannot let a plain click navigate: clicking is how
- * you place the caret to fix a typo, so `openOnClick` stays false and this gives
- * the author a deliberate way out to the URL. Ctrl/Cmd-click is wired separately,
- * on the editor itself, for people who expect the shortcut.
- */
-declare function LinkBubbleMenu({ editor, labels, onEdit, onOpen }: LinkBubbleMenuProps): react.JSX.Element | null;
-
 interface ResizableImageOptions {
     /** Already translated: names the resize handle for assistive tech. */
     resizeLabel: string;

package/dist/editor.js

@@ -974,6 +974,78 @@ function createResizableImage(options) {
     }
   });
 }
+function LinkActions({ editor, labels, onEdit, onOpen }) {
+  const href = useEditorState({
+    editor,
+    selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
+  });
+  return /* @__PURE__ */ 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__ */ jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
+        /* @__PURE__ */ 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__ */ jsx(ExternalLink, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            title: labels.edit,
+            "aria-label": labels.edit,
+            onClick: onEdit,
+            children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(Unlink, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
+  const shouldShow = 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 = useMemo(() => ({ placement: "bottom", offset: 8 }), []);
+  if (!editor) return null;
+  return /* @__PURE__ */ jsx(BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
+}
 function ListMenu({ editor, triggerLabel, icon, options }) {
   const active = options.find((option) => editor?.isActive(option.node));
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
@@ -1026,8 +1098,10 @@ function useRichTextEditor({
   onInsertImage,
   extraExtensions = [],
   extraToolbar = [],
+  replaceToolbar,
   contentClassName,
-  allowBase64Images = false
+  allowBase64Images = false,
+  editorProps
 }) {
   const [linkNeedsText, setLinkNeedsText] = useState(false);
   const editor = useEditor({
@@ -1050,6 +1124,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
@@ -1219,7 +1294,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) {
@@ -1236,8 +1313,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__ */ 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));
@@ -1377,78 +1455,6 @@ function InsertLinkDialog({
     ] })
   ] }) });
 }
-function LinkActions({ editor, labels, onEdit, onOpen }) {
-  const href = useEditorState({
-    editor,
-    selector: ({ editor: current }) => current.getAttributes("link").href ?? ""
-  });
-  return /* @__PURE__ */ 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__ */ jsx("span", { className: "text-muted-foreground max-w-[16rem] truncate px-2 text-xs", children: href }),
-        /* @__PURE__ */ 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__ */ jsx(ExternalLink, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            size: "sm",
-            variant: "ghost",
-            title: labels.edit,
-            "aria-label": labels.edit,
-            onClick: onEdit,
-            children: /* @__PURE__ */ jsx(Pencil, { className: "h-4 w-4" })
-          }
-        ),
-        /* @__PURE__ */ 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__ */ jsx(Unlink, { className: "h-4 w-4" })
-          }
-        )
-      ]
-    }
-  );
-}
-function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
-  const shouldShow = 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 = useMemo(() => ({ placement: "bottom", offset: 8 }), []);
-  if (!editor) return null;
-  return /* @__PURE__ */ jsx(BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
-}
 
 export { ColorMenu, EDITOR_CONTENT_STYLE, InsertImageDialog, InsertLinkDialog, LinkBubbleMenu, ListMenu, RichTextEditor, RichTextToolbar, TableMenu, createResizableImage, useRichTextEditor };
 //# sourceMappingURL=editor.js.map