@flozy/editor 4.3.0 → 4.3.1

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/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/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.3.0",
+  "version": "4.3.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"