@mhamz.01/easyflow-texteditor 0.1.157 → 0.1.159

package/dist/index.mjs

@@ -1173,9 +1173,13 @@ function EditorLayout({ children, onChange, initialTabs, onTabsChange }) {
   );
   const renameTab = useCallback5(
     (id, title) => {
-      setTabs((prev) => prev.map((t) => t.id === id ? { ...t, title } : t));
+      setTabs((prev) => {
+        const updated = prev.map((t) => t.id === id ? { ...t, title } : t);
+        emitChangeDebounced({ tabs: updated, activeTabId, activeSubTabId, source: "rename-tab" });
+        return updated;
+      });
     },
-    []
+    [emitChangeDebounced, activeTabId, activeSubTabId]
   );
   const deleteTab = useCallback5(
     (id) => {
@@ -1219,18 +1223,15 @@ function EditorLayout({ children, onChange, initialTabs, onTabsChange }) {
   );
   const renameSubTab = useCallback5(
     (tabId, subTabId, title) => {
-      setTabs(
-        (prev) => prev.map(
-          (tab) => tab.id === tabId ? {
-            ...tab,
-            subtabs: tab.subtabs.map(
-              (st) => st.id === subTabId ? { ...st, title } : st
-            )
-          } : tab
-        )
-      );
+      setTabs((prev) => {
+        const updated = prev.map(
+          (tab) => tab.id === tabId ? { ...tab, subtabs: tab.subtabs.map((st) => st.id === subTabId ? { ...st, title } : st) } : tab
+        );
+        emitChangeDebounced({ tabs: updated, activeTabId, activeSubTabId, source: "rename-subtab" });
+        return updated;
+      });
     },
-    []
+    [emitChangeDebounced, activeTabId, activeSubTabId]
   );
   const editorActions = useMemo2(
     () => ({
@@ -1831,7 +1832,7 @@ var FONT_SIZES = [
   "64px"
 ];
 var FontSizeExtension = Extension2.create({
-  name: "fontSize",
+  name: "customFontSize",
   addOptions() {
     return {
       types: ["textStyle"]
@@ -1866,15 +1867,15 @@ var FontSizeExtension = Extension2.create({
       increaseFontSize: () => ({ editor }) => {
         const currentSize = editor.getAttributes("textStyle").fontSize;
         const currentIndex = FONT_SIZES.indexOf(currentSize || "16px");
-        const nextIndex = Math.min(currentIndex + 1, FONT_SIZES.length - 1);
-        const nextSize = FONT_SIZES[nextIndex];
+        const fromIndex = currentIndex === -1 ? FONT_SIZES.indexOf("16px") : currentIndex;
+        const nextSize = FONT_SIZES[Math.min(fromIndex + 1, FONT_SIZES.length - 1)];
         return editor.chain().focus().setFontSize(nextSize).run();
       },
       decreaseFontSize: () => ({ editor }) => {
         const currentSize = editor.getAttributes("textStyle").fontSize;
         const currentIndex = FONT_SIZES.indexOf(currentSize || "16px");
-        const nextIndex = Math.max(currentIndex - 1, 0);
-        const nextSize = FONT_SIZES[nextIndex];
+        const fromIndex = currentIndex === -1 ? FONT_SIZES.indexOf("16px") : currentIndex;
+        const nextSize = FONT_SIZES[Math.max(fromIndex - 1, 0)];
         return editor.chain().focus().setFontSize(nextSize).run();
       }
     };
@@ -7300,23 +7301,32 @@ function ColorPicker({ type = "text" }) {
     (value) => {
       if (!editor) return;
       const { state } = editor;
-      const { $from, $to, empty } = state.selection;
+      const { $from } = state.selection;
       editor.chain().focus().setColor(value).run();
-      const depth = $from.depth;
-      const nodePos = $from.before(depth);
-      const node = $from.node(depth);
-      const supportsColor = [
-        "paragraph",
-        "heading",
-        "listItem",
-        "taskItem",
-        "blockquote"
-      ].includes(node.type.name);
-      if (supportsColor) {
-        const tr = state.tr.setNodeMarkup(nodePos, void 0, {
-          ...node.attrs,
-          color: value
-        });
+      const tr = editor.state.tr;
+      let trDirty = false;
+      for (let depth = $from.depth; depth >= 1; depth--) {
+        const node = $from.node(depth);
+        const pos = $from.before(depth);
+        const supportsColor = [
+          "paragraph",
+          "heading",
+          "listItem",
+          "taskItem",
+          "blockquote"
+        ].includes(node.type.name);
+        if (supportsColor && node.attrs.color !== value) {
+          tr.setNodeMarkup(pos, void 0, {
+            ...node.attrs,
+            color: value
+          });
+          trDirty = true;
+        }
+        if (node.type.name === "listItem" || node.type.name === "taskItem") {
+          break;
+        }
+      }
+      if (trDirty) {
         editor.view.dispatch(tr);
       }
       setTimeout(() => {
@@ -7397,7 +7407,7 @@ function ColorPicker({ type = "text" }) {
             {
               className: "flex flex-col gap-3",
               onMouseDown: (e) => e.stopPropagation(),
-              onMouseUp: ((e) => e.stopPropagation()),
+              onMouseUp: (e) => e.stopPropagation(),
               onPointerDown: (e) => e.stopPropagation(),
               onPointerUp: (e) => e.stopPropagation(),
               onClick: (e) => e.stopPropagation(),
@@ -7827,6 +7837,7 @@ var ColorBlock = Extension3.create({
   }
 });
 var stylePersistenceKey = new PluginKey("stylePersistence");
+var STYLED_NODES = ["paragraph", "heading", "listItem", "taskItem", "blockquote"];
 var StylePersistence = Extension3.create({
   name: "stylePersistence",
   addOptions() {
@@ -7854,8 +7865,7 @@ var StylePersistence = Extension3.create({
             );
             let isInCodeBlock = false;
             for (let depth = $from.depth; depth > 0; depth--) {
-              const node = $from.node(depth);
-              if (node.type.name === "codeBlock") {
+              if ($from.node(depth).type.name === "codeBlock") {
                 isInCodeBlock = true;
                 break;
               }
@@ -7863,16 +7873,17 @@ var StylePersistence = Extension3.create({
             if (hasExcludedMarks || isInCodeBlock) {
               return value;
             }
-            const parentNode = $from.parent;
-            let font = parentNode.attrs.fontFamily;
-            let color = parentNode.attrs.color;
-            const textStyleMark = marks.find((m) => m.type.name === "textStyle");
-            if (!font && textStyleMark?.attrs.fontFamily) {
-              font = textStyleMark.attrs.fontFamily;
-            }
-            if (!color && textStyleMark?.attrs.color) {
-              color = textStyleMark.attrs.color;
+            let font = null;
+            let color = null;
+            for (let depth = $from.depth; depth >= 1; depth--) {
+              const node = $from.node(depth);
+              if (!font && node.attrs?.fontFamily) font = node.attrs.fontFamily;
+              if (!color && node.attrs?.color) color = node.attrs.color;
+              if (font && color) break;
             }
+            const textStyleMark = marks.find((m) => m.type.name === "textStyle");
+            if (!font && textStyleMark?.attrs.fontFamily) font = textStyleMark.attrs.fontFamily;
+            if (!color && textStyleMark?.attrs.color) color = textStyleMark.attrs.color;
             return {
               lastFont: font || value.lastFont,
               lastColor: color || value.lastColor
@@ -7888,15 +7899,13 @@ var StylePersistence = Extension3.create({
             return null;
           }
           const { $from } = newState.selection;
-          const parentNode = $from.parent;
           const marks = $from.marks();
           const hasExcludedMarks = marks.some(
             (mark) => excludedMarks.includes(mark.type.name)
           );
           let isInCodeBlock = false;
           for (let depth = $from.depth; depth > 0; depth--) {
-            const node = $from.node(depth);
-            if (node.type.name === "codeBlock") {
+            if ($from.node(depth).type.name === "codeBlock") {
               isInCodeBlock = true;
               break;
             }
@@ -7904,32 +7913,30 @@ var StylePersistence = Extension3.create({
           if (hasExcludedMarks || isInCodeBlock) {
             return null;
           }
-          const supportsAttributes = [
-            "paragraph",
-            "heading",
-            "listItem",
-            "taskItem",
-            "blockquote"
-          ].includes(parentNode.type.name);
-          if (!supportsAttributes) {
-            return null;
-          }
-          const currentFont = parentNode.attrs.fontFamily;
-          const currentColor = parentNode.attrs.color;
-          const needsFont = !currentFont && pluginState.lastFont;
-          const needsColor = !currentColor && pluginState.lastColor;
-          if (!needsFont && !needsColor) {
-            return null;
-          }
           const tr = newState.tr;
-          try {
-            const depth = $from.depth;
-            const pos = $from.before(depth);
+          let trDirty = false;
+          for (let depth = $from.depth; depth >= 1; depth--) {
             const node = $from.node(depth);
+            if (!STYLED_NODES.includes(node.type.name)) continue;
+            const pos = $from.before(depth);
+            const needsFont = !node.attrs.fontFamily && pluginState.lastFont;
+            const needsColor = !node.attrs.color && pluginState.lastColor;
+            if (!needsFont && !needsColor) {
+              break;
+            }
             const newAttrs = { ...node.attrs };
             if (needsFont) newAttrs.fontFamily = pluginState.lastFont;
             if (needsColor) newAttrs.color = pluginState.lastColor;
             tr.setNodeMarkup(pos, void 0, newAttrs);
+            trDirty = true;
+            if (node.type.name === "listItem" || node.type.name === "taskItem") {
+              break;
+            }
+          }
+          if (!trDirty) {
+            return null;
+          }
+          try {
             const storedMarks = newState.storedMarks || $from.marks();
             const filteredMarks = storedMarks.filter(
               (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
@@ -7942,11 +7949,9 @@ var StylePersistence = Extension3.create({
               newState.schema.marks.textStyle.create(textStyleAttrs)
             ];
             tr.setStoredMarks(newMarks);
-            return tr;
-          } catch (error) {
-            console.error("StylePersistence error:", error);
-            return null;
+          } catch (e) {
           }
+          return tr;
         },
         props: {
           handleKeyDown(view, event) {
@@ -7954,33 +7959,28 @@ var StylePersistence = Extension3.create({
               const { state } = view;
               const { $from } = state.selection;
               const marks = $from.marks();
-              const hasExcludedMarks = marks.some(
-                (mark) => excludedMarks.includes(mark.type.name)
-              );
-              if (hasExcludedMarks) {
+              if (marks.some((mark) => excludedMarks.includes(mark.type.name))) {
                 return false;
               }
               let isInCodeBlock = false;
               for (let depth = $from.depth; depth > 0; depth--) {
-                const node = $from.node(depth);
-                if (node.type.name === "codeBlock") {
+                if ($from.node(depth).type.name === "codeBlock") {
                   isInCodeBlock = true;
                   break;
                 }
               }
-              if (isInCodeBlock) {
-                return false;
+              if (isInCodeBlock) return false;
+              let font = null;
+              let color = null;
+              for (let depth = $from.depth; depth >= 1; depth--) {
+                const node = $from.node(depth);
+                if (!font && node.attrs?.fontFamily) font = node.attrs.fontFamily;
+                if (!color && node.attrs?.color) color = node.attrs.color;
+                if (font && color) break;
               }
-              const parentNode = $from.parent;
-              let font = parentNode.attrs.fontFamily;
-              let color = parentNode.attrs.color;
               const textStyleMark = marks.find((m) => m.type.name === "textStyle");
-              if (!font && textStyleMark?.attrs.fontFamily) {
-                font = textStyleMark.attrs.fontFamily;
-              }
-              if (!color && textStyleMark?.attrs.color) {
-                color = textStyleMark.attrs.color;
-              }
+              if (!font && textStyleMark?.attrs.fontFamily) font = textStyleMark.attrs.fontFamily;
+              if (!color && textStyleMark?.attrs.color) color = textStyleMark.attrs.color;
               if (font || color) {
                 const pluginState = stylePersistenceKey.getState(state);
                 pluginState.lastFont = font || pluginState.lastFont;