@mhamz.01/easyflow-texteditor 0.1.151 → 0.1.153

package/dist/index.js

@@ -1400,6 +1400,80 @@ var import_extension_color = __toESM(require("@tiptap/extension-color"));
 var import_extension_table = require("@tiptap/extension-table");
 var import_extensions2 = require("@tiptap/extensions");
 
+// src/components/extensions/list-marker-color.tsx
+var import_core3 = require("@tiptap/core");
+var ListMarkerColor = import_core3.Extension.create({
+  name: "listMarkerColor",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["listItem", "taskItem"],
+        attributes: {
+          // Inherit color attribute from ColorBlock extension
+        }
+      }
+    ];
+  },
+  addProseMirrorPlugins() {
+    return [];
+  },
+  // Add CSS to make markers inherit color
+  addOptions() {
+    return {
+      // CSS will be injected into the editor
+    };
+  },
+  onCreate() {
+    if (typeof document !== "undefined") {
+      const styleId = "tiptap-list-marker-color";
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = `
+          /* Bullet list markers inherit color */
+          .ProseMirror ul[data-type="bulletList"] > li[style*="color"]::marker,
+          .ProseMirror ul li[style*="color"]::marker {
+            color: inherit !important;
+          }
+
+          /* Ordered list numbers inherit color */
+          .ProseMirror ol[data-type="orderedList"] > li[style*="color"]::marker,
+          .ProseMirror ol li[style*="color"]::marker {
+            color: inherit !important;
+          }
+
+          /* Task list checkboxes inherit color */
+          .ProseMirror ul[data-type="taskList"] > li[style*="color"] > label > input[type="checkbox"],
+          .ProseMirror ul[data-type="taskList"] li[style*="color"] > label > input[type="checkbox"] {
+            accent-color: currentColor;
+          }
+
+          /* Alternative: Style the checkbox wrapper */
+          .ProseMirror ul[data-type="taskList"] > li[style*="color"] > label,
+          .ProseMirror ul[data-type="taskList"] li[style*="color"] > label {
+            color: inherit;
+          }
+
+          /* Ensure nested lists also inherit */
+          .ProseMirror li[style*="color"] ul > li::marker,
+          .ProseMirror li[style*="color"] ol > li::marker {
+            color: inherit !important;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+    }
+  },
+  onDestroy() {
+    if (typeof document !== "undefined") {
+      const styleElement = document.getElementById("tiptap-list-marker-color");
+      if (styleElement) {
+        styleElement.remove();
+      }
+    }
+  }
+});
+
 // src/components/tiptap-ui-primitive/button/button.tsx
 var import_react12 = require("react");
 
@@ -1547,7 +1621,7 @@ TooltipContent2.displayName = "TooltipContent";
 
 // src/lib/tiptap-utils.ts
 var import_state = require("@tiptap/pm/state");
-var import_core3 = require("@tiptap/core");
+var import_core4 = require("@tiptap/core");
 var MAX_FILE_SIZE = 5 * 1024 * 1024;
 var MAC_SYMBOLS = {
   mod: "\u2318",
@@ -1790,7 +1864,7 @@ var FONT_SIZES = [
   "56px",
   "64px"
 ];
-var FontSizeExtension = import_core3.Extension.create({
+var FontSizeExtension = import_core4.Extension.create({
   name: "fontSize",
   addOptions() {
     return {
@@ -2902,37 +2976,98 @@ function useTiptapEditor(providedEditor) {
 
 // src/hooks/mark-preservers/mark-preserver.ts
 var MarkPreserver = class {
-  static preservedMarks = /* @__PURE__ */ new Map();
+  static preservedStyles = /* @__PURE__ */ new Map();
   /**
-   * Preserve marks before an action that will cause blur
-   * Call this in onMouseDown or onPointerDown events
+   * Preserve current font and color before blur or node change
    */
   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]);
+    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 marks after an action completes
-   * Call this after the editor action in onClick or in a setTimeout
+   * Restore preserved styles to current node
    */
   static restore(editor, delay = 0) {
     if (!editor) return;
-    const marks = this.preservedMarks.get(editor);
-    if (!marks) return;
+    const styles = this.preservedStyles.get(editor);
+    if (!styles) return;
     const restoreFn = () => {
       if (editor.isDestroyed) {
-        this.preservedMarks.delete(editor);
+        this.preservedStyles.delete(editor);
         return;
       }
-      const { state } = editor;
-      editor.view.dispatch(state.tr.setStoredMarks(marks));
-      this.preservedMarks.delete(editor);
-      editor.commands.focus();
+      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);
@@ -2941,10 +3076,10 @@ var MarkPreserver = class {
     }
   }
   /**
-   * Clear preserved marks for an editor
+   * Clear preserved styles
    */
   static clear(editor) {
-    this.preservedMarks.delete(editor);
+    this.preservedStyles.delete(editor);
   }
 };
 
@@ -7659,8 +7794,9 @@ function useCursorVisibility({
 }
 
 // src/components/extensions/font-family-block.ts
-var import_core4 = require("@tiptap/core");
-var FontFamilyBlock = import_core4.Extension.create({
+var import_core5 = require("@tiptap/core");
+var import_state5 = require("@tiptap/pm/state");
+var FontFamilyBlock = import_core5.Extension.create({
   name: "fontFamilyBlock",
   addGlobalAttributes() {
     return [
@@ -7688,7 +7824,7 @@ var FontFamilyBlock = import_core4.Extension.create({
     ];
   }
 });
-var ColorBlock = import_core4.Extension.create({
+var ColorBlock = import_core5.Extension.create({
   name: "colorBlock",
   addGlobalAttributes() {
     return [
@@ -7716,150 +7852,217 @@ var ColorBlock = import_core4.Extension.create({
     ];
   }
 });
-var StylePersistence = import_core4.Extension.create({
+var ListMarkerColor2 = import_core5.Extension.create({
+  name: "listMarkerColor",
+  onCreate() {
+    if (typeof document !== "undefined") {
+      const styleId = "tiptap-list-marker-color";
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = `
+          /* Bullet list markers inherit color */
+          .ProseMirror ul > li[style*="color"]::marker {
+            color: inherit !important;
+          }
+
+          /* Ordered list numbers inherit color */
+          .ProseMirror ol > li[style*="color"]::marker {
+            color: inherit !important;
+          }
+
+          /* Task list checkboxes inherit color */
+          .ProseMirror ul[data-type="taskList"] > li[style*="color"] > label > input[type="checkbox"] {
+            accent-color: currentColor;
+          }
+
+          /* Ensure nested lists also inherit */
+          .ProseMirror li[style*="color"] ul > li::marker,
+          .ProseMirror li[style*="color"] ol > li::marker {
+            color: inherit !important;
+          }
+        `;
+        document.head.appendChild(style);
+      }
+    }
+  },
+  onDestroy() {
+    if (typeof document !== "undefined") {
+      const styleElement = document.getElementById("tiptap-list-marker-color");
+      if (styleElement) {
+        styleElement.remove();
+      }
+    }
+  }
+});
+var stylePersistenceKey = new import_state5.PluginKey("stylePersistence");
+var StylePersistence = import_core5.Extension.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 }) {
-    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;
+  addProseMirrorPlugins() {
     const excludedMarks = this.options.excludedMarks;
-    requestAnimationFrame(() => {
-      if (!editor.isDestroyed) {
-        syncStoredMarks(editor, excludedMarks, this.storage);
-      }
-    });
+    return [
+      new import_state5.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
 var import_jsx_runtime81 = require("react/jsx-runtime");
@@ -7971,6 +8174,7 @@ function SimpleEditor() {
       import_extension_superscript.Superscript,
       import_extension_subscript.Subscript,
       import_extensions.Selection,
+      ListMarkerColor,
       FontFamilyBlock,
       ColorBlock,
       StylePersistence,