@flozy/editor 10.2.8 → 10.3.0

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

@@ -66,13 +66,13 @@ const elementXsValues = {
     height_xs: 24
   }
 };
-export const findMaxYValue = sectionItems => {
+export const findMaxYValue = (sectionItems, breakpoint) => {
   let maxY = 0;
   sectionItems.forEach(item => {
     if (item?.type && item?.type !== "paragraph") {
       const {
         bottom
-      } = getElementOffset(item);
+      } = getElementOffset(item, breakpoint === "lg" ? "lg" : "xs");
       maxY = Math.max(maxY, bottom);
     }
   });

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

@@ -1,15 +1,15 @@
 import { useEffect, useRef } from "react";
 import { getNode } from "../../../utils/helper";
 import { ROW_HEIGHT } from "../Utils/gridDropItem";
-import { getGridArea, handleTextAlignment } from "./helper";
+import { getGridArea, getNodeValues, handleTextAlignment } from "./helper";
 import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const getElementOffset = element => {
+export const getElementOffset = (element, breakpoint) => {
   const {
-    marginTop_xs: marginTop,
-    gridArea_xs: gridArea,
-    height_xs: height
-  } = element;
+    height,
+    gridArea,
+    marginTop
+  } = getNodeValues(element, breakpoint);
   const [startRow] = getGridArea(gridArea);
   const top = (startRow - 1) * ROW_HEIGHT + marginTop;
   const bottom = top + height;
@@ -18,8 +18,8 @@ export const getElementOffset = element => {
     bottom
   };
 };
-const updateTextHeight = (editor, path, height) => {
-  if (!height) {
+export const updateTextHeight = (editor, path, currHeight, updateBreakpoint) => {
+  if (!currHeight) {
     return;
   }
   const textItem = getNode(editor, path);
@@ -27,31 +27,21 @@ const updateTextHeight = (editor, path, height) => {
     return;
   }
   const {
-    height_xs,
-    gridArea_xs,
+    height,
+    gridArea,
     type
-  } = textItem;
-  if (!gridArea_xs && type !== "paragraph") {
+  } = getNodeValues(textItem, updateBreakpoint);
+  if (!gridArea && type !== "paragraph") {
     return;
   }
-  const oldHeight = height_xs;
-  const newHeight = height;
+  const oldHeight = height;
+  const newHeight = currHeight;
   const heightDiff = newHeight - oldHeight;
   if (heightDiff !== 0) {
     const textNode = [textItem, path];
-    handleTextAlignment(editor, textNode, heightDiff);
+    handleTextAlignment(editor, textNode, heightDiff, updateBreakpoint);
   }
-  // else if (heightDiff < 0) {
-  //   Transforms.setNodes(
-  //     editor,
-  //     {
-  //       height_xs: newHeight,
-  //     },
-  //     { at: path }
-  //   );
-  // }
 };
-
 function VirtualTextElement(props) {
   const {
     dataSets,
@@ -71,7 +61,7 @@ function VirtualTextElement(props) {
         const currentText = currElement?.innerText;
         const prevText = prevTextRef?.current;
         if (currentText && currentText !== prevText) {
-          updateTextHeight(editor, path, height);
+          updateTextHeight(editor, path, height, "xs");
         }
         prevTextRef.current = currentText;
       }

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

@@ -1,6 +1,8 @@
 import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
 import { Transforms, Editor } from "slate";
 import { getElementOffset } from "./VirtualTextElement";
+import { getNode } from "../../../utils/helper";
+import { findMaxYValue } from "../../../Elements/FreeGrid/helper";
 const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
   return width <= 40 && itemStartRow === startRow;
 };
@@ -129,11 +131,36 @@ const getAncestorFreeGridContainers = (editor, path) => {
   })].filter(([node, nodePath]) => nodePath.length <= path.length);
   return containers;
 };
-export const handleTextAlignment = (editor, textNode, heightDiff) => {
-  const [, textPath] = textNode;
+export const handleTextAlignment = (editor, textNode, heightDiff, updateBreakpoint) => {
+  const [textEle, textPath] = textNode;
   let containers = getAncestorFreeGridContainers(editor, textPath);
-  containers = [...containers, textNode];
-  handleContainersAlignment(editor, containers, heightDiff, 0);
+  for (let i = containers.length - 1; i >= 0; i--) {
+    const container = containers[i];
+    const childContainer = containers[i + 1];
+    if (!heightDiff) {
+      break;
+    }
+
+    // get the data of elements to align inside container
+    const alignElements = alignElementsInsideContainer(container, childContainer || textNode, heightDiff, updateBreakpoint);
+    if (!childContainer) {
+      const {
+        height
+      } = getNodeValues(textEle, updateBreakpoint);
+      const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
+
+      // update the height of the current text element, before updating the container
+      Transforms.setNodes(editor, {
+        [`height${appendBp}`]: height + heightDiff
+      }, {
+        at: textPath
+      });
+    }
+    const containerHeightDiff = updateContainer(editor, alignElements, container, updateBreakpoint, heightDiff);
+
+    // if container height incresed/decresed, need to auto align the parent container based on height differed
+    heightDiff = containerHeightDiff;
+  }
 };
 export const handleContainers = (editor, boxPath, extraHeight) => {
   const containers = getAncestorFreeGridContainers(editor, boxPath);
@@ -220,6 +247,140 @@ export const moveOverlappedItems = (editor, moveRows, containerItems, containerP
     }
   });
 };
+export const causeOverlap = (container, currElementPath, updateBreakpoint, newTopPosition, firstNextElement) => {
+  const [containerNode, containerPath] = container;
+  let isOverlapped = false;
+  containerNode.children.forEach((item, index) => {
+    if (item.type === "paragraph") {
+      return;
+    }
+    const currPath = [...containerPath, index];
+    if (currPath.toString() === currElementPath.toString()) {
+      return;
+    }
+    const {
+      top,
+      bottom
+    } = getElementOffset(item, updateBreakpoint);
+    if (firstNextElement === top) {
+      return;
+    }
+    if (newTopPosition > top && newTopPosition <= bottom) {
+      isOverlapped = true;
+    }
+  });
+  return isOverlapped;
+};
+export const alignElementsInsideContainer = (container, currentElement, heightDiff, updateBreakpoint) => {
+  const [containerNode, containerPath] = container;
+  const [currentElementNode, currElementPath] = currentElement || [];
+  const {
+    bottom: currElementBottom
+  } = getElementOffset(currentElementNode, updateBreakpoint);
+  const newCurrElementBottom = currElementBottom + heightDiff;
+  const bufferSpace = 12;
+  const nextElements = []; // Elements after the current element
+  let firstNextElement = 0; // first element position which is after the current element
+
+  const alignElements = {};
+
+  // find the elements present after the current element
+  containerNode.children.forEach((item, index) => {
+    if (item.type === "paragraph") {
+      return;
+    }
+    const currPath = [...containerPath, index];
+    const {
+      top: itemTop
+    } = getElementOffset(item, updateBreakpoint);
+    if (currPath.toString() === currElementPath.toString()) {
+      return;
+    }
+    const bufferPosition = 15;
+    if (itemTop + bufferPosition >= currElementBottom) {
+      const element = {
+        path: currPath,
+        node: item
+      };
+      nextElements.push(element);
+      firstNextElement = firstNextElement > 0 ? Math.min(firstNextElement, itemTop) : itemTop;
+    }
+  });
+
+  // check whether the new height is overlapping the next element
+  const isOverlapped = firstNextElement && newCurrElementBottom >= firstNextElement;
+  let moveElements = isOverlapped || heightDiff < 0; // if heightDiff is negative, move elements up
+
+  if (heightDiff < 0) {
+    // does flex elements cause overlap
+    const isCausingOverlap = causeOverlap(container, currElementPath, updateBreakpoint, firstNextElement + heightDiff, firstNextElement);
+    moveElements = !isCausingOverlap;
+  }
+  if (moveElements) {
+    const topPos = newCurrElementBottom - firstNextElement + bufferSpace; // position the element after the current element
+    alignElements.topPos = heightDiff < 0 ? heightDiff : topPos;
+    alignElements.nextElements = nextElements;
+    alignElements.moveElements = moveElements;
+  }
+  return alignElements;
+};
+export const updateContainer = (editor, alignElements, container, updateBreakpoint, heightDiff) => {
+  const [containerNode, containerPath] = container;
+  const {
+    moveElements,
+    topPos,
+    nextElements
+  } = alignElements || {};
+  const appendBp = updateBreakpoint === "lg" ? "" : "_xs";
+
+  // update the aligned data inside container
+  if (moveElements && topPos !== 0) {
+    nextElements.forEach(ele => {
+      const {
+        path,
+        node
+      } = ele;
+      const {
+        top
+      } = getElementOffset(node, updateBreakpoint);
+      const y = top + topPos;
+
+      // 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${appendBp}`]: gridArea,
+        [`marginTop${appendBp}`]: marginTop
+      }, {
+        at: path
+      });
+    });
+  }
+
+  // update the new height of the container
+  const newContainerNode = getNode(editor, containerPath);
+  const newHeight = findMaxYValue(newContainerNode?.children, updateBreakpoint) + 12;
+  const {
+    height: containerOldHeight
+  } = getNodeValues(containerNode, updateBreakpoint);
+  let currHeightDiff = newHeight - containerOldHeight;
+  const noUpdate = currHeightDiff < 0 && heightDiff > 0; // if current text height is increased, but container height is getting reduced, we don't want to reduce the height of the container
+  if (noUpdate) {
+    currHeightDiff = 0;
+  } else {
+    Transforms.setNodes(editor, {
+      [`height${appendBp}`]: newHeight + 12
+    }, {
+      at: containerPath
+    });
+  }
+  return currHeightDiff;
+};
 export const handleContainersAlignment = (editor, containers, heightDiff, bufferSpace = 0) => {
   for (let i = containers.length - 1; i >= 0; i--) {
     const container = containers[i];
@@ -391,4 +552,21 @@ export const sortElements = (items, container) => {
       }
     }
   });
+};
+const nodeKeys = ["height", "width", "gridArea", "marginTop", "left"];
+export const getNodeValues = (node, breakpoint = "xs") => {
+  // defaulty return xs breakpoint values, if breakpoint is not given
+  const appendBp = breakpoint === "lg" ? "" : "_xs";
+  const nodeVals = nodeKeys.reduce((a, b) => {
+    const key = b + appendBp;
+    a[b] = node[key];
+    if (b === "height" && !a[b]) {
+      a[b] = node.height;
+    }
+    return a;
+  }, {});
+  return {
+    ...node,
+    ...nodeVals
+  };
 };

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

@@ -20,7 +20,7 @@ import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
 import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
 // import { reRenderChildNodes } from "./Utils/gridDropItem";
-import VirtualTextElement from "./VirtualElement/VirtualTextElement";
+import VirtualTextElement, { updateTextHeight } from "./VirtualElement/VirtualTextElement";
 import useAutoScroll from "../../hooks/useAutoScroll";
 import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
 import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
@@ -131,6 +131,7 @@ const RnD = props => {
   const {
     translation
   } = customProps;
+  const timerId = useRef(0);
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -140,6 +141,24 @@ const RnD = props => {
         setAbsPosition({});
       }
     }
+    const textElement = getCurrentEle()?.querySelector(".fgi_type_text > .simple-text");
+    if (breakpoint && textElement && childType === "text" && !enable) {
+      timerId.current = setTimeout(() => {
+        const {
+          clientHeight
+        } = textElement;
+        const {
+          height
+        } = delta || {};
+        const heightDiff = Math.abs(clientHeight - height);
+        if (clientHeight && height && heightDiff >= 5) {
+          updateTextHeight(editor, path, clientHeight, breakpoint);
+          const parentSectionPath = path.slice(0, 2);
+          reRenderChildNodes(editor, parentSectionPath);
+        }
+      }, 200);
+    }
+    return () => clearTimeout(timerId.current);
   }, [enable]);
   const getCurrentEle = () => {
     return positionRef.current?.resizableElement?.current;

package/package.json

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