@mhamz.01/easyflow-texteditor 0.1.90 → 0.1.92

package/dist/index.mjs

@@ -1270,7 +1270,7 @@ function EditorLayout({ children, onChange, initialTabs, onTabsChange }) {
 }
 
 // src/components/tiptap-templates/simple/simple-editor.tsx
-import { useEffect as useEffect24, useRef as useRef7, useState as useState33 } from "react";
+import { useEffect as useEffect24, useRef as useRef8, useState as useState33 } from "react";
 import { EditorContent, EditorContext, useEditor } from "@tiptap/react";
 import { StarterKit } from "@tiptap/starter-kit";
 import Image from "@tiptap/extension-image";
@@ -6711,7 +6711,7 @@ function useUndoRedo(config) {
 
 // src/components/tiptap-ui/font-family-dropdown/font-family-dropdown.tsx
 import { useCurrentEditor as useCurrentEditor3 } from "@tiptap/react";
-import { useState as useState28, useEffect as useEffect18 } from "react";
+import { useState as useState28, useEffect as useEffect18, useRef as useRef6 } from "react";
 
 // src/lib/colors.ts
 var GRADIENT_ROWS_70 = [
@@ -7044,37 +7044,49 @@ function FontFamilyDropdown() {
   const { editor } = useCurrentEditor3();
   const [open, setOpen] = useState28(false);
   const [selectedFont, setSelectedFont] = useState28(null);
+  const isApplyingFont = useRef6(false);
   useEffect18(() => {
     loadGoogleFonts();
   }, []);
   useEffect18(() => {
-    if (!editor) return;
-    const updateSelectedFont = () => {
-      const currentFontFamily2 = editor.getAttributes("textStyle").fontFamily;
-      if (currentFontFamily2) {
-        setSelectedFont(currentFontFamily2);
+    if (!editor || !selectedFont) return;
+    const handleTransaction = ({ transaction }) => {
+      if (isApplyingFont.current) return;
+      const hasTextChanges = transaction.steps.some(
+        (step) => step.slice || step.from !== void 0
+      );
+      if (!hasTextChanges) return;
+      const { $from } = transaction.selection;
+      const marks = $from.marks();
+      const hasFontFamily = marks.some(
+        (mark) => mark.type.name === "textStyle" && mark.attrs.fontFamily
+      );
+      if (!hasFontFamily) {
+        const { state } = editor;
+        const textStyleMark = state.schema.marks.textStyle;
+        if (textStyleMark) {
+          isApplyingFont.current = true;
+          const mark = textStyleMark.create({ fontFamily: selectedFont });
+          state.storedMarks = [mark];
+          setTimeout(() => {
+            isApplyingFont.current = false;
+          }, 50);
+        }
       }
     };
-    editor.on("selectionUpdate", updateSelectedFont);
-    editor.on("transaction", updateSelectedFont);
+    editor.on("transaction", handleTransaction);
     return () => {
-      editor.off("selectionUpdate", updateSelectedFont);
-      editor.off("transaction", updateSelectedFont);
+      editor.off("transaction", handleTransaction);
     };
-  }, [editor]);
+  }, [editor, selectedFont]);
   useEffect18(() => {
     if (!editor || !selectedFont) return;
-    const handleUpdate = () => {
-      const { from, to } = editor.state.selection;
-      const currentFontFamily2 = editor.getAttributes("textStyle").fontFamily;
-      if (!currentFontFamily2 && selectedFont) {
-        editor.chain().focus().setFontFamily(selectedFont).run();
-      }
-    };
-    editor.on("update", handleUpdate);
-    return () => {
-      editor.off("update", handleUpdate);
-    };
+    const { state } = editor;
+    const textStyleMark = state.schema.marks.textStyle;
+    if (textStyleMark) {
+      const mark = textStyleMark.create({ fontFamily: selectedFont });
+      state.storedMarks = [mark];
+    }
   }, [editor, selectedFont]);
   if (!editor) return null;
   const currentFontFamily = editor.getAttributes("textStyle").fontFamily || selectedFont;
@@ -7088,35 +7100,45 @@ function FontFamilyDropdown() {
   const currentFont = getCurrentFontLabel();
   const applyFont = (family) => {
     if (!editor) return;
+    isApplyingFont.current = true;
     setSelectedFont(family);
-    if (editor.state.storedMarks) {
-      const textStyleMark = editor.schema.marks.textStyle;
-      if (textStyleMark) {
-        editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMark));
-      }
+    const { state, view } = editor;
+    const { from, to } = state.selection;
+    const textStyleMark = state.schema.marks.textStyle;
+    if (!textStyleMark) {
+      isApplyingFont.current = false;
+      return;
     }
+    const mark = textStyleMark.create({ fontFamily: family });
+    if (from !== to) {
+      const tr = state.tr.addMark(from, to, mark);
+      view.dispatch(tr);
+    }
+    state.storedMarks = [mark];
+    editor.commands.focus(void 0, { scrollIntoView: false });
     setTimeout(() => {
-      const success = editor.chain().focus().setFontFamily(family).run();
-      if (!success) {
-        console.warn("Font not applied:", family);
-      }
-    }, 0);
+      isApplyingFont.current = false;
+    }, 50);
   };
   const resetFont = () => {
     if (!editor) return;
+    isApplyingFont.current = true;
     setSelectedFont(null);
-    if (editor.state.storedMarks) {
-      const textStyleMark = editor.schema.marks.textStyle;
+    const { state, view } = editor;
+    const { from, to } = state.selection;
+    if (from !== to) {
+      const textStyleMark = state.schema.marks.textStyle;
       if (textStyleMark) {
-        editor.view.dispatch(
-          editor.state.tr.removeStoredMark(textStyleMark)
-        );
+        const tr = state.tr.removeMark(from, to, textStyleMark);
+        view.dispatch(tr);
       }
     }
+    state.storedMarks = null;
+    editor.commands.focus(void 0, { scrollIntoView: false });
+    setOpen(false);
     setTimeout(() => {
-      editor.chain().focus().unsetFontFamily().run();
-      setOpen(false);
-    }, 0);
+      isApplyingFont.current = false;
+    }, 50);
   };
   return /* @__PURE__ */ jsxs45(Popover2, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx76(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs45(
@@ -7475,9 +7497,9 @@ import { useEffect as useEffect21, useState as useState31 } from "react";
 import throttle from "lodash.throttle";
 
 // src/hooks/use-unmount.ts
-import { useRef as useRef6, useEffect as useEffect20 } from "react";
+import { useRef as useRef7, useEffect as useEffect20 } from "react";
 var useUnmount = (callback) => {
-  const ref = useRef6(callback);
+  const ref = useRef7(callback);
   ref.current = callback;
   useEffect20(
     () => () => {
@@ -7746,7 +7768,7 @@ function SimpleEditor() {
   const [mobileView, setMobileView] = useState33(
     "main"
   );
-  const toolbarRef = useRef7(null);
+  const toolbarRef = useRef8(null);
   const editor = useEditor({
     immediatelyRender: false,
     editorProps: {