@flozy/editor 11.0.1 → 11.0.2

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

@@ -22,7 +22,7 @@ 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 { getElementValues } from "./helper";
 import updateFormName from "../../utils/updateFormName";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -185,9 +185,9 @@ const FreeGrid = props => {
     const isEmpty = isEmptySection();
     const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
     const {
-      xsVal,
-      sectionHeightXs
-    } = getNewElementXsValues(type, element?.children);
+      elValues,
+      sectionVal
+    } = getElementValues(type, element?.children, breakpoint);
     const id = crypto?.randomUUID();
     switch (type) {
       case "addText":
@@ -200,13 +200,7 @@ const FreeGrid = props => {
               text: "Text"
             }]
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 30,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
@@ -227,13 +221,7 @@ const FreeGrid = props => {
             textAlign: "center",
             label: "Get Started"
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 143,
-          height: 50,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
@@ -253,15 +241,7 @@ const FreeGrid = props => {
               date: ""
             }
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 217,
-          height: 173,
-          // width_xs: 217,
-          // height_xs: 173,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
@@ -281,13 +261,7 @@ const FreeGrid = props => {
             fromFreeGrid: true,
             uniqueId: id
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 650,
-          height: 80,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
@@ -297,13 +271,9 @@ const FreeGrid = props => {
           ...insertFreeGridItem("video", createEmbedNode("video", {
             url: "",
             alt: "",
-            images: [],
-            fromFreeGrid: true,
-            uniqueId: id
+            images: []
           }), {
-            height: 370,
-            width: 650,
-            ...(xsVal || {})
+            ...(elValues || {})
           })
         }], {
           at: [...insertAt]
@@ -314,9 +284,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("table", {
             ...DEFAULT_TABLE_NODE()
           }, {
-            height: 150,
-            width: 400,
-            ...(xsVal || {})
+            ...(elValues || {})
           })
         }], {
           at: [...insertAt]
@@ -335,13 +303,7 @@ const FreeGrid = props => {
             isEncoded: true,
             isSanitized: true
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 400,
-          height: 300,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
@@ -354,7 +316,7 @@ const FreeGrid = props => {
               text: ""
             }]
           }, {
-            ...(xsVal || {})
+            ...(elValues || {})
           }, "freegridBox")
         }], {
           at: [...insertAt]
@@ -365,9 +327,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("form", {
             ...FORM_NODE()
           }, {
-            height: 92,
-            width: 400,
-            ...(xsVal || {})
+            ...(elValues || {})
           })
         }], {
           at: [...insertAt]
@@ -380,9 +340,7 @@ const FreeGrid = props => {
               menus: null
             })
           }, {
-            height: 60,
-            width: 400,
-            ...(xsVal || {})
+            ...(elValues || {})
           })
         }], {
           at: [...insertAt]
@@ -398,28 +356,21 @@ const FreeGrid = props => {
               text: ""
             }]
           }],
-          gridArea: "3 / 1 / 4 / 2",
-          left: 50,
-          marginTop: 0,
-          top: 0,
-          width: 170,
-          height: 30,
-          ...(xsVal || {})
+          ...(elValues || {})
         }], {
           at: [...insertAt]
         });
         break;
       default:
     }
-    if (xsVal) {
-      setSelectedElement({});
-      Transforms.setNodes(editor, {
-        height_xs: sectionHeightXs,
-        updated_at: new Date().getTime()
-      }, {
-        at: path
-      });
-    }
+    setSelectedElement({});
+    // increase the section height if new element is inserted based on auto align
+    Transforms.setNodes(editor, {
+      ...sectionVal,
+      updated_at: new Date().getTime()
+    }, {
+      at: path
+    });
     count.current = count.current + 1;
 
     // focus on newly added element
@@ -525,7 +476,7 @@ const FreeGrid = props => {
       style: {
         position: "relative",
         "--height": `${height}px`,
-        display: 'block' //for test purpose
+        display: "block" //for test purpose
       },
 
       dataSets: {

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

@@ -197,7 +197,8 @@ const FreeGridBox = props => {
       "data-margin-top-xs": marginTop_xs,
       "data-height-xs": height_xs,
       "data-width-xs": width_xs,
-      "data-left-xs": left_xs
+      "data-left-xs": left_xs,
+      "data-width-lg": width
     },
     gridArea: gridArea,
     onChange: onChange,

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

@@ -296,7 +296,8 @@ const FreeGridItem = props => {
       "data-margin-top-xs": marginTop_xs,
       "data-height-xs": height_xs,
       "data-width-xs": width_xs,
-      "data-left-xs": left_xs
+      "data-left-xs": left_xs,
+      "data-width-lg": width
     },
     defaultStyle: {
       height: `${height}px`,

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

@@ -21,55 +21,100 @@ const commonXsValues = {
   width_xs: 272,
   xs_updatedOn: new Date().getTime()
 };
-const elementXsValues = {
+const elementValues = {
   [ELEMENT_CASE.ADD_TEXT]: {
-    ...commonXsValues,
-    height_xs: 50
+    gridArea: "3 / 1 / 4 / 2",
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 170,
+    height: 30,
+    height_xs: 50,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_BUTTON]: {
-    ...commonXsValues,
-    height_xs: 50
+    gridArea: "3 / 1 / 4 / 2",
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 143,
+    height: 50,
+    height_xs: 50,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_SIGNATURE]: {
-    ...commonXsValues,
-    height_xs: 173
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 217,
+    height: 173,
+    height_xs: 173,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_IMAGE]: {
-    ...commonXsValues,
-    height_xs: 80
+    gridArea: "3 / 1 / 4 / 2",
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 170,
+    height: 80,
+    height_xs: 80,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_VIDEO]: {
-    ...commonXsValues,
-    height_xs: 300
+    height: 370,
+    width: 650,
+    height_xs: 300,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_TABLE]: {
-    ...commonXsValues,
-    height_xs: 165
+    height: 150,
+    width: 400,
+    height_xs: 165,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_CODE]: {
-    ...commonXsValues,
-    height: 300
+    gridArea: "3 / 1 / 4 / 2",
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 400,
+    height: 300,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_BOX]: {
-    ...commonXsValues,
-    height_xs: 300
+    height_xs: 300,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_FORM]: {
-    ...commonXsValues,
-    height_xs: 80
+    height: 92,
+    width: 400,
+    height_xs: 80,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_APP_HEADER]: {
-    ...commonXsValues,
-    height_xs: 80
+    height: 60,
+    width: 400,
+    height_xs: 80,
+    ...commonXsValues
   },
   [ELEMENT_CASE.ADD_DIVIDER]: {
-    ...commonXsValues,
-    height_xs: 24
+    gridArea: "3 / 1 / 4 / 2",
+    left: 50,
+    marginTop: 0,
+    top: 0,
+    width: 170,
+    height: 30,
+    height_xs: 24,
+    ...commonXsValues
   }
 };
 export const findMaxYValue = (sectionItems, breakpoint) => {
   let maxY = 0;
   sectionItems.forEach(item => {
+    if (!item?.type) {
+      return;
+    }
     const isHidden = breakpoint === "xs" && item.children.some(c => c.xsHidden);
     if (item?.type && RND_ITEMS.includes(item.type) && !isHidden) {
       const {
@@ -94,22 +139,56 @@ export const convertToGridArea = y => {
     marginTop
   };
 };
-export const getNewElementXsValues = (type, sectionItems) => {
-  const values = elementXsValues[type] || {};
-  const y = sectionItems?.length ? findMaxYValue(sectionItems) : 0;
+const BUFFER_MARGIN_TOP = 12;
+const getInsertValues = (sectionItems, breakpoint, elValues) => {
+  const y_xs = sectionItems?.length ? findMaxYValue(sectionItems, breakpoint) : 0;
   const {
     gridArea,
     marginTop
-  } = convertToGridArea(y);
-  const BUFFER_MARGIN_TOP = 12;
-  const xsVal = {
-    ...values,
-    gridArea_xs: gridArea,
-    marginTop_xs: marginTop + BUFFER_MARGIN_TOP
+  } = convertToGridArea(y_xs);
+  const appendBp = breakpoint === "lg" ? "" : "_xs";
+  const insertPos = {
+    [`gridArea${appendBp}`]: gridArea,
+    [`marginTop${appendBp}`]: marginTop + BUFFER_MARGIN_TOP
+  };
+  const sectionHeight = y_xs + elValues[`height${appendBp}`] + BUFFER_MARGIN_TOP + 12;
+  return {
+    insertPos,
+    sectionHeight
   };
-  const sectionHeightXs = y + values?.height_xs + BUFFER_MARGIN_TOP + 12;
+};
+export const getElementValues = (type, sectionItems, breakpoint) => {
+  const elValues = elementValues[type] || {};
+  let elInsertPos = {};
+  let sectionVal = {};
+
+  // insert element on xs
+  const {
+    insertPos: insertPos_xs,
+    sectionHeight: sectionHeight_xs
+  } = getInsertValues(sectionItems, "xs", elValues);
+  elInsertPos = {
+    ...insertPos_xs
+  };
+  sectionVal.height_xs = sectionHeight_xs;
+
+  // if user in xs, auto-align lg
+  if (breakpoint === "xs") {
+    const {
+      insertPos: insertPos_lg,
+      sectionHeight
+    } = getInsertValues(sectionItems, "lg", elValues);
+    elInsertPos = {
+      ...elInsertPos,
+      ...insertPos_lg
+    };
+    sectionVal.height = sectionHeight;
+  }
   return {
-    xsVal,
-    sectionHeightXs
+    elValues: {
+      ...elValues,
+      ...elInsertPos
+    },
+    sectionVal
   };
 };

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -9,7 +9,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
 import { isCarouselSelected } from "../../helper";
-import { hideSlateSelection, viewSlateSelection } from "../../utils/helper";
+import { viewSlateSelection } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const isSlateDOM = event => {
   return event.target.getAttribute("data-slate-string") === "true";
@@ -95,7 +95,7 @@ const PopupTool = props => {
     const isFreeGridEnabled = enable === 1 && isFreeGridElement;
     if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "" || isFreeGridEnabled) {
       setAnchorEl(null);
-      hideSlateSelection(); // removes slate selection background, when there is no selection
+      // hideSlateSelection(); // removes slate selection background, when there is no selection
     } else {
       updateAnchorEl();
       viewSlateSelection();

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

@@ -243,6 +243,13 @@ 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: new Date().getTime()
+        }, {
+          at: moveTo
+        });
       } else if (autoAlign) {
         Transforms.setNodes(editor, {
           autoAlign: true,

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

@@ -47,7 +47,8 @@ function VirtualTextElement(props) {
     dataSets,
     getCurrentEle,
     path,
-    editor
+    editor,
+    breakpoint
   } = props;
   const currElement = getCurrentEle();
   const textRef = useRef(null);
@@ -61,7 +62,7 @@ function VirtualTextElement(props) {
         const currentText = currElement?.innerText;
         const prevText = prevTextRef?.current;
         if (currentText && currentText !== prevText) {
-          updateTextHeight(editor, path, height, "xs");
+          updateTextHeight(editor, path, height, breakpoint);
         }
         prevTextRef.current = currentText;
       }
@@ -77,11 +78,12 @@ function VirtualTextElement(props) {
       }
       observer.disconnect();
     };
-  }, [currElement?.innerText]);
+  }, [currElement?.innerText, breakpoint]);
+  const fontSize = `var(--fontSize_${breakpoint}) !important`;
   return /*#__PURE__*/_jsx(Box, {
     style: {
       position: "fixed",
-      width: dataSets["data-width-xs"],
+      width: dataSets[`data-width-${breakpoint}`],
       minHeight: "fit-content",
       visibility: "hidden",
       pointerEvents: "none",
@@ -91,9 +93,9 @@ function VirtualTextElement(props) {
     ref: textRef,
     sx: {
       "& .leaf-item": {
-        fontSize: "var(--fontSize_xs) !important",
+        fontSize: fontSize,
         "& span": {
-          fontSize: "var(--fontSize_xs) !important"
+          fontSize: fontSize
         }
       },
       "& .editor-blocker": {

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

@@ -46,6 +46,21 @@ function getTextElementHeight(textElement) {
   }
   return totalHeight;
 }
+function textAutoAlign(editor, path, getCurrentEle, delta, breakpoint, onLoad) {
+  const currElement = getCurrentEle();
+  const textElement = currElement?.querySelector(".fgi_type_text");
+  const clientHeight = getTextElementHeight(textElement);
+  const {
+    height
+  } = delta || {};
+  const heightDiff = Math.abs(clientHeight - height);
+  const autoAlign = onLoad ? clientHeight > height : heightDiff >= 5;
+  if (clientHeight && height && autoAlign) {
+    updateTextHeight(editor, path, clientHeight, breakpoint);
+    const parentSectionPath = path.slice(0, 2);
+    reRenderChildNodes(editor, parentSectionPath);
+  }
+}
 const ITEM_TYPES = ["child", "parent-container"];
 const EDIT_MODES = ["text", "form", "table"];
 const DISABLE_RESIZING = {
@@ -151,6 +166,7 @@ const RnD = props => {
     translation
   } = customProps;
   const timerId = useRef(0);
+  const isFirstRender = useRef(true);
   useEffect(() => {
     if (ITEM_TYPES.includes(type)) {
       if (enable === 1) {
@@ -160,24 +176,19 @@ const RnD = props => {
         setAbsPosition({});
       }
     }
-    const currElement = getCurrentEle();
-    const textElement = currElement?.querySelector(".fgi_type_text");
-    if (breakpoint && textElement && childType === "text" && !enable) {
-      timerId.current = setTimeout(() => {
-        // const { clientHeight } = textElement;
-        const clientHeight = getTextElementHeight(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);
+    if (childType === "text" && !enable && !readOnly) {
+      if (isFirstRender.current) {
+        isFirstRender.current = false;
+        timerId.current = setTimeout(() => {
+          // auto align on load
+          textAutoAlign(editor, path, getCurrentEle, delta, breakpoint, true);
+        }, 200);
+      } else {
+        // auto align when the text is changed
+        textAutoAlign(editor, path, getCurrentEle, delta, breakpoint);
+      }
     }
-    return () => clearTimeout(timerId.current);
+    return () => clearTimeout(timerId?.current);
   }, [enable]);
   const getCurrentEle = () => {
     return positionRef.current?.resizableElement?.current;
@@ -726,11 +737,12 @@ const RnD = props => {
       handleClose: handleClose,
       theme: theme,
       translation: translation
-    }), childType === "text" && breakpoint === "lg" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
+    }), childType === "text" && !readOnly && enable ? /*#__PURE__*/_jsx(VirtualTextElement, {
       editor: editor,
       dataSets: dataSets,
       getCurrentEle: getCurrentEle,
-      path: path
+      path: path,
+      breakpoint: breakpoint === "xs" ? "lg" : "xs" // auto-align for this passed breakpoint
     }) : null, type === "parent" && breakpoint === "xs" && !readOnly && autoAlign ? /*#__PURE__*/_jsx(ForceAutoAlignment, {
       updated_at: updated_at,
       path: str_path,

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -401,7 +401,8 @@ export const getMarked = (leaf, children, theme) => {
           WebkitTextFillColor: "unset !important"
         },
         style: {
-          "--fontSize_xs": leaf?.fontSize?.xs || "auto"
+          "--fontSize_xs": leaf?.fontSize?.xs || "auto",
+          "--fontSize_lg": leaf?.fontSize?.lg || "auto"
         },
         children: children
       })

package/package.json

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