@flozy/editor 3.8.7 → 3.8.9

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

@@ -0,0 +1,503 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Box } from "@mui/material";
+import { Rnd } from "react-rnd";
+import Handles from "./TransformHandles";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import ElementOptions from "./ElementOptions";
+import ElementSettings from "./ElementSettings";
+import { getClosestDraggable, getParentSectionPath, isDragOver } from "./Utils";
+import DragInfo from "./DragInfo";
+import GuideLines from "./GuideLines";
+import ShadowElement from "./ShadowElement";
+import BoundaryLine from "./GuideLines/BoundaryLine";
+import DragOver from "./DragOver";
+import ContextMenu from "./ContextMenu";
+import VirtualElement from "./VirtualElement";
+import { ItemTypes } from "./ElementSettings/settingsConstants";
+import { focusSelection, clearSelection } from "../../helper";
+import { selectText } from "../../utils/helper";
+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 RnD = props => {
+  const rndRef = useRef(null);
+  const {
+    id: eId,
+    className,
+    path,
+    children,
+    style,
+    defaultStyle,
+    disableDragging,
+    enableResizing,
+    actions,
+    actionsMap = {},
+    type = "child",
+    optionsProps = {},
+    settingsProps = {},
+    onChange = () => {},
+    delta = {
+      width: 0,
+      height: 0
+    },
+    handleDragEvent = () => {},
+    handleResizeEvent = () => {},
+    handleActionClick = () => {},
+    readOnly,
+    childType = "",
+    updated_at = null,
+    editor,
+    breakpoint = "",
+    handleContextMenuClick = () => {}
+  } = props;
+  const {
+    isSelectedElement,
+    setSelectedElement,
+    dragging,
+    setDragging,
+    contextMenu,
+    setContextMenu
+  } = useEditorContext();
+  const str_path = path.join("|");
+  const selectedElementProps = isSelectedElement(str_path, type);
+  const {
+    enable,
+    cursor,
+    path: sp,
+    selectedAction
+  } = selectedElementProps;
+  const open = Boolean(enable);
+  const currentAction = str_path === sp ? selectedAction : null;
+  const positionRef = useRef();
+  const {
+    active,
+    id,
+    lines,
+    position,
+    dragOver,
+    parentPath
+  } = dragging;
+  const dragInfoOpen = id === str_path;
+  const dragOverStatus = dragOver === str_path && parentPath !== str_path;
+  const [absPosition, setAbsPosition] = useState({});
+  const openContextMenu = contextMenu?.path === str_path;
+  useEffect(() => {
+    if (type === "child") {
+      if (enable === 1) {
+        updatePosition();
+      } else {
+        rndRef.current.posUpdated = false;
+        setAbsPosition({});
+      }
+    }
+  }, [enable]);
+  useEffect(() => {
+    if (position?.x !== undefined && position?.y !== undefined && active && type === "parent") {
+      const dragOver = isDragOver(rndRef?.current?.getBoundingClientRect(), {
+        x: position.x,
+        y: position.y
+      });
+      if (dragOver) {
+        setDragging({
+          ...dragging,
+          dragOver: str_path
+        });
+      }
+    }
+  }, [active, position?.x, position?.y]);
+  const getCurrentEle = () => {
+    return positionRef.current?.resizableElement?.current;
+  };
+  const updatePosition = () => {
+    if (rndRef?.current && !rndRef.current.posUpdated) {
+      const currentEle = getCurrentEle();
+      const parentDom = currentEle?.closest(".freegrid-container");
+      const parentRect = parentDom?.getBoundingClientRect();
+      const {
+        left,
+        top,
+        width,
+        height
+      } = currentEle.getBoundingClientRect();
+      positionRef.current.updatePosition({
+        x: 0,
+        y: 0
+      });
+      positionRef.current.updateSize({
+        width: width,
+        height: height
+      });
+      rndRef.current.posUpdated = true;
+      setAbsPosition({
+        position: "absolute",
+        left: left - 16,
+        top: Math.abs(parentRect?.top - top),
+        marginTop: 0,
+        marginLeft: 0
+      });
+    }
+  };
+  const onClick = e => {
+    if (readOnly) {
+      return;
+    }
+
+    // for context menu
+    setContextMenu({
+      path: null
+    });
+    if (e?.preventDefault && e?.stopPropagation && !enable) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    switch (e.detail) {
+      case 1:
+        if (!enable) {
+          setSelectedElement({
+            path: str_path,
+            enable: 1,
+            cursor: "move",
+            anchorEl: rndRef?.current
+          });
+        }
+        break;
+      case 2:
+        focusSelection(editor, {
+          path
+        });
+        setSelectedElement({
+          path: str_path,
+          enable: 2,
+          cursor: "auto",
+          anchorEl: rndRef?.current
+        });
+        // for default selection
+        if (childType === "text" && type === "child") {
+          setTimeout(() => {
+            selectText(editor, {
+              path: [...path, 0],
+              cursorOnly: false
+            });
+          }, 10);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  const handleAction = type => {
+    switch (type) {
+      case 1:
+        setSelectedElement({
+          path: str_path,
+          enable: 1,
+          cursor: disableDragging ? "auto" : "move"
+        });
+        break;
+      case 2:
+        onClick({
+          detail: type
+        });
+        break;
+      case 3:
+        clearSelection(editor);
+        setSelectedElement({});
+        break;
+      case "settings":
+        setSelectedElement({
+          ...selectedElementProps,
+          selectedAction: type,
+          selectedActionPath: path
+        });
+        break;
+      case "link":
+        setSelectedElement({
+          ...selectedElementProps,
+          selectedAction: type,
+          selectedActionPath: path
+        });
+        break;
+      default:
+        handleActionClick(type);
+        return;
+    }
+  };
+  const onAfterDrop = updated_data => {
+    const {
+      updated_at
+    } = updated_data || {};
+    setSelectedElement({});
+    // to maitain absolute
+    rndRef.current.posUpdated = false;
+    // need to retain drag option if section changes
+    setAbsPosition({});
+    updatePosition();
+    if (updated_at) {
+      // disable dragging
+      setDragging({
+        active: false,
+        id: null,
+        isDragging: false
+      });
+    }
+  };
+  const onDragStart = e => {
+    e.preventDefault();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = e?.target?.getBoundingClientRect();
+    const ref = positionRef.current?.resizableElement?.current;
+    setDragging({
+      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)))
+      },
+      dimension: {
+        width,
+        height
+      },
+      isDragging: true,
+      parentPath: getParentSectionPath({
+        ref
+      }, ".freegrid-container")
+    });
+  };
+  const onDrag = (e, d) => {
+    e.preventDefault();
+    const lines = getClosestDraggable(e.clientX, e.clientY, ".freegrid-item.inactive-drag:not(.exclude-virtual)", ".freegrid-item.active-drag:not(.exclude-virtual)");
+    setAbsPosition({
+      ...absPosition,
+      "--zIndex": 2000
+    });
+    setDragging({
+      isDragging: true,
+      ...dragging,
+      position: {
+        ...dragging.position,
+        x: e.clientX,
+        y: e.clientY
+      },
+      lines: lines
+    });
+  };
+  const onDragStop = (e, d) => {
+    e.preventDefault();
+    e.stopPropagation();
+    d.x = e.x;
+    d.y = e.y;
+    d.offsetX = e.offsetX;
+    d.offsetY = e.offsetY;
+    d.dragOver = dragOver;
+    d.parentPath = parentPath;
+    d.diffX = position?.diffX;
+    d.diffY = position?.diffY;
+    // avoid x, y value replace issue
+    const [x, y] = position.strXY.split(",");
+    d.startPosition = {
+      ...position,
+      x: parseInt(x),
+      y: parseInt(y)
+    };
+    d.endPosition = {
+      x: e.x,
+      y: e.y
+    };
+    handleDragEvent("stop", d, onAfterDrop);
+    // reset zIndex var on drag stop
+    const ud = {
+      ...absPosition
+    };
+    delete ud["--zIndex"];
+    setAbsPosition({
+      ...ud
+    });
+  };
+  const onResizeStop = (e, direction, ref, d, position) => {
+    e.preventDefault();
+    // calculate the text height
+    const nodeList = positionRef?.current?.resizableElement?.current?.childNodes || [];
+    const textElement = Array.from(nodeList).filter(node => node.classList.contains("fgi_type_text"));
+    const updatedSize = {
+      width: delta?.width + d.width,
+      height: delta?.height + d.height
+    };
+    if (textElement[0] && type === "child") {
+      const textRect = textElement[0]?.getBoundingClientRect();
+      updatedSize.height = textRect.height;
+      positionRef.current.updateSize({
+        ...updatedSize
+      });
+    }
+    onChange({
+      ...updatedSize
+    });
+    handleResizeEvent("stop");
+  };
+  const onCloseSettings = () => {
+    setSelectedElement({
+      ...selectedElementProps,
+      selectedAction: null,
+      selectedActionPath: null
+    });
+  };
+  const handleContextMenu = e => {
+    if (readOnly) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    onClick({
+      detail: 1
+    });
+    setContextMenu({
+      x: e.clientX + 2,
+      y: e.clientY - 6,
+      path: path.join("|")
+    });
+  };
+  const handleClose = d => () => {
+    if (d) {
+      handleContextMenuClick(d);
+    }
+    if (d?.autoClose !== false) {
+      setContextMenu({
+        path: null
+      });
+    }
+  };
+  const getEventProps = () => {
+    if (!readOnly) {
+      return {
+        onResizeStart: e => {
+          e.preventDefault();
+        },
+        onDragStart: onDragStart,
+        onDrag: onDrag,
+        onDragStop: onDragStop,
+        onResizeStop: onResizeStop,
+        onClick: onClick,
+        onContextMenu: handleContextMenu
+      };
+    } else {
+      return {};
+    }
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      component: Rnd,
+      placeholder: ItemTypes[childType] || "Item",
+      id: eId || "",
+      ref: c => {
+        positionRef.current = c;
+      },
+      className: `${className || ""} ${dragInfoOpen ? "active-drag" : "inactive-drag"} enable-${enable} type_${childType} section_type_${type || "parent"}`,
+      "data-path": str_path,
+      style: {
+        position: "relative",
+        outline: enable && type === "child" ? "#2563EB solid 2px" : 0,
+        cursor: cursor,
+        caretColor: enable === 2 ? "auto" : "transparent",
+        userSelect: enable === 2 || readOnly ? "auto" : "none",
+        ...style,
+        zIndex: enable === 1 ? 1 : "inherit",
+        left: "var(--left)",
+        ...absPosition
+      },
+      default: {
+        ...(defaultStyle || {})
+      },
+      dragGrid: [2, 2],
+      resizeHandleComponent: enable ? Handles : {},
+      disableDragging: readOnly || disableDragging || enable !== 1,
+      suppressContentEditableWarning: true,
+      enableResizing: readOnly ? false : enable && !active ? enableResizing : {},
+      ...getEventProps(),
+      children: [/*#__PURE__*/_jsx("span", {
+        id: `opt_ref_${sp}`,
+        style: {
+          position: "absolute",
+          left: "-8px",
+          top: "-30px",
+          width: "calc(100% + 24px)",
+          height: "calc(100% + 42px)",
+          pointerEvents: "none"
+        },
+        ref: rndRef,
+        className: "options-wrapper",
+        contentEditable: false
+      }), children, enable !== 2 && type !== "parent" && !readOnly ? /*#__PURE__*/_jsx("button", {
+        className: "editor-blocker",
+        contentEditable: false
+      }) : null, /*#__PURE__*/_jsx(DragOver, {
+        status: dragOverStatus
+      })]
+    }, eId), !active ? /*#__PURE__*/_jsx(ElementOptions, {
+      open: open,
+      anchorEl: rndRef?.current,
+      enable: enable,
+      handleAction: handleAction,
+      actions: actions,
+      actionsMap: actionsMap,
+      optionsProps: optionsProps,
+      selectedAction: currentAction
+    }) : null, /*#__PURE__*/_jsx(ElementSettings, {
+      open: Boolean(currentAction),
+      currentAction: currentAction,
+      anchorEl: rndRef?.current,
+      placement: "right-start",
+      onClose: onCloseSettings,
+      childType: childType,
+      editor: editor,
+      path: sp,
+      ...settingsProps
+    }), /*#__PURE__*/_jsx(DragInfo, {
+      anchorEl: rndRef?.current,
+      open: dragInfoOpen,
+      dragging: dragging
+    }), /*#__PURE__*/_jsx(GuideLines, {
+      lines: lines
+    }), !readOnly ? /*#__PURE__*/_jsx(BoundaryLine, {}) : null, /*#__PURE__*/_jsx(ShadowElement, {
+      type: type,
+      enable: enable,
+      style: {
+        ...style,
+        ...defaultStyle,
+        left: "var(--left)",
+        marginTop: "var(--marginTop)",
+        gridArea: "var(--gridArea)"
+      }
+    }), /*#__PURE__*/_jsx(ContextMenu, {
+      type: type,
+      open: openContextMenu,
+      contextMenu: contextMenu,
+      handleClose: handleClose
+    }), type === "parent" && breakpoint === "lg" ? /*#__PURE__*/_jsx(VirtualElement, {
+      parentEle: positionRef?.current?.resizableElement?.current,
+      updated_at: updated_at,
+      path: str_path,
+      editor: editor
+    }) : null]
+  });
+};
+RnD.defaultProps = {
+  disableDragging: false,
+  enableResizing: {
+    bottom: true,
+    bottomLeft: true,
+    bottomRight: true,
+    left: true,
+    right: true,
+    top: true,
+    topLeft: true,
+    topRight: true
+  }
+};
+export default RnD;

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

@@ -0,0 +1,4 @@
+const useRnDStyles = () => ({
+  root: {}
+});
+export default useRnDStyles;

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

@@ -1,20 +1,20 @@
-import React, { useRef, useState } from "react";
+import React, { 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 TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
-import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
-import useWindowResize from "../../hooks/useWindowResize";
 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 list_types = ["orderedList", "unorderedList"];
 const Section = props => {
-  const classes = SectionStyle();
+  const theme = useTheme();
+  const classes = SectionStyle(theme);
   const {
     children,
     element,
@@ -40,33 +40,14 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
-  const anchorEl = useRef(null);
-  const popperEl = useRef(null);
-  const [size] = useWindowResize();
-  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 Toolbar = ({
-    fromPopper
-  }) => {
+  const Toolbar = () => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: fromPopper ? {
-        position: "unset",
-        marginLeft: "28px",
-        paddingTop: "4px",
-        marginRight: "10px",
-        height: "100%"
-      } : {
+      style: {
         left: "-28px",
         top: "3px"
       },
@@ -99,67 +80,45 @@ const Section = props => {
       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)) ? "needHover" : "";
   const sectionBgImage = sectionBackgroundImage && sectionBackgroundImage !== "none" ? {
     backgroundImage: `url(${sectionBackgroundImage})`
   } : {};
-  return path.length === 1 ? /*#__PURE__*/_jsxs(Box, {
+  const edSectionSp = groupByBreakpoint({
+    padding: {
+      ...getTRBLBreakPoints(sectionBannerSpacing)
+    },
+    borderRadius: {
+      ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
+    }
+  }, theme);
+  const edInnerSp = groupByBreakpoint({
+    width: {
+      ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
+    }
+  }, theme);
+  return path.length === 1 && !isFreeGrid ? /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `ed-section-wrapper ${readOnly ? "" : "hselect"} ${needHover}`,
     sx: {
       ...classes.root,
       background: sectionBgColor,
       ...sectionBgImage,
-      padding: {
-        ...getTRBLBreakPoints(sectionBannerSpacing)
-      },
-      borderRadius: {
-        ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
-      },
+      ...edSectionSp,
       flexDirection: flexDirection || "column",
       alignItems: horizantal,
       justifyContent: vertical
     },
-    onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        width: {
-          ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
-        }
+        ...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",
-            background: "#F6F6F6",
-            height: "30px",
-            position: "relative"
-          },
-          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-            ...props,
-            fromPopper: true
-          }) : null, /*#__PURE__*/_jsx(Toolbar, {
-            fromPopper: true
-          })]
-        })
-      }) : /*#__PURE__*/_jsxs(_Fragment, {
-        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-          ...props
-        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
-      }), children]
+      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+        ...props
+      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -1,4 +1,4 @@
-const SectionStyle = () => ({
+const SectionStyle = theme => ({
   root: {
     "&:hover": {
       "& .dh-para": {
@@ -6,9 +6,6 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
-      },
-      "& .sectionPopper": {
-        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -16,14 +13,6 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
-    "& .sectionPopper": {
-      "&:hover": {
-        opacity: 1
-      }
-    },
-    "& .sectionPopper": {
-      opacity: 0
-    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",
@@ -49,6 +38,11 @@ const SectionStyle = () => ({
       "&.active": {
         opacity: 1
       }
+    },
+    "& .ed-section-inner": {
+      [theme.breakpoints.between("xs", "md")]: {
+        maxWidth: `320px !important`
+      }
     }
   }
 });