@mhamz.01/easyflow-texteditor 0.1.88 → 0.1.90

package/dist/index.js

@@ -7069,13 +7069,52 @@ 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) return;
+    const updateSelectedFont = () => {
+      const currentFontFamily2 = editor.getAttributes("textStyle").fontFamily;
+      if (currentFontFamily2) {
+        setSelectedFont(currentFontFamily2);
+      }
+    };
+    editor.on("selectionUpdate", updateSelectedFont);
+    editor.on("transaction", updateSelectedFont);
+    return () => {
+      editor.off("selectionUpdate", updateSelectedFont);
+      editor.off("transaction", updateSelectedFont);
+    };
+  }, [editor]);
+  (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);
+    };
+  }, [editor, selectedFont]);
   if (!editor) return null;
-  const currentFont = editor.getAttributes("textStyle").fontFamily || "Font Family";
+  const currentFontFamily = editor.getAttributes("textStyle").fontFamily || selectedFont;
+  const getCurrentFontLabel = () => {
+    if (!currentFontFamily) return "Font Family";
+    const matchedFont = FONT_OPTIONS.find(
+      (font) => font.cssFontFamily === currentFontFamily
+    );
+    return matchedFont ? matchedFont.label : "Font Family";
+  };
+  const currentFont = getCurrentFontLabel();
   const applyFont = (family) => {
     if (!editor) return;
+    setSelectedFont(family);
     if (editor.state.storedMarks) {
       const textStyleMark = editor.schema.marks.textStyle;
       if (textStyleMark) {
@@ -7089,6 +7128,22 @@ function FontFamilyDropdown() {
       }
     }, 0);
   };
+  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)
+        );
+      }
+    }
+    setTimeout(() => {
+      editor.chain().focus().unsetFontFamily().run();
+      setOpen(false);
+    }, 0);
+  };
   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)(
       Button,
@@ -7120,21 +7175,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"
                 },