@bizapps/design-system-testing 1.6.0 → 1.7.1

package/dist/editor.d.cts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { Editor } from '@tiptap/react';
+import { Editor, JSONContent, EditorOptions } from '@tiptap/react';
 import * as _tiptap_core from '@tiptap/core';
 import { ImageOptions } from '@tiptap/extension-image';
 
@@ -164,6 +164,89 @@ 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;
 
+/**
+ * Whatever `useEditor` accepts in its `extensions` array.
+ *
+ * Derived from Tiptap's own option rather than imported as AnyExtension: the
+ * name resolves to a structurally different declaration depending on which copy
+ * of @tiptap/core is in scope, and the two do not assign to each other.
+ */
+type EditorExtension = EditorOptions['extensions'][number];
+/** Every string the built-in toolbar and menus need. All already translated. */
+interface RichTextEditorLabels {
+    /** Names the editable area for assistive tech. Required — it has no visible label. */
+    editor: string;
+    bold: string;
+    italic: string;
+    heading: string;
+    underline: string;
+    strikethrough: string;
+    quote: string;
+    insertLink: string;
+    insertImage: string;
+    resizeImage: string;
+    lists: {
+        trigger: string;
+        bullet: string;
+        ordered: string;
+    };
+    table: TableMenuLabels;
+    highlight: string;
+}
+interface UseRichTextEditorOptions {
+    labels: RichTextEditorLabels;
+    /** Fires on every document change, with the current ProseMirror JSON. */
+    onUpdate?: (doc: JSONContent) => void;
+    /** Initial document. */
+    content?: JSONContent | string;
+    /** Opens the consumer's link dialog. Wire the toolbar's link button to it. */
+    onInsertLink?: () => void;
+    /** Opens the consumer's image dialog. */
+    onInsertImage?: () => void;
+    /**
+     * Marks and nodes this product's document contract requires — a brand font,
+     * a colour palette, anything a server-side whitelist validates. They are
+     * appended to the built-in set rather than replacing it.
+     */
+    extraExtensions?: EditorExtension[];
+    /**
+     * Extra toolbar entries, and where they go. `after` names a built-in id
+     * (`heading`, `highlight`, `strike`, `image`…); omit it to append at the end.
+     */
+    extraToolbar?: {
+        after?: string;
+        items: 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;
+}
+interface UseRichTextEditorResult {
+    editor: Editor | null;
+    /** Ready for `<RichTextEditor items={...} />`. */
+    toolbar: ToolbarItem[];
+    /** True when the caret has no selection, so a new link needs its own text. */
+    linkNeedsText: boolean;
+    /** Reads the caret's current href — pre-fill the dialog with it. */
+    currentLinkHref: () => string;
+    /** Applies a link, inserting `text` when there is no selection to wrap. */
+    applyLink: (href: string, text?: string) => void;
+}
+/**
+ * Builds a configured Tiptap editor and its toolbar.
+ *
+ * Everything a rich text editor needs to behave correctly is set up here —
+ * Ctrl/Cmd-click on links, the accessible name for the editable area, the
+ * repaint-on-transaction the toolbar's pressed state depends on, the content
+ * styles — so a consumer cannot end up with a subtly different editor by
+ * forgetting one of them.
+ *
+ * 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;
+
 /**
  * One entry in the palette.
  *
@@ -315,4 +398,4 @@ interface ResizableImageOptions {
  */
 declare function createResizableImage(options: ResizableImageOptions): _tiptap_core.Node<ImageOptions & ResizableImageOptions, any>;
 
-export { ColorMenu, type ColorMenuLabels, type ColorMenuProps, type ColorSwatch, EDITOR_CONTENT_STYLE, InsertImageDialog, type InsertImageDialogLabels, type InsertImageDialogProps, InsertLinkDialog, type InsertLinkDialogLabels, type InsertLinkDialogProps, LinkBubbleMenu, type LinkBubbleMenuLabels, type LinkBubbleMenuProps, ListMenu, type ListMenuProps, type ListOption, type ResizableImageOptions, RichTextEditor, type RichTextEditorProps, RichTextToolbar, type RichTextToolbarProps, TableMenu, type TableMenuLabels, type TableMenuProps, type ToolbarItem, createResizableImage };
+export { ColorMenu, type ColorMenuLabels, type ColorMenuProps, type ColorSwatch, EDITOR_CONTENT_STYLE, InsertImageDialog, type InsertImageDialogLabels, type InsertImageDialogProps, InsertLinkDialog, type InsertLinkDialogLabels, type InsertLinkDialogProps, LinkBubbleMenu, type LinkBubbleMenuLabels, type LinkBubbleMenuProps, ListMenu, type ListMenuProps, type ListOption, type ResizableImageOptions, RichTextEditor, type RichTextEditorLabels, type RichTextEditorProps, RichTextToolbar, type RichTextToolbarProps, TableMenu, type TableMenuLabels, type TableMenuProps, type ToolbarItem, type UseRichTextEditorOptions, type UseRichTextEditorResult, createResizableImage, useRichTextEditor };

package/dist/editor.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { Editor } from '@tiptap/react';
+import { Editor, JSONContent, EditorOptions } from '@tiptap/react';
 import * as _tiptap_core from '@tiptap/core';
 import { ImageOptions } from '@tiptap/extension-image';
 
@@ -164,6 +164,89 @@ 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;
 
+/**
+ * Whatever `useEditor` accepts in its `extensions` array.
+ *
+ * Derived from Tiptap's own option rather than imported as AnyExtension: the
+ * name resolves to a structurally different declaration depending on which copy
+ * of @tiptap/core is in scope, and the two do not assign to each other.
+ */
+type EditorExtension = EditorOptions['extensions'][number];
+/** Every string the built-in toolbar and menus need. All already translated. */
+interface RichTextEditorLabels {
+    /** Names the editable area for assistive tech. Required — it has no visible label. */
+    editor: string;
+    bold: string;
+    italic: string;
+    heading: string;
+    underline: string;
+    strikethrough: string;
+    quote: string;
+    insertLink: string;
+    insertImage: string;
+    resizeImage: string;
+    lists: {
+        trigger: string;
+        bullet: string;
+        ordered: string;
+    };
+    table: TableMenuLabels;
+    highlight: string;
+}
+interface UseRichTextEditorOptions {
+    labels: RichTextEditorLabels;
+    /** Fires on every document change, with the current ProseMirror JSON. */
+    onUpdate?: (doc: JSONContent) => void;
+    /** Initial document. */
+    content?: JSONContent | string;
+    /** Opens the consumer's link dialog. Wire the toolbar's link button to it. */
+    onInsertLink?: () => void;
+    /** Opens the consumer's image dialog. */
+    onInsertImage?: () => void;
+    /**
+     * Marks and nodes this product's document contract requires — a brand font,
+     * a colour palette, anything a server-side whitelist validates. They are
+     * appended to the built-in set rather than replacing it.
+     */
+    extraExtensions?: EditorExtension[];
+    /**
+     * Extra toolbar entries, and where they go. `after` names a built-in id
+     * (`heading`, `highlight`, `strike`, `image`…); omit it to append at the end.
+     */
+    extraToolbar?: {
+        after?: string;
+        items: 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;
+}
+interface UseRichTextEditorResult {
+    editor: Editor | null;
+    /** Ready for `<RichTextEditor items={...} />`. */
+    toolbar: ToolbarItem[];
+    /** True when the caret has no selection, so a new link needs its own text. */
+    linkNeedsText: boolean;
+    /** Reads the caret's current href — pre-fill the dialog with it. */
+    currentLinkHref: () => string;
+    /** Applies a link, inserting `text` when there is no selection to wrap. */
+    applyLink: (href: string, text?: string) => void;
+}
+/**
+ * Builds a configured Tiptap editor and its toolbar.
+ *
+ * Everything a rich text editor needs to behave correctly is set up here —
+ * Ctrl/Cmd-click on links, the accessible name for the editable area, the
+ * repaint-on-transaction the toolbar's pressed state depends on, the content
+ * styles — so a consumer cannot end up with a subtly different editor by
+ * forgetting one of them.
+ *
+ * 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;
+
 /**
  * One entry in the palette.
  *
@@ -315,4 +398,4 @@ interface ResizableImageOptions {
  */
 declare function createResizableImage(options: ResizableImageOptions): _tiptap_core.Node<ImageOptions & ResizableImageOptions, any>;
 
-export { ColorMenu, type ColorMenuLabels, type ColorMenuProps, type ColorSwatch, EDITOR_CONTENT_STYLE, InsertImageDialog, type InsertImageDialogLabels, type InsertImageDialogProps, InsertLinkDialog, type InsertLinkDialogLabels, type InsertLinkDialogProps, LinkBubbleMenu, type LinkBubbleMenuLabels, type LinkBubbleMenuProps, ListMenu, type ListMenuProps, type ListOption, type ResizableImageOptions, RichTextEditor, type RichTextEditorProps, RichTextToolbar, type RichTextToolbarProps, TableMenu, type TableMenuLabels, type TableMenuProps, type ToolbarItem, createResizableImage };
+export { ColorMenu, type ColorMenuLabels, type ColorMenuProps, type ColorSwatch, EDITOR_CONTENT_STYLE, InsertImageDialog, type InsertImageDialogLabels, type InsertImageDialogProps, InsertLinkDialog, type InsertLinkDialogLabels, type InsertLinkDialogProps, LinkBubbleMenu, type LinkBubbleMenuLabels, type LinkBubbleMenuProps, ListMenu, type ListMenuProps, type ListOption, type ResizableImageOptions, RichTextEditor, type RichTextEditorLabels, type RichTextEditorProps, RichTextToolbar, type RichTextToolbarProps, TableMenu, type TableMenuLabels, type TableMenuProps, type ToolbarItem, type UseRichTextEditorOptions, type UseRichTextEditorResult, createResizableImage, useRichTextEditor };