@mhamz.01/easyflow-texteditor 0.1.145 → 0.1.147

package/dist/index.mjs

@@ -4423,6 +4423,56 @@ 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
@@ -4458,10 +4508,15 @@ var BlockquoteButton = forwardRef12(
       (event) => {
         onClick?.(event);
         if (event.defaultPrevented) return;
+        MarkPreserver.preserve(editor);
         handleToggle();
+        MarkPreserver.restore(editor, 10);
       },
-      [handleToggle, onClick]
+      [handleToggle, onClick, editor]
     );
+    const handlePointerDown = useCallback16(() => {
+      MarkPreserver.preserve(editor);
+    }, [editor]);
     if (!isVisible) {
       return null;
     }
@@ -4478,6 +4533,7 @@ var BlockquoteButton = forwardRef12(
         "aria-label": label,
         "aria-pressed": isActive,
         tooltip: `${label}${shortcutKeys ? ` (${String(parseShortcutKeys({ shortcutKeys })).replace(/Mod/i, "Ctrl").replace(/,/g, " + ")})` : ""}`,
+        onPointerDown: handlePointerDown,
         onClick: handleClick,
         ...buttonProps,
         ref,
@@ -7065,7 +7121,15 @@ function ColorPicker({ type = "text" }) {
   const [tempHex, setTempHex] = useState29("#000000");
   const [canApply, setCanApply] = useState29(false);
   useEffect19(() => {
-    const current = type === "text" ? editor?.getAttributes("textStyle").color || "#000000" : editor?.getAttributes("highlight")?.color || "#FFFF00";
+    if (!editor) return;
+    let current = editor.getAttributes("textStyle").color;
+    if (!current) {
+      const { $from } = editor.state.selection;
+      current = $from.parent.attrs.color;
+    }
+    if (!current) {
+      current = type === "text" ? "#000000" : "#FFFF00";
+    }
     setColor(current);
     setTempHex(current);
   }, [editor, type]);
@@ -7088,14 +7152,37 @@ function ColorPicker({ type = "text" }) {
   const applyColor = React4.useCallback(
     (value) => {
       if (!editor) return;
-      if (editor.state.storedMarks) {
-        const textStyleMark = editor.schema.marks.textStyle;
-        if (textStyleMark) {
-          editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMark));
-        }
+      const { state } = editor;
+      const { $from, $to, empty } = 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
+        });
+        editor.view.dispatch(tr);
       }
       setTimeout(() => {
-        editor.chain().focus().setColor(value).run();
+        const newState = editor.state;
+        const storedMarks = newState.storedMarks || newState.selection.$from.marks();
+        const filteredMarks = storedMarks.filter((mark) => mark.type.name !== "textStyle");
+        const newMarks = [
+          ...filteredMarks,
+          newState.schema.marks.textStyle.create({ color: value })
+        ];
+        editor.view.dispatch(
+          newState.tr.setStoredMarks(newMarks)
+        );
         setColor(value);
       }, 0);
     },
@@ -7140,7 +7227,7 @@ function ColorPicker({ type = "text" }) {
                   applyColor(c);
                   setOpen(false);
                 },
-                className: "w-5 h-5 rounded-lg cursor-pointer border border-black/10  hover:scale-105 transition",
+                className: "w-5 h-5 rounded-lg cursor-pointer border border-black/10 hover:scale-105 transition",
                 style: { backgroundColor: c }
               },
               c
@@ -7158,8 +7245,7 @@ function ColorPicker({ type = "text" }) {
               }
             )
           ] }),
-          showCustom && // stop mouse/pointer events from bubbling so popover doesn't treat them as outside clicks
-          /* @__PURE__ */ jsxs46(
+          showCustom && /* @__PURE__ */ jsxs46(
             "div",
             {
               className: "flex flex-col gap-3",
@@ -7601,150 +7687,71 @@ var StylePersistence = Extension2.create({
     };
   },
   onSelectionUpdate({ editor }) {
-    const { state } = editor;
     const excludedMarks = this.options.excludedMarks;
-    const hasExcludedMarks = () => {
-      const { $from } = state.selection;
-      const marks = $from.marks();
-      return marks.some((mark) => excludedMarks.includes(mark.type.name));
-    };
-    const isInCodeBlock = () => {
-      const { $from } = state.selection;
-      for (let depth = $from.depth; depth > 0; depth--) {
-        const node = $from.node(depth);
-        if (node.type.name === "codeBlock") {
-          return true;
-        }
-      }
-      return false;
-    };
-    if (hasExcludedMarks() || isInCodeBlock()) {
-      return;
-    }
-    const blockFont = state.selection.$from.parent.attrs.fontFamily;
-    const blockColor = state.selection.$from.parent.attrs.color;
-    const existingTextStyleMark = state.selection.$from.marks().find(
-      (mark) => mark.type.name === "textStyle"
-    );
-    const markFont = existingTextStyleMark?.attrs.fontFamily;
-    const markColor = existingTextStyleMark?.attrs.color;
-    const finalFont = markFont || blockFont;
-    const finalColor = markColor || blockColor;
-    if (!finalFont && !finalColor) return;
-    const storedMarks = state.storedMarks || state.selection.$from.marks();
-    const filteredMarks = storedMarks.filter(
-      (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
-    );
-    const textStyleAttrs = {};
-    if (finalFont) textStyleAttrs.fontFamily = finalFont;
-    if (finalColor) textStyleAttrs.color = finalColor;
-    const newMarks = [
-      ...filteredMarks,
-      state.schema.marks.textStyle.create(textStyleAttrs)
-    ];
-    editor.view.dispatch(
-      state.tr.setStoredMarks(newMarks)
-    );
+    syncStoredMarks(editor, excludedMarks);
   },
   onFocus({ editor }) {
-    const { state } = editor;
     const excludedMarks = this.options.excludedMarks;
-    const hasExcludedMarks = () => {
-      const { $from } = state.selection;
-      const marks = $from.marks();
-      return marks.some((mark) => excludedMarks.includes(mark.type.name));
-    };
-    const isInCodeBlock = () => {
-      const { $from } = state.selection;
-      for (let depth = $from.depth; depth > 0; depth--) {
-        const node = $from.node(depth);
-        if (node.type.name === "codeBlock") {
-          return true;
-        }
-      }
-      return false;
-    };
-    if (hasExcludedMarks() || isInCodeBlock()) {
-      return;
-    }
-    const blockFont = state.selection.$from.parent.attrs.fontFamily;
-    const blockColor = state.selection.$from.parent.attrs.color;
-    const existingTextStyleMark = state.selection.$from.marks().find(
-      (mark) => mark.type.name === "textStyle"
-    );
-    const markFont = existingTextStyleMark?.attrs.fontFamily;
-    const markColor = existingTextStyleMark?.attrs.color;
-    const finalFont = markFont || blockFont;
-    const finalColor = markColor || blockColor;
-    if (!finalFont && !finalColor) return;
-    const storedMarks = state.storedMarks || state.selection.$from.marks();
-    const filteredMarks = storedMarks.filter(
-      (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
-    );
-    const textStyleAttrs = {};
-    if (finalFont) textStyleAttrs.fontFamily = finalFont;
-    if (finalColor) textStyleAttrs.color = finalColor;
-    const newMarks = [
-      ...filteredMarks,
-      state.schema.marks.textStyle.create(textStyleAttrs)
-    ];
-    editor.view.dispatch(
-      state.tr.setStoredMarks(newMarks)
-    );
+    syncStoredMarks(editor, excludedMarks);
+  },
+  onCreate({ editor }) {
+    const excludedMarks = this.options.excludedMarks;
+    syncStoredMarks(editor, excludedMarks);
   },
-  // CRITICAL: Handle transaction updates to catch any textStyle changes
   onTransaction({ editor, transaction }) {
     if (!transaction.selectionSet && !transaction.docChanged) return;
-    const { state } = editor;
     const excludedMarks = this.options.excludedMarks;
-    const hasExcludedMarks = () => {
-      const { $from } = state.selection;
-      const marks = $from.marks();
-      return marks.some((mark) => excludedMarks.includes(mark.type.name));
-    };
-    const isInCodeBlock = () => {
-      const { $from } = state.selection;
-      for (let depth = $from.depth; depth > 0; depth--) {
-        const node = $from.node(depth);
-        if (node.type.name === "codeBlock") {
-          return true;
-        }
+    requestAnimationFrame(() => {
+      if (!editor.isDestroyed) {
+        syncStoredMarks(editor, excludedMarks);
       }
-      return false;
-    };
-    if (hasExcludedMarks() || isInCodeBlock()) {
-      return;
-    }
-    const blockFont = state.selection.$from.parent.attrs.fontFamily;
-    const blockColor = state.selection.$from.parent.attrs.color;
-    const existingTextStyleMark = state.selection.$from.marks().find(
-      (mark) => mark.type.name === "textStyle"
-    );
-    const markFont = existingTextStyleMark?.attrs.fontFamily;
-    const markColor = existingTextStyleMark?.attrs.color;
-    const finalFont = markFont || blockFont;
-    const finalColor = markColor || blockColor;
-    if (!finalFont && !finalColor) return;
-    const storedMarks = state.storedMarks || state.selection.$from.marks();
-    const existingStoredTextStyle = storedMarks.find((mark) => mark.type.name === "textStyle");
-    const hasCorrectFont = !finalFont || existingStoredTextStyle?.attrs.fontFamily === finalFont;
-    const hasCorrectColor = !finalColor || existingStoredTextStyle?.attrs.color === finalColor;
-    if (hasCorrectFont && hasCorrectColor && existingStoredTextStyle) return;
-    const filteredMarks = storedMarks.filter(
-      (mark) => mark.type.name !== "textStyle" && !excludedMarks.includes(mark.type.name)
-    );
-    const textStyleAttrs = {};
-    if (finalFont) textStyleAttrs.fontFamily = finalFont;
-    if (finalColor) textStyleAttrs.color = finalColor;
-    const newMarks = [
-      ...filteredMarks,
-      state.schema.marks.textStyle.create(textStyleAttrs)
-    ];
-    editor.view.dispatch(
-      state.tr.setStoredMarks(newMarks)
-    );
+    });
   }
 });
+function syncStoredMarks(editor, excludedMarks) {
+  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;
+  const blockFont = parentNode.attrs.fontFamily;
+  const blockColor = parentNode.attrs.color;
+  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";