@flozy/editor 10.2.3 → 10.2.5

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

@@ -1,6 +1,5 @@
 import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
 import { Transforms, Editor } from "slate";
-import { getElementOffset } from "./VirtualTextElement";
 const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
   return width <= 40 && itemStartRow === startRow;
 };
@@ -40,83 +39,106 @@ export const getGridArea = gridArea => {
 const getBoxToAutoAlign = (editor, sectionPath) => {
   const [boxData] = Editor.nodes(editor, {
     at: sectionPath,
-    match: node => ["freegridBox", "freegrid"].includes(node.type) && node.autoAlign
+    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;
 
-// 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,
-//   };
-// };
-
+  //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,
@@ -129,12 +151,6 @@ const getAncestorFreeGridContainers = (editor, path) => {
   })].filter(([node, nodePath]) => nodePath.length <= path.length);
   return containers;
 };
-export const handleTextAlignment = (editor, textNode, heightDiff) => {
-  const [, textPath] = textNode;
-  let containers = getAncestorFreeGridContainers(editor, textPath);
-  containers = [...containers, textNode];
-  handleContainersAlignment(editor, containers, heightDiff, 0);
-};
 export const handleContainers = (editor, boxPath, extraHeight) => {
   const containers = getAncestorFreeGridContainers(editor, boxPath);
   let lastChildStartRow;
@@ -197,7 +213,6 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
       return;
     }
     if (gridItem.type === "paragraph") {
-      // some empty paragraph node is inserted default'ly inside box, to avoid that
       return;
     }
     const {
@@ -220,61 +235,7 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
     }
   });
 };
-export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
-  for (let i = containers.length - 1; i >= 0; i--) {
-    const container = containers[i];
-    const childContainer = containers[i + 1];
-    const [containerNode, containerPath] = container;
-    const [childContainerNode, childContainerPath] = childContainer || [];
-    if (childContainer) {
-      const {
-        bottom
-      } = getElementOffset(childContainerNode);
-      containerNode.children.forEach((item, index) => {
-        const currPath = [...containerPath, index];
-        if (currPath.toString() === childContainerPath.toString()) {
-          return;
-        }
-        if (item.type === "paragraph") {
-          return;
-        }
-        const {
-          top: itemTop
-        } = getElementOffset(item);
-        if (itemTop >= bottom) {
-          const {
-            gridArea_xs,
-            marginTop_xs
-          } = item;
-          const [startRow] = getGridArea(gridArea_xs);
-          const y = (startRow - 1) * ROW_HEIGHT + marginTop_xs + heightDiff;
-
-          // Calculate grid position
-          const row = Math.floor(y / ROW_HEIGHT) + 1;
-
-          // to calculate difference inside the grid
-          const marginTop = Math.abs((row - 1) * ROW_HEIGHT - y);
-
-          // Update grid area
-          const gridArea = `${row} / 1 / ${row + 1} / 2`;
-          Transforms.setNodes(editor, {
-            gridArea_xs: gridArea,
-            marginTop_xs: marginTop + bufferSpace
-          }, {
-            at: currPath
-          });
-        }
-      });
-    }
-    Transforms.setNodes(editor, {
-      height_xs: containerNode?.height_xs + heightDiff + bufferSpace,
-      xs_updatedOn: new Date().getTime()
-    }, {
-      at: containerPath
-    });
-  }
-};
-export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
+export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
   const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
   Transforms.setNodes(editor, {
     autoAlign: false
@@ -284,11 +245,39 @@ export const handleBoxAlignment = (editor, sectionPath, heightDiff) => {
   if (!boxNode) {
     return;
   }
-  if (heightDiff <= 0) {
-    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
+      });
+    });
   }
-  let containers = getAncestorFreeGridContainers(editor, boxPath);
-  handleContainersAlignment(editor, containers, heightDiff, 12);
 };
 export const getMarginTop = y => {
   const calcMargin = y % ROW_HEIGHT;
@@ -306,7 +295,7 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
   const itemsData = [];
   const items = dom.querySelectorAll(domClass);
   const nextItemPathLength = curPath?.split("|").length + 2;
-  // let sectionHeight = 12;
+  let sectionHeight = 12;
   for (let i = 0; i < items.length; i++) {
     const itemRect = items[i]?.getBoundingClientRect();
     if (items[i]?.classList.contains("type_box")) {
@@ -326,10 +315,9 @@ export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBox
           gridArea: calculateGridArea(y)
         }
       });
-      // sectionHeight += itemRect?.height;
+      sectionHeight += itemRect?.height;
     }
   }
-
   if (dom?.classList.contains("type_box") && parentDom) {
     const parentDomRect = parentDom?.getBoundingClientRect();
     const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");

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

@@ -18,14 +18,6 @@ const useVirtualElementStyles = () => ({
     "& .editor-blocker": {
       display: "none"
     },
-    "& .fgi_type_text": {
-      "& .edt-headings": {
-        margin: "0px"
-      },
-      "& .edt-paragraphs": {
-        margin: "0px"
-      }
-    },
     "& .freegrid-item": {
       position: "relative !important",
       top: "0 !important",
@@ -105,14 +97,6 @@ export const useAutoAlignStyles = () => ({
       "&.type_text": {
         height: "auto !important"
       },
-      "& .fgi_type_text": {
-        "& .edt-headings": {
-          margin: "0px"
-        },
-        "& .edt-paragraphs": {
-          margin: "0px"
-        }
-      },
       // start - default signature classes on free-grid
       "& .fgi_type_signature": {
         height: "100%",

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

@@ -12,7 +12,7 @@ import GuideLines from "./GuideLines";
 import ShadowElement from "./ShadowElement";
 import BoundaryLine from "./GuideLines/BoundaryLine";
 import ContextMenu from "./ContextMenu";
-// import VirtualElement from "./VirtualElement";
+import VirtualElement from "./VirtualElement";
 import { ItemTypes } from "./ElementSettings/settingsConstants";
 import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
@@ -127,7 +127,7 @@ const RnD = props => {
     isInteracting,
     handleStart,
     handleStop
-  } = useFreeGrid();
+  } = useFreeGrid() || {};
   const {
     translation
   } = customProps;
@@ -499,9 +499,7 @@ const RnD = props => {
       ref
     }, ".freegrid-container-parent");
     const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
-    if (formatParentPath) {
-      reRenderChildNodes(editor, formatParentPath);
-    }
+    reRenderChildNodes(editor, formatParentPath);
   };
   const onCloseSettings = () => {
     setSelectedElement({
@@ -683,7 +681,14 @@ const RnD = props => {
       handleClose: handleClose,
       theme: theme,
       translation: translation
-    }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
+    }), type === "parent" && breakpoint === "lg" && !readOnly ? /*#__PURE__*/_jsx(VirtualElement, {
+      updated_at: updated_at,
+      path: str_path,
+      editor: editor,
+      sectionElement: sectionElement,
+      sectionCls: `.freegrid-section_${path.join("_")}`,
+      dataSets: dataSets
+    }) : null, childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
       editor: editor,
       dataSets: dataSets,
       getCurrentEle: getCurrentEle,

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

@@ -1,7 +1,6 @@
 import { Select as Core } from "@mui/material";
 import SelectStyles from "./styles";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
 import { jsx as _jsx } from "react/jsx-runtime";
 function Select(props) {
   const {
@@ -14,7 +13,6 @@ function Select(props) {
   const classes = SelectStyles(theme);
   return /*#__PURE__*/_jsx(Core, {
     MenuProps: classes.MenuProps,
-    IconComponent: KeyboardArrowDownRoundedIcon,
     ...rest,
     children: children
   });

package/dist/Editor/common/Shorthands/elements.js

@@ -18,17 +18,6 @@ import SearchButton from "../../Elements/Search/SearchButton";
 import canOpen from "../../helper/canOpen";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ELEMENTS_LIST = [{
-  name: "Ask AI to write anything",
-  group: "Infinity AI",
-  desc: "",
-  type: "infinityAI",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "infinityIcon"
-  }),
-  onInsert: editor => {
-    insertInfinityAI(editor);
-  }
-}, {
   name: "Heading 1",
   desc: "",
   group: "Text",
@@ -55,60 +44,6 @@ const ELEMENTS_LIST = [{
     icon: "headingThree"
   }),
   onInsert: editor => toggleBlock(editor, "headingThree", false)
-}, {
-  name: "Heading 4",
-  desc: "",
-  group: "Text",
-  type: "headingFour",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFour"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFour", false)
-}, {
-  name: "Heading 5",
-  desc: "",
-  group: "Text",
-  type: "headingFive",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingFive"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingFive", false)
-}, {
-  name: "Heading 6",
-  desc: "",
-  group: "Text",
-  type: "headingSix",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "headingSix"
-  }),
-  onInsert: editor => toggleBlock(editor, "headingSix", false)
-}, {
-  name: "Paragraph 1",
-  desc: "",
-  group: "Text",
-  type: "paragraphOne",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphOne"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphOne", false)
-}, {
-  name: "Paragraph 2",
-  desc: "",
-  group: "Text",
-  type: "paragraphTwo",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphTwo"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphTwo", false)
-}, {
-  name: "Paragraph 3",
-  desc: "",
-  group: "Text",
-  type: "paragraphThree",
-  icon: /*#__PURE__*/_jsx(Icon, {
-    icon: "paragraphThree"
-  }),
-  onInsert: editor => toggleBlock(editor, "paragraphThree", false)
 }, {
   name: "Quote",
   desc: "",
@@ -341,6 +276,17 @@ const ELEMENTS_LIST = [{
   onInsert: editor => {
     insertForm(editor);
   }
+}, {
+  name: "Ask AI to write anything",
+  group: "Infinity AI",
+  desc: "",
+  type: "infinityAI",
+  icon: /*#__PURE__*/_jsx(Icon, {
+    icon: "infinityIcon"
+  }),
+  onInsert: editor => {
+    insertInfinityAI(editor);
+  }
 }, {
   name: "Dynamic Table",
   group: "Dynamic Table",

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

@@ -21,8 +21,7 @@ const buttonStyle = [{
         },
         children: option.text
       });
-    },
-    themeEnabled: true
+    }
   }, {
     label: "Font Size",
     key: "textSize",
@@ -46,8 +45,7 @@ const buttonStyle = [{
   }, {
     label: "Button Color",
     key: "bgColor",
-    type: "color",
-    themeEnabled: true
+    type: "color"
   }, {
     label: "Border Color",
     key: "borderColor",

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -76,11 +76,6 @@ const BackgroundImage = props => {
             children: translation("REMOVE")
           }) : /*#__PURE__*/_jsx(Grid, {
             className: "uploadImageText",
-            sx: {
-              padding: 0,
-              background: `${theme?.palette?.editor?.inputFieldBgColor}`,
-              border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
-            },
             children: /*#__PURE__*/_jsxs(Button, {
               component: "label",
               variant: "text",

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -3,13 +3,13 @@ import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box, IconButton }
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
 const BannerSpacing = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
@@ -23,17 +23,7 @@ const BannerSpacing = props => {
     key
   } = data;
   const lockKeyVal = `lock${key}`;
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    bannerSpacing,
-    lockbannerSpacing
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedSpacing = typeof elementProps[lockKeyVal] === "boolean";
-  const val = isUserValue ? props?.value : bannerSpacing;
-  let lockSpacing = isUserLockedSpacing ? elementProps[lockKeyVal] : lockbannerSpacing;
+  let lockSpacing = elementProps[lockKeyVal];
   if (lockSpacing === undefined) {
     lockSpacing = true;
   }

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -3,13 +3,13 @@ import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton }
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
-import { useEditorTheme } from "../../../hooks/useEditorTheme";
 import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
 const BorderRadius = props => {
   const {
+    value: val,
     data,
     onChange,
     elementProps,
@@ -19,24 +19,16 @@ const BorderRadius = props => {
   const {
     translation
   } = customProps;
+  let {
+    lockRadius
+  } = elementProps;
+  if (lockRadius === undefined) {
+    lockRadius = true;
+  }
   const {
     key
   } = data;
   const [size] = useWindowResize();
-  const {
-    selectedTheme
-  } = useEditorTheme();
-  const {
-    borderRadius,
-    lockRadius: themeLockRadius
-  } = selectedTheme?.elementProps?.button || {};
-  const isUserValue = Object.keys(props?.value || {})?.length;
-  const isUserLockedRadius = typeof elementProps?.lockRadius === "boolean";
-  const val = isUserValue ? props?.value : borderRadius;
-  let lockRadius = isUserLockedRadius ? elementProps?.lockRadius : themeLockRadius;
-  if (lockRadius === undefined) {
-    lockRadius = true;
-  }
   const value = getBreakPointsValue(val, size?.device);
   const handleChange = e => {
     let changeAll = {};