@flozy/editor 4.2.9 → 4.3.1

package/dist/Editor/CommonEditor.js

@@ -544,7 +544,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     customProps: customProps,
                     theme: theme
                   }) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
-                    otherProps: otherProps || {}
+                    otherProps: otherProps || {},
+                    editorWrapper: editorWrapper
                   }), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",
@@ -562,7 +563,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                 onDrawerOpen: onDrawerOpen,
                 theme: theme,
                 setIsTextSelected: setIsTextSelected,
-                customProps: customProps
+                customProps: customProps,
+                editorWrapper: editorWrapper
               }) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
                 breakpoint: breakpoint,
                 onChange: b => onSwitchBreakpoint(b)

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -9,6 +9,7 @@ import { MODES } from "./helper";
 import { getSelectedText } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
+import useEditorScroll from "../../hooks/useEditorScroll";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getInputWidth = selectedElement => {
@@ -154,7 +155,10 @@ const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
   }
 };
 function PopoverAIInput({
-  otherProps
+  otherProps,
+  editorWrapper = {
+    current: null
+  }
 }) {
   const {
     services
@@ -171,6 +175,10 @@ function PopoverAIInput({
   const [selectedOption, setSelectedOption] = useState();
   const classes = Styles();
   const editor = useSlate();
+  const updateAnchor = () => {
+    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
+  };
+  useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);
     setOpenAI("");
@@ -181,9 +189,7 @@ function PopoverAIInput({
     ReactEditor.focus(editor);
     Transforms.deselect(editor);
   };
-  useEffect(() => {
-    updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
-  }, [openAI, editor.selection]);
+  useEffect(updateAnchor, [openAI, editor.selection]);
   useEffect(() => {
     if (openAI) {
       scrollToAIInput(editor);

package/dist/Editor/Elements/AI/Styles.js

@@ -1,6 +1,7 @@
 const Styles = theme => ({
   aiContainer: {
     background: "#FCFAFF",
+    background: theme?.palette?.editor?.aiInputBackground,
     border: "1px solid #8360FD",
     borderRadius: "6px",
     boxShadow: "0px 4px 10px 0px #00000029"
@@ -12,7 +13,7 @@ const Styles = theme => ({
     padding: "0px 4px 0px 12px",
     minHeight: "36px",
     position: "relative",
-    background: "#FCFAFF",
+    background: theme?.palette?.editor?.aiInputBackground,
     borderRadius: "5px",
     "& .icon-container": {
       display: "flex",
@@ -29,7 +30,7 @@ const Styles = theme => ({
       background: "transparent",
       resize: "none",
       alignSelf: "center",
-      color: "#000",
+      color: theme?.palette?.editor?.textColor,
       fontSize: "14px !important",
       fontFamily: '"Inter", sans-serif',
       "&:focus-visible": {
@@ -81,6 +82,7 @@ const Styles = theme => ({
   },
   sendBtnDisabled: {
     background: "#C0C9D6",
+    opacity: "0.5",
     "&:hover": {
       background: "#C0C9D6"
     }

package/dist/Editor/Elements/AI/VoiceToText/index.js

@@ -4,6 +4,7 @@ import STTStyles from "./style";
 import { Grid, IconButton, Box } from "@mui/material";
 import { AudioWave } from "./AudioWave";
 import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function STT(props) {
@@ -15,7 +16,10 @@ function STT(props) {
   const {
     services
   } = otherProps;
-  const classes = STTStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = STTStyles(theme);
   const [mediaRecorder, setMediaRecorder] = useState(null);
   const [audioChunks, setAudioChunks] = useState([]);
   const [chunkIndex, setChunkIndex] = useState(0);
@@ -127,6 +131,7 @@ function STT(props) {
       children: [/*#__PURE__*/_jsx(Box, {
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: closeRecording,
+          className: "ai-icon",
           children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
         })
       }), /*#__PURE__*/_jsx(Box, {
@@ -137,6 +142,7 @@ function STT(props) {
       }), /*#__PURE__*/_jsx(Box, {
         children: showPause ? /*#__PURE__*/_jsx(IconButton, {
           onClick: stopRecording,
+          className: "ai-icon",
           children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
         }) : /*#__PURE__*/_jsx(IconButton, {
           onClick: sendToInfiniti,

package/dist/Editor/Elements/AI/VoiceToText/style.js

@@ -1,4 +1,4 @@
-const styles = () => ({
+const styles = theme => ({
   SttContainer: {
     display: "flex",
     width: "100%",
@@ -12,17 +12,25 @@ const styles = () => ({
       borderColor: "#2563EB"
     },
     "&& .MuiOutlinedInput-root": {
-      background: "rgba(252, 250, 255, 1)"
+      background: theme?.palette?.editor?.aiInputBackground
     }
   },
   AudioVizualizerContainer: {
     width: "100%",
     display: "flex",
-    background: "rgba(252, 250, 255, 1)",
+    background: theme?.palette?.editor?.aiInputBackground,
     borderRadius: "8px",
     border: "1px solid #2563EB",
     alignItems: "center",
-    flexWrap: "wrap"
+    flexWrap: "wrap",
+    "& .ai-icon": {
+      "& circle": {
+        fill: theme?.palette?.editor?.aiInputBackground
+      },
+      "& rect": {
+        fill: theme?.palette?.editor?.aiInputBackground
+      }
+    }
   },
   AudioVizualizerContent: {
     display: "flex",

package/dist/Editor/Elements/Embed/Image.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, memo } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
@@ -62,9 +62,9 @@ const ImageContent = props => {
     setOpenSettings,
     handleImageClick,
     onTouchEnd,
-    path
+    path,
+    theme
   } = props;
-  const theme = useTheme();
   return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
@@ -97,12 +97,13 @@ const ImageContent = props => {
     draggable: false
   });
 };
-const Image = ({
-  attributes,
-  element,
-  children,
-  customProps
-}) => {
+const Image = props => {
+  const {
+    attributes,
+    element,
+    children,
+    customProps
+  } = props;
   const theme = useTheme();
   const {
     url,
@@ -281,7 +282,8 @@ const Image = ({
         setOpenSettings: setOpenSettings,
         handleImageClick: handleImageClick,
         onTouchEnd: onTouchEnd,
-        path: path
+        path: path,
+        theme: theme
       }), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
         component: "div",
         className: "image-frame",

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -388,7 +388,10 @@ const FreeGrid = props => {
   }, theme);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
-    className: `freegrid-section breakpoint-${breakpoint}`,
+    className: `
+        freegrid-section breakpoint-${breakpoint} 
+        freegrid-section_${path.join("_")}
+      `,
     editor: editor,
     path: path,
     disableDragging: true,

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -253,20 +253,20 @@ const FreeGridItem = props => {
       component: "div",
       ...attributes,
       className: `fgi_type_${childType}`,
-      children: [children, /*#__PURE__*/_jsx(Workflow, {
+      children: [children, popup === "workflow" ? /*#__PURE__*/_jsx(Workflow, {
         openWorkflow: popup === "workflow",
         element: element,
         customWorkflowElement: element?.children?.[0] || null,
         closeWorkflow: onClose,
         onSave: onWorkflowSave
-      }), /*#__PURE__*/_jsx(EmbedScriptPopup, {
+      }) : null, popup === "embedScript" ? /*#__PURE__*/_jsx(EmbedScriptPopup, {
         open: popup === "embedScript",
         customProps: customProps,
         editor: editor,
         onClose: onClose,
         updatePath: [...path, 0],
         parentPath: [...path]
-      })]
+      }) : null]
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -11,15 +11,20 @@ const useFreeGridStyles = ({
       padding: "0px",
       height: "100%",
       position: "static",
-      overflow: "hidden",
+      // for drag item visibility beyond section
+      // overflow: "hidden",
       "& .freegrid-item, & .freegrid-box-item": {
         gridArea: "var(--gridArea)",
         left: "var(--left)",
         marginTop: "var(--marginTop)",
         marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
-        zIndex: "var(--zIndex) !important",
-        "&.active-drag": {},
-        "&.inactive-drag": {},
+        "&.active-drag": {
+          pointerEvents: "none",
+          zIndex: "9999 !important"
+        },
+        "&.inactive-drag": {
+          zIndex: "var(--zIndex) !important"
+        },
         "& .editor-blocker": {
           position: "absolute",
           left: 0,

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -26,7 +26,13 @@ const VariableButton = props => {
     onChange: updateVariable,
     IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     MenuProps: {
-      sx: classes.variableMenuItem
+      sx: classes.variableMenuItem,
+      PaperProps: {
+        style: {
+          maxHeight: 300,
+          overflowY: "auto"
+        }
+      }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {
       value: "",

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

@@ -8,12 +8,14 @@ import useWindowResize from "../../hooks/useWindowResize";
 import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
+import useEditorScroll from "../../hooks/useEditorScroll";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
     theme,
     setIsTextSelected,
-    customProps
+    customProps,
+    editorWrapper
   } = props;
   const classes = usePopupStyles(theme);
   const {
@@ -33,6 +35,27 @@ const PopupTool = props => {
   const {
     selectedElement
   } = useEditorContext();
+  const updateAnchorEl = () => {
+    try {
+      const domSelection = window.getSelection();
+      const domRange = domSelection?.getRangeAt(0);
+      const {
+        startOffset,
+        endOffset
+      } = domRange || {};
+      if (startOffset !== endOffset) {
+        const rect = domRange.getBoundingClientRect();
+        setAnchorEl({
+          clientWidth: rect.width,
+          clientHeight: rect.height,
+          getBoundingClientRect: () => rect
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  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
 
@@ -57,36 +80,16 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
-  useEffect(() => {
-    if (selectedElement?.enable === 1) {
-      setAnchorEl(null);
-    }
-  }, [selection, selectedElement?.path, selectedElement?.enable]);
-  const updateAnchorEl = () => {
-    try {
-      const domSelection = window.getSelection();
-      const domRange = domSelection?.getRangeAt(0);
-      const {
-        startOffset,
-        endOffset
-      } = domRange || {};
-      if (startOffset !== endOffset) {
-        const rect = domRange.getBoundingClientRect();
-        setAnchorEl({
-          clientWidth: rect.width,
-          clientHeight: rect.height,
-          getBoundingClientRect: () => rect
-        });
-      }
-    } catch (err) {
-      console.log(err);
-    }
-  };
   const handleClose = () => {
     setAnchorEl(null);
     setOpen(false);
     setPopupType("");
   };
+  useEffect(() => {
+    if (selectedElement?.enable === 1) {
+      setAnchorEl(null);
+    }
+  }, [selection, selectedElement?.path, selectedElement?.enable]);
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)

package/dist/Editor/assets/svg/AIIcons.js

@@ -503,6 +503,10 @@ export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
   viewBox: "0 0 30 30",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
+  style: {
+    border: "1.3px solid #2563EB",
+    borderRadius: "50%"
+  },
   children: [/*#__PURE__*/_jsx("rect", {
     width: "30",
     height: "30",

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

@@ -9,14 +9,11 @@ const DragInfo = props => {
     dragging,
     anchorEl
   } = props;
-  const {
-    position
-  } = dragging;
   const {
     diffX
-  } = position || {};
+  } = dragging || {};
   const classes = useDragInfoStyle();
-  const x = parseInt(position?.x - window.innerWidth / 2 + 490 - diffX);
+  const x = parseInt(dragging?.x - window.innerWidth / 2 + 490 - diffX);
   return open ? /*#__PURE__*/_jsx(Popper, {
     open: open,
     anchorEl: anchorEl,
@@ -24,7 +21,7 @@ const DragInfo = props => {
     sx: classes.root,
     children: /*#__PURE__*/_jsxs(Paper, {
       className: "papper-root",
-      children: ["x: ", x, ", y: ", position?.y]
+      children: ["x: ", x, ", y: ", dragging?.y]
     })
   }) : null;
 };

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

@@ -16,7 +16,8 @@ const DragOver = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const isSectionHover = status && type === "parent";
-  const isContainerHover = hover_on.has(path) && type === "parent-container";
+  const isContainerHover = hover_on === path && type === "parent-container";
+  console.log(isSectionHover, isContainerHover);
   useEffect(() => {
     if (ref?.current) {
       const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -77,7 +77,12 @@ const reRenderChildNodes = (editor, path) => {
 };
 function isContainerElement(editor, moveTopath, props) {
   try {
-    const dragItemPath = props.path;
+    const {
+      path,
+      parentPath,
+      dragOver
+    } = props;
+    const dragItemPath = path;
     const dragItem = Node.get(editor, dragItemPath);
     let parentNode = null;
     // if freegrid item
@@ -86,16 +91,20 @@ function isContainerElement(editor, moveTopath, props) {
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
     const moveToNode = Node.get(editor, moveTopath);
-    console.log(parentNode, moveToNode);
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
-        return props.calX;
+        // same box
+        if (parentPath === dragOver) {
+          return props.calX;
+        } else {
+          // for different box
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
+        }
       } else {
         return props.calX - moveToNode?.left;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
-        console.log(props.x);
         return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
       } else {
         return props.calX;

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

@@ -2,7 +2,7 @@ import { Transforms, Node } from "slate";
 import { ReactEditor } from "slate-react";
 import { getNearestItem } from "./calculateDropItem";
 const GUIDE_LINE_THRESHOLD = 5;
-const GUIDE_LINE_OVERLAP_THRESHOLD = 50;
+const GUIDE_LINE_OVERLAP_THRESHOLD = 5;
 const handleMoveNode = (editor, path, newPath, {
   isEmpty
 }) => {

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

@@ -7,7 +7,7 @@ import Handles from "./TransformHandles";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import ElementOptions from "./ElementOptions";
 import ElementSettings from "./ElementSettings";
-import { getClosestDraggable, getParentSectionPath, isDragOver } from "./Utils";
+import { getClosestDraggable, getParentSectionPath } from "./Utils";
 import DragInfo from "./DragInfo";
 import GuideLines from "./GuideLines";
 import ShadowElement from "./ShadowElement";
@@ -23,7 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const ITEM_TYPES = ["child", "parent-container"];
 const EDIT_MODES = ["text", "form", "table"];
-let hover_on = new Set();
 const RnD = props => {
   const rndRef = useRef(null);
   const {
@@ -60,7 +59,7 @@ const RnD = props => {
     isSelectedElement,
     setSelectedElement,
     dragging,
-    setDragging,
+    updateDragging,
     contextMenu,
     setContextMenu,
     theme
@@ -80,15 +79,19 @@ const RnD = props => {
   const {
     active,
     id,
-    lines,
-    position,
-    dragOver,
-    parentPath
+    parentPath,
+    dragOver
   } = dragging;
   const dragInfoOpen = id === str_path;
   const dragOverStatus = dragOver === str_path && parentPath !== str_path;
   const [absPosition, setAbsPosition] = useState({});
   const openContextMenu = contextMenu?.path === str_path;
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 0
+  });
+  const pathIsDragging = dragOver === str_path && dragging?.isDragging;
+  const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -99,25 +102,6 @@ const RnD = props => {
       }
     }
   }, [enable]);
-  useEffect(() => {
-    if (position?.x !== undefined && position?.y !== undefined && active && (type === "parent" || type === "parent-container")) {
-      const dragOverSt = isDragOver(rndRef?.current?.getBoundingClientRect(), {
-        x: position.x,
-        y: position.y
-      });
-      if (dragOverSt) {
-        if (!dragInfoOpen) {
-          hover_on.add(str_path);
-        }
-        setDragging({
-          ...dragging,
-          dragOver: str_path
-        });
-      } else {
-        hover_on.delete(str_path);
-      }
-    }
-  }, [active, position?.x, position?.y]);
   const getCurrentEle = () => {
     return positionRef.current?.resizableElement?.current;
   };
@@ -280,11 +264,12 @@ const RnD = props => {
     updatePosition();
     if (updated_at) {
       // disable dragging
-      setDragging({
+      updateDragging({
         active: false,
         id: null,
-        isDragging: false
-      });
+        isDragging: false,
+        dragOver: null
+      }, null);
     }
   };
   const onDragStart = e => {
@@ -297,16 +282,19 @@ const RnD = props => {
         height
       } = e?.target?.getBoundingClientRect();
       const ref = positionRef.current?.resizableElement?.current;
-      setDragging({
+      const updatedPosition = {
+        x: e.clientX,
+        y: e.clientY,
+        strXY: `${e.clientX},${e.clientY}`,
+        diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
+        diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
+      };
+      updateDragging({
         ...dragging,
         active: true,
         id: str_path,
         position: {
-          x: e.clientX,
-          y: e.clientY,
-          strXY: `${e.clientX},${e.clientY}`,
-          diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
-          diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
+          ...updatedPosition
         },
         dimension: {
           width,
@@ -317,18 +305,21 @@ const RnD = props => {
           ref
         }, ".freegrid-container-parent")
       });
+      setPosition({
+        ...updatedPosition
+      });
     }
   };
   const onDrag = (e, d) => {
     e.preventDefault();
-    const lines = getClosestDraggable(e.clientX, e.clientY, ".freegrid-item.path-3.inactive-drag:not(.exclude-virtual)", ".freegrid-item.path-3.active-drag:not(.exclude-virtual)");
+    const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
+    console.log(lines);
     setAbsPosition({
       ...absPosition,
       "--zIndex": 2000
     });
-    setDragging({
+    updateDragging({
       isDragging: true,
-      ...dragging,
       position: {
         ...dragging.position,
         x: e.clientX,
@@ -336,34 +327,28 @@ const RnD = props => {
       },
       lines: lines
     });
-  };
-  const getContainerPath = () => {
-    let maxLengthString = "";
-    let maxLength = 0;
-    // Iterate through the set
-    hover_on.forEach(str => {
-      if (str.length > maxLength) {
-        maxLength = str.length;
-        maxLengthString = str;
-      }
+    setPosition({
+      ...dragging.position,
+      x: e.clientX,
+      y: e.clientY,
+      lines: lines
     });
-    return maxLengthString;
   };
   const onDragStop = (e, d) => {
     e.preventDefault();
     e.stopPropagation();
-    if (dragging?.isDragging && position.strXY) {
+    if (dragging?.isDragging && dragging?.position?.strXY) {
       d.x = e.x;
       d.y = e.y;
       d.offsetX = e.offsetX;
       d.offsetY = e.offsetY;
-      d.dragOver = getContainerPath();
+      d.dragOver = dragOver;
       d.parentPath = parentPath;
       d.diffX = position?.diffX;
       d.diffY = position?.diffY;
       d.calX = itemData?.left + d.lastX;
       // avoid x, y value replace issue
-      const [x, y] = position.strXY.split(",");
+      const [x, y] = dragging?.position?.strXY.split(",");
       d.startPosition = {
         ...position,
         x: parseInt(x),
@@ -379,7 +364,9 @@ const RnD = props => {
         ...absPosition
       };
       delete ud["--zIndex"];
-      hover_on.clear();
+      updateDragging({
+        dragOver: ""
+      }, null);
       setAbsPosition({
         ...ud
       });
@@ -391,17 +378,6 @@ const RnD = props => {
       width: delta?.width + d.width,
       height: delta?.height + d.height
     };
-    // calculate the text height
-    // const nodeList =
-    //   positionRef?.current?.resizableElement?.current?.childNodes || [];
-    // const textElement = Array.from(nodeList).filter((node) =>
-    //   node.classList.contains("fgi_type_text")
-    // );
-    // if (textElement[0] && type === "child") {
-    //   const textRect = textElement[0]?.getBoundingClientRect();
-    //   updatedSize.height = textRect.height;
-    //   positionRef.current.updateSize({ ...updatedSize });
-    // }
     onChange({
       ...updatedSize
     });
@@ -439,6 +415,14 @@ const RnD = props => {
       });
     }
   };
+  const onMouseOver = e => {
+    e.stopPropagation();
+    if (type !== "child") {
+      updateDragging({
+        dragOver: str_path
+      }, str_path);
+    }
+  };
   const getEventProps = () => {
     if (!readOnly) {
       return {
@@ -450,7 +434,8 @@ const RnD = props => {
         onDragStop: onDragStop,
         onResizeStop: onResizeStop,
         onClick: onClick,
-        onContextMenu: handleContextMenu
+        onContextMenu: handleContextMenu,
+        onMouseOver: onMouseOver
       };
     } else {
       return {};
@@ -473,7 +458,7 @@ const RnD = props => {
         caretColor: enable === 2 ? "auto" : "transparent",
         userSelect: enable === 2 || readOnly ? "auto" : "none",
         ...style,
-        zIndex: enable === 1 ? 1 : "inherit",
+        // zIndex: enable === 1 ? 1 : "inherit",
         left: "var(--left)",
         ...absPosition
       },
@@ -507,14 +492,14 @@ const RnD = props => {
         className: "editor-blocker",
         "data-path": path,
         contentEditable: false
-      }) : null, /*#__PURE__*/_jsx(DragOver, {
+      }) : null, pathIsDragging ? /*#__PURE__*/_jsx(DragOver, {
         status: dragOverStatus,
-        hover_on: hover_on,
+        hover_on: dragOver,
         path: str_path,
         parentPath: parentPath,
         type: type,
         childType: childType
-      })]
+      }) : null]
     }, eId), !active && rndRef?.current && open ? /*#__PURE__*/_jsx(ElementOptions, {
       id: `opt_ref_${str_path}`,
       open: open,
@@ -539,12 +524,12 @@ const RnD = props => {
       ...settingsProps,
       elementProps: elementProps,
       theme: theme
-    }), /*#__PURE__*/_jsx(DragInfo, {
+    }), dragInfoOpen ? /*#__PURE__*/_jsx(DragInfo, {
       anchorEl: rndRef?.current,
       open: dragInfoOpen,
-      dragging: dragging
-    }), /*#__PURE__*/_jsx(GuideLines, {
-      lines: lines
+      dragging: position
+    }) : null, /*#__PURE__*/_jsx(GuideLines, {
+      lines: position?.lines || []
     }), !readOnly && type === "parent" ? /*#__PURE__*/_jsx(BoundaryLine, {}) : null, /*#__PURE__*/_jsx(ShadowElement, {
       type: type,
       enable: enable,

package/dist/Editor/hooks/useEditorScroll.js

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+function useEditorScroll(editorWrapper = {
+  current: null
+}, callback) {
+  useEffect(() => {
+    const handleScroll = () => {
+      if (editorWrapper.current) {
+        callback();
+      }
+    };
+    const currentEditorWrapper = editorWrapper.current;
+    if (currentEditorWrapper) {
+      currentEditorWrapper.addEventListener("scroll", handleScroll);
+    }
+
+    // Cleanup the event listener on component unmount
+    return () => {
+      if (currentEditorWrapper) {
+        currentEditorWrapper.removeEventListener("scroll", handleScroll);
+      }
+    };
+  }, [editorWrapper.current]);
+}
+export default useEditorScroll;

package/dist/Editor/hooks/useMouseMove.js

@@ -27,7 +27,7 @@ export const EditorProvider = ({
   const [selectedPath, setSelectedPath] = useState(null);
   const [selectedElement, setSelectedElement] = useState({});
   const [dragging, setDragging] = useState({});
-  const [event] = useMouseMove(dragging);
+  const [event] = useMouseMove(window.dragging);
   const path = event?.target?.getAttribute("data-path");
   const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
   const [openAI, setOpenAI] = useState("");
@@ -65,28 +65,42 @@ export const EditorProvider = ({
       };
     }
   }, [path, editor?.selection]);
+  const updateDragging = d => {
+    if (d) {
+      // console.log("Updating dragOver", d);
+      setDragging(prevState => {
+        return {
+          ...prevState,
+          ...d
+        };
+      });
+    }
+  };
+  const otherValues = useMemo(() => ({
+    ...(value || {}),
+    onDrop: onDrop,
+    drop,
+    theme: theme,
+    selectedPath: selectedPath,
+    setSelectedPath: setSelectedPath,
+    selectedElement: selectedElement,
+    setSelectedElement: setSelectedElement,
+    isSelectedElement: isSelectedElement,
+    dragging: {
+      ...dragging
+    } || {},
+    popupType,
+    setPopupType,
+    setContextMenu,
+    contextMenu,
+    openAI,
+    setOpenAI,
+    updateDragging,
+    fontFamilies,
+    setFontFamilies
+  }), [path, editor?.selection, selectedPath, selectedElement, dragging.active, dragging.isDragging, dragging.dragOver, contextMenu, openAI, popupType, drop, fontFamilies]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
-    value: {
-      ...(value || {}),
-      onDrop: onDrop,
-      drop,
-      theme: theme,
-      selectedPath: selectedPath,
-      setSelectedPath: setSelectedPath,
-      selectedElement: selectedElement,
-      setSelectedElement: setSelectedElement,
-      isSelectedElement: isSelectedElement,
-      setDragging: setDragging,
-      dragging: dragging,
-      popupType,
-      setPopupType,
-      setContextMenu,
-      contextMenu,
-      openAI,
-      setOpenAI,
-      fontFamilies,
-      setFontFamilies
-    },
+    value: otherValues,
     children: children
   });
 };

package/package.json

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