@flozy/editor 5.8.7 → 5.8.9

package/dist/Editor/CommonEditor.js

@@ -54,13 +54,14 @@ const Item = /*#__PURE__*/forwardRef(({
   });
 });
 Item.displayName = "Item";
-const Element = props => {
+const Element = /*#__PURE__*/React.memo(props => {
   return /*#__PURE__*/_jsx(Section, {
     ...props,
     children: getBlock(props)
   });
-};
-const Leaf = ({
+});
+Element.displayName = "Element";
+const Leaf = /*#__PURE__*/React.memo(({
   attributes,
   children,
   leaf
@@ -71,12 +72,13 @@ const Leaf = ({
     ...attributes,
     children: children
   });
-};
+});
+Leaf.displayName = "Leaf";
 const updateTopBanner = (content = [], setTopBanner) => {
-  setTopBanner(() => {
-    const firstNode = content ? content[0] : {};
-    return firstNode?.type === "topbanner" ? firstNode : null;
-  });
+  // setTopBanner(() => {
+  //   const firstNode = content ? content[0] : {};
+  //   return firstNode?.type === "topbanner" ? firstNode : null;
+  // });
 };
 const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -313,7 +315,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       updateTopBanner(newValue, setTopBanner);
       debounced(newValue);
       if (!isInteracted) {
-        setIsInteracted(true);
+        // setIsInteracted(true);
       }
     }
   };

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
-import { getPageSettings } from "../../utils/pageSettings";
+// import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
@@ -12,7 +12,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
   const {
-    theme,
     openAI
   } = useEditorContext() || {};
   const editor = useSlateStatic();
@@ -28,19 +27,15 @@ const SimpleText = props => {
     readOnly,
     editorPlaceholder
   } = customProps;
-  const {
-    element: pageSt
-  } = getPageSettings(editor) || {};
-  const {
-    pageColor
-  } = pageSt?.pageProps || {};
+  // const { element: pageSt } = getPageSettings(editor) || {};
+  // const { pageColor } = pageSt?.pageProps || {};
   const {
     activeBreakPoint
   } = useEditorContext();
   const lineHeight = element?.children[0]?.lineHeight;
   const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
+    pageColor: "#FFFFFF",
     lineHeight: lineH
   });
   const selected = useSelected();
@@ -59,14 +54,14 @@ const SimpleText = props => {
     contentEditable: false,
     className: "placeholder-simple-text",
     children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
-      children: ["Type ", /*#__PURE__*/_jsx("span", {
+      children: ["Type", " ", /*#__PURE__*/_jsx("span", {
         style: {
-          backgroundColor: '#F2F6FA',
+          backgroundColor: "#F2F6FA",
           padding: "0px 2px",
           borderRadius: "2px"
         },
         children: "/"
-      }), " to browse elements"]
+      }), " ", "to browse elements"]
     }) : "" : ""
   }));
 };

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

@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
-import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Popper, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
@@ -21,7 +21,8 @@ const PopupTool = props => {
   const classes = usePopupStyles(theme);
   const {
     setPopupType,
-    openAI
+    openAI,
+    selectedElement
   } = useEditorContext();
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
@@ -32,13 +33,10 @@ const PopupTool = props => {
   const [event] = useDrag(anchorEl);
   const id = open ? "popup-edit-tool" : "";
   const [size] = useWindowResize();
-  const {
-    selectedElement
-  } = useEditorContext();
-  const updateAnchorEl = useCallback(() => {
+  const updateAnchorEl = isScroll => {
     try {
       const isHavingSelection = selection && !Range.isCollapsed(selection);
-      if (isHavingSelection) {
+      if (isHavingSelection && event === "end") {
         const domRange = ReactEditor.toDOMRange(editor, editor.selection);
         const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
         const rect = domRange.getBoundingClientRect();
@@ -47,16 +45,21 @@ const PopupTool = props => {
           rect.y = -500; // hide the popper
         }
 
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
+        // Create a dummy anchor element to match Popper's requirements
+        const anchor = document.createElement("div");
+        anchor.style.position = "absolute";
+        anchor.style.top = `${rect.top + window.scrollY}px`;
+        anchor.style.left = `${rect.left + window.scrollX}px`;
+        document.body.appendChild(anchor);
+        if (!anchorEl || isScroll === "scroll") {
+          setAnchorEl(anchor);
+          setOpen(true);
+        }
       }
     } catch (err) {
       console.log(err);
     }
-  }, [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
@@ -86,7 +89,7 @@ const PopupTool = props => {
       updateAnchorEl();
       hideSlateSelection(); // removes slate selection background, when there is no selection
     }
-  }, [selection]);
+  }, [selection, event]);
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
@@ -117,24 +120,18 @@ const PopupTool = props => {
       id: id,
       open: open,
       anchorEl: anchorEl,
-      transition: true,
       sx: classes.popupWrapper,
       placement: "top-start",
-      children: ({
-        TransitionProps
-      }) => /*#__PURE__*/_jsx(Fade, {
-        ...TransitionProps,
-        children: /*#__PURE__*/_jsx(Paper, {
-          style: {
-            borderRadius: "6px",
-            border: "1px solid #8360FD"
-          },
-          children: /*#__PURE__*/_jsx(MiniTextFormat, {
-            editor: editor,
-            classes: classes,
-            closeMainPopup: handleClose,
-            customProps: customProps
-          })
+      children: /*#__PURE__*/_jsx(Paper, {
+        style: {
+          borderRadius: "6px",
+          border: "1px solid #8360FD"
+        },
+        children: /*#__PURE__*/_jsx(MiniTextFormat, {
+          editor: editor,
+          classes: classes,
+          closeMainPopup: handleClose,
+          customProps: customProps
         })
       })
     })

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,11 +1,9 @@
 import { useEffect, useState } from "react";
 import WebFont from "webfontloader";
+import { Backdrop, CircularProgress } from "@mui/material";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { googleFontList } from "./FontList";
-import CircularProgress from '@mui/material/CircularProgress';
-import Box from "@mui/material/Box";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const FontLoader = props => {
   const {
     otherProps,
@@ -14,7 +12,7 @@ const FontLoader = props => {
   const {
     setFontFamilies
   } = useEditorContext();
-  const [loading, setLoading] = useState(false);
+  const [loader, setLoader] = useState(true);
   const loadFontsInBatches = (families, batchSize = 5, maxRetries = 3) => {
     let currentIndex = 0;
     let retryCount = 0;
@@ -22,11 +20,11 @@ const FontLoader = props => {
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
         // console.log("All fonts have been loaded");
-        setLoading(false);
+        setLoader(false);
         return;
       }
       if (currentIndex >= hideLoaderOn) {
-        setLoading(false);
+        setLoader(false);
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
       const batchWithWeights = batch.map(font => `${font}:300,400,600,700`);
@@ -100,25 +98,18 @@ const FontLoader = props => {
       families = families?.map(font => font?.replace(/\"/g, ""));
       families = families?.map(font => font?.replace(", sans-serif", "")); //This is temporary fix for patch
       families = families.filter(font => googleFontList.includes(font));
-      // setLoading(true);
       loadFontsInBatches(families);
     }
   }, []);
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: loading ? /*#__PURE__*/_jsx(Box, {
-      sx: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 99999,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center'
-      },
-      children: /*#__PURE__*/_jsx(CircularProgress, {})
-    }) : null
+  return /*#__PURE__*/_jsx(Backdrop, {
+    open: loader,
+    sx: {
+      color: "#fff",
+      zIndex: theme => theme.zIndex.drawer + 1 // Ensure it's above other UI elements
+    },
+    children: /*#__PURE__*/_jsx(CircularProgress, {
+      color: "inherit"
+    })
   });
 };
 export default FontLoader;

package/dist/Editor/common/Section/index.js

@@ -2,36 +2,34 @@ import React, { useRef, useState } from "react";
 import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import { Box, IconButton, Tooltip } from "@mui/material";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
-import DragHandle from "../DnD/DragHandleButton";
-import { useEditorSelection } from "../../hooks/useMouseMove";
+// import DragHandle from "../DnD/DragHandleButton";
+// import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
 import { SectionSettingIcon } from "../iconListV2";
+
+// const list_types = ["orderedList", "unorderedList"];
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
 const Toolbar = ({
-  fromPopper,
   readOnly,
   showTool,
-  onSettings
+  onSettings,
+  isSectionFullWidth
 }) => {
   return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
     component: "div",
     className: `element-toolbar no-border-button hr section-tw sectionIcon`,
     contentEditable: false,
-    style: fromPopper ? {
-      position: "unset",
-      marginLeft: "28px",
-      paddingTop: "4px",
-      marginRight: "10px",
-      height: "100%"
-    } : {
-      left: "-28px",
-      top: "1px"
+    sx: {
+      left: isSectionFullWidth ? "0px" : "-28px",
+      top: isSectionFullWidth ? "-28px" : "1px",
+      "&:hover": {
+        backgroundColor: "rgba(0,0,0,0.5)"
+      }
     },
     children: /*#__PURE__*/_jsx(Tooltip, {
       title: "Section Settings",
@@ -42,7 +40,6 @@ const Toolbar = ({
     })
   }) : null;
 };
-const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const themeReact = useTheme();
   const theme = props?.theme;
@@ -56,7 +53,8 @@ const Section = props => {
     readOnly
   } = customProps;
   const editor = useSlateStatic();
-  const [showTool] = useEditorSelection(editor);
+  // const [isHovering, setIsHovering] = useState(false);
+  const [size] = useWindowResize();
   const [openSetttings, setOpenSettings] = useState(false);
   const {
     sectionBgColor,
@@ -73,41 +71,11 @@ const Section = props => {
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
-  const popperEl = useRef(null);
-  const [size] = useWindowResize();
+  // const popperEl = useRef(null);
+  // const [showTool] = useEditorSelection(editor);
   const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
-  const [isHovering, setIsHovering] = useState(false);
-  const onMouseEnter = () => {
-    setIsHovering(true);
-  };
-  const onMouseLeave = () => {
-    setIsHovering(false);
-  };
-  const onSettings = () => {
-    setOpenSettings(true);
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    Transforms.setNodes(editor, {
-      ...updateData
-    }, {
-      at: path
-    });
-    onClose();
-  };
-  const onClose = () => {
-    setOpenSettings(false);
-  };
-  const onDelete = () => {
-    Transforms.removeNodes(editor, {
-      at: path
-    });
-  };
-  const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
-  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
+  const isFreeGrid = element?.children[0]?.type === "freegrid";
+  const needHover = false;
   let tempProps = {};
   if (element?.type === "temp") {
     tempProps = {
@@ -131,6 +99,38 @@ const Section = props => {
       ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
     }
   }, themeReact);
+
+  // const onMouseEnter = () => {
+  //   setIsHovering(true);
+  // };
+
+  // const onMouseLeave = () => {
+  //   setIsHovering(false);
+  // };
+
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  const onDelete = () => {
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
   return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover} is-${element?.type}`,
@@ -145,9 +145,10 @@ const Section = props => {
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
-    },
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
+    }
+    // onMouseEnter={onMouseEnter}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -155,41 +156,11 @@ const Section = props => {
         ...edInnerSp
       },
       ref: anchorEl,
-      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering && isSectionFullWidth,
-        anchorEl: anchorEl?.current,
-        placement: "top-start",
-        sx: {
-          zIndex: 9999
-        },
-        disablePortal: true,
-        ref: popperEl,
-        className: "sectionPopper",
-        children: /*#__PURE__*/_jsxs(Box, {
-          sx: {
-            bgcolor: "background.paper",
-            height: "30px",
-            position: "relative",
-            background: theme?.palette?.type === "dark" ? theme?.palette?.editor?.miniToolBarBackground : "#F6F6F6"
-          },
-          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-            ...props,
-            fromPopper: true
-          }) : null, /*#__PURE__*/_jsx(Toolbar, {
-            fromPopper: true,
-            readOnly: readOnly,
-            showTool: showTool,
-            onSettings: onSettings
-          })]
-        })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-          ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {
-          readOnly: readOnly,
-          showTool: showTool,
-          onSettings: onSettings
-        })]
+      children: [/*#__PURE__*/_jsx(Toolbar, {
+        isSectionFullWidth: isSectionFullWidth,
+        readOnly: readOnly,
+        showTool: false,
+        onSettings: onSettings
       }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {

package/dist/Editor/hooks/useEditorScroll.js

@@ -5,7 +5,7 @@ function useEditorScroll(editorWrapper = {
   useEffect(() => {
     const handleScroll = () => {
       if (editorWrapper.current) {
-        callback();
+        callback("scroll");
       }
     };
     const currentEditorWrapper = editorWrapper.current;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -620,6 +620,11 @@ export const getBlock = props => {
         children: children
       });
     default:
+      // return (
+      //   <span {...attributes} {...element.attr}>
+      //     {children}
+      //   </span>
+      // );
       return /*#__PURE__*/_jsx(SimpleText, {
         ...props,
         isEmpty: isEmpty

package/package.json

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