@rufous/ui 0.2.55 → 0.2.56

package/dist/main.cjs

@@ -9183,7 +9183,7 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
     },
     /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-code" }, lang.code),
     /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-name" }, lang.name)
-  ))))), error && /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "\xD7 Cancel")), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "\u2714 Save"))));
+  ))))), error && /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save"))));
 };
 var TranslateModal_default = TranslateModal;
 
@@ -9802,7 +9802,8 @@ var CustomTaskItem = import_extension_task_item.default.extend({
           "border: 2px solid " + colors.border,
           `background-image: url("${imageUrl}")`,
           "background-repeat: no-repeat",
-          "background-position: center"
+          "background-position: center",
+          "box-sizing: unset !important"
         ].join("; ");
         li.setAttribute("data-status", status);
       };
@@ -10033,12 +10034,24 @@ var Dropdown = ({ trigger, children, className = "", keepOpen = false }) => {
     const menu = menuRef.current;
     menu.style.left = "0";
     menu.style.right = "auto";
-    const rect = menu.getBoundingClientRect();
-    const vw = window.innerWidth;
-    if (rect.right > vw - 8) {
-      menu.style.left = "auto";
-      menu.style.right = "0";
-    }
+    requestAnimationFrame(() => {
+      if (!menu) return;
+      const rect = menu.getBoundingClientRect();
+      const vw = window.innerWidth;
+      const parentLeft = ref.current?.getBoundingClientRect().left || 0;
+      if (rect.right > vw - 8) {
+        menu.style.left = "auto";
+        menu.style.right = "0";
+        const newRect = menu.getBoundingClientRect();
+        if (newRect.left < 8) {
+          menu.style.left = `${8 - parentLeft}px`;
+          menu.style.right = "auto";
+        }
+      } else if (rect.left < 8) {
+        menu.style.left = `${8 - parentLeft}px`;
+        menu.style.right = "auto";
+      }
+    });
   }, [open]);
   return /* @__PURE__ */ import_react55.default.createElement("div", { className: `dropdown ${className}`, ref }, /* @__PURE__ */ import_react55.default.createElement(
     "button",
@@ -10303,10 +10316,11 @@ var ColorPickerPanel = ({ editor, onClose }) => {
     }
   ))), /* @__PURE__ */ import_react55.default.createElement("div", { className: "color-picker-footer" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "color-picker-preview", style: { background: activeColor || "#000" } }), /* @__PURE__ */ import_react55.default.createElement("button", { className: "color-picker-remove", onClick: removeColor, title: "Remove color" }, "\u2713")));
 };
-var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload }) => {
+var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload, visibleButtons }) => {
   const [, setEditorState] = (0, import_react55.useState)(0);
   const [isFullscreen, setIsFullscreen] = (0, import_react55.useState)(false);
   const [todoEnabled, setTodoEnabled] = (0, import_react55.useState)(false);
+  const show = (id) => !visibleButtons || visibleButtons.has(id);
   (0, import_react55.useEffect)(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -10390,7 +10404,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     setTimeout(() => setTranslateStatus(""), 2e3);
   }, [editor, translateSource, translateTarget, onTranslate]);
   if (!editor) return null;
-  return /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(
+  return /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar" }, /* @__PURE__ */ import_react55.default.createElement("div", { className: `toolbar-row ${onClose ? "with-close" : ""}` }, (show("undo") || show("redo")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("undo") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10399,7 +10413,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Undo (Ctrl+Z)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconUndo, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("redo") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10408,7 +10422,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Redo (Ctrl+Y)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconRedo, null)
-  )), /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(
+  )), show("ai") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(AICommands_default, { editor, onAICommand })), /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("paragraph") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10475,7 +10489,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " Code Block"
     ),
     /* @__PURE__ */ import_react55.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().setHorizontalRule().run() }, "\u2014 Horizontal Rule")
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("fontsize") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10502,7 +10516,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         sizeStr
       );
     })
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("font") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10529,7 +10543,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         font
       );
     })
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("color") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10539,7 +10553,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       keepOpen: true
     },
     (close) => /* @__PURE__ */ import_react55.default.createElement(ColorPickerPanel, { editor, onClose: close })
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("bold") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("bold") ? "is-active" : ""}`,
@@ -10547,7 +10561,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Bold (Ctrl+B)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconBold, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("italic") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("italic") ? "is-active" : ""}`,
@@ -10555,7 +10569,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Italic (Ctrl+I)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconItalic, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("strike") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconStrike, null), title: "Text decoration", className: editor.isActive("strike") ? "is-active" : "" }
@@ -10580,7 +10594,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         c.run();
       }
     } }, "\u2715 Clear formatting")
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("link") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: `toolbar-btn ${editor.isActive("link") ? "is-active" : ""}`,
@@ -10588,7 +10602,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Insert Link"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconLink, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("lineheight") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10615,7 +10629,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
         lh
       );
     })
-  )), /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(
+  )), (show("ul") || show("ol")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10658,7 +10672,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("ol") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10703,7 +10717,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  )), /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, /* @__PURE__ */ import_react55.default.createElement(
+  )), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: {
@@ -10728,7 +10742,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       " ",
       item.label
     ))
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("indent") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10749,7 +10763,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Increase Indent"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconIndentIncrease, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("outdent") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10770,7 +10784,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Decrease Indent"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconIndentDecrease, null)
-  )), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(TableGridSelector, { editor, onClose: close })), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), /* @__PURE__ */ import_react55.default.createElement(
+  )), show("table") && /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconTable, null), title: "Insert Table" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(TableGridSelector, { editor, onClose: close })), show("image") && /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconImage, null), title: "Insert Image" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(ImagePanel, { editor, onClose: close, onImageUpload })), show("video") && /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconVideo, null), title: "Insert Video" }, keepOpen: true }, (close) => /* @__PURE__ */ import_react55.default.createElement(InsertPanel, { editor, onClose: close, mode: "video" })), show("cut") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10778,7 +10792,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Cut (Ctrl+X)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconCut, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("copy") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10786,7 +10800,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Copy selected text"
     },
     copySuccess ? /* @__PURE__ */ import_react55.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react55.default.createElement(IconCopy, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("paste") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10794,7 +10808,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Paste (Ctrl+V)"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconPaste, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react55.default.createElement(
+  ), show("specialchars") && /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react55.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       key: char,
@@ -10802,7 +10816,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       onClick: () => insertSpecialChar(char)
     },
     char
-  )))), /* @__PURE__ */ import_react55.default.createElement(
+  )))), show("code") && /* @__PURE__ */ import_react55.default.createElement(
     Dropdown,
     {
       trigger: { label: /* @__PURE__ */ import_react55.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
@@ -10826,7 +10840,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       }
     } }, "</>", " Inline Code"),
     /* @__PURE__ */ import_react55.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
-  ), /* @__PURE__ */ import_react55.default.createElement(
+  ), show("fullscreen") && /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: `toolbar-btn ${isFullscreen ? "is-active" : ""}`,
@@ -10834,7 +10848,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Toggle Fullscreen"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconFullscreen, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(TextToSpeech_default, { editor, onTextToSpeech }), /* @__PURE__ */ import_react55.default.createElement(SpeechToText_default, { editor, onSpeechToText }), /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
+  ), show("tts") && /* @__PURE__ */ import_react55.default.createElement(TextToSpeech_default, { editor, onTextToSpeech }), show("stt") && /* @__PURE__ */ import_react55.default.createElement(SpeechToText_default, { editor, onSpeechToText }), show("translate") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "translate-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: "toolbar-btn",
@@ -10842,7 +10856,7 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Translate selected text"
     },
     /* @__PURE__ */ import_react55.default.createElement(IconTranslate, null)
-  ), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react55.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), /* @__PURE__ */ import_react55.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
+  ), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react55.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react55.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), show("todo") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
     "button",
     {
       className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
@@ -11085,7 +11099,7 @@ var ImagePropertiesModal = ({ editor, node, onClose }) => {
       checked: openInNewTab,
       onChange: (e) => setOpenInNewTab(e.target.checked)
     }
-  ), "Open link in new tab")) : /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react56.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react56.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react56.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "\xD7 Cancel"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
+  ), "Open link in new tab")) : /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement("label", { className: "modal-label" }, "CSS Class"), /* @__PURE__ */ import_react56.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. rounded shadow" }), /* @__PURE__ */ import_react56.default.createElement("label", { className: "modal-label" }, "Inline Style"), /* @__PURE__ */ import_react56.default.createElement("input", { type: "text", className: "modal-input", placeholder: "e.g. border: 1px solid #ccc" }))))), /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react56.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var ImageToolbar = ({ editor }) => {
   const [showModal, setShowModal] = (0, import_react56.useState)(false);
@@ -11338,7 +11352,7 @@ var VideoPropertiesModal = ({ editor, node, nodeType, onClose }) => {
       value: height,
       onChange: (e) => handleHeightChange(e.target.value)
     }
-  )))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "\xD7 Cancel"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "\u{1F5D1} Delete")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "\u2714 Apply"))));
+  )))), /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel"), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-delete", onClick: handleDelete }, "Delete")), /* @__PURE__ */ import_react57.default.createElement("button", { className: "modal-btn-apply", onClick: handleApply }, "Apply"))));
 };
 var VideoToolbar = ({ editor }) => {
   const [showModal, setShowModal] = (0, import_react57.useState)(false);
@@ -11471,6 +11485,62 @@ var VideoToolbar = ({ editor }) => {
 var VideoToolbar_default = VideoToolbar;
 
 // lib/RufousTextEditor/RufousTextEditor.tsx
+var VARIANT_BUTTONS = {
+  default: [
+    "undo",
+    "redo",
+    "|",
+    "ai",
+    "|",
+    "paragraph",
+    "fontsize",
+    "font",
+    "color",
+    "bold",
+    "italic",
+    "strike",
+    "link",
+    "lineheight",
+    "|",
+    "ul",
+    "ol",
+    "|",
+    "align",
+    "indent",
+    "outdent",
+    "|",
+    "table",
+    "image",
+    "video",
+    "|",
+    "cut",
+    "copy",
+    "paste",
+    "specialchars",
+    "code",
+    "fullscreen",
+    "|",
+    "tts",
+    "stt",
+    "translate",
+    "|",
+    "todo"
+  ],
+  basic: [
+    "undo",
+    "redo",
+    "|",
+    "paragraph",
+    "fontsize",
+    "font",
+    "bold",
+    "italic",
+    "link",
+    "|",
+    "ul",
+    "ol"
+  ]
+};
 var RufousTextEditor = ({
   content: initialContent,
   placeholder: customPlaceholder,
@@ -11486,6 +11556,10 @@ var RufousTextEditor = ({
   onImageUpload,
   onClose,
   mentions,
+  variant = "default",
+  buttons,
+  hideButtons,
+  width,
   height,
   resizable = false,
   className,
@@ -11493,6 +11567,14 @@ var RufousTextEditor = ({
   sx
 }) => {
   const sxClass = useSx(sx);
+  const toolbarButtons = (0, import_react58.useMemo)(() => {
+    const list = buttons || VARIANT_BUTTONS[variant] || VARIANT_BUTTONS.default;
+    const visible = new Set(list.filter((b) => b !== "|"));
+    if (hideButtons) {
+      hideButtons.forEach((b) => visible.delete(b));
+    }
+    return visible;
+  }, [buttons, variant, hideButtons]);
   const mentionSuggestion = (0, import_react58.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
   const onChangeRef = (0, import_react58.useRef)(onChange);
   const onBlurRef = (0, import_react58.useRef)(onBlur);
@@ -11737,7 +11819,6 @@ var RufousTextEditor = ({
     setLinkSelection(null);
     editor?.chain().focus().run();
   }, [editor]);
-  const [saveFormat, setSaveFormat] = (0, import_react58.useState)("html");
   const [saveStatus, setSaveStatus] = (0, import_react58.useState)("");
   const handleSave = (0, import_react58.useCallback)(() => {
     if (!editor || !onSaveProp) return;
@@ -11749,12 +11830,6 @@ var RufousTextEditor = ({
     if (!editor || !onExportProp) return;
     onExportProp(editor.getHTML(), editor.getJSON());
   }, [editor, onExportProp]);
-  const handleClear = (0, import_react58.useCallback)(() => {
-    if (!editor) return;
-    if (window.confirm("Clear all content? This cannot be undone.")) {
-      editor.commands.clearContent();
-    }
-  }, [editor]);
   const providerValue = (0, import_react58.useMemo)(() => ({ editor }), [editor]);
   return /* @__PURE__ */ import_react58.default.createElement(
     "div",
@@ -11762,6 +11837,7 @@ var RufousTextEditor = ({
       className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${sxClass} ${className || ""}`,
       style: {
         ...style,
+        ...width ? { width: typeof width === "number" ? `${width}px` : width } : {},
         ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
@@ -11775,7 +11851,8 @@ var RufousTextEditor = ({
         onSpeechToText,
         onTextToSpeech,
         onImageUpload,
-        onClose
+        onClose,
+        visibleButtons: toolbarButtons
       }
     ), /* @__PURE__ */ import_react58.default.createElement(import_react59.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react58.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react58.default.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ import_react58.default.createElement(
       import_react59.BubbleMenu,
@@ -11890,16 +11967,7 @@ var RufousTextEditor = ({
         },
         "\u201C Quote"
       )
-    ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, /* @__PURE__ */ import_react58.default.createElement(
-      "select",
-      {
-        value: saveFormat,
-        onChange: (e) => setSaveFormat(e.target.value),
-        className: "format-select"
-      },
-      /* @__PURE__ */ import_react58.default.createElement("option", { value: "html" }, "HTML"),
-      /* @__PURE__ */ import_react58.default.createElement("option", { value: "json" }, "JSON")
-    ), onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export"), /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleClear, className: "status-btn clear-btn" }, "Clear")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
+    ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
       "input",
       {
         type: "url",