@rufous/ui 0.1.98 → 0.1.100

package/dist/main.cjs

@@ -41672,6 +41672,12 @@ var STATUS_IMAGES = {
   blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg",
   resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg"
 };
+var STATUS_LABELS = {
+  todo: "Todo",
+  working: "Working",
+  blocked: "Blocked",
+  resolved: "Resolved"
+};
 var STATUS_COLORS = {
   todo: { border: "#dc2626", bg: "#fff", color: "#dc2626" },
   working: { border: "#2563eb", bg: "#eff6ff", color: "#2563eb" },
@@ -41715,14 +41721,16 @@ var CustomTaskItem = import_extension_task_item.default.extend({
         if (afterContent.size > 0) {
           tr.delete(cursorPos, paraEnd);
         }
-        const newPara = afterContent.size > 0 ? schema.nodes.paragraph.create(null, afterContent) : schema.nodes.paragraph.create();
+        const statusLabel = STATUS_LABELS[status] || STATUS_LABELS.todo;
+        const newPara = afterContent.size > 0 ? schema.nodes.paragraph.create(null, afterContent) : schema.nodes.paragraph.create(null, schema.text(statusLabel));
         const newItem = schema.nodes.taskItem.create(
           { status, checked: false },
           newPara
         );
         const insertPos = tr.mapping.map($from.after(taskDepth));
         tr.insert(insertPos, newItem);
-        tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos + 2)));
+        const textLen = afterContent.size > 0 ? 0 : statusLabel.length;
+        tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos + 2 + textLen)));
         this.editor.view.dispatch(tr);
         return true;
       },
@@ -41762,10 +41770,35 @@ var CustomTaskItem = import_extension_task_item.default.extend({
           const from = $from.before(taskItemDepth);
           const to = $from.after(taskItemDepth);
           tr.delete(from, to);
-          tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, from))));
+          tr.setSelection(TextSelection.near(tr.doc.resolve(Math.max(0, from)), -1));
           this.editor.view.dispatch(tr);
           return true;
         }
+        const indexInList = taskListDepth !== -1 ? $from.index(taskListDepth) : -1;
+        if (indexInList > 0 && taskListDepth !== -1) {
+          const tr = state.tr;
+          const itemStart = $from.before(taskItemDepth);
+          const itemEnd = $from.after(taskItemDepth);
+          const posBefore = itemStart;
+          if (tr.doc.resolve(posBefore).nodeBefore) {
+            const textContent = taskItem.textContent;
+            const contentSlice = taskItem.content;
+            tr.delete(itemStart, itemEnd);
+            const prevItemEndPos = Math.max(0, itemStart - 1);
+            const $prevEnd = tr.doc.resolve(prevItemEndPos);
+            const prevParaEnd = $prevEnd.end($prevEnd.depth);
+            let insertAt = prevParaEnd;
+            contentSlice.forEach((child) => {
+              child.content.forEach((inline) => {
+                tr.insert(insertAt, inline);
+                insertAt += inline.nodeSize;
+              });
+            });
+            tr.setSelection(TextSelection.create(tr.doc, prevParaEnd));
+            this.editor.view.dispatch(tr);
+            return true;
+          }
+        }
         return this.editor.commands.liftListItem(this.name);
       },
       "Shift-Tab": () => this.editor.commands.liftListItem(this.name),
@@ -41881,6 +41914,7 @@ var IconFullscreen = () => /* @__PURE__ */ React112.createElement("svg", { ...s
 var IconTranslate = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M12.87 15.07l-2.54-2.51.03-.03A17.52 17.52 0 0014.07 6H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2.02c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" }));
 var IconTaskList = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M22 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zm0 8c0-.55-.45-1-1-1h-7c-.55 0-1 .45-1 1s.45 1 1 1h7c.55 0 1-.45 1-1zM5.54 11L2 7.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 11zm0 8L2 15.46l1.41-1.41 2.12 2.12 4.24-4.24 1.41 1.41L5.54 19z" }));
 var IconCheck = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }));
+var IconPaste = () => /* @__PURE__ */ React112.createElement("svg", { ...s }, /* @__PURE__ */ React112.createElement("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }));
 
 // lib/RufousTextEditor/Toolbar.tsx
 var COLOR_PALETTE = [
@@ -42346,6 +42380,15 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       setTimeout(() => setCopySuccess(false), 2e3);
     }
   }, [editor]);
+  const handlePaste = (0, import_react56.useCallback)(async () => {
+    if (!editor) return;
+    try {
+      const text = await navigator.clipboard.readText();
+      if (text) editor.chain().focus().insertContent(text).run();
+    } catch {
+      document.execCommand("paste");
+    }
+  }, [editor]);
   const handleQuickTranslate = (0, import_react56.useCallback)(async () => {
     if (!editor) return;
     const { from, to, empty } = editor.state.selection;
@@ -42776,6 +42819,14 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Copy selected text"
     },
     copySuccess ? /* @__PURE__ */ import_react56.default.createElement(IconCheck, null) : /* @__PURE__ */ import_react56.default.createElement(IconCopy, null)
+  ), /* @__PURE__ */ import_react56.default.createElement(
+    "button",
+    {
+      className: "toolbar-btn",
+      onClick: handlePaste,
+      title: "Paste (Ctrl+V)"
+    },
+    /* @__PURE__ */ import_react56.default.createElement(IconPaste, null)
   ), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "\u03A9", title: "Special characters", className: "special-characters-btn" } }, /* @__PURE__ */ import_react56.default.createElement("div", { className: "char-grid" }, SPECIAL_CHARS.map((char) => /* @__PURE__ */ import_react56.default.createElement(
     "button",
     {
@@ -42787,10 +42838,26 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   )))), /* @__PURE__ */ import_react56.default.createElement(
     Dropdown,
     {
-      trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") ? "is-active" : "" }
+      trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
     },
     /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCode().run() }, "</>", " Inline Code"),
-    /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
+    /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block"),
+    editor.isActive("codeBlock") && /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => {
+      const text = (() => {
+        const { $from } = editor.state.selection;
+        for (let d = $from.depth; d > 0; d--) {
+          if ($from.node(d).type.name === "codeBlock") return $from.node(d).textContent;
+        }
+        return "";
+      })();
+      if (text) {
+        editor.chain().focus().toggleCodeBlock().run();
+        const { from } = editor.state.selection;
+        editor.chain().focus().setTextSelection({ from, to: from + text.length }).toggleCode().run();
+      } else {
+        editor.chain().focus().toggleCodeBlock().run();
+      }
+    } }, "</> \u2190", " Convert to Inline Code")
   ), /* @__PURE__ */ import_react56.default.createElement(
     "button",
     {
@@ -42807,52 +42874,73 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
       title: "Translate selected text"
     },
     /* @__PURE__ */ import_react56.default.createElement(IconTranslate, null)
-  ), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react56.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), /* @__PURE__ */ import_react56.default.createElement(
-    Dropdown,
+  ), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ import_react56.default.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), /* @__PURE__ */ import_react56.default.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ import_react56.default.createElement(
+    "button",
     {
-      trigger: { label: /* @__PURE__ */ import_react56.default.createElement(IconTaskList, null), title: "Task list", className: editor.isActive("taskList") ? "is-active" : "" },
-      keepOpen: true
-    },
-    ["todo", "working", "blocked", "resolved"].map((status) => {
-      const symbols = { todo: "\u2610", working: "\u27F3", blocked: "\u25A0", resolved: "\u2611" };
-      const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
-      const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
-      return /* @__PURE__ */ import_react56.default.createElement("button", { key: status, className: `dropdown-item task-status-item`, onClick: () => {
-        const { state } = editor;
-        const { schema } = state;
-        const taskItemType = schema.nodes.taskItem;
-        const taskListType = schema.nodes.taskList;
-        if (!taskItemType || !taskListType) return;
-        const statusText = schema.text(labels[status]);
-        const newTaskItem = taskItemType.create({ status, checked: false }, schema.nodes.paragraph.create(null, statusText));
-        editor.chain().focus().command(({ tr, dispatch, state: cmdState }) => {
-          if (!dispatch) return true;
-          const { $from } = tr.selection;
-          let taskItemDepth = -1;
-          for (let d = $from.depth; d > 0; d--) {
-            if ($from.node(d).type.name === "taskItem") {
-              taskItemDepth = d;
-              break;
-            }
-          }
-          const textLen = labels[status].length;
-          if (taskItemDepth !== -1) {
-            const afterPos = $from.after(taskItemDepth);
-            tr.insert(afterPos, newTaskItem);
-            const resolvedPos = tr.doc.resolve(afterPos + 2 + textLen);
-            tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
-          } else {
-            const newTaskList = taskListType.create(null, newTaskItem);
+      className: `toolbar-btn ${editor.isActive("taskList") ? "is-active" : ""}`,
+      onClick: () => {
+        if (editor.isActive("taskList")) {
+          editor.chain().focus().liftListItem("taskItem").run();
+        } else {
+          const { state } = editor;
+          const { schema } = state;
+          const taskItemType = schema.nodes.taskItem;
+          const taskListType = schema.nodes.taskList;
+          if (!taskItemType || !taskListType) return;
+          const statusText = schema.text("Todo");
+          const newTaskItem = taskItemType.create({ status: "todo", checked: false }, schema.nodes.paragraph.create(null, statusText));
+          const newTaskList = taskListType.create(null, newTaskItem);
+          editor.chain().focus().command(({ tr, dispatch, state: cmdState }) => {
+            if (!dispatch) return true;
             const pos = tr.selection.from;
             tr.replaceSelectionWith(newTaskList);
-            const resolvedPos = tr.doc.resolve(pos + 2 + textLen);
+            const resolvedPos = tr.doc.resolve(pos + 2 + 4);
             tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
+            return true;
+          }).run();
+        }
+      },
+      title: editor.isActive("taskList") ? "Disable Task List" : "Enable Task List"
+    },
+    /* @__PURE__ */ import_react56.default.createElement(IconTaskList, null)
+  ), /* @__PURE__ */ import_react56.default.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {
+    const images = { todo: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/todo-blank.svg", working: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/working.svg", blocked: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/blocked.svg", resolved: "https://storage.googleapis.com/rufous-com-bucket-1/static/images/closed.svg" };
+    const labels = { todo: "Todo", working: "Working", blocked: "Blocked", resolved: "Resolved" };
+    return /* @__PURE__ */ import_react56.default.createElement("button", { key: status, className: "dropdown-item task-status-item", onClick: () => {
+      const { state } = editor;
+      const { schema } = state;
+      const taskItemType = schema.nodes.taskItem;
+      const taskListType = schema.nodes.taskList;
+      if (!taskItemType || !taskListType) return;
+      const statusText = schema.text(labels[status]);
+      const newTaskItem = taskItemType.create({ status, checked: false }, schema.nodes.paragraph.create(null, statusText));
+      editor.chain().focus().command(({ tr, dispatch, state: cmdState }) => {
+        if (!dispatch) return true;
+        const { $from } = tr.selection;
+        let taskItemDepth = -1;
+        for (let d = $from.depth; d > 0; d--) {
+          if ($from.node(d).type.name === "taskItem") {
+            taskItemDepth = d;
+            break;
           }
-          return true;
-        }).run();
-      } }, /* @__PURE__ */ import_react56.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react56.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
-    })
-  )), onClose && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react56.default.createElement(
+        }
+        const textLen = labels[status].length;
+        if (taskItemDepth !== -1) {
+          const afterPos = $from.after(taskItemDepth);
+          tr.insert(afterPos, newTaskItem);
+          const resolvedPos = tr.doc.resolve(afterPos + 2 + textLen);
+          tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
+        } else {
+          const newTaskList = taskListType.create(null, newTaskItem);
+          const pos = tr.selection.from;
+          tr.replaceSelectionWith(newTaskList);
+          const resolvedPos = tr.doc.resolve(pos + 2 + textLen);
+          tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
+        }
+        return true;
+      }).run();
+    } }, /* @__PURE__ */ import_react56.default.createElement("span", { className: `task-icon task-${status}` }, /* @__PURE__ */ import_react56.default.createElement("img", { src: images[status], alt: status })), " ", labels[status]);
+  })))), onClose && /* @__PURE__ */ import_react56.default.createElement("div", { className: "toolbar-row-right" }, /* @__PURE__ */ import_react56.default.createElement(
     "button",
     {
       className: "toolbar-btn btn-cross",
@@ -43414,9 +43502,13 @@ var RufousTextEditor = ({
   onImageUpload,
   onClose,
   mentions,
+  height,
+  resizable = false,
   className,
-  style
+  style,
+  sx
 }) => {
+  const sxClass = useSx(sx);
   const mentionSuggestion = (0, import_react59.useMemo)(() => createMentionSuggestion(mentions), [mentions]);
   const onChangeRef = (0, import_react59.useRef)(onChange);
   const onBlurRef = (0, import_react59.useRef)(onBlur);
@@ -43539,8 +43631,31 @@ var RufousTextEditor = ({
     if (!editor) return;
     const attrs = editor.getAttributes("link");
     const previousUrl = attrs.href || "";
-    const { from, to } = editor.state.selection;
-    const selectedText = editor.state.doc.textBetween(from, to, "");
+    let { from, to } = editor.state.selection;
+    let selectedText = editor.state.doc.textBetween(from, to, "");
+    if (!selectedText && editor.isActive("link")) {
+      const $pos = editor.state.selection.$from;
+      const linkMark = editor.state.schema.marks.link;
+      const parent = $pos.parent;
+      let offset3 = $pos.parentOffset;
+      let start = 0, end = 0, found2 = false;
+      parent.forEach((child, childOffset) => {
+        if (child.isText && child.marks.some((m) => m.type === linkMark)) {
+          const childStart = childOffset;
+          const childEnd = childOffset + child.nodeSize;
+          if (childStart <= offset3 && childEnd >= offset3) {
+            start = $pos.start() + childStart;
+            end = $pos.start() + childEnd;
+            found2 = true;
+          }
+        }
+      });
+      if (found2) {
+        from = start;
+        to = end;
+        selectedText = editor.state.doc.textBetween(from, to, "");
+      }
+    }
     setLinkUrl(previousUrl);
     setLinkText(selectedText || previousUrl);
     setLinkClassName(attrs.class && attrs.class !== "editor-link" ? attrs.class : "");
@@ -43621,201 +43736,214 @@ var RufousTextEditor = ({
     }
   }, [editor]);
   const providerValue = (0, import_react59.useMemo)(() => ({ editor }), [editor]);
-  return /* @__PURE__ */ import_react59.default.createElement("div", { className: `rf-rte-wrapper editor-wrapper ${className || ""}`, style }, /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react59.default.createElement(
-    Toolbar_default,
-    {
-      editor,
-      setLink,
-      onAICommand,
-      onTranslate,
-      onSpeechToText,
-      onTextToSpeech,
-      onImageUpload,
-      onClose
-    }
-  ), /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react59.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ import_react59.default.createElement(
-    import_react60.BubbleMenu,
+  return /* @__PURE__ */ import_react59.default.createElement(
+    "div",
     {
-      editor,
-      className: "bubble-menu",
-      shouldShow: ({ editor: e }) => {
-        if (!e || e.isDestroyed) return false;
-        try {
-          const { selection } = e.state;
-          if (selection?.node?.type.name === "image") return false;
-          if (selection?.node?.type.name === "youtube") return false;
-          if (selection?.node?.type.name === "video") return false;
-          return !selection.empty;
-        } catch {
-          return false;
-        }
+      className: `rf-rte-wrapper editor-wrapper ${resizable ? "rf-rte-resizable" : ""} ${sxClass} ${className || ""}`,
+      style: {
+        ...style,
+        ...height ? { height: typeof height === "number" ? `${height}px` : height } : {}
       }
     },
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+    /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContext.Provider, { value: providerValue }, /* @__PURE__ */ import_react59.default.createElement(
+      Toolbar_default,
       {
-        onClick: () => editor?.chain().focus().toggleBold().run(),
-        className: editor?.isActive("bold") ? "is-active" : ""
-      },
-      /* @__PURE__ */ import_react59.default.createElement("strong", null, "B")
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+        editor,
+        setLink,
+        onAICommand,
+        onTranslate,
+        onSpeechToText,
+        onTextToSpeech,
+        onImageUpload,
+        onClose
+      }
+    ), /* @__PURE__ */ import_react59.default.createElement(import_react60.EditorContent, { editor, className: "editor-content-wrapper" }), /* @__PURE__ */ import_react59.default.createElement(ImageToolbar_default, { editor }), /* @__PURE__ */ import_react59.default.createElement(VideoToolbar_default, { editor }), editor && /* @__PURE__ */ import_react59.default.createElement(
+      import_react60.BubbleMenu,
       {
-        onClick: () => editor?.chain().focus().toggleItalic().run(),
-        className: editor?.isActive("italic") ? "is-active" : ""
+        editor,
+        className: "bubble-menu",
+        shouldShow: ({ editor: e }) => {
+          if (!e || e.isDestroyed) return false;
+          try {
+            const { selection } = e.state;
+            if (selection?.node?.type.name === "image") return false;
+            if (selection?.node?.type.name === "youtube") return false;
+            if (selection?.node?.type.name === "video") return false;
+            return !selection.empty;
+          } catch {
+            return false;
+          }
+        }
       },
-      /* @__PURE__ */ import_react59.default.createElement("em", null, "I")
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleBold().run(),
+          className: editor?.isActive("bold") ? "is-active" : ""
+        },
+        /* @__PURE__ */ import_react59.default.createElement("strong", null, "B")
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleItalic().run(),
+          className: editor?.isActive("italic") ? "is-active" : ""
+        },
+        /* @__PURE__ */ import_react59.default.createElement("em", null, "I")
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleStrike().run(),
+          className: editor?.isActive("strike") ? "is-active" : ""
+        },
+        /* @__PURE__ */ import_react59.default.createElement("s", null, "S")
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleCode().run(),
+          className: editor?.isActive("code") ? "is-active" : ""
+        },
+        "</>"
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: setLink,
+          className: editor?.isActive("link") ? "is-active" : ""
+        },
+        "\u{1F517}"
+      )
+    ), editor && /* @__PURE__ */ import_react59.default.createElement(
+      import_react60.FloatingMenu,
       {
-        onClick: () => editor?.chain().focus().toggleStrike().run(),
-        className: editor?.isActive("strike") ? "is-active" : ""
+        editor,
+        className: "floating-menu",
+        shouldShow: ({ editor: e }) => {
+          if (!e || e.isDestroyed) return false;
+          try {
+            const { selection } = e.state;
+            return selection.empty && e.state.doc.textContent.length === 0;
+          } catch {
+            return false;
+          }
+        }
       },
-      /* @__PURE__ */ import_react59.default.createElement("s", null, "S")
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
+          className: editor?.isActive("heading", { level: 1 }) ? "is-active" : ""
+        },
+        "H1"
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
+          className: editor?.isActive("heading", { level: 2 }) ? "is-active" : ""
+        },
+        "H2"
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleBulletList().run(),
+          className: editor?.isActive("bulletList") ? "is-active" : ""
+        },
+        "\u2022 List"
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleOrderedList().run(),
+          className: editor?.isActive("orderedList") ? "is-active" : ""
+        },
+        "1. List"
+      ),
+      /* @__PURE__ */ import_react59.default.createElement(
+        "button",
+        {
+          onClick: () => editor?.chain().focus().toggleBlockquote().run(),
+          className: editor?.isActive("blockquote") ? "is-active" : ""
+        },
+        "\u201C Quote"
+      )
+    ), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, /* @__PURE__ */ import_react59.default.createElement(
+      "select",
       {
-        onClick: () => editor?.chain().focus().toggleCode().run(),
-        className: editor?.isActive("code") ? "is-active" : ""
+        value: saveFormat,
+        onChange: (e) => setSaveFormat(e.target.value),
+        className: "format-select"
       },
-      "</>"
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+      /* @__PURE__ */ import_react59.default.createElement("option", { value: "html" }, "HTML"),
+      /* @__PURE__ */ import_react59.default.createElement("option", { value: "json" }, "JSON")
+    ), onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export"), /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleClear, className: "status-btn clear-btn" }, "Clear")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react59.default.createElement(
+      "input",
       {
-        onClick: setLink,
-        className: editor?.isActive("link") ? "is-active" : ""
-      },
-      "\u{1F517}"
-    )
-  ), editor && /* @__PURE__ */ import_react59.default.createElement(
-    import_react60.FloatingMenu,
-    {
-      editor,
-      className: "floating-menu",
-      shouldShow: ({ editor: e }) => {
-        if (!e || e.isDestroyed) return false;
-        try {
-          const { selection } = e.state;
-          return selection.empty && e.state.doc.textContent.length === 0;
-        } catch {
-          return false;
-        }
+        type: "url",
+        className: "link-modal-input",
+        value: linkUrl,
+        onChange: (e) => setLinkUrl(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") handleLinkSubmit();
+        },
+        placeholder: "https://example.com",
+        autoFocus: true
       }
-    },
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
-      {
-        onClick: () => editor?.chain().focus().toggleHeading({ level: 1 }).run(),
-        className: editor?.isActive("heading", { level: 1 }) ? "is-active" : ""
-      },
-      "H1"
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+    )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react59.default.createElement(
+      "input",
       {
-        onClick: () => editor?.chain().focus().toggleHeading({ level: 2 }).run(),
-        className: editor?.isActive("heading", { level: 2 }) ? "is-active" : ""
-      },
-      "H2"
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+        type: "text",
+        className: "link-modal-input",
+        value: linkText,
+        onChange: (e) => setLinkText(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") handleLinkSubmit();
+        },
+        placeholder: "Link text"
+      }
+    )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Class name"), /* @__PURE__ */ import_react59.default.createElement(
+      "input",
       {
-        onClick: () => editor?.chain().focus().toggleBulletList().run(),
-        className: editor?.isActive("bulletList") ? "is-active" : ""
-      },
-      "\u2022 List"
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+        type: "text",
+        className: "link-modal-input",
+        value: linkClassName,
+        onChange: (e) => setLinkClassName(e.target.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") handleLinkSubmit();
+        },
+        placeholder: ""
+      }
+    )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
+      "input",
       {
-        onClick: () => editor?.chain().focus().toggleOrderedList().run(),
-        className: editor?.isActive("orderedList") ? "is-active" : ""
-      },
-      "1. List"
-    ),
-    /* @__PURE__ */ import_react59.default.createElement(
-      "button",
+        type: "checkbox",
+        checked: linkNewTab,
+        onChange: (e) => setLinkNewTab(e.target.checked)
+      }
+    ), "Open in new tab"), /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
+      "input",
       {
-        onClick: () => editor?.chain().focus().toggleBlockquote().run(),
-        className: editor?.isActive("blockquote") ? "is-active" : ""
-      },
-      "\u201C Quote"
-    )
-  ), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-left" }, /* @__PURE__ */ import_react59.default.createElement(
-    "select",
-    {
-      value: saveFormat,
-      onChange: (e) => setSaveFormat(e.target.value),
-      className: "format-select"
-    },
-    /* @__PURE__ */ import_react59.default.createElement("option", { value: "html" }, "HTML"),
-    /* @__PURE__ */ import_react59.default.createElement("option", { value: "json" }, "JSON")
-  ), onSaveProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export"), /* @__PURE__ */ import_react59.default.createElement("button", { onClick: handleClear, className: "status-btn clear-btn" }, "Clear")), /* @__PURE__ */ import_react59.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react59.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react59.default.createElement(import_react59.default.Fragment, null, /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react59.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      type: "url",
-      className: "link-modal-input",
-      value: linkUrl,
-      onChange: (e) => setLinkUrl(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") handleLinkSubmit();
-      },
-      placeholder: "https://example.com",
-      autoFocus: true
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      type: "text",
-      className: "link-modal-input",
-      value: linkText,
-      onChange: (e) => setLinkText(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") handleLinkSubmit();
-      },
-      placeholder: "Link text"
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-label" }, "Class name"), /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      type: "text",
-      className: "link-modal-input",
-      value: linkClassName,
-      onChange: (e) => setLinkClassName(e.target.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") handleLinkSubmit();
-      },
-      placeholder: ""
-    }
-  )), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
-    "input",
-    {
-      type: "checkbox",
-      checked: linkNewTab,
-      onChange: (e) => setLinkNewTab(e.target.checked)
-    }
-  ), "Open in new tab"), /* @__PURE__ */ import_react59.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react59.default.createElement(
-    "input",
+        type: "checkbox",
+        checked: linkNoFollow,
+        onChange: (e) => setLinkNoFollow(e.target.checked)
+      }
+    ), "No follow"))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))))
+  );
+};
+var RufousTextContent = ({ content, className, style, sx }) => {
+  const sxClass = useSx(sx);
+  return /* @__PURE__ */ import_react59.default.createElement(
+    "div",
     {
-      type: "checkbox",
-      checked: linkNoFollow,
-      onChange: (e) => setLinkNoFollow(e.target.checked)
+      className: `rf-rte-content ${sxClass} ${className || ""}`,
+      style,
+      dangerouslySetInnerHTML: { __html: content }
     }
-  ), "No follow"))), /* @__PURE__ */ import_react59.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react59.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update"))))));
+  );
 };
-var RufousTextContent = ({ content, className, style }) => /* @__PURE__ */ import_react59.default.createElement(
-  "div",
-  {
-    className: `rf-rte-content ${className || ""}`,
-    style,
-    dangerouslySetInnerHTML: { __html: content }
-  }
-);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   APP_THEMES,