@flozy/editor 3.8.9 → 3.9.1

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

@@ -1,503 +0,0 @@
-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

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

package/dist/Editor/common/StyleBuilder/boxStyle.js

@@ -1,30 +0,0 @@
-const boxStyle = [{
-  tab: "Colors",
-  value: "sectionColors",
-  fields: [{
-    label: "Background Color",
-    key: "sectionBgColor",
-    type: "color"
-  }]
-}, {
-  tab: "Background",
-  value: "sectionBackgroundImage",
-  fields: [{
-    label: "Background Image URL",
-    key: "sectionBackgroundImage",
-    type: "text"
-  }, {
-    label: "Background Image",
-    key: "sectionBackgroundImage",
-    type: "backgroundImage"
-  }]
-}, {
-  tab: "Border",
-  value: "sectionBorderRadius",
-  fields: [{
-    label: "Border",
-    key: "sectionBorderRadius",
-    type: "borderRadius"
-  }]
-}];
-export default boxStyle;

package/dist/Editor/helper/RnD/focusOnNewItem.js

@@ -1,39 +0,0 @@
-import { Node } from "slate";
-import { ReactEditor } from "slate-react";
-function safeToDOMNode(editor, node, np, extProps) {
-  try {
-    if (Node.has(editor, node)) {
-      const domNode = ReactEditor.toDOMNode(editor, node);
-      return domNode;
-    }
-  } catch (error) {
-    console.error("Focusing Again");
-    focusOnNewItem(editor, np, extProps);
-  }
-  return null;
-}
-function focusOnNewItem(editor, newPath, extProps) {
-  try {
-    const sectionNode = Node.get(editor, newPath);
-    requestAnimationFrame(() => {
-      const domNode = safeToDOMNode(editor, sectionNode, newPath, extProps);
-      if (domNode) {
-        const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
-        if (sectionDom) {
-          sectionDom.scrollIntoView({
-            behavior: "smooth",
-            block: "center"
-          });
-          extProps?.setSelectedElement({
-            enable: 1,
-            path: [...newPath].join("|"),
-            cursor: "move"
-          });
-        }
-      }
-    });
-  } catch (err) {
-    console.log(err);
-  }
-}
-export default focusOnNewItem;

package/dist/Editor/helper/RnD/scrollToNewSection.js

@@ -1,24 +0,0 @@
-import { Node } from "slate";
-import { ReactEditor } from "slate-react";
-function scrollToNewSection(editor, newPath, extProps) {
-  try {
-    const sectionNode = Node.get(editor, newPath);
-    requestAnimationFrame(() => {
-      const sectionDom = ReactEditor.toDOMNode(editor, sectionNode);
-      if (sectionDom) {
-        sectionDom.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
-        });
-        extProps?.setSelectedElement({
-          enable: 1,
-          path: [...newPath, 0].join("|"),
-          cursor: "move"
-        });
-      }
-    });
-  } catch (err) {
-    console.log(err);
-  }
-}
-export default scrollToNewSection;

package/dist/Editor/helper/breakpoint.js

@@ -1,5 +0,0 @@
-export function CssVar(device = "lg", key, props) {
-  const keyTo = `${key}_${device}`;
-  const value = props[keyTo] === undefined ? props[key] : props[keyTo];
-  return value;
-}

package/dist/Editor/hooks/useBreakpoints.js

@@ -1,34 +0,0 @@
-import { useMediaQuery } from "@mui/material";
-export const STIMULATOR_MOCK = {
-  xs: "@media (min-width: 1200px) and (max-width: 1980px)"
-};
-export const isStimulator = () => {
-  try {
-    const breakpoint = document.getElementsByClassName("et-wrpr")[0];
-    const etDataset = breakpoint?.dataset;
-    if (etDataset?.breakpoint) {
-      return etDataset?.breakpoint;
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-const useBreakpoints = theme => {
-  const lg = useMediaQuery(theme.breakpoints.up("md"));
-  const xs = useMediaQuery(theme.breakpoints.between("xs", "md"));
-
-  // if stimulated environment
-  const breakpoint = document.getElementsByClassName("et-wrpr")[0];
-  const etDataset = breakpoint?.dataset;
-  if (etDataset?.breakpoint) {
-    return etDataset?.breakpoint;
-  }
-  if (lg) {
-    return "lg";
-  } else if (xs) {
-    return "xs";
-  } else {
-    return "lg";
-  }
-};
-export default useBreakpoints;

package/dist/Editor/hooks/withErrorHandling.js

@@ -1,14 +0,0 @@
-const withErrorHandling = editor => {
-  const {
-    apply
-  } = editor;
-  editor.apply = operation => {
-    try {
-      apply(operation);
-    } catch (error) {
-      console.error("Error applying Slate operation:", error);
-    }
-  };
-  return editor;
-};
-export default withErrorHandling;