@rufous/ui 0.2.66 → 0.2.67

package/dist/main.js

@@ -8290,8 +8290,8 @@ var PhoneField = forwardRef10(function PhoneField2(props, ref) {
 PhoneField.displayName = "PhoneField";
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
-import React115, { useMemo as useMemo4, useCallback as useCallback13, useState as useState33, useRef as useRef29, useEffect as useEffect26 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
+import React116, { useMemo as useMemo4, useCallback as useCallback13, useState as useState34, useRef as useRef30, useEffect as useEffect27 } from "react";
+import { createPortal as createPortal8 } from "react-dom";
 import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
 import StarterKit from "@tiptap/starter-kit";
 import Placeholder from "@tiptap/extension-placeholder";
@@ -8416,8 +8416,8 @@ import React112, { useState as useState30, useRef as useRef26, useEffect as useE
 import { createPortal as createPortal4 } from "react-dom";
 
 // lib/RufousTextEditor/TextToSpeech.tsx
-import React107, { useState as useState26, useEffect as useEffect20, useRef as useRef23, useCallback as useCallback9 } from "react";
-var TextToSpeech = ({ editor, onTextToSpeech }) => {
+import React107, { useState as useState26, useEffect as useEffect20, useRef as useRef23, useCallback as useCallback9, forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2 } from "react";
+var TextToSpeech = forwardRef12(({ editor, onTextToSpeech }, ref) => {
   const [speaking, setSpeaking] = useState26(false);
   const [paused, setPaused] = useState26(false);
   const [voices, setVoices] = useState26([]);
@@ -8520,6 +8520,7 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
     setSpeaking(false);
     setPaused(false);
   }, []);
+  useImperativeHandle2(ref, () => ({ stop: handleStop }), [handleStop]);
   return /* @__PURE__ */ React107.createElement("div", { className: "tts-wrapper", ref: panelRef }, /* @__PURE__ */ React107.createElement(
     "button",
     {
@@ -8557,12 +8558,12 @@ var TextToSpeech = ({ editor, onTextToSpeech }) => {
     handleSpeak();
     setShowPanel(false);
   } }, "\u25B6 Speak")), speaking && /* @__PURE__ */ React107.createElement("div", { className: "tts-controls" }, paused ? /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleResume, title: "Resume" }, "\u25B6") : /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handlePause, title: "Pause" }, "\u275A\u275A"), /* @__PURE__ */ React107.createElement("button", { className: "toolbar-btn", onClick: handleStop, title: "Stop" }, "\u25A0")));
-};
+});
 var TextToSpeech_default = TextToSpeech;
 
 // lib/RufousTextEditor/SpeechToText.tsx
-import React108, { useState as useState27, useRef as useRef24, useCallback as useCallback10, useEffect as useEffect21 } from "react";
-var SpeechToText = ({ editor, onSpeechToText }) => {
+import React108, { useState as useState27, useRef as useRef24, useCallback as useCallback10, useEffect as useEffect21, forwardRef as forwardRef13, useImperativeHandle as useImperativeHandle3 } from "react";
+var SpeechToText = forwardRef13(({ editor, onSpeechToText }, ref) => {
   const [listening, setListening] = useState27(false);
   const [showPanel, setShowPanel] = useState27(false);
   const [language, setLanguage] = useState27("en-US");
@@ -8673,6 +8674,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
     setListening(false);
     setInterim("");
   }, []);
+  useImperativeHandle3(ref, () => ({ stop: stopListening }), [stopListening]);
   if (!supported) {
     return /* @__PURE__ */ React108.createElement("button", { className: "toolbar-btn", disabled: true, title: "Speech recognition not supported in this browser" }, "\u{1F3A4}");
   }
@@ -8719,7 +8721,7 @@ var SpeechToText = ({ editor, onSpeechToText }) => {
     },
     LANGUAGES2.map((l) => /* @__PURE__ */ React108.createElement("option", { key: l.code, value: l.code }, l.label))
   ), /* @__PURE__ */ React108.createElement("div", { className: "stt-info" }, "Speak into your microphone and the text will be typed into the editor."), /* @__PURE__ */ React108.createElement("button", { className: "stt-start-btn", onClick: startListening }, "\u{1F3A4} Start Listening")), listening && interim && /* @__PURE__ */ React108.createElement("div", { className: "stt-interim" }, interim));
-};
+});
 var SpeechToText_default = SpeechToText;
 
 // lib/RufousTextEditor/AICommands.tsx
@@ -10290,10 +10292,11 @@ var ColorPickerPanel = ({ editor, onClose }) => {
     }
   ))), /* @__PURE__ */ React112.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ React112.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ React112.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
 };
-var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons }) => {
+var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons, isFullscreen, onToggleFullscreen }) => {
   const [, setEditorState] = useState30(0);
-  const [isFullscreen, setIsFullscreen] = useState30(false);
   const [todoEnabled, setTodoEnabled] = useState30(false);
+  const ttsRef = useRef26(null);
+  const sttRef = useRef26(null);
   const show = (id) => !visibleButtons || visibleButtons.has(id);
   useEffect23(() => {
     if (!editor) return;
@@ -10301,16 +10304,6 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     editor.on("transaction", onTransaction);
     return () => editor.off("transaction", onTransaction);
   }, [editor]);
-  const toggleFullscreen = useCallback12(() => {
-    const wrapper = document.querySelector(".editor-wrapper");
-    if (!wrapper) return;
-    if (!isFullscreen) {
-      wrapper.classList.add("fullscreen");
-    } else {
-      wrapper.classList.remove("fullscreen");
-    }
-    setIsFullscreen(!isFullscreen);
-  }, [isFullscreen]);
   const insertSpecialChar = useCallback12((char) => {
     if (!editor) return;
     editor.chain().focus().insertContent(char).run();
@@ -10814,11 +10807,11 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
-      onClick: toggleFullscreen,
+      onClick: onToggleFullscreen,
       title: "Toggle Fullscreen"
     },
     /* @__PURE__ */ React112.createElement(IconFullscreen, null)
-  ), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(
+  ), show("tts") && /* @__PURE__ */ React112.createElement(TextToSpeech_default, { ref: ttsRef, editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ React112.createElement(SpeechToText_default, { ref: sttRef, editor, onSpeechToText }), show("translate") && /* @__PURE__ */ React112.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ React112.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10912,7 +10905,17 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     "button",
     {
       className: "toolbar-btn btn-cross",
-      onClick: onClose,
+      onClick: () => {
+        try {
+          ttsRef.current?.stop();
+        } catch {
+        }
+        try {
+          sttRef.current?.stop();
+        } catch {
+        }
+        onClose();
+      },
       title: "Close"
     },
     /* @__PURE__ */ React112.createElement(closeIcon_default, { color: "#a81c08" })
@@ -11454,6 +11457,175 @@ var VideoToolbar = ({ editor }) => {
 };
 var VideoToolbar_default = VideoToolbar;
 
+// lib/RufousTextEditor/TableToolbar.tsx
+import React115, { useState as useState33, useEffect as useEffect26, useRef as useRef29 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+var IconAddRowBefore = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9 6h2v1.5h1.5v2H11V11H9V9.5H7.5v-2H9z" }));
+var IconAddRowAfter = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9 14h2v1.5h1.5v2H11V19H9v-1.5H7.5v-2H9z" }));
+var IconAddColBefore = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M6 10h1.5v2H6v1.5H4v-2h1.5V10H4V8h2z", transform: "translate(2,1)" }));
+var IconAddColAfter = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M15 9h2v1.5h1.5v2H17V14h-2v-1.5h-1.5v-2H15z" }));
+var IconDeleteRow = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 8H5V5h14v6zm0 8H5v-6h14v6z" }), /* @__PURE__ */ React115.createElement("path", { d: "M8 14.5h8v2H8z" }));
+var IconDeleteCol = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-9 16H5V5h6v14zm8 0h-6V5h6v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M14 9.5v6h2v-6z" }));
+var IconDeleteTable = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M20 3H4c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm-1 16H5V5h14v14z" }), /* @__PURE__ */ React115.createElement("path", { d: "M9.17 10l-1.41 1.41L10.59 14l-2.83 2.83 1.41 1.41L12 15.41l2.83 2.83 1.41-1.41L13.41 14l2.83-2.83-1.41-1.41L12 12.59z" }));
+var IconMergeCells = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h14v-6H5z" }), /* @__PURE__ */ React115.createElement("path", { d: "M8 15h8v2H8z" }));
+var IconSplitCell = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v5h6V5H5zm8 0v5h6V5h-6zM5 13v6h6v-6H5zm8 0v6h6v-6h-6z" }));
+var IconToggleHeader = () => /* @__PURE__ */ React115.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React115.createElement("path", { d: "M3 3h18v18H3V3zm2 2v4h14V5H5zm0 6v8h14v-8H5z" }), /* @__PURE__ */ React115.createElement("rect", { x: "5", y: "5", width: "14", height: "4", opacity: "0.4" }));
+var TableToolbar = ({ editor }) => {
+  const [pos, setPos] = useState33(null);
+  const toolbarRef = useRef29(null);
+  useEffect26(() => {
+    if (!editor) return;
+    const update = () => {
+      if (!editor.isActive("table")) {
+        setPos(null);
+        return;
+      }
+      try {
+        const { $from } = editor.state.selection;
+        let depth = $from.depth;
+        while (depth > 0) {
+          const node = $from.node(depth);
+          if (node.type.name === "table") {
+            const domNode = editor.view.nodeDOM($from.before(depth));
+            if (domNode) {
+              const tableEl = domNode.tagName === "TABLE" ? domNode : domNode.querySelector?.("table") || domNode;
+              const rect = tableEl.getBoundingClientRect();
+              setPos({
+                top: rect.top + window.scrollY - 40,
+                left: rect.left + window.scrollX
+              });
+            }
+            return;
+          }
+          depth--;
+        }
+        setPos(null);
+      } catch {
+        setPos(null);
+      }
+    };
+    editor.on("selectionUpdate", update);
+    editor.on("update", update);
+    update();
+    return () => {
+      editor.off("selectionUpdate", update);
+      editor.off("update", update);
+    };
+  }, [editor]);
+  if (!editor || !pos || !editor.isActive("table")) return null;
+  const canMerge = editor.can().mergeCells();
+  const canSplit = editor.can().splitCell();
+  const prevent = (e) => e.preventDefault();
+  return createPortal7(
+    /* @__PURE__ */ React115.createElement(
+      "div",
+      {
+        ref: toolbarRef,
+        className: "rf-table-toolbar",
+        style: { top: pos.top, left: pos.left },
+        onMouseDown: prevent
+      },
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addRowBefore().run(),
+          title: "Insert row above"
+        },
+        /* @__PURE__ */ React115.createElement(IconAddRowBefore, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addRowAfter().run(),
+          title: "Insert row below"
+        },
+        /* @__PURE__ */ React115.createElement(IconAddRowAfter, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteRow().run(),
+          title: "Delete row"
+        },
+        /* @__PURE__ */ React115.createElement(IconDeleteRow, null)
+      ),
+      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addColumnBefore().run(),
+          title: "Insert column left"
+        },
+        /* @__PURE__ */ React115.createElement(IconAddColBefore, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().addColumnAfter().run(),
+          title: "Insert column right"
+        },
+        /* @__PURE__ */ React115.createElement(IconAddColAfter, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteColumn().run(),
+          title: "Delete column"
+        },
+        /* @__PURE__ */ React115.createElement(IconDeleteCol, null)
+      ),
+      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().mergeCells().run(),
+          disabled: !canMerge,
+          title: "Merge cells"
+        },
+        /* @__PURE__ */ React115.createElement(IconMergeCells, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn",
+          onClick: () => editor.chain().focus().splitCell().run(),
+          disabled: !canSplit,
+          title: "Split cell"
+        },
+        /* @__PURE__ */ React115.createElement(IconSplitCell, null)
+      ),
+      /* @__PURE__ */ React115.createElement("span", { className: "rf-table-toolbar-sep" }),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: `rf-table-toolbar-btn ${editor.isActive("tableHeader") ? "active" : ""}`,
+          onClick: () => editor.chain().focus().toggleHeaderRow().run(),
+          title: "Toggle header row"
+        },
+        /* @__PURE__ */ React115.createElement(IconToggleHeader, null)
+      ),
+      /* @__PURE__ */ React115.createElement(
+        "button",
+        {
+          className: "rf-table-toolbar-btn rf-table-toolbar-btn-danger",
+          onClick: () => editor.chain().focus().deleteTable().run(),
+          title: "Delete table"
+        },
+        /* @__PURE__ */ React115.createElement(IconDeleteTable, null)
+      )
+    ),
+    document.body
+  );
+};
+var TableToolbar_default = TableToolbar;
+
 // lib/RufousTextEditor/legacyTodoTransform.ts
 var IMAGE_TO_STATUS = {
   "todo-blank.svg": "todo",
@@ -11622,12 +11794,12 @@ var RufousTextEditor = ({
     return visible;
   }, [buttons, variant, hideButtons]);
   const mentionSuggestion = useMemo4(() => createMentionSuggestion(mentions), [mentions]);
-  const onChangeRef = useRef29(onChange);
-  const onBlurRef = useRef29(onBlur);
-  useEffect26(() => {
+  const onChangeRef = useRef30(onChange);
+  const onBlurRef = useRef30(onBlur);
+  useEffect27(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect26(() => {
+  useEffect27(() => {
     onBlurRef.current = onBlur;
   }, [onBlur]);
   const isEditable = editable && !disabled;
@@ -11658,7 +11830,9 @@ var RufousTextEditor = ({
         multicolor: true
       }),
       Table.configure({
-        resizable: true
+        resizable: true,
+        cellMinWidth: 80,
+        lastColumnResizable: true
       }),
       TableRow,
       TableCell,
@@ -11726,8 +11900,8 @@ var RufousTextEditor = ({
       onChangeRef.current?.(e.getHTML(), e.getJSON());
     }
   });
-  const wrapperRef = useRef29(null);
-  useEffect26(() => {
+  const wrapperRef = useRef30(null);
+  useEffect27(() => {
     if (!editor) return;
     let blurTimer = null;
     const handler = ({ event }) => {
@@ -11745,14 +11919,14 @@ var RufousTextEditor = ({
       if (blurTimer) clearTimeout(blurTimer);
     };
   }, [editor]);
-  const setLinkRef = useRef29(null);
-  const [linkModalOpen, setLinkModalOpen] = useState33(false);
-  const [linkUrl, setLinkUrl] = useState33("");
-  const [linkText, setLinkText] = useState33("");
-  const [linkClassName, setLinkClassName] = useState33("");
-  const [linkNewTab, setLinkNewTab] = useState33(true);
-  const [linkNoFollow, setLinkNoFollow] = useState33(true);
-  const [linkSelection, setLinkSelection] = useState33(null);
+  const setLinkRef = useRef30(null);
+  const [linkModalOpen, setLinkModalOpen] = useState34(false);
+  const [linkUrl, setLinkUrl] = useState34("");
+  const [linkText, setLinkText] = useState34("");
+  const [linkClassName, setLinkClassName] = useState34("");
+  const [linkNewTab, setLinkNewTab] = useState34(true);
+  const [linkNoFollow, setLinkNoFollow] = useState34(true);
+  const [linkSelection, setLinkSelection] = useState34(null);
   const setLink = useCallback13(() => {
     if (!editor) return;
     const attrs = editor.getAttributes("link");
@@ -11790,10 +11964,10 @@ var RufousTextEditor = ({
     setLinkSelection({ from, to });
     setLinkModalOpen(true);
   }, [editor]);
-  useEffect26(() => {
+  useEffect27(() => {
     setLinkRef.current = setLink;
   }, [setLink]);
-  useEffect26(() => {
+  useEffect27(() => {
     if (!editor?.view) return;
     const handleKeyDown = (event) => {
       if ((event.ctrlKey || event.metaKey) && event.key === "k") {
@@ -11878,7 +12052,7 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveStatus, setSaveStatus] = useState33("");
+  const [saveStatus, setSaveStatus] = useState34("");
   const handleSave = useCallback13(() => {
     if (!editor || !onSaveProp) return;
     onSaveProp(editor.getHTML(), editor.getJSON());
@@ -11890,18 +12064,20 @@ var RufousTextEditor = ({
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
   const providerValue = useMemo4(() => ({ editor }), [editor]);
-  return /* @__PURE__ */ React115.createElement(
+  const [isFullscreen, setIsFullscreen] = useState34(false);
+  const toggleFullscreen = useCallback13(() => setIsFullscreen((prev) => !prev), []);
+  const wrapperJsx = /* @__PURE__ */ React116.createElement(
     "div",
     {
       ref: wrapperRef,
-      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
-      style: {
+      className: `rf-rte-wrapper editor-wrapper ${isFullscreen ? "fullscreen" : ""} ${resizable ? "rf-rte-resizable" : ""} ${disabled ? "rf-rte-disabled" : ""} ${error ? "rf-rte-error" : ""} ${sxClass} ${className || ""}`,
+      style: isFullscreen ? void 0 : {
         ...style,
         ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
         ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
-    /* @__PURE__ */ React115.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React116.createElement(EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ React116.createElement(
       Toolbar_default,
       {
         editor,
@@ -11912,9 +12088,11 @@ var RufousTextEditor = ({
         onTextToSpeech,
         onImageUpload,
         onClose,
-        visibleButtons: toolbarButtons
+        visibleButtons: toolbarButtons,
+        isFullscreen,
+        onToggleFullscreen: toggleFullscreen
       }
-    ), /* @__PURE__ */ React115.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React115.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React115.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ React115.createElement(
+    ), /* @__PURE__ */ React116.createElement(EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ React116.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ React116.createElement(VideoToolbar_default, { editor }), /* @__PURE__ */ React116.createElement(TableToolbar_default, { editor }), editor && /* @__PURE__ */ React116.createElement(
       BubbleMenu,
       {
         editor,
@@ -11932,31 +12110,31 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBold().run(),
           className: editor?.isActive("bold") ? "is-active" : ""
         },
-        /* @__PURE__ */ React115.createElement("strong", null, "B")
+        /* @__PURE__ */ React116.createElement("strong", null, "B")
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleItalic().run(),
           className: editor?.isActive("italic") ? "is-active" : ""
         },
-        /* @__PURE__ */ React115.createElement("em", null, "I")
+        /* @__PURE__ */ React116.createElement("em", null, "I")
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleStrike().run(),
           className: editor?.isActive("strike") ? "is-active" : ""
         },
-        /* @__PURE__ */ React115.createElement("s", null, "S")
+        /* @__PURE__ */ React116.createElement("s", null, "S")
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleCode().run(),
@@ -11964,7 +12142,7 @@ var RufousTextEditor = ({
         },
         "</>"
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: setLink,
@@ -11972,7 +12150,7 @@ var RufousTextEditor = ({
         },
         "\u{1F517}"
       )
-    ), editor && /* @__PURE__ */ React115.createElement(
+    ), editor && /* @__PURE__ */ React116.createElement(
       FloatingMenu,
       {
         editor,
@@ -11987,7 +12165,7 @@ var RufousTextEditor = ({
           }
         }
       },
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
@@ -11995,7 +12173,7 @@ var RufousTextEditor = ({
         },
         "H1"
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
@@ -12003,7 +12181,7 @@ var RufousTextEditor = ({
         },
         "H2"
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBulletList().run(),
@@ -12011,7 +12189,7 @@ var RufousTextEditor = ({
         },
         "\u2022 List"
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleOrderedList().run(),
@@ -12019,7 +12197,7 @@ var RufousTextEditor = ({
         },
         "1. List"
       ),
-      /* @__PURE__ */ React115.createElement(
+      /* @__PURE__ */ React116.createElement(
         "button",
         {
           onClick: () => editor?.chain().focus().toggleBlockquote().run(),
@@ -12027,8 +12205,8 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal7(
-      /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
+    ), /* @__PURE__ */ React116.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React116.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React116.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React116.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React116.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React116.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React116.createElement(React116.Fragment, null, /* @__PURE__ */ React116.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React116.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal8(
+      /* @__PURE__ */ React116.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React116.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React116.createElement(
         "input",
         {
           type: "url",
@@ -12041,7 +12219,7 @@ var RufousTextEditor = ({
           placeholder: "https://example.com",
           autoFocus: true
         }
-      )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React115.createElement(
+      )), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React116.createElement(
         "input",
         {
           type: "text",
@@ -12053,30 +12231,31 @@ var RufousTextEditor = ({
           },
           placeholder: "Link text"
         }
-      )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
+      )), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React116.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React116.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNewTab,
           onChange: (e) => setLinkNewTab(e.target.checked)
         }
-      ), "Open in new tab"), /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
+      ), "Open in new tab"), /* @__PURE__ */ React116.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React116.createElement(
         "input",
         {
           type: "checkbox",
           checked: linkNoFollow,
           onChange: (e) => setLinkNoFollow(e.target.checked)
         }
-      ), "No follow"))), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
+      ), "No follow"))), /* @__PURE__ */ React116.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React116.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React116.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
       document.body
     )),
-    helperText && /* @__PURE__ */ React115.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
+    helperText && /* @__PURE__ */ React116.createElement("div", { className: `rf-rte-helper-text ${error ? "rf-rte-helper-error" : ""}` }, helperText)
   );
+  return isFullscreen ? createPortal8(wrapperJsx, document.body) : wrapperJsx;
 };
 var RufousTextContent = ({ content, className, style, sx }) => {
   const sxClass = useSx(sx);
   const transformedContent = useMemo4(() => transformLegacyTodos(content || ""), [content]);
-  return /* @__PURE__ */ React115.createElement(
+  return /* @__PURE__ */ React116.createElement(
     "div",
     {
       className: `rf-rte-content ${sxClass} ${className || ""}`,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.2.66",
+  "version": "0.2.67",
   "type": "module",
   "description": "Experimental: A lightweight React UI component library (Beta)",
   "style": "./dist/main.css",