@flozy/editor 6.0.4 → 6.0.6

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -14,7 +14,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
-    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -35,8 +34,12 @@ const PopupTool = props => {
   const {
     selectedElement
   } = useEditorContext();
+  console.log("Editor debug ====>", event, open, anchorEl, selection);
   const updateAnchorEl = useCallback(() => {
     try {
+      const {
+        selection
+      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection) {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -56,7 +59,7 @@ const PopupTool = props => {
     } catch (err) {
       console.log(err);
     }
-  }, [selection]);
+  }, [editor?.selection]);
   useEditorScroll(editorWrapper, updateAnchorEl);
   useEffect(() => {
     const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
@@ -71,12 +74,12 @@ const PopupTool = props => {
       if (!isCarouselEdit) {
         setOpen(true);
         setPopupType("textFormat");
-        setIsTextSelected(true);
+        // setIsTextSelected(true);
       }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");
-      setIsTextSelected(false);
+      // setIsTextSelected(false);
     }
   }, [event, anchorEl]);
   useEffect(() => {

package/dist/Editor/hooks/useDrag.js

@@ -1,26 +1,20 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 const useDrag = () => {
   const [event, setEvent] = useState("");
-  useEffect(() => {
-    addListener();
-    return () => {
-      removeListener();
-    };
-  }, []);
-  const onMouseDown = () => {
+  const onMouseDown = useCallback(() => {
     setEvent("start");
-  };
-  const onMouseUp = () => {
+  }, []);
+  const onMouseUp = useCallback(() => {
     setEvent("end");
-  };
-  const addListener = () => {
+  }, []);
+  useEffect(() => {
     document.addEventListener("pointerdown", onMouseDown);
     document.addEventListener("pointerup", onMouseUp);
-  };
-  const removeListener = () => {
-    document.removeEventListener("pointerdown", onMouseDown);
-    document.removeEventListener("pointerup", onMouseUp);
-  };
+    return () => {
+      document.removeEventListener("pointerdown", onMouseDown);
+      document.removeEventListener("pointerup", onMouseUp);
+    };
+  }, []);
   return [event];
 };
 export default useDrag;

package/dist/Editor/hooks/useEditorScroll.js

@@ -4,6 +4,7 @@ function useEditorScroll(editorWrapper = {
 }, callback) {
   useEffect(() => {
     const handleScroll = () => {
+      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
       if (editorWrapper.current) {
         callback();
       }

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -38,7 +38,7 @@ import { getBreakPointsValue, groupByBreakpoint } from "../helper/theme";
 import Variables from "../Elements/Variables/Variable";
 import insertNewLine from "./insertNewLine";
 import Divider from "../Elements/Divider/Divider";
-import { getBorderColor } from "./helper";
+import { getBorderColor, getSlateDom } from "./helper";
 import Code from "../Elements/EmbedScript/Code";
 import FreeGrid from "../Elements/FreeGrid/FreeGrid";
 import FreeGridItem from "../Elements/FreeGrid/FreeGridItem";
@@ -155,13 +155,23 @@ export const activeMark = (editor, format) => {
   const defaultMarkData = {
     color: "#000000",
     bgColor: "#FFFFFF",
-    fontSize: "16px",
+    fontSize: "14px",
     fontFamily: "PoppinsRegular",
     fontWeight: "normal"
   };
   try {
     const marks = Editor.marks(editor);
-    const defaultValue = defaultMarkData[format];
+    let defaultValue = defaultMarkData[format];
+    const {
+      selection
+    } = editor || {};
+    if (format === "fontSize" && selection && !Range.isCollapsed(selection)) {
+      const slateDom = getSlateDom(editor, editor?.selection);
+      if (slateDom) {
+        const parentElement = slateDom.commonAncestorContainer.parentElement;
+        defaultValue = window.getComputedStyle(parentElement).fontSize;
+      }
+    }
     return marks?.[format] ?? defaultValue;
   } catch (err) {
     console.log(err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "6.0.4",
+  "version": "6.0.6",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"