@rufous/ui 0.2.1 → 0.2.2

package/dist/main.cjs

@@ -41685,6 +41685,9 @@ var STATUS_COLORS = {
   resolved: { border: "#16a34a", bg: "#16a34a", color: "#fff" }
 };
 var CustomTaskItem = import_extension_task_item.default.extend({
+  addStorage() {
+    return { taskTodoEnabled: true };
+  },
   addAttributes() {
     return {
       ...this.parent?.(),
@@ -41711,6 +41714,27 @@ var CustomTaskItem = import_extension_task_item.default.extend({
           }
         }
         if (taskDepth === -1) return false;
+        if (this.editor.storage.taskTodoEnabled === false) {
+          const afterContent2 = $from.parent.content.cut($from.parentOffset);
+          const schema2 = state.schema;
+          const tr2 = state.tr;
+          if (afterContent2.size > 0) {
+            tr2.delete($from.pos, $from.end());
+          }
+          let taskListDepth = -1;
+          for (let d = taskDepth - 1; d >= 0; d--) {
+            if ($from.node(d).type.name === "taskList") {
+              taskListDepth = d;
+              break;
+            }
+          }
+          const insertPos2 = taskListDepth !== -1 ? tr2.mapping.map($from.after(taskListDepth)) : tr2.mapping.map($from.after(taskDepth));
+          const newPara2 = afterContent2.size > 0 ? schema2.nodes.paragraph.create(null, afterContent2) : schema2.nodes.paragraph.create();
+          tr2.insert(insertPos2, newPara2);
+          tr2.setSelection(TextSelection.near(tr2.doc.resolve(insertPos2 + 1)));
+          this.editor.view.dispatch(tr2);
+          return true;
+        }
         const taskNode = $from.node(taskDepth);
         const status = taskNode.attrs.status || "todo";
         const schema = state.schema;
@@ -41770,7 +41794,10 @@ 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)), -1));
+          const prevPos = Math.max(0, from - 1);
+          const $prev = tr.doc.resolve(prevPos);
+          const cursorPos = $prev.end($prev.depth);
+          tr.setSelection(TextSelection.create(tr.doc, cursorPos));
           this.editor.view.dispatch(tr);
           return true;
         }
@@ -42340,6 +42367,7 @@ var ColorPickerPanel = ({ editor, onClose }) => {
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload }) => {
   const [, setEditorState] = (0, import_react56.useState)(0);
   const [isFullscreen, setIsFullscreen] = (0, import_react56.useState)(false);
+  const [todoEnabled, setTodoEnabled] = (0, import_react56.useState)(false);
   (0, import_react56.useEffect)(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -42840,24 +42868,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     {
       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"),
-    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) {
+    /* @__PURE__ */ import_react56.default.createElement("button", { className: "dropdown-item", onClick: () => {
+      if (editor.isActive("codeBlock")) {
+        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 "";
+        })();
         editor.chain().focus().toggleCodeBlock().run();
-        const { from } = editor.state.selection;
-        editor.chain().focus().setTextSelection({ from, to: from + text.length }).toggleCode().run();
+        if (text) {
+          const { from } = editor.state.selection;
+          editor.chain().focus().setTextSelection({ from, to: from + text.length }).toggleCode().run();
+        }
       } else {
-        editor.chain().focus().toggleCodeBlock().run();
+        editor.chain().focus().toggleCode().run();
       }
-    } }, "</> \u2190", " Convert to Inline Code")
+    } }, "</>", " 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",
     {
@@ -42877,11 +42906,15 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   ), /* @__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",
     {
-      className: `toolbar-btn ${editor.isActive("taskList") ? "is-active" : ""}`,
+      className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
       onClick: () => {
-        if (editor.isActive("taskList")) {
-          editor.chain().focus().liftListItem("taskItem").run();
+        if (todoEnabled) {
+          setTodoEnabled(false);
+          editor.storage.taskTodoEnabled = false;
+          editor.chain().focus().run();
         } else {
+          setTodoEnabled(true);
+          editor.storage.taskTodoEnabled = true;
           const { state } = editor;
           const { schema } = state;
           const taskItemType = schema.nodes.taskItem;
@@ -42889,18 +42922,30 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
           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 + 4);
-            tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
-            return true;
-          }).run();
+          const { $from } = state.selection;
+          let insideTask = false;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type.name === "taskItem") {
+              insideTask = true;
+              break;
+            }
+          }
+          if (insideTask) {
+            editor.chain().focus().run();
+          } else {
+            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 + 4);
+              tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
+              return true;
+            }).run();
+          }
         }
       },
-      title: editor.isActive("taskList") ? "Disable Task List" : "Enable Task List"
+      title: todoEnabled ? "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) => {

package/dist/main.js

@@ -13015,6 +13015,9 @@ var STATUS_COLORS = {
   resolved: { border: "#16a34a", bg: "#16a34a", color: "#fff" }
 };
 var CustomTaskItem = TaskItem.extend({
+  addStorage() {
+    return { taskTodoEnabled: true };
+  },
   addAttributes() {
     return {
       ...this.parent?.(),
@@ -13041,6 +13044,27 @@ var CustomTaskItem = TaskItem.extend({
           }
         }
         if (taskDepth === -1) return false;
+        if (this.editor.storage.taskTodoEnabled === false) {
+          const afterContent2 = $from.parent.content.cut($from.parentOffset);
+          const schema2 = state.schema;
+          const tr2 = state.tr;
+          if (afterContent2.size > 0) {
+            tr2.delete($from.pos, $from.end());
+          }
+          let taskListDepth = -1;
+          for (let d = taskDepth - 1; d >= 0; d--) {
+            if ($from.node(d).type.name === "taskList") {
+              taskListDepth = d;
+              break;
+            }
+          }
+          const insertPos2 = taskListDepth !== -1 ? tr2.mapping.map($from.after(taskListDepth)) : tr2.mapping.map($from.after(taskDepth));
+          const newPara2 = afterContent2.size > 0 ? schema2.nodes.paragraph.create(null, afterContent2) : schema2.nodes.paragraph.create();
+          tr2.insert(insertPos2, newPara2);
+          tr2.setSelection(TextSelection.near(tr2.doc.resolve(insertPos2 + 1)));
+          this.editor.view.dispatch(tr2);
+          return true;
+        }
         const taskNode = $from.node(taskDepth);
         const status = taskNode.attrs.status || "todo";
         const schema = state.schema;
@@ -13100,7 +13124,10 @@ var CustomTaskItem = TaskItem.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)), -1));
+          const prevPos = Math.max(0, from - 1);
+          const $prev = tr.doc.resolve(prevPos);
+          const cursorPos = $prev.end($prev.depth);
+          tr.setSelection(TextSelection.create(tr.doc, cursorPos));
           this.editor.view.dispatch(tr);
           return true;
         }
@@ -13670,6 +13697,7 @@ var ColorPickerPanel = ({ editor, onClose }) => {
 var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTextToSpeech, onClose, onImageUpload }) => {
   const [, setEditorState] = useState31(0);
   const [isFullscreen, setIsFullscreen] = useState31(false);
+  const [todoEnabled, setTodoEnabled] = useState31(false);
   useEffect24(() => {
     if (!editor) return;
     const onTransaction = () => setEditorState((n) => n + 1);
@@ -14170,24 +14198,25 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
     {
       trigger: { label: /* @__PURE__ */ React113.createElement(IconCode, null), title: "Code", className: editor.isActive("code") || editor.isActive("codeBlock") ? "is-active" : "" }
     },
-    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCode().run() }, "</>", " Inline Code"),
-    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block"),
-    editor.isActive("codeBlock") && /* @__PURE__ */ React113.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) {
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => {
+      if (editor.isActive("codeBlock")) {
+        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 "";
+        })();
         editor.chain().focus().toggleCodeBlock().run();
-        const { from } = editor.state.selection;
-        editor.chain().focus().setTextSelection({ from, to: from + text.length }).toggleCode().run();
+        if (text) {
+          const { from } = editor.state.selection;
+          editor.chain().focus().setTextSelection({ from, to: from + text.length }).toggleCode().run();
+        }
       } else {
-        editor.chain().focus().toggleCodeBlock().run();
+        editor.chain().focus().toggleCode().run();
       }
-    } }, "</> \u2190", " Convert to Inline Code")
+    } }, "</>", " Inline Code"),
+    /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => editor.chain().focus().toggleCodeBlock().run() }, "{ }", " Code Block")
   ), /* @__PURE__ */ React113.createElement(
     "button",
     {
@@ -14207,11 +14236,15 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
   ), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "Translate options", className: "translate-arrow-btn" } }, /* @__PURE__ */ React113.createElement("button", { className: "dropdown-item", onClick: () => setShowTranslateModal(true) }, "Options")), translateStatus && /* @__PURE__ */ React113.createElement("span", { className: `translate-toast-popup ${translateStatus === "Please select the text" || translateStatus === "Translation failed" ? "error" : ""}` }, translateStatus)), /* @__PURE__ */ React113.createElement("div", { className: "todo-split-btn" }, /* @__PURE__ */ React113.createElement(
     "button",
     {
-      className: `toolbar-btn ${editor.isActive("taskList") ? "is-active" : ""}`,
+      className: `toolbar-btn ${todoEnabled ? "is-active" : ""}`,
       onClick: () => {
-        if (editor.isActive("taskList")) {
-          editor.chain().focus().liftListItem("taskItem").run();
+        if (todoEnabled) {
+          setTodoEnabled(false);
+          editor.storage.taskTodoEnabled = false;
+          editor.chain().focus().run();
         } else {
+          setTodoEnabled(true);
+          editor.storage.taskTodoEnabled = true;
           const { state } = editor;
           const { schema } = state;
           const taskItemType = schema.nodes.taskItem;
@@ -14219,18 +14252,30 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
           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 + 4);
-            tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
-            return true;
-          }).run();
+          const { $from } = state.selection;
+          let insideTask = false;
+          for (let d = $from.depth; d > 0; d--) {
+            if ($from.node(d).type.name === "taskItem") {
+              insideTask = true;
+              break;
+            }
+          }
+          if (insideTask) {
+            editor.chain().focus().run();
+          } else {
+            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 + 4);
+              tr.setSelection(cmdState.selection.constructor.near(resolvedPos));
+              return true;
+            }).run();
+          }
         }
       },
-      title: editor.isActive("taskList") ? "Disable Task List" : "Enable Task List"
+      title: todoEnabled ? "Disable Task List" : "Enable Task List"
     },
     /* @__PURE__ */ React113.createElement(IconTaskList, null)
   ), /* @__PURE__ */ React113.createElement(Dropdown, { trigger: { label: "", title: "Task status", className: "todo-arrow-btn" }, keepOpen: true }, ["todo", "working", "blocked", "resolved"].map((status) => {

package/package.json

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