@flozy/editor 3.8.9 → 3.9.0

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

@@ -1,251 +0,0 @@
-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 handleMoveNode = (editor, path, newPath, {
-  isEmpty
-}) => {
-  try {
-    const replaceNode = Node.get(editor, path);
-    if (isEmpty) {
-      const toPath = [...newPath, 0];
-      Transforms.insertNodes(editor, [{
-        ...replaceNode
-      }], {
-        at: toPath
-      });
-      Transforms.removeNodes(editor, {
-        at: path
-      });
-      return toPath;
-    } else {
-      Transforms.insertNodes(editor, [{
-        ...replaceNode
-      }], {
-        at: newPath
-      });
-      Transforms.removeNodes(editor, {
-        at: path
-      });
-      return newPath;
-    }
-  } catch (err) {
-    console.log(err);
-    console.log("Drop Node error");
-    return null;
-  }
-};
-export function triggerClick(editor, path = []) {
-  try {
-    const triggerNode = Node.get(editor, path);
-    const triggerNodeDOM = ReactEditor.toDOMNode(editor, triggerNode);
-    triggerNodeDOM?.closest(".freegrid-item")?.click();
-  } catch (err) {
-    console.log(err);
-  }
-}
-export function updatePositions(props, closestClass) {
-  try {
-    const {
-      editor,
-      path,
-      offsetY,
-      dragOver,
-      x,
-      y,
-      diffX,
-      parentPath
-    } = props;
-    const posY = y - offsetY;
-    const posX = parseInt(x - window.innerWidth / 2 + 490 - diffX);
-    let addToSectionDOMRect = null;
-    let newPath = [];
-    let toSectionNode = null;
-    const needMove = dragOver !== parentPath;
-    const moveTo = dragOver.split("|").map(m => parseInt(m));
-    const from = parentPath.split("|").map(m => parseInt(m));
-    newPath = moveTo;
-    toSectionNode = Node.get(editor, newPath);
-    const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
-    addToSectionDOMRect = addToSectionDOM?.getBoundingClientRect();
-
-    // update top and left properties
-    const newProperties = {};
-    newProperties.left = posX;
-    newProperties.marginTop = posY > addToSectionDOMRect.top ? posY - addToSectionDOMRect.top : addToSectionDOMRect.top - posY;
-    Transforms.setNodes(editor, newProperties, {
-      at: path
-    });
-    const returnData = {};
-    if (needMove) {
-      const isEmpty = toSectionNode?.children[0]?.type === undefined;
-      if (!isEmpty) {
-        newPath = [...newPath, toSectionNode?.children?.length];
-      }
-      newPath = newPath.map(m => parseInt(m));
-      const rPath = handleMoveNode(editor, path, newPath, {
-        isEmpty
-      });
-      // to update path index need to re-render items in parent sections
-      Transforms.setNodes(editor, {
-        updated_at: new Date().getTime
-      }, {
-        at: parentPath.split("|").map(m => parseInt(m))
-      });
-      returnData.updated_at = rPath;
-    }
-    returnData.updated_at = path;
-    if (needMove) {
-      getNearestItem(editor, moveTo, {
-        currentItem: path
-      });
-    } else {
-      getNearestItem(editor, from, {
-        currentItem: path
-      });
-    }
-    return returnData;
-  } catch (err) {
-    console.log(err);
-  }
-}
-const isOverLapLine = ({
-  x,
-  y
-}, lines) => {
-  return lines.find(f => Math.abs(f.x - x) <= GUIDE_LINE_OVERLAP_THRESHOLD || Math.abs(f.y - y) <= GUIDE_LINE_OVERLAP_THRESHOLD);
-};
-export function getClosestDraggable(x, y, className, activeClassName) {
-  const draggables = document.querySelectorAll(className);
-  const activeDragEle = document.querySelectorAll(activeClassName)[0];
-  const {
-    left: aLeft,
-    top: aTop,
-    width: aWidth,
-    height: aHeight
-  } = activeDragEle?.getBoundingClientRect() || {};
-  let lines = [];
-  draggables.forEach(draggable => {
-    const {
-      left,
-      top,
-      width,
-      height
-    } = draggable.getBoundingClientRect();
-    let xVal = 0;
-    let yVal = 0;
-
-    // top match
-    xVal = x < left ? aLeft : left;
-    yVal = top;
-    if (Math.abs(top - aTop) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines)) {
-      lines.push({
-        y: top,
-        x: xVal,
-        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
-        height: 1
-      });
-    }
-
-    // bottom match
-    xVal = x < left ? aLeft : left;
-    yVal = top + height;
-    if (Math.abs(top + height - (aTop + aHeight)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines)) {
-      lines.push({
-        y: yVal,
-        x: xVal,
-        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
-        height: 1
-      });
-    }
-
-    // center match
-    xVal = x < left ? aLeft : left;
-    yVal = top + height / 2;
-    if (Math.abs(top + height / 2 - (aTop + aHeight / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines, "y")) {
-      lines.push({
-        y: yVal,
-        x: xVal,
-        width: x > left ? Math.abs(aLeft + aWidth - left) : Math.abs(aLeft - (left + width)),
-        height: 1
-      });
-    }
-
-    // right match
-    xVal = left + width;
-    yVal = top < aTop ? top : aTop;
-    if ((Math.abs(left + width - aLeft) <= GUIDE_LINE_THRESHOLD || Math.abs(left - aLeft) <= GUIDE_LINE_THRESHOLD) && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines)) {
-      lines.push({
-        y: yVal,
-        x: xVal,
-        width: 1,
-        height: Math.abs(aTop - top)
-      });
-    }
-
-    // left match
-    xVal = left;
-    yVal = top < aTop ? top : aTop;
-    if ((Math.abs(aLeft + aWidth - left) <= GUIDE_LINE_THRESHOLD || Math.abs(aLeft - left) <= GUIDE_LINE_THRESHOLD) && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines)) {
-      lines.push({
-        y: yVal,
-        x: xVal,
-        width: 1,
-        height: Math.abs(aTop - top)
-      });
-    }
-
-    // middle match
-    xVal = left + width / 2;
-    yVal = top < aTop ? top : aTop;
-    if (Math.abs(aLeft + aWidth / 2 - (left + width / 2)) <= GUIDE_LINE_THRESHOLD && !isOverLapLine({
-      x: xVal,
-      y: yVal
-    }, lines)) {
-      lines.push({
-        y: yVal,
-        x: xVal,
-        width: 1,
-        height: Math.abs(aTop - top)
-      });
-    }
-  });
-  return lines;
-}
-export function isDragOver(rect, mousePosition) {
-  const {
-    x,
-    y
-  } = mousePosition;
-  if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
-    return true;
-  }
-  return false;
-}
-export function getParentSectionPath(props, closestClass) {
-  try {
-    const {
-      ref
-    } = props;
-    const parentDom = ref?.closest(closestClass);
-    return parentDom?.dataset?.path;
-  } catch (err) {
-    console.log(err);
-  }
-}

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

@@ -1,76 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Box } from "@mui/material";
-import useVirtualElementStyles from "./styles";
-import updateAutoProps from "./updateAutoProps";
-import { calculateGridArea } from "../Utils/gridDropItem";
-import { jsx as _jsx } from "react/jsx-runtime";
-const VirtualElement = props => {
-  const classes = useVirtualElementStyles();
-  const {
-    editor,
-    path,
-    parentEle,
-    updated_at
-  } = props;
-  const cloneNode = parentEle?.cloneNode(true);
-  const virtualRef = useRef();
-  useEffect(() => {
-    if (virtualRef?.current) {
-      setTimeout(() => {
-        calculateProps();
-      }, 0);
-    }
-  }, [updated_at, virtualRef?.current]);
-  const calculateProps = () => {
-    const rect = virtualRef?.current?.getBoundingClientRect();
-    const sectionProps = {
-      path,
-      props: {
-        height: rect.height
-      }
-    };
-    const itemsData = [];
-    const items = virtualRef?.current?.querySelectorAll(".freegrid-item");
-    let sectionHeight = 0;
-    for (let i = 0; i < items.length; i++) {
-      const itemRect = items[i]?.getBoundingClientRect();
-      const y = Math.abs(rect.top - itemRect?.top);
-      itemsData.push({
-        path: items[i]?.dataset.path,
-        props: {
-          top: y,
-          left: 24,
-          marginTop: 12,
-          width: itemRect?.width,
-          height: itemRect?.height,
-          gridArea: calculateGridArea(y)
-        }
-      });
-      sectionHeight += itemRect?.height;
-    }
-    if (sectionHeight > sectionProps?.props?.height) {
-      sectionProps.props.height = sectionHeight;
-    }
-    const allData = [sectionProps, itemsData]?.flat();
-    // it should trigger by auto alignment or on clicking mobile view change
-    updateAutoProps(editor, allData, "xs");
-  };
-  const getItems = () => {
-    const items = cloneNode?.querySelectorAll(".freegrid-item") || [];
-    let itemsHTML = "";
-    for (let i = 0; i < items?.length; i++) {
-      items[i].classList.add("exclude-virtual");
-      itemsHTML += items[i].outerHTML;
-    }
-    return itemsHTML;
-  };
-  return /*#__PURE__*/_jsx(Box, {
-    className: "mobile-virtual-mode",
-    ref: virtualRef,
-    sx: classes.root,
-    dangerouslySetInnerHTML: {
-      __html: getItems()
-    }
-  });
-};
-export default VirtualElement;

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

@@ -1,27 +0,0 @@
-const useVirtualElementStyles = () => ({
-  root: {
-    width: "320px",
-    position: "fixed",
-    backgroundColor: "red",
-    height: "auto",
-    overflow: "visible",
-    pointerEvents: "none",
-    opacity: 0,
-    right: 0,
-    top: 0,
-    "& .freegrid-item": {
-      gridArea: "none !important",
-      width: "calc(100% - 48px) !important",
-      height: "auto !important",
-      left: "24px !important",
-      marginTop: "24px !important",
-      "& .debug-info, & .editor-blocker": {
-        display: "none"
-      },
-      "& .embed": {
-        minHeight: "300px"
-      }
-    }
-  }
-});
-export default useVirtualElementStyles;

package/dist/Editor/common/RnD/VirtualElement/updateAutoProps.js

@@ -1,28 +0,0 @@
-import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "") => {
-  try {
-    for (let i = 0; i < datas.length; i++) {
-      const {
-        path,
-        props
-      } = datas[i] || {};
-      const int_path = path.split("|").map(m => parseInt(m));
-      const updatedProps = Object.keys(props).reduce((a, b) => {
-        const key = breakpoint ? `${b}_${breakpoint}` : b;
-        a[key] = props[b];
-        return a;
-      }, {});
-      const oldProps = Node.get(editor, int_path);
-      if (!oldProps?.xs_updatedOn) {
-        Transforms.setNodes(editor, {
-          ...updatedProps
-        }, {
-          at: int_path
-        });
-      }
-    }
-  } catch (err) {
-    console.log(err);
-  }
-};
-export default updateAutoProps;