@flozy/editor 9.8.2 → 9.8.3

package/dist/Editor/common/CustomSelect.js

@@ -1,43 +0,0 @@
-import { MenuItem, Select } from "@mui/material";
-import { fontFamilyMap } from "../utils/font";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
-import { jsx as _jsx } from "react/jsx-runtime";
-function CustomSelect(props) {
-  const {
-    classes,
-    onChange,
-    options = [],
-    value
-  } = props;
-  return /*#__PURE__*/_jsx(Select, {
-    fullWidth: true,
-    value: value,
-    onChange: onChange,
-    className: "editor-dd",
-    style: {
-      fontFamily: fontFamilyMap[value],
-      width: "100%",
-      height: "36px",
-      borderRadius: "10px",
-      fontSize: "14px"
-    },
-    MenuProps: {
-      PaperProps: {
-        sx: classes?.textOptions
-      }
-    },
-    sx: classes.textFormatSelect,
-    IconComponent: KeyboardArrowDownRoundedIcon,
-    children: options.map((option, i) => {
-      return /*#__PURE__*/_jsx(MenuItem, {
-        value: option.value,
-        style: {
-          fontFamily: option.text || "inherit"
-        },
-        sx: classes.textFormatSelectOptions,
-        children: option?.label || option?.text
-      }, i);
-    })
-  });
-}
-export default CustomSelect;

package/dist/Editor/common/RnD/Theme/MainThemeProvider.js

@@ -1,17 +0,0 @@
-import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
-import { jsx as _jsx } from "react/jsx-runtime";
-function MainThemeProvider({
-  children,
-  userSelectedTheme,
-  theme = {}
-}) {
-  const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
-  return /*#__PURE__*/_jsx(CssVarsProvider, {
-    theme: {
-      ...themeVars,
-      ...theme
-    },
-    children: children
-  });
-}
-export default MainThemeProvider;

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

@@ -1,43 +0,0 @@
-import { Box } from "@mui/material";
-import { useAutoAlignStyles } from "./styles";
-import { useEffect, useRef } from "react";
-import updateAutoProps from "./updateAutoProps";
-import { reRenderChildNodes } from "../Utils/gridDropItem";
-import { calculateProps, sortElements } from "./helper";
-import { jsx as _jsx } from "react/jsx-runtime";
-const appendItems = (boxCls, virtualRef, ROOT_ITEM_CLASS) => {
-  const cloneNode = document.querySelector(boxCls)?.cloneNode(true);
-  const items = cloneNode.querySelectorAll(ROOT_ITEM_CLASS);
-  if (!cloneNode || !items?.length) {
-    return;
-  }
-  virtualRef.current.innerHTML = "";
-  const container = virtualRef?.current;
-  sortElements(items, container);
-};
-function BoxHeaderAutoAlignment(props) {
-  const {
-    editor,
-    boxCls,
-    path
-  } = props;
-  const classes = useAutoAlignStyles();
-  const virtualRef = useRef();
-  useEffect(() => {
-    const childPathLength = path?.split("|").length + 1;
-    const ROOT_ITEM_CLASS = `.freegrid-item.path-${childPathLength}`;
-    appendItems(boxCls, virtualRef, ROOT_ITEM_CLASS);
-    const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, [], null, true);
-    updateAutoProps(editor, allData, "xs", true);
-    const currentSectionPath = path.split("|").map(m => parseInt(m));
-    reRenderChildNodes(editor, currentSectionPath);
-  }, []);
-  return /*#__PURE__*/_jsx(Box, {
-    className: "header-box-mobile-virtual-mode",
-    ref: virtualRef,
-    sx: classes.root,
-    "aria-hidden": "true",
-    contentEditable: false
-  });
-}
-export default BoxHeaderAutoAlignment;

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

@@ -1,44 +0,0 @@
-import { Box } from "@mui/material";
-import { useAutoAlignStyles } from "./styles";
-import { useEffect, useRef } from "react";
-import { reRenderChildNodes } from "../Utils/gridDropItem";
-import updateAutoProps from "./updateAutoProps";
-import { calculateProps, sortElements } from "./helper";
-import { jsx as _jsx } from "react/jsx-runtime";
-const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
-const appendItems = (sectionCls, virtualRef) => {
-  const cloneNode = document.querySelector(sectionCls)?.cloneNode(true);
-  const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
-  if (!cloneNode || !items?.length) {
-    return;
-  }
-  virtualRef.current.innerHTML = "";
-  const container = virtualRef?.current;
-  sortElements(items, container);
-};
-function ForceAutoAlignment(props) {
-  const {
-    editor,
-    sectionCls,
-    path,
-    setAutoAlign
-  } = props;
-  const classes = useAutoAlignStyles();
-  const virtualRef = useRef();
-  useEffect(() => {
-    appendItems(sectionCls, virtualRef);
-    const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
-    updateAutoProps(editor, allData, "xs", true);
-    const currentSectionPath = path.split("|").map(m => parseInt(m));
-    reRenderChildNodes(editor, currentSectionPath);
-    setAutoAlign(false);
-  }, []);
-  return /*#__PURE__*/_jsx(Box, {
-    className: "force-mobile-virtual-mode",
-    ref: virtualRef,
-    sx: classes.root,
-    "aria-hidden": "true",
-    contentEditable: false
-  });
-}
-export default ForceAutoAlignment;

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

@@ -1,134 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Path, Transforms } from "slate";
-import { getNode } from "../../../utils/helper";
-import { ROW_HEIGHT } from "../Utils/gridDropItem";
-import { findFirstRowOverlap, getGridArea, handleContainers, moveOverlappedItems } from "./helper";
-import { Box } from "@mui/material";
-import { jsx as _jsx } from "react/jsx-runtime";
-const updateTextHeight = (editor, path, height) => {
-  if (!height) {
-    return;
-  }
-  const parentPath = Path.parent(path);
-  const currentNode = getNode(editor, parentPath);
-  const gridItems = currentNode?.children || [];
-  const isNewlyAddedElement = gridItems.some(gridItem => !gridItem.gridArea_xs && gridItem.type !== "paragraph");
-  if (isNewlyAddedElement) {
-    return;
-  }
-  const textItemIndex = path[parentPath.length];
-  const textItem = gridItems.find((_, index) => textItemIndex === index);
-  const {
-    marginTop_xs: marginTop,
-    gridArea_xs: gridArea,
-    height_xs
-  } = textItem;
-  const oldHeight = height_xs + marginTop;
-  const newHeight = height + marginTop;
-  const extraHeight = newHeight - oldHeight;
-  let containerExtraHeight = extraHeight;
-  if (extraHeight > 0) {
-    const [startRow] = getGridArea(gridArea);
-    const newRows = Math.floor(newHeight / ROW_HEIGHT) + 1;
-    const endRow = startRow + newRows;
-    const firstOverlappedRow = findFirstRowOverlap(gridItems, startRow, endRow, textItemIndex);
-    if (firstOverlappedRow) {
-      const moveRows = endRow - firstOverlappedRow;
-      moveOverlappedItems(editor, moveRows, gridItems, parentPath, textItemIndex, startRow);
-      containerExtraHeight += moveRows * ROW_HEIGHT;
-    }
-
-    // handle containers (box and section)
-    const containerData = handleContainers(editor, parentPath, containerExtraHeight);
-    containerData.forEach(container => {
-      const {
-        moveRows,
-        containerNode,
-        containerPath,
-        newHeight,
-        childIndex,
-        lastChildStartRow
-      } = container;
-      if (moveRows) {
-        moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
-      }
-      Transforms.setNodes(editor, {
-        height_xs: newHeight,
-        xs_updatedOn: new Date().getTime()
-      }, {
-        at: containerPath
-      });
-    });
-    Transforms.setNodes(editor, {
-      height_xs: height
-    }, {
-      at: path
-    });
-  }
-};
-function VirtualTextElement(props) {
-  const {
-    dataSets,
-    getCurrentEle,
-    path,
-    editor
-  } = props;
-  const currElement = getCurrentEle();
-  const textRef = useRef(null);
-  const prevTextRef = useRef(currElement?.innerText);
-  useEffect(() => {
-    const observer = new ResizeObserver(([entry]) => {
-      if (entry) {
-        const {
-          height
-        } = entry.contentRect;
-        const currentText = currElement?.innerText;
-        const prevText = prevTextRef.current;
-        if (currentText && currentText !== prevText) {
-          updateTextHeight(editor, path, height);
-        }
-        prevTextRef.current = currentText;
-      }
-    });
-    const elementRef = textRef?.current;
-    if (elementRef) {
-      observer.observe(elementRef);
-    }
-    return () => {
-      const elementRef = textRef?.current;
-      if (elementRef) {
-        observer.unobserve(elementRef);
-      }
-      observer.disconnect();
-    };
-  }, [currElement?.innerText]);
-  return /*#__PURE__*/_jsx(Box, {
-    style: {
-      position: "fixed",
-      width: dataSets["data-width-xs"],
-      minHeight: "fit-content",
-      visibility: "hidden",
-      pointerEvents: "none",
-      right: 100,
-      top: 100
-    },
-    ref: textRef,
-    sx: {
-      "& .leaf-item": {
-        fontSize: "var(--fontSize_xs) !important",
-        "& span": {
-          fontSize: "var(--fontSize_xs) !important"
-        }
-      },
-      "& .editor-blocker": {
-        display: "none"
-      }
-    },
-    dangerouslySetInnerHTML: {
-      __html: currElement?.innerHTML
-    },
-    contentEditable: false,
-    id: "virtual-text-element"
-  });
-}
-export default VirtualTextElement;

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

@@ -1,382 +0,0 @@
-import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
-import { Transforms, Editor } from "slate";
-const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
-  return width <= 40 && itemStartRow === startRow;
-};
-export const findFirstRowOverlap = (gridItems, startRow, endRow, textItemIndex) => {
-  let firstOverlapRow;
-  gridItems.forEach((gridItem, index) => {
-    const {
-      gridArea_xs: gridArea,
-      width_xs
-    } = gridItem;
-    if (!gridArea) {
-      return;
-    }
-    const [itemStartRow] = getGridArea(gridArea);
-    const isItemOverlap = itemStartRow >= startRow && itemStartRow <= endRow;
-    if (isBulletOrTickIcon(width_xs, itemStartRow, startRow)) {
-      return;
-    }
-    const isCurrentEle = textItemIndex === index;
-    if (isItemOverlap && !isCurrentEle && gridArea) {
-      firstOverlapRow = firstOverlapRow ? Math.min(firstOverlapRow, itemStartRow) : itemStartRow;
-    }
-  });
-  return firstOverlapRow;
-};
-export const getHeight = (oldHeight, newHeight) => {
-  const changeHeight = oldHeight && oldHeight < newHeight;
-  const height = changeHeight ? newHeight : oldHeight;
-  return {
-    height,
-    changeHeight
-  };
-};
-export const getGridArea = gridArea => {
-  return gridArea.split("/").map(num => parseInt(num));
-};
-const getBoxToAutoAlign = (editor, sectionPath) => {
-  const [boxData] = Editor.nodes(editor, {
-    at: sectionPath,
-    match: node => node.type === "freegridBox" && node.autoAlign
-  });
-  return boxData || [];
-};
-const handleGridItems = (gridItems, lastRow) => {
-  // to find the previously occupied rows
-  gridItems.forEach(item => {
-    const {
-      gridArea_xs: gridArea,
-      marginTop_xs,
-      height_xs,
-      type
-    } = item;
-    if (type === "paragraph") {
-      // non-freegridItem,
-      // some "paragraph" node is defaulty coming inside in box's children
-      return;
-    }
-    const [startRow] = getGridArea(gridArea);
-    const marginTop = marginTop_xs ? Number(marginTop_xs) : 0;
-    const fullHeight = Number(height_xs) + marginTop;
-    const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-    lastRow = Math.max(endRow, lastRow);
-  });
-  return {
-    lastRow
-  };
-};
-const handleNonGridItems = (nonGridItems, lastRow, editor, boxPath) => {
-  let containerHeight = (lastRow - 1) * ROW_HEIGHT;
-  let newlyAddedHeight = 0;
-
-  //place it on the next rows that are available
-  nonGridItems.forEach((item, index) => {
-    const {
-      height_xs,
-      type,
-      itemIndex
-    } = item;
-    if (type === "paragraph") {
-      // non-freegridItem
-      return;
-    }
-    const startRow = lastRow || 1;
-    const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
-    let fullHeight = height_xs + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
-    const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-    const newGridArea = `${startRow} / 1 / ${startRow + 1} / 2`;
-    const currentElementPath = [...boxPath, itemIndex];
-    Transforms.setNodes(editor, {
-      gridArea_xs: newGridArea,
-      marginTop_xs: 12,
-      left_xs: 12,
-      xs_updatedOn: new Date().getTime()
-    }, {
-      at: currentElementPath
-    });
-    lastRow = Math.max(endRow, lastRow);
-    containerHeight += fullHeight;
-    newlyAddedHeight += fullHeight;
-  });
-  return {
-    lastRow,
-    containerHeight,
-    newlyAddedHeight
-  };
-};
-const alignNewElementInContainer = (editor, boxPath, containerItems) => {
-  let lastRow = 1;
-  const gridItems = [];
-  const nonGridItems = [];
-  containerItems.forEach((item, index) => {
-    if (item?.gridArea_xs) {
-      gridItems.push({
-        ...item,
-        itemIndex: index
-      });
-    } else {
-      nonGridItems.push({
-        ...item,
-        itemIndex: index
-      });
-    }
-  });
-  const {
-    lastRow: lastRowOccupied
-  } = handleGridItems(gridItems, lastRow);
-  lastRow = lastRowOccupied;
-  const {
-    lastRow: lastRowTaken,
-    containerHeight,
-    newlyAddedHeight
-  } = handleNonGridItems(nonGridItems, lastRow, editor, boxPath);
-  lastRow = lastRowTaken;
-  return {
-    lastRow,
-    containerHeight,
-    newlyAddedHeight
-  };
-};
-const getAncestorFreeGridContainers = (editor, path) => {
-  const containers = [...Editor.nodes(editor, {
-    at: path,
-    // Start from the current path
-    match: (node, nodePath) => {
-      const container = ["freegridBox", "freegrid"].includes(node.type);
-      return container;
-    },
-    reverse: true // Go upwards in the document tree
-  })].filter(([node, nodePath]) => nodePath.length <= path.length);
-  return containers;
-};
-export const handleContainers = (editor, boxPath, extraHeight) => {
-  const containers = getAncestorFreeGridContainers(editor, boxPath);
-  let lastChildStartRow;
-  let lastChildEndRow;
-  let lastChildPath;
-  const containerData = [];
-  for (let i = containers.length - 1; i >= 0; i--) {
-    const container = containers[i];
-    const childContainer = containers[i + 1];
-    const [containerNode, containerPath] = container;
-    const {
-      gridArea_xs,
-      height_xs,
-      marginTop_xs
-    } = containerNode;
-    const [startRow] = gridArea_xs ? getGridArea(gridArea_xs) : [0]; // there is no grid area for section nodes
-
-    let newHeight = Number(height_xs) + extraHeight;
-    let fullHeight = newHeight + Number(marginTop_xs); // to find end row
-
-    if (!childContainer) {
-      const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-      containerData.push({
-        moveRows: 0,
-        extraHeight,
-        containerPath,
-        newHeight,
-        containerNode,
-        lastChildStartRow
-      });
-      lastChildStartRow = startRow;
-      lastChildEndRow = endRow;
-    } else {
-      const lastChildIndex = lastChildPath[containerPath.length];
-      const firstOverlappedRow = findFirstRowOverlap(containerNode?.children, lastChildStartRow, lastChildEndRow, lastChildIndex);
-      const moveRows = firstOverlappedRow ? lastChildEndRow - firstOverlappedRow : 0;
-      newHeight = newHeight + moveRows * ROW_HEIGHT;
-      fullHeight = newHeight + Number(marginTop_xs);
-      const newEndRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-      containerData.push({
-        moveRows,
-        extraHeight,
-        childIndex: lastChildIndex,
-        newHeight,
-        containerPath,
-        containerNode,
-        lastChildStartRow
-      });
-      lastChildStartRow = startRow;
-      lastChildEndRow = newEndRow;
-    }
-    lastChildPath = containerPath;
-  }
-  return containerData;
-};
-export const moveOverlappedItems = (editor, moveRows, containerItems, containerPath, childIndex, lastChildStartRow) => {
-  containerItems?.forEach((gridItem, index) => {
-    const isChildEle = childIndex === index;
-    if (isChildEle) {
-      return;
-    }
-    if (gridItem.type === "paragraph") {
-      return;
-    }
-    const {
-      gridArea_xs: gridArea,
-      width_xs
-    } = gridItem;
-    const [itemStartRow] = getGridArea(gridArea);
-    if (isBulletOrTickIcon(width_xs, itemStartRow, lastChildStartRow)) {
-      return;
-    }
-    if (itemStartRow >= lastChildStartRow) {
-      const row = itemStartRow + moveRows;
-      const newGridArea = `${row} / 1 / ${row + 1} / 2`;
-      const currentElementPath = [...containerPath, index];
-      Transforms.setNodes(editor, {
-        gridArea_xs: newGridArea
-      }, {
-        at: currentElementPath
-      });
-    }
-  });
-};
-export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
-  const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
-  Transforms.setNodes(editor, {
-    autoAlign: false
-  }, {
-    at: boxPath
-  });
-  if (!boxNode) {
-    return;
-  }
-  const containerItems = boxNode?.children || [];
-  const {
-    containerHeight
-  } = alignNewElementInContainer(editor, boxPath, containerItems);
-  const bufferHeight = 12;
-  const newHeight = containerHeight + bufferHeight;
-  const {
-    height_xs
-  } = boxNode;
-  const oldHeight = Number(height_xs);
-  const extraHeight = newHeight - oldHeight;
-  if (extraHeight > 0) {
-    const containerData = handleContainers(editor, boxPath, extraHeight);
-    containerData.forEach(container => {
-      const {
-        moveRows,
-        containerNode,
-        containerPath,
-        newHeight,
-        childIndex,
-        lastChildStartRow
-      } = container;
-      if (moveRows) {
-        moveOverlappedItems(editor, moveRows, containerNode?.children, containerPath, childIndex, lastChildStartRow);
-      }
-      Transforms.setNodes(editor, {
-        height_xs: newHeight,
-        xs_updatedOn: new Date().getTime()
-      }, {
-        at: containerPath
-      });
-    });
-  }
-};
-export const getMarginTop = y => {
-  const calcMargin = y % ROW_HEIGHT;
-  return calcMargin <= 0 ? 0 : calcMargin;
-};
-export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBoxHeader) => {
-  const rect = dom?.getBoundingClientRect();
-  const bufferHeight = parentDom ? 0 : 12;
-  const sectionProps = {
-    path: curPath,
-    props: {
-      height: rect?.height + bufferHeight
-    }
-  };
-  const itemsData = [];
-  const items = dom.querySelectorAll(domClass);
-  const nextItemPathLength = curPath?.split("|").length + 2;
-  let sectionHeight = 12;
-  for (let i = 0; i < items.length; i++) {
-    const itemRect = items[i]?.getBoundingClientRect();
-    if (items[i]?.classList.contains("type_box")) {
-      allData = calculateProps(items[i]?.dataset.path, items[i], `.freegrid-item.path-${nextItemPathLength}`, allData, dom);
-    } else {
-      const y = Math.abs(rect.top - itemRect?.top);
-      const left = Math.abs(rect.left - itemRect?.left);
-      const isAppHeader = isBoxHeader || dom?.classList?.contains("appHeaderBox");
-      itemsData.push({
-        path: items[i]?.dataset.path,
-        props: {
-          top: y,
-          left: isAppHeader ? left : 24,
-          marginTop: getMarginTop(y),
-          width: itemRect?.width,
-          height: itemRect?.height,
-          gridArea: calculateGridArea(y)
-        }
-      });
-      sectionHeight += itemRect?.height;
-    }
-  }
-  if (dom?.classList.contains("type_box") && parentDom) {
-    const parentDomRect = parentDom?.getBoundingClientRect();
-    const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
-    const y = Math.abs(parentDomRect.top - rect?.top);
-    sectionProps.props.gridArea = calculateGridArea(y);
-    sectionProps.props.left = isAppHeader ? 6 : 24;
-    sectionProps.props.marginTop = getMarginTop(y);
-    sectionProps.props.width = rect?.width;
-  }
-  allData = [sectionProps, [...allData, ...itemsData]]?.flat();
-  return allData;
-};
-export const sortElements = (items, container) => {
-  const elementsArray = Array.from(items);
-  elementsArray.sort((a, b) => {
-    const aGridArea = a.dataset.gridAreaXs;
-    const bGridArea = b.dataset.gridAreaXs;
-
-    // If either element has no gridArea, push it to the end
-    if (!aGridArea) return 1;
-    if (!bGridArea) return -1;
-    const [aRow] = aGridArea.split("/").map(Number);
-    const [bRow] = bGridArea.split("/").map(Number);
-    if (aRow !== bRow) {
-      return aRow - bRow; // Sort by start row first
-    }
-
-    // Compare marginTopXs
-    const aMarginTop = parseFloat(a.dataset.marginTopXs) || 0;
-    const bMarginTop = parseFloat(b.dataset.marginTopXs) || 0;
-    const BUFFER_DIFF = 5;
-    if (Math.abs(aMarginTop - bMarginTop) > BUFFER_DIFF) {
-      return aMarginTop - bMarginTop;
-    }
-    const aLeft = parseFloat(a.dataset.leftXs) || 0;
-    const bLeft = parseFloat(b.dataset.leftXs) || 0;
-    return aLeft - bLeft;
-  });
-
-  // Append sorted elements to container
-  elementsArray.forEach(item => {
-    container.appendChild(item);
-
-    // If item is a box, recursively sort its children
-    if (item.classList.contains("type_box")) {
-      const nestedContainer = item.querySelector(":scope > .fgi_type_box");
-      const isAppHeader = item.querySelector(".type_appHeader");
-      if (isAppHeader) {
-        item.classList.add("appHeaderBox");
-      }
-      if (nestedContainer) {
-        const childToRemove = nestedContainer.querySelector(":scope > .simple-text");
-        if (childToRemove) {
-          nestedContainer.removeChild(childToRemove);
-        }
-        const children = nestedContainer.children;
-        sortElements(children, nestedContainer);
-        item.appendChild(nestedContainer);
-      }
-    }
-  });
-};