@flozy/editor 10.0.1 → 10.0.3

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

@@ -1,236 +1,152 @@
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, { useEffect, useRef } from "react";
 import { Box } from "@mui/material";
 import useVirtualElementStyles from "./styles";
 import updateAutoProps from "./updateAutoProps";
-import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
+import { calculateGridArea } from "../Utils/gridDropItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
-export function getStartRow(el) {
-  const gridArea = el.dataset.gridAreaXs;
-  if (gridArea) {
-    const [startRow] = gridArea.split("/").map(num => parseInt(num));
-    return startRow;
-  }
-}
-function appendGridOccupied(domItem, startRow, fullHeight, lastRow) {
-  const endRow = startRow + Math.floor(fullHeight / ROW_HEIGHT) + 1;
-  lastRow = Math.max(endRow, lastRow);
-  const gridArea = `${startRow}/1/${endRow}/2`;
-  domItem.style.setProperty("--gridArea_xs", gridArea);
-  domItem.dataset.gridAreaXs = gridArea;
-  domItem.classList.add("exclude-virtual");
-  return {
-    domItem,
-    updatedLastRow: lastRow,
-    gridArea
-  };
-}
 
 // Function to group items by path and calculate heights
-// function groupByPathAndCalculateHeight(allData) {
-//   const data = JSON.parse(JSON.stringify([...allData]));
-//   const root = {};
-//   const heightData = {};
-
-//   // Step 1: Group items based on their path
-//   data.forEach((item) => {
-//     const segments = item.path.split("|");
-//     let current = root;
-
-//     segments.forEach((segment, index) => {
-//       if (!current[segment]) {
-//         current[segment] = { children: {}, props: { height: 0 } };
-//       }
-
-//       if (index === segments.length - 1) {
-//         // Assign the properties of the item including height
-//         current[segment] = { ...item, children: current[segment].children };
-//       }
-
-//       current = current[segment].children;
-//     });
-//   });
-
-//   // Step 2: Recursively calculate the height of each parent based on children
-//   const calculateHeight = (node) => {
-//     if (!node.children || Object.keys(node.children).length === 0) {
-//       // Base case: If there are no children, return the node's height
-//       return node.props.height;
-//     }
-
-//     // Calculate the height by summing the heights of all children
-//     let totalHeight = 0;
-//     Object.values(node.children).forEach((child) => {
-//       totalHeight += calculateHeight(child);
-//     });
+function groupByPathAndCalculateHeight(data) {
+  const root = {};
+  const heightData = {};
+
+  // Step 1: Group items based on their path
+  data.forEach(item => {
+    const segments = item.path.split("|");
+    let current = root;
+    segments.forEach((segment, index) => {
+      if (!current[segment]) {
+        current[segment] = {
+          children: {},
+          props: {
+            height: 0
+          }
+        };
+      }
+      if (index === segments.length - 1) {
+        // Assign the properties of the item including height
+        current[segment] = {
+          ...item,
+          children: current[segment].children
+        };
+      }
+      current = current[segment].children;
+    });
+  });
 
-//     // Update the parent's height to be the total height of its children
-//     node.props.height = totalHeight;
-//     if (node?.path) {
-//       heightData[node.path] = totalHeight;
-//     }
-//     return totalHeight;
-//   };
+  // Step 2: Recursively calculate the height of each parent based on children
+  const calculateHeight = node => {
+    if (!node.children || Object.keys(node.children).length === 0) {
+      // Base case: If there are no children, return the node's height
+      return node.props.height;
+    }
 
-//   // Start calculation from the root
-//   Object.values(root).forEach((node) => calculateHeight(node));
+    // Calculate the height by summing the heights of all children
+    let totalHeight = 0;
+    Object.values(node.children).forEach(child => {
+      totalHeight += calculateHeight(child);
+    });
 
-//   return { root, heightData };
-// }
+    // Update the parent's height to be the total height of its children
+    node.props.height = totalHeight;
+    if (node?.path) {
+      heightData[node.path] = totalHeight;
+    }
+    return totalHeight;
+  };
 
-const handleGridItem = (dom, lastRow) => {
-  const startRow = getStartRow(dom);
-  const {
-    marginTopXs,
-    heightXs
-  } = dom.dataset;
-  const marginTop = marginTopXs ? Number(marginTopXs) : 0;
-  const fullHeight = Number(heightXs) + marginTop;
-  return appendGridOccupied(dom, startRow, fullHeight, lastRow);
-};
-const handleNonGridItem = (dom, lastRow) => {
-  const rect = dom.getBoundingClientRect();
-  dom.style.setProperty("--height_xs", rect.height + "px"); // assign the auto height that taken
-  const startRow = lastRow || 1;
-  const DEFAULT_NEW_ELEMENT_MARGIN_TOP = 12;
-  let fullHeight = rect.height + DEFAULT_NEW_ELEMENT_MARGIN_TOP;
-  const gridOccupiedData = appendGridOccupied(dom, startRow, fullHeight, lastRow);
+  // Start calculation from the root
+  Object.values(root).forEach(node => calculateHeight(node));
   return {
-    ...gridOccupiedData,
-    fullHeight
+    root,
+    heightData
   };
-};
-const appendContainerItems = async (sectionCls, virtualRef, dataSets) => {
-  const cloneNode = document.querySelector(sectionCls)?.cloneNode(true);
-  const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
-  if (!cloneNode || !items?.length || !virtualRef.current) {
-    return;
-  }
-
-  // Remove all existing elements inside virtualRef.current
-  virtualRef.current.innerHTML = "";
-  virtualRef.current.style.height = `auto`;
-  virtualRef.current.style.gridTemplateRows = `unset`;
-
-  // temporary append section items to get the dom styles
-  virtualRef.current.append(...items);
-  let itemsHTML = "";
-  let lastRow = 0;
-  const gridItems = [];
-  const nonGridItems = [];
-  items.forEach(item => {
-    if (getStartRow(item)) {
-      gridItems.push(item);
-    } else {
-      nonGridItems.push(item);
-    }
-  });
-
-  // to find the previously occupied rows
-  gridItems.forEach(item => {
-    const {
-      updatedLastRow,
-      domItem
-    } = handleGridItem(item, lastRow);
-    lastRow = updatedLastRow;
-    itemsHTML += domItem.outerHTML;
-  });
-  let containerHeight = lastRow ? (lastRow - 1) * ROW_HEIGHT : 0;
-
-  //place it on the next rows that are available
-  nonGridItems.forEach(item => {
-    const {
-      domItem,
-      updatedLastRow,
-      fullHeight
-    } = handleNonGridItem(item, lastRow);
-    lastRow = updatedLastRow;
-    itemsHTML += domItem.outerHTML;
-    containerHeight += fullHeight;
-  });
-  const oldSectionHeight = dataSets["data-height-xs"];
-  const newHeight = oldSectionHeight && oldSectionHeight > containerHeight ? oldSectionHeight : containerHeight;
-  virtualRef.current.style.height = `${newHeight}px`;
-  virtualRef.current.style.gridTemplateRows = `repeat(${lastRow - 1}, ${ROW_HEIGHT}px)`;
-  virtualRef.current.innerHTML = itemsHTML;
-};
+}
 const VirtualElement = props => {
   const classes = useVirtualElementStyles();
   const {
     editor,
     path,
-    updated_at,
-    sectionCls,
-    dataSets
+    parentEle,
+    updated_at
   } = props;
+  const cloneNode = parentEle?.cloneNode(true);
   const virtualRef = useRef();
-  const [toggleUpdate, setToggleUpdate] = useState(false);
   useEffect(() => {
     if (virtualRef?.current) {
       const timeoutId = setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
-        // const groupData = groupByPathAndCalculateHeight(allData);
-        // console.log("allData", allData);
+        const groupData = groupByPathAndCalculateHeight(allData);
         // it should trigger by auto alignment or on clicking mobile view change
-        updateAutoProps(editor, allData, "xs");
+        updateAutoProps(editor, allData, "xs", groupData);
       }, 100);
-      setToggleUpdate(prev => !prev);
       return () => clearTimeout(timeoutId);
     }
   }, [updated_at, virtualRef?.current]);
   const calculateProps = (curPath, dom, domClass, allData) => {
     const rect = dom?.getBoundingClientRect();
-
-    // const sectionRect = virtualRef?.current?.getBoundingClientRect();
-
-    const bufferHeight = 12; // for spacing
-
+    const sectionRect = virtualRef?.current?.getBoundingClientRect();
     const sectionProps = {
       path: curPath,
       props: {
-        height: rect?.height + bufferHeight
+        height: rect?.height
       }
     };
     const itemsData = [];
-    const items = dom ? dom.querySelectorAll(domClass) : [];
+    const items = dom.querySelectorAll(domClass);
+    const nextItemPathLength = curPath?.split("|").length + 2;
+    let sectionHeight = 12;
     for (let i = 0; i < items.length; i++) {
-      const item = items[i];
-      const itemRect = item?.getBoundingClientRect();
-      const {
-        path
-      } = item?.dataset;
-      const y = Math.abs(rect.top - itemRect?.top);
-      itemsData.push({
-        path,
-        props: {
-          top: y,
-          left: 24,
-          marginTop: 12,
-          width: itemRect?.width,
-          height: itemRect?.height,
-          gridArea: calculateGridArea(y)
-        }
-      });
+      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);
+      } else {
+        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 (dom?.classList.contains("type_box")) {
+      const y = Math.abs(sectionRect.top - rect?.top);
+      sectionProps.props.gridArea = calculateGridArea(y);
+    }
+    if (sectionHeight > sectionProps?.props?.height) {
+      sectionProps.props.height = sectionHeight;
     }
     allData = [sectionProps, [...allData, ...itemsData]]?.flat();
     return allData;
   };
-  useMemo(() => {
-    return appendContainerItems(sectionCls, virtualRef, dataSets);
-  }, [toggleUpdate]);
+  const getItems = () => {
+    const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
+    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: {
-      display: "grid",
-      gridTemplateColumns: "100%",
-      visibility: "hidden",
-      // height: `${containerHeight}px !important`,
-      // gridTemplateRows: `repeat(${lastRow - 1}, ${ROW_HEIGHT}px)`,
-      ...classes.root
+    sx: classes.root,
+    dangerouslySetInnerHTML: {
+      __html: getItems()
+    },
+    style: {
+      visibility: "hidden"
     },
-    "aria-hidden": "true",
-    contentEditable: false
+    "aria-hidden": "true"
   });
 };
 export default VirtualElement;

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

@@ -2,177 +2,27 @@ const useVirtualElementStyles = () => ({
   root: {
     width: "320px",
     position: "fixed",
-    // backgroundColor: "red",
-    // height: "fit-content",
+    backgroundColor: "red",
+    height: "auto",
     overflow: "visible",
     pointerEvents: "none",
-    opacity: 1,
+    opacity: 0,
     right: 0,
     top: 0,
-    "& .leaf-item": {
-      fontSize: "var(--fontSize_xs) !important",
-      "& span": {
-        fontSize: "var(--fontSize_xs) !important"
-      }
-    },
-    "& .editor-blocker": {
-      display: "none"
-    },
-    "& .freegrid-item": {
-      position: "relative !important",
-      top: "0 !important",
-      gridArea: "var(--gridArea_xs) !important",
-      width: "calc(100% - 48px) !important",
-      height: "var(--height_xs) !important",
-      left: "24px !important",
-      marginTop: "var(--marginTop_xs) !important",
-      outline: "1px solid gray !important",
-      "&.type_text": {
-        height: "auto !important"
-      },
-      "&.type_image": {
-        width: "calc(--width_xs) !important",
-        height: "var(--height_xs) !important"
-      },
-      // "&.type_box": {
-      //   // display: "grid !important",
-      //   // gridTemplateRows: "repeat(auto-fill, 50px) !important",
-      //   // height: "min-content !important",
-      // },
-
-      "& .debug-info, & .editor-blocker": {
-        display: "none"
-      },
-      "& .embed": {
-        minHeight: "300px"
-      }
-    }
-  }
-});
-export default useVirtualElementStyles;
-export const useAutoAlignStyles = () => ({
-  root: {
-    width: "320px",
-    position: "fixed",
-    overflow: "visible",
-    opacity: 1,
-    right: 0,
-    top: 0,
-    height: "auto !important",
-    pointerEvents: "none",
-    visibility: "hidden",
-    "& .leaf-item": {
-      fontSize: "var(--fontSize_xs) !important",
-      "& span": {
-        fontSize: "var(--fontSize_xs) !important"
-      }
-    },
-    "& .editor-blocker": {
-      display: "none"
-    },
     "& .freegrid-item": {
       position: "relative !important",
-      top: "0 !important",
       gridArea: "none !important",
       width: "calc(100% - 48px) !important",
-      height: "var(--height_xs) !important",
+      height: "auto !important",
       left: "24px !important",
-      marginTop: "12px !important",
-      minHeight: "auto",
-      display: "inherit !important",
-      "&.type_box": {
-        height: "auto !important",
-        paddingBottom: "12px"
-      },
-      "&.type_image": {
-        width: "var(--width_xs) !important",
-        height: "var(--height_xs) !important"
-      },
-      "&.type_text": {
-        height: "auto !important"
-      },
-      // start - default signature classes on free-grid
-      "& .fgi_type_signature": {
-        height: "100%",
-        "& .signature-container": {
-          height: "100%",
-          LineHeight: 1.43,
-          "& .signature-btn-container": {
-            height: "100%",
-            display: "flex",
-            flexDirection: "column",
-            "& .sign-placeholder": {
-              display: "flex",
-              // remove hidden sign placeholder
-              width: "100%",
-              flexGrow: 1
-            },
-            "& button": {
-              margin: "6px 0px"
-            }
-          }
-        }
-      },
-      "& .fgi_type_sign": {
-        width: "100%",
-        height: "100%",
-        "& .signature-signed-wrapper": {
-          width: "100%",
-          height: "100%",
-          "& .signature-signed-span": {
-            width: "100%",
-            height: "100%",
-            "& .signed-btn": {
-              width: "100%",
-              height: "100%",
-              display: "flex",
-              flexDirection: "column",
-              "& img": {
-                width: "100% !important",
-                maxWidth: "none !important",
-                height: "70% !important",
-                flexGrow: 1
-              }
-            }
-          }
-        }
-      },
-      // end - default signature classes on free-grid
-
+      marginTop: "24px !important",
       "& .debug-info, & .editor-blocker": {
         display: "none"
       },
       "& .embed": {
         minHeight: "300px"
       }
-    },
-    "& .appHeaderBox, &.header-box-mobile-virtual-mode": {
-      width: "calc(100% - 12px) !important",
-      paddingBottom: "6px !important",
-      "& .fgi_type_box": {
-        display: "flex",
-        justifyContent: "space-evenly !important",
-        flexWrap: "wrap"
-      },
-      "& .freegrid-item": {
-        left: "4px !important",
-        marginLeft: "0px !important"
-      },
-      "& .type_text": {
-        width: "fit-content !important"
-      },
-      "& .type_appHeader": {
-        width: "40px !important"
-      },
-      "& .shadow-element": {
-        display: "none"
-      }
-    },
-    "&.header-box-mobile-virtual-mode": {
-      width: "320px !important",
-      display: "flex",
-      justifyContent: "space-evenly !important",
-      flexWrap: "wrap"
     }
   }
-});
+});
+export default useVirtualElementStyles;

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

@@ -1,5 +1,5 @@
 import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "", updateAll) => {
+const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
   try {
     // const { heightData } = groupData;
     for (let i = 0; i < datas.length; i++) {
@@ -14,11 +14,9 @@ const updateAutoProps = (editor, datas = [], breakpoint = "", updateAll) => {
         return a;
       }, {});
       const oldProps = Node.get(editor, int_path);
-      const updateNode = !oldProps?.xs_updatedOn || updateAll;
-      if (updateNode) {
+      if (!oldProps?.xs_updatedOn) {
         Transforms.setNodes(editor, {
-          ...updatedProps,
-          xs_updatedOn: new Date().getTime()
+          ...updatedProps
         }, {
           at: int_path
         });