@flozy/editor 9.2.1 → 9.2.2

package/dist/Editor/Editor.css

@@ -1280,8 +1280,8 @@ blockquote {
 }
 @media (max-width: 899px) {
   /* Qa validation required */
-  /* .MuiPopover-root {
-    z-index: 1302 !important;
+    /* .MuiPopover-root {
+      z-index: 1302 !important;
   } */
 
   canvas {

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,7 +5,7 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-// import { getBreakpointLineSpacing } from "../../helper/theme";
+import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/Elements/Table/TableCell.js

@@ -155,7 +155,7 @@ const TableCell = props => {
   };
   useEffect(() => {
     const currentPath = path?.toString();
-    const timeoutId = setTimeout(() => {
+    setTimeout(() => {
       if (tableResizing === currentPath) {
         setTableResizing(null);
 
@@ -171,7 +171,6 @@ const TableCell = props => {
     if (resizing) {
       setTableResizing(currentPath);
     }
-    return () => clearTimeout(timeoutId);
   }, [resizing]);
   const onMouseEnter = path => {
     setHoverPath(path);

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

@@ -33,14 +33,17 @@ const TextFormat = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);
-
-  // const { element: pageSt } = getPageSettings(editor) || {};
+  const {
+    element: pageSt
+  } = getPageSettings(editor) || {};
   // const pageSettingLine = pageSt?.pageProps?.lineHeight;
   const {
     fontFamilies,
     theme
   } = useEditorContext();
-  // const { activeBreakPoint } = useEditorContext();
+  const {
+    activeBreakPoint
+  } = useEditorContext();
   // const breakpoint = activeBreakPoint === "" ? "lg" : activeBreakPoint;
   const fontWeight = allTools.find(f => f.format === "fontWeight");
   const fontStyle = allTools.filter(f => f.type === "mark" && f.format !== "strikethrough" && f.format !== "superscript" && f.format !== "subscript");

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

@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
+    setIsTextSelected,
     customProps,
     editorWrapper
   } = props;
@@ -34,9 +35,6 @@ const PopupTool = props => {
   const [size] = useWindowResize();
   const updateAnchorEl = isScroll => {
     try {
-      const {
-        selection
-      } = editor;
       const isHavingSelection = selection && !Range.isCollapsed(selection);
       if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
@@ -76,39 +74,29 @@ 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(() => {
-    console.log("Editor useEffect", selection);
-    const {
-      path,
-      enable
-    } = selectedElement || {};
-    const isFreeGridElement = path && path.split("|").length > 2;
-    const isFreeGridEnabled = enable === 1 && isFreeGridElement;
-    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
+    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || selectedElement?.enable === 1) {
       setAnchorEl(null);
     } else {
-      console.log("Editor updateAnchorEl", selection);
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
   }, [selection, event, selectedElement?.enable]);
   const handleClose = () => {
-    console.log("Editor closing");
     // setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
-      console.log("ClickAwayListener", e.target, document.body, e.target !== document.body);
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)
       if (e.target !== document.body) {
         // e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -19,7 +19,7 @@ const Upload = props => {
     xs: 12,
     sx: {
       padding: "10px",
-      height: "100%"
+      height: '100%'
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -5,9 +5,9 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
-    height: "100%",
-    minHeight: "150px",
-    height: "inherit"
+    height: '100%',
+    minHeight: '150px',
+    height: 'inherit'
   },
   uploadField: {
     width: "100%",
@@ -19,21 +19,21 @@ const UploadStyles = theme => ({
     backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
     border: "1px dashed #2563EB",
-    minHeight: "150px"
+    minHeight: '150px'
   },
   uploadIcon: {
     display: "grid !important",
     "& svg": {
-      display: "flex",
-      width: "100%",
+      display: 'flex',
+      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
     },
-    "& span": {
-      display: "flex",
-      width: "100%",
-      marginTop: "5px"
+    '& span': {
+      display: 'flex',
+      width: '100%',
+      marginTop: '5px'
     }
   }
 });

package/dist/Editor/common/RnD/ElementSettings/styles.js

@@ -58,7 +58,6 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      paddingLeft: "4px",
       background: theme?.palette?.editor?.background,
       paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -75,13 +75,12 @@ const VirtualElement = props => {
   const virtualRef = useRef();
   useEffect(() => {
     if (virtualRef?.current) {
-      const timeoutId = setTimeout(() => {
+      setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
         const groupData = groupByPathAndCalculateHeight(allData);
         // it should trigger by auto alignment or on clicking mobile view change
         updateAutoProps(editor, allData, "xs", groupData);
       }, 100);
-      return () => clearTimeout(timeoutId);
     }
   }, [updated_at, virtualRef?.current]);
   const calculateProps = (curPath, dom, domClass, allData) => {

package/dist/Editor/helper/index.js

@@ -287,22 +287,18 @@ export const bringItemToFB = (editor, {
 };
 export const debounce = function (func, wait, immediate) {
   let timeout;
-  function debounced(...args) {
-    const context = this;
-    const later = function () {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    const callNow = immediate && !timeout;
+  return function () {
+    const context = this,
+      args = arguments,
+      later = function () {
+        timeout = null;
+        if (!immediate) func.apply(context, args);
+      },
+      callNow = immediate && !timeout;
     clearTimeout(timeout);
     timeout = setTimeout(later, wait);
     if (callNow) func.apply(context, args);
-  }
-  debounced.cancel = function () {
-    clearTimeout(timeout);
-    timeout = null;
   };
-  return debounced;
 };
 export const getTextColor = (color = "") => {
   return color?.indexOf("gradient") >= 0 ? {
@@ -341,14 +337,14 @@ export const isCarouselSelected = editor => {
       return false;
     }
     const [nodeEntry] = Editor.nodes(editor, {
-      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "carousel"
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
     });
     if (!nodeEntry) {
       return false;
     }
     const [node] = nodeEntry;
     const carouselDom = ReactEditor.toDOMNode(editor, node);
-    const isEdit = carouselDom.classList.contains("carousel_slider_edit");
+    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
     return !isEdit;
   } catch (err) {
     console.log(err);

package/dist/Editor/hooks/useDrag.js

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

package/dist/Editor/hooks/useEditorScroll.js

@@ -3,18 +3,22 @@ function useEditorScroll(editorWrapper = {
   current: null
 }, callback) {
   useEffect(() => {
-    if (!editorWrapper?.current) return;
     const handleScroll = () => {
-      console.log("Editor debug useEditorScroll ====>", editorWrapper, callback);
-      callback("scroll");
+      if (editorWrapper.current) {
+        callback("scroll");
+      }
     };
     const currentEditorWrapper = editorWrapper.current;
-    currentEditorWrapper.addEventListener("scroll", handleScroll);
+    if (currentEditorWrapper) {
+      currentEditorWrapper.addEventListener("scroll", handleScroll);
+    }
 
     // Cleanup the event listener on component unmount
     return () => {
-      currentEditorWrapper.removeEventListener("scroll", handleScroll);
+      if (currentEditorWrapper) {
+        currentEditorWrapper.removeEventListener("scroll", handleScroll);
+      }
     };
-  }, [editorWrapper, callback]);
+  }, [editorWrapper.current, callback]);
 }
 export default useEditorScroll;

package/dist/Editor/hooks/useMouseMove.js

@@ -1,4 +1,4 @@
-import { useEffect, useState, createContext, useContext, useMemo, useCallback } from "react";
+import { useEffect, useState, createContext, useContext, useMemo } from "react";
 import { getSelectedText } from "../utils/helper";
 import { debounce } from "../helper";
 import { defaultFontFamilies } from "../common/FontLoader/FontList";
@@ -115,7 +115,13 @@ const useMouseMove = dragging => {
   const [event, setEvent] = useState({
     target: null
   });
-  const onMouseMove = useCallback(debounce(e => {
+  useEffect(() => {
+    addListener();
+    return () => {
+      removeListener();
+    };
+  }, []);
+  const onMouseMove = e => {
     if (!dragging?.id) {
       const dpath = e?.target?.closest(".dpath");
       if (dpath) {
@@ -124,14 +130,14 @@ const useMouseMove = dragging => {
         });
       }
     }
-  }, 100), [dragging]);
-  useEffect(() => {
-    document.addEventListener("mousemove", onMouseMove);
-    return () => {
-      document.removeEventListener("mousemove", onMouseMove);
-      onMouseMove.cancel(); // Cancel any pending debounced calls
-    };
-  }, [onMouseMove]);
+  };
+  const debounceMouseMove = debounce(onMouseMove, 100);
+  const addListener = () => {
+    document.addEventListener("mousemove", debounceMouseMove);
+  };
+  const removeListener = () => {
+    document.removeEventListener("mousemove", debounceMouseMove);
+  };
   return [event];
 };
 export default useMouseMove;

package/dist/Editor/hooks/useTable.js

@@ -184,7 +184,7 @@ export const TableProvider = ({
       window.removeEventListener("copy", handleCopy);
       window.removeEventListener("cut", handleCut);
     };
-  }, [tableSelection, editor]);
+  }, [tableSelection, editor, tableSelection]);
 
   // useEffect(() => {
   //   selectFirstCell(tablePath, editor, updateTableSelection);

package/dist/Editor/plugins/withHTML.js

@@ -149,7 +149,6 @@ const getFocusedNode = (editor, nodeType = "") => {
     console.log(err);
   }
 };
-const voidTypes = ["image", "page-settings"];
 const withHtml = editor => {
   const {
     insertData,
@@ -160,7 +159,7 @@ const withHtml = editor => {
     return element.type === "link" ? true : isInline(element);
   };
   editor.isVoid = element => {
-    return voidTypes.includes(element.type) ? true : isVoid(element);
+    return element.type === "image" ? true : isVoid(element);
   };
   editor.insertData = data => {
     const slateHTML = data?.getData("application/x-slate-fragment");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "9.2.1",
+  "version": "9.2.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -61,7 +61,7 @@
   "scripts": {
     "prepare": "husky install .husky",
     "analyze": "source-map-explorer build/static/js/*.js",
-    "lint": "./node_modules/. bin/eslint --ignore-path .gitignore .",
+    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
     "test": "craco test --passWithNoTests",