@mhamz.01/easyflow-texteditor 0.1.90 → 0.1.92

package/dist/index.js

@@ -7070,37 +7070,49 @@ function FontFamilyDropdown() {
   const { editor } = (0, import_react85.useCurrentEditor)();
   const [open, setOpen] = (0, import_react86.useState)(false);
   const [selectedFont, setSelectedFont] = (0, import_react86.useState)(null);
+  const isApplyingFont = (0, import_react86.useRef)(false);
   (0, import_react86.useEffect)(() => {
     loadGoogleFonts();
   }, []);
   (0, import_react86.useEffect)(() => {
-    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]);
   (0, import_react86.useEffect)(() => {
     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;
@@ -7114,35 +7126,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__ */ (0, import_jsx_runtime76.jsxs)(Popover2, { open, onOpenChange: setOpen, children: [
     /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(