@mhamz.01/easyflow-texteditor 0.1.149 → 0.1.151

package/dist/index.js

@@ -2900,6 +2900,54 @@ function useTiptapEditor(providedEditor) {
   return editorState || { editor: null };
 }
 
+// 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/heading-button/heading-button.tsx
 var import_react28 = require("react");
 
@@ -3504,9 +3552,15 @@ var HeadingDropdownMenu = (0, import_react38.forwardRef)(
         if (!editor || !canToggle2) return;
         setIsOpen(open);
         onOpenChange?.(open);
+        if (!open) {
+          MarkPreserver.restore(editor, 10);
+        }
       },
       [canToggle2, editor, onOpenChange]
     );
+    const handlePointerDown = (0, import_react38.useCallback)(() => {
+      MarkPreserver.preserve(editor);
+    }, [editor]);
     if (!isVisible) {
       return null;
     }
@@ -3522,6 +3576,7 @@ var HeadingDropdownMenu = (0, import_react38.forwardRef)(
           "aria-label": "Format text as heading",
           "aria-pressed": isActive,
           tooltip: "Heading",
+          onPointerDown: handlePointerDown,
           ...buttonProps,
           ref,
           children: [
@@ -4409,9 +4464,15 @@ function ListDropdownMenu({
     (open) => {
       setIsOpen(open);
       onOpenChange?.(open);
+      if (!open) {
+        MarkPreserver.restore(editor, 10);
+      }
     },
-    [onOpenChange]
+    [onOpenChange, editor]
   );
+  const handlePointerDown = (0, import_react51.useCallback)(() => {
+    MarkPreserver.preserve(editor);
+  }, [editor]);
   if (!isVisible) {
     return null;
   }
@@ -4428,6 +4489,7 @@ function ListDropdownMenu({
         "data-disabled": !canToggle2,
         "aria-label": "List options",
         tooltip: "List",
+        onPointerDown: handlePointerDown,
         ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Icon, { className: "tiptap-button-icon" }),
@@ -4449,56 +4511,6 @@ function ListDropdownMenu({
 
 // src/components/tiptap-ui/blockquote-button/blockquote-button.tsx
 var import_react52 = require("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
 var import_jsx_runtime45 = require("react/jsx-runtime");
 function BlockquoteShortcutBadge({
   shortcutKeys = BLOCKQUOTE_SHORTCUT_KEY
@@ -7712,29 +7724,80 @@ var StylePersistence = import_core4.Extension.create({
       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 }) {
     const excludedMarks = this.options.excludedMarks;
-    syncStoredMarks(editor, excludedMarks);
+    syncStoredMarks(editor, excludedMarks, this.storage);
   },
   onFocus({ editor }) {
     const excludedMarks = this.options.excludedMarks;
-    syncStoredMarks(editor, 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);
+    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);
+        syncStoredMarks(editor, excludedMarks, this.storage);
       }
     });
   }
 });
-function syncStoredMarks(editor, excludedMarks) {
+function syncStoredMarks(editor, excludedMarks, storage) {
   const { state } = editor;
   const { $from } = state.selection;
   const marks = $from.marks();
@@ -7753,8 +7816,27 @@ function syncStoredMarks(editor, excludedMarks) {
     return;
   }
   const parentNode = $from.parent;
-  const blockFont = parentNode.attrs.fontFamily;
-  const blockColor = parentNode.attrs.color;
+  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;
   }