@flozy/editor 10.1.5 → 10.1.6

package/dist/Editor/Editor.css

@@ -1391,6 +1391,10 @@ code.markcode {
   fill: #2563EB;
 }
 
+.themePaintIcon:hover .iconStroke {
+  stroke: #2563EB;
+}
+
 .hyperLink {
   word-break: break-all;
 }

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

@@ -21,6 +21,8 @@ import { FORM_NODE } from "../../utils/form";
 import { DEFAULT_TABLE_NODE } from "../../utils/table";
 import itemOptions from "./Options/sectionItemOptions";
 import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { useDebouncedCallback } from "use-debounce";
+import { getNewElementXsValues } from "./helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const MAX_DEVICE_WIDTH = {
@@ -79,6 +81,9 @@ const FreeGrid = props => {
   const count = useRef(2);
   const childrenCountRef = useRef(element?.children?.length);
   const [isInteracting, setIsInteracting] = useState(false);
+  const debouncedStopInteraction = useDebouncedCallback(() => {
+    setIsInteracting(false);
+  }, 500);
   const onChange = data => {
     const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const updateData = {
@@ -176,6 +181,10 @@ const FreeGrid = props => {
   const handleAddElementClick = type => () => {
     const isEmpty = isEmptySection();
     const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
+    const {
+      xsVal,
+      sectionHeightXs
+    } = getNewElementXsValues(type, element?.children);
     switch (type) {
       case "addText":
         Transforms.insertNodes(editor, [{
@@ -192,7 +201,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 30
+          height: 30,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -218,7 +228,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 143,
-          height: 50
+          height: 50,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -244,8 +255,9 @@ const FreeGrid = props => {
           top: 0,
           width: 217,
           height: 173,
-          width_xs: 217,
-          height_xs: 173
+          // width_xs: 217,
+          // height_xs: 173,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -268,7 +280,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 80
+          height: 80,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -281,7 +294,8 @@ const FreeGrid = props => {
             images: []
           }), {
             height: 370,
-            width: 650
+            width: 650,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -293,7 +307,8 @@ const FreeGrid = props => {
             ...DEFAULT_TABLE_NODE()
           }, {
             height: 150,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -317,7 +332,8 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 400,
-          height: 300
+          height: 300,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
@@ -329,7 +345,9 @@ const FreeGrid = props => {
             children: [{
               text: ""
             }]
-          }, {}, "freegridBox")
+          }, {
+            ...(xsVal || {})
+          }, "freegridBox")
         }], {
           at: [...insertAt]
         });
@@ -340,7 +358,8 @@ const FreeGrid = props => {
             ...FORM_NODE()
           }, {
             height: 92,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -354,7 +373,8 @@ const FreeGrid = props => {
             })
           }, {
             height: 60,
-            width: 400
+            width: 400,
+            ...(xsVal || {})
           })
         }], {
           at: [...insertAt]
@@ -375,19 +395,18 @@ const FreeGrid = props => {
           marginTop: 0,
           top: 0,
           width: 170,
-          height: 30
+          height: 30,
+          ...(xsVal || {})
         }], {
           at: [...insertAt]
         });
         break;
       default:
     }
-    if (breakpoint === "lg") {
+    if (xsVal) {
       setSelectedElement({});
-
-      // auto align in mobile
       Transforms.setNodes(editor, {
-        xs_updatedOn: null,
+        height_xs: sectionHeightXs,
         updated_at: new Date().getTime()
       }, {
         at: path
@@ -480,7 +499,11 @@ const FreeGrid = props => {
   return /*#__PURE__*/_jsx(FreeGridContext.Provider, {
     value: {
       isInteracting,
-      setIsInteracting
+      handleStart: () => {
+        setIsInteracting(true);
+        debouncedStopInteraction.cancel();
+      },
+      handleStop: debouncedStopInteraction
     },
     children: /*#__PURE__*/_jsx(RnD, {
       id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,

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

@@ -0,0 +1,113 @@
+import { ROW_HEIGHT } from "../../common/RnD/Utils/gridDropItem";
+import { getElementOffset } from "../../common/RnD/VirtualElement/VirtualTextElement";
+export const ELEMENT_CASE = {
+  ADD_TEXT: "addText",
+  ADD_BUTTON: "addButton",
+  ADD_SIGNATURE: "addSignature",
+  ADD_IMAGE: "addImage",
+  ADD_VIDEO: "addVideo",
+  ADD_TABLE: "addTable",
+  ADD_CODE: "addCode",
+  ADD_BOX: "addBox",
+  ADD_FORM: "addForm",
+  ADD_APP_HEADER: "addAppHeader",
+  ADD_DIVIDER: "addDivider"
+};
+const commonXsValues = {
+  top_xs: 0,
+  marginTop_xs: 12,
+  left_xs: 24,
+  width_xs: 272,
+  xs_updatedOn: new Date().getTime()
+};
+const elementXsValues = {
+  [ELEMENT_CASE.ADD_TEXT]: {
+    ...commonXsValues,
+    height_xs: 50
+  },
+  [ELEMENT_CASE.ADD_BUTTON]: {
+    ...commonXsValues,
+    height_xs: 50
+  },
+  [ELEMENT_CASE.ADD_SIGNATURE]: {
+    ...commonXsValues,
+    height_xs: 173
+  },
+  [ELEMENT_CASE.ADD_IMAGE]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_VIDEO]: {
+    ...commonXsValues,
+    height_xs: 300
+  },
+  [ELEMENT_CASE.ADD_TABLE]: {
+    ...commonXsValues,
+    height_xs: 165
+  },
+  [ELEMENT_CASE.ADD_CODE]: {
+    ...commonXsValues,
+    height: 300
+  },
+  [ELEMENT_CASE.ADD_BOX]: {
+    ...commonXsValues,
+    height_xs: 300
+  },
+  [ELEMENT_CASE.ADD_FORM]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_APP_HEADER]: {
+    ...commonXsValues,
+    height_xs: 80
+  },
+  [ELEMENT_CASE.ADD_DIVIDER]: {
+    ...commonXsValues,
+    height_xs: 24
+  }
+};
+export const findMaxYValue = sectionItems => {
+  let maxY = 0;
+  sectionItems.forEach(item => {
+    if (item?.type && item?.type !== "paragraph") {
+      const {
+        bottom
+      } = getElementOffset(item);
+      maxY = Math.max(maxY, bottom);
+    }
+  });
+  return maxY;
+};
+export const convertToGridArea = y => {
+  // 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`;
+  return {
+    gridArea,
+    marginTop
+  };
+};
+export const getNewElementXsValues = (type, sectionItems) => {
+  const values = elementXsValues[type] || {};
+  const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
+  const {
+    gridArea,
+    marginTop
+  } = convertToGridArea(y);
+  const BUFFER_MARGIN_TOP = 12;
+  const xsVal = {
+    ...values,
+    gridArea_xs: gridArea,
+    marginTop_xs: marginTop + BUFFER_MARGIN_TOP
+  };
+  const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
+  return {
+    xsVal,
+    sectionHeightXs
+  };
+};

package/dist/Editor/assets/svg/ThemeIcons.js

@@ -11,7 +11,7 @@ export const ThemePaintIcon = () => /*#__PURE__*/_jsxs("svg", {
     fill: "#64748B",
     stroke: "#64748B",
     strokeWidth: "0.5",
-    className: "iconBorder"
+    className: "iconBorder iconStroke"
   }), /*#__PURE__*/_jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",

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

@@ -2,6 +2,7 @@ import { Transforms, Node, Path, Editor } from "slate";
 import { ReactEditor } from "slate-react";
 import { getNode, handleNegativeInteger } from "../../../utils/helper";
 import { handleBoxAlignment } from "../VirtualElement/helper";
+import { convertToGridArea, findMaxYValue } from "../../../Elements/FreeGrid/helper";
 export const ROW_HEIGHT = 50;
 
 // const MARGIN_OF = {
@@ -22,18 +23,27 @@ export function updateRows() {}
 export function updateCols() {}
 const handleMoveNode = (editor, path, newPath, {
   isEmpty
-}, autoAlign) => {
+}, autoAlign, moveToNode) => {
   try {
     let replaceNode = Node.get(editor, path);
+    let heightDiff = 0;
     if (autoAlign) {
-      // reset node for auto alignment in mobile
+      const y = findMaxYValue(moveToNode?.children);
+      const {
+        gridArea,
+        marginTop
+      } = convertToGridArea(y);
       replaceNode = {
         ...replaceNode,
-        gridArea_xs: null,
-        xs_updatedOn: null,
-        marginTop_xs: null
+        gridArea_xs: gridArea,
+        marginTop_xs: marginTop + 12,
+        xs_updatedOn: new Date().getTime()
       };
+      const newHeight = y + replaceNode?.height_xs + 12;
+      const diffH = newHeight - moveToNode?.height_xs;
+      heightDiff = diffH >= 0 ? diffH : 0;
     }
+    let rPath;
     if (isEmpty) {
       const toPath = [...newPath, 0];
       Transforms.insertNodes(editor, [{
@@ -44,7 +54,7 @@ const handleMoveNode = (editor, path, newPath, {
       Transforms.removeNodes(editor, {
         at: path
       });
-      return toPath;
+      rPath = toPath;
     } else {
       Transforms.insertNodes(editor, [{
         ...replaceNode
@@ -54,8 +64,12 @@ const handleMoveNode = (editor, path, newPath, {
       Transforms.removeNodes(editor, {
         at: path
       });
-      return newPath;
+      rPath = newPath;
     }
+    return {
+      rPath,
+      heightDiff
+    };
   } catch (err) {
     console.log(err);
     console.log("Drop Node error");
@@ -210,7 +224,7 @@ export function onDropItem(props, parentClass) {
       at: moveTo,
       match: n => n.type === "freegrid"
     });
-    const [sectionNode, sectionPath] = sectionData || [];
+    const [, sectionPath] = sectionData || [];
     if (needMove && isInsidePath(from, moveTo)) {
       reRenderSectionPath = sectionPath;
     } else {
@@ -229,13 +243,6 @@ export function onDropItem(props, parentClass) {
       const isBoxHeader = currentNode?.childType === "appHeader" && moveTo?.length > 2;
       if (isBoxHeader) {
         // will handle on <BoxHeaderAutoAlignment />
-      } else if (moveTo?.length === 2 && autoAlign) {
-        // auto align in mobile
-        Transforms.setNodes(editor, {
-          xs_updatedOn: null
-        }, {
-          at: moveTo
-        });
       } else if (autoAlign) {
         Transforms.setNodes(editor, {
           autoAlign: true,
@@ -244,12 +251,15 @@ export function onDropItem(props, parentClass) {
           at: moveTo
         });
       }
-      const rPath = handleMoveNode(editor, path, newPath, {
+      const {
+        rPath,
+        heightDiff
+      } = handleMoveNode(editor, path, newPath, {
         isEmpty
-      }, autoAlign);
+      }, autoAlign, toSectionNode) || {};
       reRenderChildNodes(editor, reRenderSectionPath || moveTo);
       if (autoAlign && !isBoxHeader) {
-        handleBoxAlignment(editor, sectionNode, sectionPath);
+        handleBoxAlignment(editor, sectionPath, heightDiff);
       }
       return {
         updated_at: rPath

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

@@ -87,7 +87,9 @@ export function updatePositions(props, closestClass) {
         newPath = [...newPath, toSectionNode?.children?.length];
       }
       newPath = newPath.map(m => parseInt(m));
-      const rPath = handleMoveNode(editor, path, newPath, {
+      const {
+        rPath
+      } = handleMoveNode(editor, path, newPath, {
         isEmpty
       });
       // to update path index need to re-render items in parent sections

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

@@ -1,71 +1,57 @@
 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 { getGridArea, handleTextAlignment } from "./helper";
 import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+export const getElementOffset = element => {
+  const {
+    marginTop_xs: marginTop,
+    gridArea_xs: gridArea,
+    height_xs: height
+  } = element;
+  const [startRow] = getGridArea(gridArea);
+  const top = (startRow - 1) * ROW_HEIGHT + marginTop;
+  const bottom = top + height;
+  return {
+    top,
+    bottom
+  };
+};
 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) {
+  const textItem = getNode(editor, path);
+  if (!textItem) {
     return;
   }
-  const textItemIndex = path[parentPath.length];
-  const textItem = gridItems.find((_, index) => textItemIndex === index);
   const {
-    marginTop_xs: marginTop,
-    gridArea_xs: gridArea,
-    height_xs
+    height_xs,
+    gridArea_xs,
+    type
   } = 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
-    });
+  if (!gridArea_xs && type !== "paragraph") {
+    return;
   }
+  const oldHeight = height_xs;
+  const newHeight = height;
+  const heightDiff = newHeight - oldHeight;
+  if (heightDiff !== 0) {
+    const textNode = [textItem, path];
+    handleTextAlignment(editor, textNode, heightDiff);
+  }
+  // else if (heightDiff < 0) {
+  //   Transforms.setNodes(
+  //     editor,
+  //     {
+  //       height_xs: newHeight,
+  //     },
+  //     { at: path }
+  //   );
+  // }
 };
+
 function VirtualTextElement(props) {
   const {
     dataSets,
@@ -75,7 +61,6 @@ function VirtualTextElement(props) {
   } = props;
   const currElement = getCurrentEle();
   const textRef = useRef(null);
-  const prevTextRef = useRef(currElement?.innerText);
   useEffect(() => {
     const observer = new ResizeObserver(([entry]) => {
       if (entry) {
@@ -83,11 +68,9 @@ function VirtualTextElement(props) {
           height
         } = entry.contentRect;
         const currentText = currElement?.innerText;
-        const prevText = prevTextRef.current;
-        if (currentText && currentText !== prevText) {
+        if (currentText && height) {
           updateTextHeight(editor, path, height);
         }
-        prevTextRef.current = currentText;
       }
     });
     const elementRef = textRef?.current;
@@ -122,6 +105,14 @@ function VirtualTextElement(props) {
       },
       "& .editor-blocker": {
         display: "none"
+      },
+      "& .fgi_type_text": {
+        "& .edt-headings": {
+          margin: "0px"
+        },
+        "& .edt-paragraphs": {
+          margin: "0px"
+        }
       }
     },
     dangerouslySetInnerHTML: {

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

@@ -1,5 +1,6 @@
 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;
 };
@@ -39,106 +40,83 @@ export const getGridArea = gridArea => {
 const getBoxToAutoAlign = (editor, sectionPath) => {
   const [boxData] = Editor.nodes(editor, {
     at: sectionPath,
-    match: node => node.type === "freegridBox" && node.autoAlign
+    match: node => ["freegridBox", "freegrid"].includes(node.type) && 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 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 getAncestorFreeGridContainers = (editor, path) => {
   const containers = [...Editor.nodes(editor, {
     at: path,
@@ -151,6 +129,12 @@ 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;
@@ -213,6 +197,7 @@ 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 {
@@ -235,7 +220,61 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
     }
   });
 };
-export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
+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) => {
   const [boxNode, boxPath] = getBoxToAutoAlign(editor, sectionPath);
   Transforms.setNodes(editor, {
     autoAlign: false
@@ -245,39 +284,11 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
   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
-      });
-    });
+  if (heightDiff <= 0) {
+    return;
   }
+  let containers = getAncestorFreeGridContainers(editor, boxPath);
+  handleContainersAlignment(editor, containers, heightDiff, 12);
 };
 export const getMarginTop = y => {
   const calcMargin = y % ROW_HEIGHT;

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

@@ -18,6 +18,14 @@ 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",
@@ -97,6 +105,14 @@ 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";
@@ -125,7 +125,8 @@ const RnD = props => {
   } = useAutoScroll(10, "slate-wrapper-scroll-container");
   const {
     isInteracting,
-    setIsInteracting
+    handleStart,
+    handleStop
   } = useFreeGrid();
   const {
     translation
@@ -323,7 +324,7 @@ const RnD = props => {
   };
   const onDragStart = e => {
     e.preventDefault();
-    setIsInteracting(true);
+    handleStart();
     if (e?.target?.dataset?.path?.split(",").join("|") === sp) {
       const {
         left,
@@ -425,7 +426,7 @@ const RnD = props => {
     e.preventDefault();
     e.stopPropagation();
     stopAutoScroll();
-    setIsInteracting(false);
+    handleStop();
     if (dragging?.isDragging === 2 && dragging?.position?.strXY && dragging?.dragOver) {
       d.x = e.x;
       d.y = e.y;
@@ -468,7 +469,7 @@ const RnD = props => {
   };
   const onResizeStop = (e, direction, ref, d, position) => {
     e.preventDefault();
-    setIsInteracting(false);
+    handleStop();
     let updatedPosition = {};
     if (type !== "parent") {
       // update element position while resizing, (for free grid box and item)
@@ -498,7 +499,9 @@ const RnD = props => {
       ref
     }, ".freegrid-container-parent");
     const formatParentPath = parentPath?.split("|")?.map(m => parseInt(m));
-    reRenderChildNodes(editor, formatParentPath);
+    if (formatParentPath) {
+      reRenderChildNodes(editor, formatParentPath);
+    }
   };
   const onCloseSettings = () => {
     setSelectedElement({
@@ -557,7 +560,7 @@ const RnD = props => {
       return {
         onResizeStart: e => {
           e.preventDefault();
-          setIsInteracting(true);
+          handleStart();
         },
         onDragStart: onDragStart,
         onDrag: onDrag,
@@ -680,14 +683,7 @@ const RnD = props => {
       handleClose: handleClose,
       theme: theme,
       translation: translation
-    }), 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, {
+    }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
       editor: editor,
       dataSets: dataSets,
       getCurrentEle: getCurrentEle,

package/dist/Editor/helper/theme.js

@@ -182,7 +182,7 @@ export function getElementProperty(element, styleProperty) {
 
   return style || "";
 }
-export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic"
+export const textThemeFields = ["fontFamily", "fontSize", "color", "bold", "italic", "fontWeight"
 // "underline",
 // "strikethrough",
 ];

package/dist/Editor/themeSettings/ActiveTheme.js

@@ -25,20 +25,30 @@ function ActiveTheme(props) {
       variant: "body1",
       className: "title activeThemeTitle",
       children: id ? "Active Theme" : "No theme activated"
-    }), /*#__PURE__*/_jsxs(Grid, {
+    }), /*#__PURE__*/_jsx(Grid, {
       className: "flexAlign",
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: "body1",
-        className: "fs-14",
-        children: name
-      }), /*#__PURE__*/_jsxs(Typography, {
+      children: id ? /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "body1",
+          className: "fs-14 flexItem",
+          title: name,
+          children: name
+        }), /*#__PURE__*/_jsxs(Typography, {
+          variant: "body2",
+          className: "fs-12 textSecondary flexItem",
+          style: {
+            marginLeft: id ? "4px" : "0px"
+          },
+          children: ["- ", mood_name]
+        })]
+      }) : /*#__PURE__*/_jsx(Typography, {
         variant: "body2",
         className: "fs-12 textSecondary",
         style: {
           marginLeft: id ? "4px" : "0px"
         },
-        children: [id ? ` - ` : null, id ? mood_name : "Select 'Explore More' to activate a theme and customize your design."]
-      })]
+        children: `Select 'Explore More' to activate a theme and customize your design.`
+      })
     }), /*#__PURE__*/_jsxs(Grid, {
       container: true,
       justifyContent: "space-between",

package/dist/Editor/themeSettings/buttons/index.js

@@ -84,16 +84,17 @@ function getBtnSxProps(buttonStyle = {}, theme) {
   let newStyle = {
     ...buttonStyle
   };
-  if (newStyle?.bannerSpacing) {
-    newStyle.padding = newStyle?.bannerSpacing;
-  }
+  // if (newStyle?.bannerSpacing) {
+  //   newStyle.padding = newStyle?.bannerSpacing;
+  // }
+
   const btnSp = groupByBreakpoint({
     borderRadius: {
       ...getBreakPointsValue(newStyle?.borderRadius || {}, null, "overrideBorderRadius", true)
-    },
-    padding: {
-      ...getTRBLBreakPoints(newStyle?.bannerSpacing)
     }
+    // padding: {
+    //   ...getTRBLBreakPoints(newStyle?.bannerSpacing),
+    // },
   }, theme);
   newStyle = {
     ...newStyle,
@@ -232,19 +233,26 @@ const Buttons = props => {
           onClick: e => setAnchorEl(e.currentTarget),
           children: [/*#__PURE__*/_jsxs(Grid, {
             item: true,
-            size: 12,
+            size: 8,
             children: [/*#__PURE__*/_jsx(Typography, {
               variant: "body1",
               className: "fw-600 fs-14",
+              style: {
+                marginBottom: "10px"
+              },
               children: "Theme Button"
             }), /*#__PURE__*/_jsx(Button, {
               sx: getBtnSxProps(button, theme),
               ref: buttonEl,
               children: "Button"
             })]
-          }), /*#__PURE__*/_jsx(IconButton, {
-            className: "editIcon",
-            children: /*#__PURE__*/_jsx(PenIcon, {})
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            size: 4,
+            children: /*#__PURE__*/_jsx(IconButton, {
+              className: "editIcon",
+              children: /*#__PURE__*/_jsx(PenIcon, {})
+            })
           })]
         })
       })]

package/dist/Editor/themeSettings/colorTheme/index.js

@@ -135,6 +135,7 @@ const ColorTheme = props => {
                     style: {
                       color: textColor
                     },
+                    title: color,
                     children: color
                   })]
                 })

package/dist/Editor/themeSettings/colorTheme/style.js

@@ -1,9 +1,9 @@
 const Style = () => ({
   ".primaryColorBoxes": {
     ".pmBox": {
-      border: "1px solid #D1D1D1",
+      border: "1.5px solid #D1D1D1",
       height: "65px",
-      borderRadius: "4px",
+      borderRadius: "6px",
       position: "relative",
       flexShrink: 0,
       "&:hover": {
@@ -17,9 +17,9 @@ const Style = () => ({
   ".secondaryColorBoxes": {
     gap: "10px",
     ".sdBox": {
-      border: "1px solid #D1D1D1",
+      border: "1.5px solid #D1D1D1",
       height: "60px",
-      borderRadius: "4px",
+      borderRadius: "6px",
       width: "100%",
       flexShrink: 0,
       position: "relative",

package/dist/Editor/themeSettings/style.js

@@ -117,6 +117,12 @@ const Style = ({
       display: "flex",
       alignItems: "center"
     },
+    ".flexItem": {
+      maxWidth: "50%",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
     ".activeColorBox, .xsColorBox": {
       width: "24px",
       height: "24px",
@@ -135,7 +141,7 @@ const Style = ({
       alignItems: "center"
     },
     ".themeCardWrapper": {
-      padding: "6px 10px",
+      padding: "6px 14px",
       cursor: "pointer",
       "&.active": {
         background: "#ECF2FF"
@@ -166,8 +172,8 @@ const Style = ({
       borderBottom: `1px solid ${deviderBgColor}`,
       fontWeight: "600",
       fontSize: "14px",
-      padding: "10px 0px",
-      width: "calc(100% - 20px)",
+      padding: "14px 0px",
+      width: "calc(100% - 30px)",
       margin: "auto",
       gap: "8px"
     },
@@ -202,8 +208,8 @@ const Style = ({
       marginTop: "10px",
       marginBottom: "10px",
       padding: "0px 12px",
-      "&.Mui-expanded": {
-        border: `1px solid #2563EB`,
+      "&&.Mui-expanded": {
+        border: `1.5px solid #2563EB`,
         boxShadow: "1px 2px 14px 0px #2563EB47",
         "& .MuiAccordionSummary-expandIconWrapper": {
           color: "#2563EB !important"
@@ -262,6 +268,7 @@ const Style = ({
         padding: "4px 20px",
         height: "fit-content",
         minWidth: "90px",
+        lineHeight: "1.75 !important",
         "@media only screen and (max-width: 899px)": {
           width: "50%"
         },

package/dist/Editor/themeSettingsAI/style.js

@@ -60,8 +60,15 @@ const style = ({
   },
   ".flexAlign": {
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    flexWrap: "wrap"
   },
+  ".flexItem": {
+    maxWidth: "50%",
+    flex: "1 1 50%" /* allow shrink and grow but cap at 50% */,
+    minWidth: 0 /* important for flex children */
+  },
+
   ".activeColorBox, .xsColorBox": {
     width: "24px",
     height: "24px",
@@ -305,6 +312,7 @@ const style = ({
       padding: "4px 20px",
       height: "fit-content",
       minWidth: "90px",
+      lineHeight: "1.75 !important",
       "@media only screen and (max-width: 899px)": {
         width: "50%"
       },

package/package.json

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