@bizapps/design-system-testing 1.6.0 → 1.7.2

package/dist/editor.cjs

@@ -11,8 +11,16 @@ var classVarianceAuthority = require('class-variance-authority');
 var lucideReact = require('lucide-react');
 var react$2 = require('motion/react');
 var reactDropzone = require('react-dropzone');
-var menus = require('@tiptap/react/menus');
+var Highlight = require('@tiptap/extension-highlight');
+var extensionTable = require('@tiptap/extension-table');
+var StarterKit = require('@tiptap/starter-kit');
 var extensionImage = require('@tiptap/extension-image');
+var menus = require('@tiptap/react/menus');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Highlight__default = /*#__PURE__*/_interopDefault(Highlight);
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
 
 // src/components/compounds/RichTextEditor/rich-text-editor.tsx
 function cn(...inputs) {
@@ -816,6 +824,430 @@ function InsertImageDialog({
     ] })
   ] }) });
 }
+var DEFAULT_MIN_WIDTH = 120;
+var DEFAULT_START_WIDTH = 400;
+var DEFAULT_RATIO = 4 / 3;
+var KEYBOARD_STEP = 20;
+function ResizableImageView({ node, updateAttributes, selected, extension }) {
+  const { src, alt, width, height } = node.attrs;
+  const sizeRef = react.useRef({ width, height });
+  sizeRef.current = { width, height };
+  const { resizeLabel, minWidth = DEFAULT_MIN_WIDTH } = extension.options;
+  const dragRef = react.useRef(null);
+  const [dragging, setDragging] = react.useState(false);
+  const resizeTo = react.useCallback(
+    (nextWidth, ratio, maxWidth) => {
+      const clamped = Math.max(minWidth, Math.min(Math.round(nextWidth), maxWidth));
+      updateAttributes({ width: clamped, height: Math.round(clamped / ratio) });
+    },
+    [minWidth, updateAttributes]
+  );
+  const measure = react.useCallback((handle) => {
+    const image = handle.parentElement?.querySelector("img") ?? null;
+    const current = sizeRef.current;
+    const editable = handle.closest(".ProseMirror");
+    const available = editable?.clientWidth ?? 0;
+    const naturalWidth = image?.naturalWidth ?? 0;
+    const naturalHeight = image?.naturalHeight ?? 0;
+    const ratio = current.width > 0 && current.height > 0 ? current.width / current.height : naturalWidth > 0 && naturalHeight > 0 ? naturalWidth / naturalHeight : DEFAULT_RATIO;
+    const unbounded = current.width > 0 ? current.width : naturalWidth || DEFAULT_START_WIDTH;
+    const startWidth = available > 0 ? Math.min(unbounded, available) : unbounded;
+    return {
+      width: startWidth,
+      ratio,
+      // jsdom reports clientWidth as 0, so a zero measure means "no
+      // constraint" — the real clamp only applies in a browser.
+      maxWidth: available > 0 ? available : Infinity
+    };
+  }, []);
+  const imageRef = react.useRef(null);
+  const fittedSrcRef = react.useRef(null);
+  react.useEffect(() => {
+    const img = imageRef.current;
+    if (!img) return;
+    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;
+      fittedSrcRef.current = src;
+      const nextWidth = Math.min(img.naturalWidth, available);
+      updateAttributes({
+        width: nextWidth,
+        height: Math.round(nextWidth / (img.naturalWidth / img.naturalHeight))
+      });
+    };
+    if (img.complete) {
+      fit();
+      return;
+    }
+    img.addEventListener("load", fit, { once: true });
+    return () => img.removeEventListener("load", fit);
+  }, [src, updateAttributes]);
+  const onPointerDown = react.useCallback(
+    (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      const start = measure(event.currentTarget);
+      dragRef.current = { startX: event.clientX, ...start };
+      setDragging(true);
+      const onMove = (moveEvent) => {
+        const drag = dragRef.current;
+        if (!drag) return;
+        resizeTo(drag.width + (moveEvent.clientX - drag.startX), drag.ratio, drag.maxWidth);
+      };
+      const onUp = () => {
+        dragRef.current = null;
+        setDragging(false);
+        window.removeEventListener("pointermove", onMove);
+        window.removeEventListener("pointerup", onUp);
+      };
+      window.addEventListener("pointermove", onMove);
+      window.addEventListener("pointerup", onUp);
+    },
+    [measure, resizeTo]
+  );
+  const onKeyDown = react.useCallback(
+    (event) => {
+      const step = event.key === "ArrowRight" ? KEYBOARD_STEP : event.key === "ArrowLeft" ? -KEYBOARD_STEP : 0;
+      if (step === 0) return;
+      event.preventDefault();
+      const start = measure(event.currentTarget);
+      resizeTo(start.width + step, start.ratio, start.maxWidth);
+    },
+    [measure, resizeTo]
+  );
+  const sizeStyle = width > 0 ? { width, height: height > 0 ? height : void 0, maxWidth: "100%" } : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    react$1.NodeViewWrapper,
+    {
+      "data-slot": "resizable-image",
+      className: "group relative inline-block max-w-full",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            ref: imageRef,
+            src,
+            alt,
+            className: "max-w-full rounded-md",
+            style: sizeStyle,
+            draggable: false
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            "aria-label": resizeLabel,
+            title: resizeLabel,
+            "data-slot": "resizable-image-handle",
+            onPointerDown,
+            onKeyDown,
+            className: cn(
+              "border-primary absolute -right-1 -bottom-1 h-4 w-4 cursor-se-resize touch-none rounded-full border-2 bg-white transition-opacity",
+              "focus-visible:ring-ring/50 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none",
+              dragging || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function createResizableImage(options) {
+  return extensionImage.Image.extend({
+    addOptions() {
+      return { ...this.parent(), ...options };
+    },
+    // The size attributes belong to the extension, not to the consumer: the
+    // stock Image extension keeps width/height too, but they default to null
+    // and render as HTML attributes, which pins the image to a fixed size.
+    //
+    // A numeric default with `rendered: false` is what makes resizing work
+    // at all — Tiptap v3 gates DOM emission on `rendered`, so the size stays
+    // out of the markup and lives only in the document JSON, where a
+    // serializer can read it. Without these declarations the schema drops
+    // every updateAttributes({ width }) call and the handle does nothing.
+    addAttributes() {
+      return {
+        ...this.parent?.(),
+        width: { default: 0, rendered: false },
+        height: { default: 0, rendered: false }
+      };
+    },
+    addNodeView() {
+      return react$1.ReactNodeViewRenderer(ResizableImageView);
+    }
+  });
+}
+function ListMenu({ editor, triggerLabel, icon, options }) {
+  const active = options.find((option) => editor?.isActive(option.node));
+  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: active ? "secondary" : "ghost",
+        disabled: !editor,
+        title: active ? active.label : triggerLabel,
+        "aria-label": active ? active.label : triggerLabel,
+        "data-slot": "list-menu-trigger",
+        children: [
+          active ? active.icon : icon,
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3 opacity-60" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: options.map((option) => {
+      const isActive = editor?.isActive(option.node) ?? false;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        DropdownMenuItem,
+        {
+          disabled: !editor,
+          className: "cursor-pointer",
+          onSelect: () => editor && option.run(editor),
+          children: [
+            option.icon,
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: option.label }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lucideReact.Check,
+              {
+                "aria-hidden": "true",
+                className: cn("h-4 w-4", isActive ? "opacity-100" : "opacity-0")
+              }
+            )
+          ]
+        },
+        option.node
+      );
+    }) })
+  ] });
+}
+function useRichTextEditor({
+  labels,
+  onUpdate,
+  content,
+  onInsertLink,
+  onInsertImage,
+  extraExtensions = [],
+  extraToolbar = [],
+  contentClassName,
+  allowBase64Images = false,
+  editorProps
+}) {
+  const [linkNeedsText, setLinkNeedsText] = react.useState(false);
+  const editor = react$1.useEditor({
+    extensions: [
+      // openOnClick false: a plain click has to place the caret so the
+      // author can edit link text. Left at its default, Tiptap navigates
+      // the current tab and throws the author out of the editor.
+      StarterKit__default.default.configure({ link: { openOnClick: false } }),
+      Highlight__default.default,
+      extensionTable.TableKit.configure({ table: { resizable: true } }),
+      createResizableImage({ resizeLabel: labels.resizeImage }).configure({
+        inline: false,
+        allowBase64: allowBase64Images
+      }),
+      ...extraExtensions
+    ],
+    content,
+    immediatelyRender: false,
+    // Required for the toolbar's pressed state and the image node view to
+    // 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
+        // would announce an unnamed box.
+        role: "textbox",
+        "aria-label": labels.editor,
+        class: contentClassName ? `${EDITOR_CONTENT_STYLE} ${contentClassName}` : EDITOR_CONTENT_STYLE
+      },
+      // Ctrl/Cmd-click opens the link in a new tab and leaves the author
+      // where they were: the shortcut is a deliberate gesture, and keeping
+      // the editor open means no unsaved work is at risk. A plain click
+      // falls through to ProseMirror and just moves the caret.
+      handleClick(_view, _pos, event) {
+        if (!event.ctrlKey && !event.metaKey) return false;
+        const href = event.target?.closest("a")?.getAttribute("href");
+        if (!href) return false;
+        event.preventDefault();
+        window.open(href, "_blank", "noopener,noreferrer");
+        return true;
+      }
+    },
+    onUpdate: onUpdate ? ({ editor: current }) => onUpdate(current.getJSON()) : void 0
+  });
+  const currentLinkHref = react.useCallback(
+    () => editor?.getAttributes("link").href ?? "",
+    [editor]
+  );
+  const openLink = react.useCallback(() => {
+    if (editor) {
+      const { from, to } = editor.state.selection;
+      setLinkNeedsText(from === to && !editor.isActive("link"));
+    }
+    onInsertLink?.();
+  }, [editor, onInsertLink]);
+  const applyLink = react.useCallback(
+    (href, text) => {
+      if (!editor) return;
+      const url = href.trim();
+      if (linkNeedsText) {
+        if (url && text?.trim()) {
+          editor.chain().focus().insertContent({
+            type: "text",
+            text: text.trim(),
+            marks: [{ type: "link", attrs: { href: url } }]
+          }).run();
+        }
+        return;
+      }
+      if (url) editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+      else editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    },
+    [editor, linkNeedsText]
+  );
+  const toolbar = react.useMemo(() => {
+    const builtIn = [
+      {
+        kind: "button",
+        id: "bold",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Bold, { className: "h-4 w-4" }),
+        label: labels.bold,
+        active: { name: "bold" },
+        run: (e) => e.chain().focus().toggleBold().run()
+      },
+      {
+        kind: "button",
+        id: "italic",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Italic, { className: "h-4 w-4" }),
+        label: labels.italic,
+        active: { name: "italic" },
+        run: (e) => e.chain().focus().toggleItalic().run()
+      },
+      {
+        kind: "button",
+        id: "heading",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Heading2, { className: "h-4 w-4" }),
+        label: labels.heading,
+        active: { name: "heading", attrs: { level: 2 } },
+        run: (e) => e.chain().focus().toggleHeading({ level: 2 }).run()
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "highlight",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Highlighter, { className: "h-4 w-4" }),
+        label: labels.highlight,
+        active: { name: "highlight" },
+        run: (e) => e.chain().focus().toggleHighlight().run()
+      },
+      {
+        kind: "button",
+        id: "underline",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Underline, { className: "h-4 w-4" }),
+        label: labels.underline,
+        active: { name: "underline" },
+        run: (e) => e.chain().focus().toggleMark("underline").run()
+      },
+      {
+        kind: "button",
+        id: "strike",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Strikethrough, { className: "h-4 w-4" }),
+        label: labels.strikethrough,
+        active: { name: "strike" },
+        run: (e) => e.chain().focus().toggleMark("strike").run()
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "quote",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Quote, { className: "h-4 w-4" }),
+        label: labels.quote,
+        active: { name: "blockquote" },
+        run: (e) => e.chain().focus().toggleBlockquote().run()
+      },
+      {
+        kind: "custom",
+        id: "lists",
+        render: (current) => /* @__PURE__ */ jsxRuntime.jsx(
+          ListMenu,
+          {
+            editor: current,
+            triggerLabel: labels.lists.trigger,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" }),
+            options: [
+              {
+                node: "bulletList",
+                label: labels.lists.bullet,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.List, { className: "h-4 w-4" }),
+                run: (e) => e.chain().focus().toggleBulletList().run()
+              },
+              {
+                node: "orderedList",
+                label: labels.lists.ordered,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListOrdered, { className: "h-4 w-4" }),
+                run: (e) => e.chain().focus().toggleOrderedList().run()
+              }
+            ]
+          }
+        )
+      },
+      { kind: "separator" },
+      {
+        kind: "button",
+        id: "link",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4" }),
+        label: labels.insertLink,
+        active: { name: "link" },
+        run: () => openLink()
+      },
+      {
+        kind: "button",
+        id: "image",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImagePlus, { className: "h-4 w-4" }),
+        label: labels.insertImage,
+        // No `active`: this opens a dialog, it is never a pressed state.
+        run: () => onInsertImage?.()
+      },
+      {
+        kind: "custom",
+        id: "table",
+        render: (current) => /* @__PURE__ */ jsxRuntime.jsx(
+          TableMenu,
+          {
+            editor: current,
+            icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Table, { className: "h-4 w-4" }),
+            labels: labels.table
+          }
+        )
+      }
+    ];
+    let items = builtIn;
+    const appended = [];
+    for (const group of extraToolbar) {
+      if (!group.after) {
+        appended.push(...group.items);
+        continue;
+      }
+      const at = items.findIndex(
+        (item) => item.kind !== "separator" && item.id === group.after
+      );
+      if (at === -1) {
+        appended.push(...group.items);
+        continue;
+      }
+      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 };
+}
 function ColorMenu({ editor, labels, icon, swatches }) {
   const active = swatches.find((swatch) => editor?.isActive(swatch.mark));
   function apply(mark) {
@@ -885,50 +1317,6 @@ function ColorMenu({ editor, labels, icon, swatches }) {
     ) })
   ] });
 }
-function ListMenu({ editor, triggerLabel, icon, options }) {
-  const active = options.find((option) => editor?.isActive(option.node));
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        size: "sm",
-        variant: active ? "secondary" : "ghost",
-        disabled: !editor,
-        title: active ? active.label : triggerLabel,
-        "aria-label": active ? active.label : triggerLabel,
-        "data-slot": "list-menu-trigger",
-        children: [
-          active ? active.icon : icon,
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "h-3 w-3 opacity-60" })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: options.map((option) => {
-      const isActive = editor?.isActive(option.node) ?? false;
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        DropdownMenuItem,
-        {
-          disabled: !editor,
-          className: "cursor-pointer",
-          onSelect: () => editor && option.run(editor),
-          children: [
-            option.icon,
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: option.label }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              lucideReact.Check,
-              {
-                "aria-hidden": "true",
-                className: cn("h-4 w-4", isActive ? "opacity-100" : "opacity-0")
-              }
-            )
-          ]
-        },
-        option.node
-      );
-    }) })
-  ] });
-}
 function InsertLinkDialog({
   open,
   onOpenChange,
@@ -1070,163 +1458,6 @@ function LinkBubbleMenu({ editor, labels, onEdit, onOpen }) {
   if (!editor) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(menus.BubbleMenu, { editor, shouldShow, options, children: /* @__PURE__ */ jsxRuntime.jsx(LinkActions, { editor, labels, onEdit, onOpen }) });
 }
-var DEFAULT_MIN_WIDTH = 120;
-var DEFAULT_START_WIDTH = 400;
-var DEFAULT_RATIO = 4 / 3;
-var KEYBOARD_STEP = 20;
-function ResizableImageView({ node, updateAttributes, selected, extension }) {
-  const { src, alt, width, height } = node.attrs;
-  const sizeRef = react.useRef({ width, height });
-  sizeRef.current = { width, height };
-  const { resizeLabel, minWidth = DEFAULT_MIN_WIDTH } = extension.options;
-  const dragRef = react.useRef(null);
-  const [dragging, setDragging] = react.useState(false);
-  const resizeTo = react.useCallback(
-    (nextWidth, ratio, maxWidth) => {
-      const clamped = Math.max(minWidth, Math.min(Math.round(nextWidth), maxWidth));
-      updateAttributes({ width: clamped, height: Math.round(clamped / ratio) });
-    },
-    [minWidth, updateAttributes]
-  );
-  const measure = react.useCallback((handle) => {
-    const image = handle.parentElement?.querySelector("img") ?? null;
-    const current = sizeRef.current;
-    const editable = handle.closest(".ProseMirror");
-    const available = editable?.clientWidth ?? 0;
-    const naturalWidth = image?.naturalWidth ?? 0;
-    const naturalHeight = image?.naturalHeight ?? 0;
-    const ratio = current.width > 0 && current.height > 0 ? current.width / current.height : naturalWidth > 0 && naturalHeight > 0 ? naturalWidth / naturalHeight : DEFAULT_RATIO;
-    const unbounded = current.width > 0 ? current.width : naturalWidth || DEFAULT_START_WIDTH;
-    const startWidth = available > 0 ? Math.min(unbounded, available) : unbounded;
-    return {
-      width: startWidth,
-      ratio,
-      // jsdom reports clientWidth as 0, so a zero measure means "no
-      // constraint" — the real clamp only applies in a browser.
-      maxWidth: available > 0 ? available : Infinity
-    };
-  }, []);
-  const imageRef = react.useRef(null);
-  const fittedSrcRef = react.useRef(null);
-  react.useEffect(() => {
-    const img = imageRef.current;
-    if (!img) return;
-    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;
-      fittedSrcRef.current = src;
-      const nextWidth = Math.min(img.naturalWidth, available);
-      updateAttributes({
-        width: nextWidth,
-        height: Math.round(nextWidth / (img.naturalWidth / img.naturalHeight))
-      });
-    };
-    if (img.complete) {
-      fit();
-      return;
-    }
-    img.addEventListener("load", fit, { once: true });
-    return () => img.removeEventListener("load", fit);
-  }, [src, updateAttributes]);
-  const onPointerDown = react.useCallback(
-    (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const start = measure(event.currentTarget);
-      dragRef.current = { startX: event.clientX, ...start };
-      setDragging(true);
-      const onMove = (moveEvent) => {
-        const drag = dragRef.current;
-        if (!drag) return;
-        resizeTo(drag.width + (moveEvent.clientX - drag.startX), drag.ratio, drag.maxWidth);
-      };
-      const onUp = () => {
-        dragRef.current = null;
-        setDragging(false);
-        window.removeEventListener("pointermove", onMove);
-        window.removeEventListener("pointerup", onUp);
-      };
-      window.addEventListener("pointermove", onMove);
-      window.addEventListener("pointerup", onUp);
-    },
-    [measure, resizeTo]
-  );
-  const onKeyDown = react.useCallback(
-    (event) => {
-      const step = event.key === "ArrowRight" ? KEYBOARD_STEP : event.key === "ArrowLeft" ? -KEYBOARD_STEP : 0;
-      if (step === 0) return;
-      event.preventDefault();
-      const start = measure(event.currentTarget);
-      resizeTo(start.width + step, start.ratio, start.maxWidth);
-    },
-    [measure, resizeTo]
-  );
-  const sizeStyle = width > 0 ? { width, height: height > 0 ? height : void 0, maxWidth: "100%" } : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    react$1.NodeViewWrapper,
-    {
-      "data-slot": "resizable-image",
-      className: "group relative inline-block max-w-full",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            ref: imageRef,
-            src,
-            alt,
-            className: "max-w-full rounded-md",
-            style: sizeStyle,
-            draggable: false
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            role: "button",
-            tabIndex: 0,
-            "aria-label": resizeLabel,
-            title: resizeLabel,
-            "data-slot": "resizable-image-handle",
-            onPointerDown,
-            onKeyDown,
-            className: cn(
-              "border-primary absolute -right-1 -bottom-1 h-4 w-4 cursor-se-resize touch-none rounded-full border-2 bg-white transition-opacity",
-              "focus-visible:ring-ring/50 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:outline-none",
-              dragging || selected ? "opacity-100" : "opacity-0 group-hover:opacity-100"
-            )
-          }
-        )
-      ]
-    }
-  );
-}
-function createResizableImage(options) {
-  return extensionImage.Image.extend({
-    addOptions() {
-      return { ...this.parent(), ...options };
-    },
-    // The size attributes belong to the extension, not to the consumer: the
-    // stock Image extension keeps width/height too, but they default to null
-    // and render as HTML attributes, which pins the image to a fixed size.
-    //
-    // A numeric default with `rendered: false` is what makes resizing work
-    // at all — Tiptap v3 gates DOM emission on `rendered`, so the size stays
-    // out of the markup and lives only in the document JSON, where a
-    // serializer can read it. Without these declarations the schema drops
-    // every updateAttributes({ width }) call and the handle does nothing.
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        width: { default: 0, rendered: false },
-        height: { default: 0, rendered: false }
-      };
-    },
-    addNodeView() {
-      return react$1.ReactNodeViewRenderer(ResizableImageView);
-    }
-  });
-}
 
 exports.ColorMenu = ColorMenu;
 exports.EDITOR_CONTENT_STYLE = EDITOR_CONTENT_STYLE;
@@ -1238,5 +1469,6 @@ exports.RichTextEditor = RichTextEditor;
 exports.RichTextToolbar = RichTextToolbar;
 exports.TableMenu = TableMenu;
 exports.createResizableImage = createResizableImage;
+exports.useRichTextEditor = useRichTextEditor;
 //# sourceMappingURL=editor.cjs.map
 //# sourceMappingURL=editor.cjs.map