@mhamz.01/easyflow-texteditor 0.1.150 → 0.1.152

package/dist/index.mjs

@@ -2874,6 +2874,115 @@ function useTiptapEditor(providedEditor) {
   return editorState || { editor: null };
 }
 
+// src/hooks/mark-preservers/mark-preserver.ts
+var MarkPreserver = class {
+  static preservedStyles = /* @__PURE__ */ new Map();
+  /**
+   * Preserve current font and color before blur or node change
+   */
+  static preserve(editor) {
+    if (!editor) return;
+    try {
+      const { state } = editor;
+      const { $from } = state.selection;
+      const currentNode = $from.parent;
+      let font = currentNode.attrs.fontFamily;
+      let color = currentNode.attrs.color;
+      const marks = state.storedMarks || $from.marks();
+      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 || color) {
+        this.preservedStyles.set(editor, { font, color });
+      }
+    } catch (error) {
+      console.debug("MarkPreserver.preserve error:", error);
+    }
+  }
+  /**
+   * Restore preserved styles to current node
+   */
+  static restore(editor, delay = 0) {
+    if (!editor) return;
+    const styles = this.preservedStyles.get(editor);
+    if (!styles) return;
+    const restoreFn = () => {
+      if (editor.isDestroyed) {
+        this.preservedStyles.delete(editor);
+        return;
+      }
+      try {
+        const { state } = editor;
+        const { $from } = state.selection;
+        const depth = $from.depth;
+        const pos = $from.before(depth);
+        const node = $from.node(depth);
+        const supportsAttributes = [
+          "paragraph",
+          "heading",
+          "listItem",
+          "taskItem",
+          "blockquote"
+        ].includes(node.type.name);
+        if (!supportsAttributes) {
+          this.preservedStyles.delete(editor);
+          editor.commands.focus();
+          return;
+        }
+        const updates = {};
+        if (styles.font && !node.attrs.fontFamily) {
+          updates.fontFamily = styles.font;
+        }
+        if (styles.color && !node.attrs.color) {
+          updates.color = styles.color;
+        }
+        if (Object.keys(updates).length > 0) {
+          const newAttrs = { ...node.attrs, ...updates };
+          editor.view.dispatch(
+            state.tr.setNodeMarkup(pos, void 0, newAttrs)
+          );
+        }
+        const marks = state.storedMarks || $from.marks();
+        const filteredMarks = marks.filter((mark) => mark.type.name !== "textStyle");
+        const textStyleAttrs = {};
+        if (styles.font) textStyleAttrs.fontFamily = styles.font;
+        if (styles.color) textStyleAttrs.color = styles.color;
+        const newMarks = [
+          ...filteredMarks,
+          state.schema.marks.textStyle.create(textStyleAttrs)
+        ];
+        setTimeout(() => {
+          if (!editor.isDestroyed) {
+            editor.view.dispatch(
+              editor.state.tr.setStoredMarks(newMarks)
+            );
+            editor.commands.focus();
+          }
+        }, 0);
+      } catch (error) {
+        console.debug("MarkPreserver.restore error:", error);
+      } finally {
+        this.preservedStyles.delete(editor);
+      }
+    };
+    if (delay > 0) {
+      setTimeout(restoreFn, delay);
+    } else {
+      restoreFn();
+    }
+  }
+  /**
+   * Clear preserved styles
+   */
+  static clear(editor) {
+    this.preservedStyles.delete(editor);
+  }
+};
+
 // src/components/tiptap-ui/heading-button/heading-button.tsx
 import { forwardRef as forwardRef6, useCallback as useCallback8 } from "react";
 
@@ -3478,9 +3587,15 @@ var HeadingDropdownMenu = forwardRef9(
         if (!editor || !canToggle2) return;
         setIsOpen(open);
         onOpenChange?.(open);
+        if (!open) {
+          MarkPreserver.restore(editor, 10);
+        }
       },
       [canToggle2, editor, onOpenChange]
     );
+    const handlePointerDown = useCallback10(() => {
+      MarkPreserver.preserve(editor);
+    }, [editor]);
     if (!isVisible) {
       return null;
     }
@@ -3496,6 +3611,7 @@ var HeadingDropdownMenu = forwardRef9(
           "aria-label": "Format text as heading",
           "aria-pressed": isActive,
           tooltip: "Heading",
+          onPointerDown: handlePointerDown,
           ...buttonProps,
           ref,
           children: [
@@ -4383,9 +4499,15 @@ function ListDropdownMenu({
     (open) => {
       setIsOpen(open);
       onOpenChange?.(open);
+      if (!open) {
+        MarkPreserver.restore(editor, 10);
+      }
     },
-    [onOpenChange]
+    [onOpenChange, editor]
   );
+  const handlePointerDown = useCallback15(() => {
+    MarkPreserver.preserve(editor);
+  }, [editor]);
   if (!isVisible) {
     return null;
   }
@@ -4402,6 +4524,7 @@ function ListDropdownMenu({
         "data-disabled": !canToggle2,
         "aria-label": "List options",
         tooltip: "List",
+        onPointerDown: handlePointerDown,
         ...props,
         children: [
           /* @__PURE__ */ jsx44(Icon, { className: "tiptap-button-icon" }),
@@ -4423,56 +4546,6 @@ function ListDropdownMenu({
 
 // src/components/tiptap-ui/blockquote-button/blockquote-button.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback16 } from "react";
-
-// src/hooks/mark-preservers/mark-preserver.ts
-var MarkPreserver = class {
-  static preservedMarks = /* @__PURE__ */ new Map();
-  /**
-   * Preserve marks before an action that will cause blur
-   * Call this in onMouseDown or onPointerDown events
-   */
-  static preserve(editor) {
-    if (!editor) return;
-    const { state } = editor;
-    const { $from } = state.selection;
-    const currentMarks = state.storedMarks || $from.marks();
-    if (currentMarks.length > 0) {
-      this.preservedMarks.set(editor, [...currentMarks]);
-    }
-  }
-  /**
-   * Restore marks after an action completes
-   * Call this after the editor action in onClick or in a setTimeout
-   */
-  static restore(editor, delay = 0) {
-    if (!editor) return;
-    const marks = this.preservedMarks.get(editor);
-    if (!marks) return;
-    const restoreFn = () => {
-      if (editor.isDestroyed) {
-        this.preservedMarks.delete(editor);
-        return;
-      }
-      const { state } = editor;
-      editor.view.dispatch(state.tr.setStoredMarks(marks));
-      this.preservedMarks.delete(editor);
-      editor.commands.focus();
-    };
-    if (delay > 0) {
-      setTimeout(restoreFn, delay);
-    } else {
-      restoreFn();
-    }
-  }
-  /**
-   * Clear preserved marks for an editor
-   */
-  static clear(editor) {
-    this.preservedMarks.delete(editor);
-  }
-};
-
-// src/components/tiptap-ui/blockquote-button/blockquote-button.tsx
 import { Fragment as Fragment7, jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
 function BlockquoteShortcutBadge({
   shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY
@@ -7622,6 +7695,7 @@ function useCursorVisibility({
 
 // src/components/extensions/font-family-block.ts
 import { Extension as Extension2 } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
 var FontFamilyBlock = Extension2.create({
   name: "fontFamilyBlock",
   addGlobalAttributes() {
@@ -7678,150 +7752,174 @@ var ColorBlock = Extension2.create({
     ];
   }
 });
+var stylePersistenceKey = new PluginKey("stylePersistence");
 var StylePersistence = Extension2.create({
   name: "stylePersistence",
   addOptions() {
     return {
-      // Marks that should NOT inherit font family or color
       excludedMarks: ["code", "codeBlock"]
     };
   },
-  addStorage() {
-    return {
-      // Store marks temporarily when editor loses focus
-      preservedMarks: null,
-      // Store marks from the previous node (for Enter key handling)
-      previousNodeMarks: null
-    };
-  },
-  addKeyboardShortcuts() {
-    return {
-      // Handle Enter key to preserve marks when creating new paragraphs
-      "Enter": ({ editor }) => {
-        const { state } = editor;
-        const { $from } = state.selection;
-        const currentNode = $from.parent;
-        const blockFont = currentNode.attrs.fontFamily;
-        const blockColor = currentNode.attrs.color;
-        if (blockFont || blockColor) {
-          this.storage.previousNodeMarks = { blockFont, blockColor };
-        }
-        return false;
-      },
-      // Handle Shift+Enter (soft break) - same logic
-      "Shift-Enter": ({ editor }) => {
-        const { state } = editor;
-        const { $from } = state.selection;
-        const currentNode = $from.parent;
-        const blockFont = currentNode.attrs.fontFamily;
-        const blockColor = currentNode.attrs.color;
-        if (blockFont || blockColor) {
-          this.storage.previousNodeMarks = { blockFont, blockColor };
-        }
-        return false;
-      }
-    };
-  },
-  onSelectionUpdate({ editor }) {
+  addProseMirrorPlugins() {
     const excludedMarks = this.options.excludedMarks;
-    syncStoredMarks(editor, excludedMarks, this.storage);
-  },
-  onFocus({ editor }) {
-    const excludedMarks = this.options.excludedMarks;
-    if (this.storage.preservedMarks) {
-      editor.view.dispatch(
-        editor.state.tr.setStoredMarks(this.storage.preservedMarks)
-      );
-      this.storage.preservedMarks = null;
-    }
-    syncStoredMarks(editor, excludedMarks, this.storage);
-  },
-  onBlur({ editor }) {
-    const { state } = editor;
-    const { $from } = state.selection;
-    const currentMarks = state.storedMarks || $from.marks();
-    const hasTextStyle = currentMarks.some((mark) => mark.type.name === "textStyle");
-    if (hasTextStyle) {
-      this.storage.preservedMarks = currentMarks;
-    }
-  },
-  onCreate({ editor }) {
-    const excludedMarks = this.options.excludedMarks;
-    syncStoredMarks(editor, excludedMarks, this.storage);
-  },
-  onTransaction({ editor, transaction }) {
-    if (!transaction.selectionSet && !transaction.docChanged) return;
-    const excludedMarks = this.options.excludedMarks;
-    requestAnimationFrame(() => {
-      if (!editor.isDestroyed) {
-        syncStoredMarks(editor, excludedMarks, this.storage);
-      }
-    });
+    return [
+      new Plugin({
+        key: stylePersistenceKey,
+        state: {
+          init() {
+            return {
+              lastFont: null,
+              lastColor: null
+            };
+          },
+          apply(tr, value, oldState, newState) {
+            const { $from } = newState.selection;
+            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") {
+                isInCodeBlock = true;
+                break;
+              }
+            }
+            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;
+            }
+            return {
+              lastFont: font || value.lastFont,
+              lastColor: color || value.lastColor
+            };
+          }
+        },
+        appendTransaction(transactions, oldState, newState) {
+          if (!transactions.some((tr2) => tr2.docChanged)) {
+            return null;
+          }
+          const pluginState = stylePersistenceKey.getState(newState);
+          if (!pluginState.lastFont && !pluginState.lastColor) {
+            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") {
+              isInCodeBlock = true;
+              break;
+            }
+          }
+          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);
+            const node = $from.node(depth);
+            const newAttrs = { ...node.attrs };
+            if (needsFont) newAttrs.fontFamily = pluginState.lastFont;
+            if (needsColor) newAttrs.color = pluginState.lastColor;
+            tr.setNodeMarkup(pos, void 0, newAttrs);
+            const storedMarks = newState.storedMarks || $from.marks();
+            const filteredMarks = storedMarks.filter(
+              (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
+            );
+            const textStyleAttrs = {};
+            if (pluginState.lastFont) textStyleAttrs.fontFamily = pluginState.lastFont;
+            if (pluginState.lastColor) textStyleAttrs.color = pluginState.lastColor;
+            const newMarks = [
+              ...filteredMarks,
+              newState.schema.marks.textStyle.create(textStyleAttrs)
+            ];
+            tr.setStoredMarks(newMarks);
+            return tr;
+          } catch (error) {
+            console.error("StylePersistence error:", error);
+            return null;
+          }
+        },
+        props: {
+          handleKeyDown(view, event) {
+            if (event.key === "Enter") {
+              const { state } = view;
+              const { $from } = state.selection;
+              const marks = $from.marks();
+              const hasExcludedMarks = marks.some(
+                (mark) => excludedMarks.includes(mark.type.name)
+              );
+              if (hasExcludedMarks) {
+                return false;
+              }
+              let isInCodeBlock = false;
+              for (let depth = $from.depth; depth > 0; depth--) {
+                const node = $from.node(depth);
+                if (node.type.name === "codeBlock") {
+                  isInCodeBlock = true;
+                  break;
+                }
+              }
+              if (isInCodeBlock) {
+                return false;
+              }
+              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 || color) {
+                const pluginState = stylePersistenceKey.getState(state);
+                pluginState.lastFont = font || pluginState.lastFont;
+                pluginState.lastColor = color || pluginState.lastColor;
+              }
+            }
+            return false;
+          }
+        }
+      })
+    ];
   }
 });
-function syncStoredMarks(editor, excludedMarks, storage) {
-  const { state } = editor;
-  const { $from } = state.selection;
-  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") {
-      isInCodeBlock = true;
-      break;
-    }
-  }
-  if (hasExcludedMarks || isInCodeBlock) {
-    return;
-  }
-  const parentNode = $from.parent;
-  let blockFont = parentNode.attrs.fontFamily;
-  let blockColor = parentNode.attrs.color;
-  if ((!blockFont || !blockColor) && storage?.previousNodeMarks) {
-    if (!blockFont && storage.previousNodeMarks.blockFont) {
-      blockFont = storage.previousNodeMarks.blockFont;
-    }
-    if (!blockColor && storage.previousNodeMarks.blockColor) {
-      blockColor = storage.previousNodeMarks.blockColor;
-    }
-    if (blockFont || blockColor) {
-      const depth = $from.depth;
-      const nodePos = $from.before(depth);
-      const node = $from.node(depth);
-      const newAttrs = { ...node.attrs };
-      if (blockFont) newAttrs.fontFamily = blockFont;
-      if (blockColor) newAttrs.color = blockColor;
-      const tr = state.tr.setNodeMarkup(nodePos, void 0, newAttrs);
-      editor.view.dispatch(tr);
-    }
-    storage.previousNodeMarks = null;
-  }
-  if (!blockFont && !blockColor) {
-    return;
-  }
-  const storedMarks = state.storedMarks || $from.marks();
-  const existingTextStyle = storedMarks.find((mark) => mark.type.name === "textStyle");
-  const needsUpdate = !existingTextStyle || blockFont && existingTextStyle.attrs.fontFamily !== blockFont || blockColor && existingTextStyle.attrs.color !== blockColor;
-  if (!needsUpdate) {
-    return;
-  }
-  const filteredMarks = storedMarks.filter(
-    (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
-  );
-  const textStyleAttrs = {};
-  if (blockFont) textStyleAttrs.fontFamily = blockFont;
-  if (blockColor) textStyleAttrs.color = blockColor;
-  const newMarks = [
-    ...filteredMarks,
-    state.schema.marks.textStyle.create(textStyleAttrs)
-  ];
-  editor.view.dispatch(
-    state.tr.setStoredMarks(newMarks)
-  );
-}
 
 // src/components/tiptap-templates/simple/simple-editor.tsx
 import { Fragment as Fragment12, jsx as jsx81, jsxs as jsxs48 } from "react/jsx-runtime";