@flozy/editor 4.2.0 → 4.2.1

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -449,7 +449,8 @@ const FreeGrid = props => {
         props: {
           editor,
           path,
-          classes
+          classes,
+          customProps
         }
       }
     },
@@ -471,7 +472,7 @@ const FreeGrid = props => {
         "--cols": `100%`,
         "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`,
         background: sectionBgColor,
-        backgroundImage: `url('${sectionBackgroundImage}')`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         backgroundSize: "cover"
       },
       children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -200,10 +200,11 @@ const FreeGridBox = props => {
           ...getBreakPointsValue(sectionBorderRadius || {}, null, "overrideBorderRadius", true)
         },
         background: sectionBgColor,
-        backgroundImage: `url(${sectionBackgroundImage})`,
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
-        borderStyle: borderStyle || "solid"
+        borderStyle: borderStyle || "solid",
+        backgroundSize: "cover"
       },
       children: children
     })

package/dist/Editor/Elements/FreeGrid/Options/AddElement.js

@@ -1,51 +1,65 @@
 import React from "react";
-import { Box, List, ListItemButton } from "@mui/material";
+import { Box, List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+const FREE_GRID_ELEMENTS = [{
+  actionType: "addText",
+  label: "Text",
+  icon: "text"
+}, {
+  actionType: "addButton",
+  label: "Button",
+  icon: "button"
+}, {
+  actionType: "addImage",
+  label: "Image",
+  icon: "image"
+}, {
+  actionType: "addVideo",
+  label: "Embed or Video",
+  icon: "embed"
+}, {
+  actionType: "addBox",
+  label: "Box",
+  icon: "colorbox"
+}, {
+  actionType: "addTable",
+  label: "Table",
+  icon: "table"
+}, {
+  actionType: "addCode",
+  label: "Code",
+  icon: "embedScript"
+}, {
+  actionType: "addForm",
+  label: "Form",
+  icon: "form"
+}, {
+  actionType: "addAppHeader",
+  label: "App Header",
+  icon: "appHeader"
+}];
 const AddElement = props => {
   const {
     handleClick
   } = props;
   return /*#__PURE__*/_jsx(Box, {
-    children: /*#__PURE__*/_jsxs(List, {
+    children: /*#__PURE__*/_jsx(List, {
       className: "item-list-wrpr",
-      children: [/*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addText"),
-        children: "Text"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addButton"),
-        children: "Button"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addImage"),
-        children: "Image"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addVideo"),
-        children: "Embed or Video"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addTable"),
-        children: "Table"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addCode"),
-        children: "Code"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addBox"),
-        children: "Box"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addForm"),
-        children: "Form"
-      }), /*#__PURE__*/_jsx(ListItemButton, {
-        className: "item-wrapper",
-        onClick: handleClick("addAppHeader"),
-        children: "App Header"
-      })]
+      children: FREE_GRID_ELEMENTS.map(m => {
+        return /*#__PURE__*/_jsxs(ListItemButton, {
+          className: "item-wrapper",
+          onClick: handleClick(m.actionType),
+          children: [/*#__PURE__*/_jsx(ListItemIcon, {
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: m.icon
+            })
+          }), /*#__PURE__*/_jsx(ListItemText, {
+            children: m.label
+          })]
+        }, m.actionType);
+      })
     })
   });
 };

package/dist/Editor/Elements/FreeGrid/Options/SectionSettings.js

@@ -8,7 +8,8 @@ const SectionSettings = props => {
   const {
     editor,
     path,
-    classes
+    classes,
+    customProps
   } = props;
   const element = Node.get(editor, path);
   const styleMaps = sectionStyle?.filter(f => !f?.hideOnFGS);
@@ -38,7 +39,7 @@ const SectionSettings = props => {
         value: m.value,
         element: element,
         onChange: onChange,
-        customProps: {},
+        customProps: customProps,
         handleClose: handleClose
       }, `tab_${m.value}_$${i}`);
     })

package/dist/Editor/Styles/EditorStyles.js

@@ -289,6 +289,7 @@ const editorStyles = ({
   fullScreenWrapper: {
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
+      paddingTop: '20px',
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

package/dist/Editor/common/RnD/OptionsPopup/style.js

@@ -25,8 +25,11 @@ const useOptionsPopupStyle = () => ({
       }
     },
     "& .item-wrapper": {
-      padding: "12px",
+      padding: "8px",
       fontFamily: "sans-serif",
+      "& .MuiListItemIcon-root": {
+        minWidth: "30px"
+      },
       "&.title": {
         display: "flex",
         fontWeight: "bold",

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

@@ -5,6 +5,64 @@ import updateAutoProps from "./updateAutoProps";
 import { calculateGridArea } from "../Utils/gridDropItem";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
+
+// Function to group items by path and calculate heights
+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;
+    });
+  });
+
+  // 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);
+    });
+
+    // 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;
+  };
+
+  // Start calculation from the root
+  Object.values(root).forEach(node => calculateHeight(node));
+  return {
+    root,
+    heightData
+  };
+}
 const VirtualElement = props => {
   const classes = useVirtualElementStyles();
   const {
@@ -19,9 +77,10 @@ const VirtualElement = props => {
     if (virtualRef?.current) {
       setTimeout(() => {
         const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+        const groupData = groupByPathAndCalculateHeight(allData);
         // it should trigger by auto alignment or on clicking mobile view change
-        updateAutoProps(editor, allData, "xs");
-      }, 0);
+        updateAutoProps(editor, allData, "xs", groupData);
+      }, 100);
     }
   }, [updated_at, virtualRef?.current]);
   const calculateProps = (curPath, dom, domClass, allData) => {
@@ -35,11 +94,12 @@ const VirtualElement = props => {
     };
     const itemsData = [];
     const items = dom.querySelectorAll(domClass);
-    let sectionHeight = 0;
+    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", allData);
+        allData = calculateProps(items[i]?.dataset.path, items[i], `.freegrid-item.path-${nextItemPathLength}`, allData);
       } else {
         const y = Math.abs(rect.top - itemRect?.top);
         itemsData.push({

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

@@ -10,6 +10,7 @@ const useVirtualElementStyles = () => ({
     right: 0,
     top: 0,
     "& .freegrid-item": {
+      position: "relative !important",
       gridArea: "none !important",
       width: "calc(100% - 48px) !important",
       height: "auto !important",

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

@@ -1,6 +1,7 @@
 import { Node, Transforms } from "slate";
-const updateAutoProps = (editor, datas = [], breakpoint = "") => {
+const updateAutoProps = (editor, datas = [], breakpoint = "", groupData) => {
   try {
+    // const { heightData } = groupData;
     for (let i = 0; i < datas.length; i++) {
       const {
         path,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.2.0",
+  "version": "4.2.1",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"