@mhamz.01/easyflow-texteditor 0.1.89 → 0.1.91

package/dist/index.js

@@ -7069,11 +7069,62 @@ var import_jsx_runtime76 = require("react/jsx-runtime");
 function FontFamilyDropdown() {
   const { editor } = (0, import_react85.useCurrentEditor)();
   const [open, setOpen] = (0, import_react86.useState)(false);
+  const [selectedFont, setSelectedFont] = (0, import_react86.useState)(null);
   (0, import_react86.useEffect)(() => {
     loadGoogleFonts();
   }, []);
+  (0, import_react86.useEffect)(() => {
+    if (!editor || !selectedFont) return;
+    const handleUpdate = () => {
+      const currentFontFamily2 = editor.getAttributes("textStyle").fontFamily;
+      if (!currentFontFamily2) {
+        requestAnimationFrame(() => {
+          editor.commands.setFontFamily(selectedFont);
+        });
+      }
+    };
+    const handleSelectionUpdate = () => {
+      const currentFontFamily2 = editor.getAttributes("textStyle").fontFamily;
+      if (!currentFontFamily2 && selectedFont) {
+        requestAnimationFrame(() => {
+          editor.commands.setFontFamily(selectedFont);
+        });
+      }
+    };
+    const handleTransaction = ({ transaction }) => {
+      const isBlockChange = transaction.steps.some((step) => {
+        return step.slice?.content?.content?.some(
+          (node) => ["heading", "bulletList", "orderedList", "blockquote", "codeBlock"].includes(node.type?.name)
+        );
+      });
+      if (isBlockChange && selectedFont) {
+        requestAnimationFrame(() => {
+          editor.commands.setFontFamily(selectedFont);
+        });
+      }
+    };
+    editor.on("update", handleUpdate);
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    editor.on("transaction", handleTransaction);
+    return () => {
+      editor.off("update", handleUpdate);
+      editor.off("selectionUpdate", handleSelectionUpdate);
+      editor.off("transaction", handleTransaction);
+    };
+  }, [editor, selectedFont]);
+  (0, import_react86.useEffect)(() => {
+    if (!editor || !selectedFont) return;
+    const { state } = editor;
+    const { schema } = state;
+    const textStyleMark = schema.marks.textStyle;
+    if (textStyleMark) {
+      const mark = textStyleMark.create({ fontFamily: selectedFont });
+      const tr = state.tr.addStoredMark(mark);
+      editor.view.dispatch(tr);
+    }
+  }, [editor, selectedFont]);
   if (!editor) return null;
-  const currentFontFamily = editor.getAttributes("textStyle").fontFamily;
+  const currentFontFamily = editor.getAttributes("textStyle").fontFamily || selectedFont;
   const getCurrentFontLabel = () => {
     if (!currentFontFamily) return "Font Family";
     const matchedFont = FONT_OPTIONS.find(
@@ -7084,18 +7135,36 @@ function FontFamilyDropdown() {
   const currentFont = getCurrentFontLabel();
   const applyFont = (family) => {
     if (!editor) return;
+    setSelectedFont(family);
+    if (editor.state.storedMarks) {
+      const textStyleMark2 = editor.schema.marks.textStyle;
+      if (textStyleMark2) {
+        editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMark2));
+      }
+    }
+    editor.chain().focus().setFontFamily(family).run();
+    const { state } = editor;
+    const { schema } = state;
+    const textStyleMark = schema.marks.textStyle;
+    if (textStyleMark) {
+      const mark = textStyleMark.create({ fontFamily: family });
+      const tr = state.tr.addStoredMark(mark);
+      editor.view.dispatch(tr);
+    }
+  };
+  const resetFont = () => {
+    if (!editor) return;
+    setSelectedFont(null);
     if (editor.state.storedMarks) {
       const textStyleMark = editor.schema.marks.textStyle;
       if (textStyleMark) {
-        editor.view.dispatch(editor.state.tr.removeStoredMark(textStyleMark));
+        editor.view.dispatch(
+          editor.state.tr.removeStoredMark(textStyleMark)
+        );
       }
     }
-    setTimeout(() => {
-      const success = editor.chain().focus().setFontFamily(family).run();
-      if (!success) {
-        console.warn("Font not applied:", family);
-      }
-    }, 0);
+    editor.chain().focus().unsetFontFamily().run();
+    setOpen(false);
   };
   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)(
@@ -7128,21 +7197,7 @@ function FontFamilyDropdown() {
               /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
                 CommandItem,
                 {
-                  onSelect: () => {
-                    if (!editor) return;
-                    if (editor.state.storedMarks) {
-                      const textStyleMark = editor.schema.marks.textStyle;
-                      if (textStyleMark) {
-                        editor.view.dispatch(
-                          editor.state.tr.removeStoredMark(textStyleMark)
-                        );
-                      }
-                    }
-                    setTimeout(() => {
-                      editor.chain().focus().unsetFontFamily().run();
-                      setOpen(false);
-                    }, 0);
-                  },
+                  onSelect: resetFont,
                   className: "font-sans",
                   children: "Default"
                 },