@flozy/editor 9.6.4 → 9.6.6

package/dist/Editor/CommonEditor.js

@@ -516,9 +516,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     window.open("https://www.flozy.com", "_blank");
   };
   const editorWrapperStyle = useMemo(() => {
-    const style = {
-      // color: pageTextColor || "",
-    };
+    const style = {};
     if (pageBgImage && pageBgImage !== "none") {
       style.backgroundImage = `url(${pageBgImage})`;
       style.backgroundSize = `cover`;

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import { Transforms, Node, Path } from "slate";
 import { useSlateStatic } from "slate-react";
 import { ReactEditor } from "slate-react";
@@ -41,7 +41,8 @@ const FreeGridBox = props => {
     height_xs,
     marginTop_xs,
     gridArea_xs,
-    width_xs
+    width_xs,
+    left_xs
   } = element;
   // get values based on breakpoint size
   const {
@@ -156,9 +157,12 @@ const FreeGridBox = props => {
   };
   const repeatTimes = Math.floor(height / ROW_HEIGHT);
   const sectionTypeOptions = (itemOptions?.box || []).filter(f => (hideTools || []).indexOf(f) === -1);
+  const isBoxHeader = useMemo(() => {
+    return element?.children?.some(c => c.childType === "appHeader" && !c.xs_updatedOn);
+  }, [element]);
   return /*#__PURE__*/_jsx(RnD, {
     id: `freegrid_box_item_${path.join("|")}_${updated_at}_${breakpoint}`,
-    className: `freegrid-item path-${path.length} breakpoint-${breakpoint}`,
+    className: `freegrid-item path-${path.length} breakpoint-${breakpoint} freegrid-box_${path.join("_")}`,
     editor: editor,
     path: path,
     actions: sectionTypeOptions,
@@ -187,7 +191,8 @@ const FreeGridBox = props => {
       "data-grid-area-xs": gridArea_xs,
       "data-margin-top-xs": marginTop_xs,
       "data-height-xs": height_xs,
-      "data-width-xs": width_xs
+      "data-width-xs": width_xs,
+      "data-left-xs": left_xs
     },
     gridArea: gridArea,
     onChange: onChange,
@@ -207,6 +212,7 @@ const FreeGridBox = props => {
     customProps: customProps,
     translation: translation,
     breakpoint: breakpoint,
+    isBoxHeader: isBoxHeader,
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       ...attributes,

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

@@ -39,7 +39,8 @@ const FreeGridItem = props => {
     height_xs,
     width_xs,
     marginTop_xs,
-    gridArea_xs
+    gridArea_xs,
+    left_xs
   } = element;
   // get values based on breakpoint size
   const {
@@ -279,7 +280,8 @@ const FreeGridItem = props => {
       "data-grid-area-xs": gridArea_xs,
       "data-margin-top-xs": marginTop_xs,
       "data-height-xs": height_xs,
-      "data-width-xs": width_xs
+      "data-width-xs": width_xs,
+      "data-left-xs": left_xs
     },
     defaultStyle: {
       height: `${height}px`,

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

@@ -28,7 +28,8 @@ const ShadowElement = props => {
   });
   return type === "child" && enable === 1 ? /*#__PURE__*/_jsx(Box, {
     component: "div",
-    sx: classes.root
+    sx: classes.root,
+    className: "shadow-element"
   }) : null;
 };
 export default ShadowElement;

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

@@ -1,6 +1,6 @@
 import { Transforms, Node, Path, Editor } from "slate";
 import { ReactEditor } from "slate-react";
-import { handleNegativeInteger } from "../../../utils/helper";
+import { getNode, handleNegativeInteger } from "../../../utils/helper";
 import { handleBoxAlignment } from "../VirtualElement/helper";
 export const ROW_HEIGHT = 50;
 
@@ -207,14 +207,12 @@ export function onDropItem(props, parentClass) {
       if (!isEmpty) {
         newPath = [...newPath, toSectionNode?.children?.length];
       }
-      const moveSectionToSection = from?.length === 2 && moveTo?.length === 2;
-
-      // const autoAlign = breakpoint === "lg" && moveSectionToSection;
       const autoAlign = breakpoint === "lg";
-
-      // const boxNode = Node.get(editor, moveTo);
-
-      if (moveTo?.length === 2 && autoAlign) {
+      const currentNode = getNode(editor, path);
+      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
@@ -233,7 +231,7 @@ export function onDropItem(props, parentClass) {
         isEmpty
       }, autoAlign);
       reRenderChildNodes(editor, reRenderSectionPath || moveTo);
-      if (autoAlign) {
+      if (autoAlign && !isBoxHeader) {
         handleBoxAlignment(editor, sectionNode, sectionPath);
       }
       return {

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

@@ -0,0 +1,43 @@
+import { Box } from "@mui/material";
+import { useAutoAlignStyles } from "./styles";
+import { useEffect, useRef } from "react";
+import updateAutoProps from "./updateAutoProps";
+import { reRenderChildNodes } from "../Utils/gridDropItem";
+import { calculateProps, sortElements } from "./helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+const appendItems = (boxCls, virtualRef, ROOT_ITEM_CLASS) => {
+  const cloneNode = document.querySelector(boxCls)?.cloneNode(true);
+  const items = cloneNode.querySelectorAll(ROOT_ITEM_CLASS);
+  if (!cloneNode || !items?.length) {
+    return;
+  }
+  virtualRef.current.innerHTML = "";
+  const container = virtualRef?.current;
+  sortElements(items, container);
+};
+function BoxHeaderAutoAlignment(props) {
+  const {
+    editor,
+    boxCls,
+    path
+  } = props;
+  const classes = useAutoAlignStyles();
+  const virtualRef = useRef();
+  useEffect(() => {
+    const childPathLength = path?.split("|").length + 1;
+    const ROOT_ITEM_CLASS = `.freegrid-item.path-${childPathLength}`;
+    appendItems(boxCls, virtualRef, ROOT_ITEM_CLASS);
+    const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, [], null, true);
+    updateAutoProps(editor, allData, "xs", true);
+    const currentSectionPath = path.split("|").map(m => parseInt(m));
+    reRenderChildNodes(editor, currentSectionPath);
+  }, []);
+  return /*#__PURE__*/_jsx(Box, {
+    className: "header-box-mobile-virtual-mode",
+    ref: virtualRef,
+    sx: classes.root,
+    "aria-hidden": "true",
+    contentEditable: false
+  });
+}
+export default BoxHeaderAutoAlignment;

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

@@ -1,116 +1,43 @@
 import { Box } from "@mui/material";
 import { useAutoAlignStyles } from "./styles";
 import { useEffect, useRef } from "react";
-import { ROW_HEIGHT, calculateGridArea, reRenderChildNodes } from "../Utils/gridDropItem";
+import { reRenderChildNodes } from "../Utils/gridDropItem";
 import updateAutoProps from "./updateAutoProps";
+import { calculateProps, sortElements } from "./helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const ROOT_ITEM_CLASS = ".freegrid-item.path-3";
-const getMarginTop = y => {
-  const calcMargin = y % ROW_HEIGHT;
-  return calcMargin <= 0 ? 0 : calcMargin;
+const appendItems = (sectionCls, virtualRef) => {
+  const cloneNode = document.querySelector(sectionCls)?.cloneNode(true);
+  const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
+  if (!cloneNode || !items?.length) {
+    return;
+  }
+  virtualRef.current.innerHTML = "";
+  const container = virtualRef?.current;
+  sortElements(items, container);
 };
 function ForceAutoAlignment(props) {
   const {
     editor,
     sectionCls,
     path,
-    autoAlign,
     setAutoAlign
   } = props;
   const classes = useAutoAlignStyles();
   const virtualRef = useRef();
   useEffect(() => {
-    let timeoutId;
-    let autoAlignTimerId;
-    if (virtualRef?.current && autoAlign) {
-      timeoutId = setTimeout(() => {
-        const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
-        updateAutoProps(editor, allData, "xs", true);
-        const currentSectionPath = path.split("|").map(m => parseInt(m));
-        reRenderChildNodes(editor, currentSectionPath);
-        autoAlignTimerId = setTimeout(() => {
-          setAutoAlign(false);
-        }, 500);
-      }, 100);
-    }
-    return () => {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      if (autoAlignTimerId) {
-        clearTimeout(autoAlignTimerId);
-      }
-    };
-  }, [virtualRef?.current]);
-  const calculateProps = (curPath, dom, domClass, allData, parentDom) => {
-    const rect = dom?.getBoundingClientRect();
-    const bufferHeight = parentDom ? 0 : 12;
-    const sectionProps = {
-      path: curPath,
-      props: {
-        height: rect?.height + bufferHeight
-      }
-    };
-    const itemsData = [];
-    const items = dom.querySelectorAll(domClass);
-    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.path-${nextItemPathLength}`, allData, dom);
-      } else {
-        const y = Math.abs(rect.top - itemRect?.top);
-        itemsData.push({
-          path: items[i]?.dataset.path,
-          props: {
-            top: y,
-            left: 24,
-            marginTop: getMarginTop(y),
-            width: itemRect?.width,
-            height: itemRect?.height,
-            gridArea: calculateGridArea(y)
-          }
-        });
-        // sectionHeight += itemRect?.height;
-      }
-    }
-
-    if (dom?.classList.contains("type_box") && parentDom) {
-      const parentDomRect = parentDom?.getBoundingClientRect();
-      const y = Math.abs(parentDomRect.top - rect?.top);
-      sectionProps.props.gridArea = calculateGridArea(y);
-      sectionProps.props.left = 24;
-      sectionProps.props.marginTop = getMarginTop(y);
-      sectionProps.props.width = rect?.width;
-    }
-    allData = [sectionProps, [...allData, ...itemsData]]?.flat();
-    return allData;
-  };
-  const getItems = () => {
-    const cloneNode = document.querySelector(sectionCls)?.cloneNode(true);
-    const items = cloneNode?.querySelectorAll(ROOT_ITEM_CLASS) || [];
-    if (!cloneNode || !items?.length) {
-      return;
-    }
-    let itemsHTML = "";
-    for (let i = 0; i < items?.length; i++) {
-      items[i].classList.add("exclude-virtual");
-      itemsHTML += items[i].outerHTML;
-    }
-    return itemsHTML;
-  };
+    appendItems(sectionCls, virtualRef);
+    const allData = calculateProps(path, virtualRef?.current, ROOT_ITEM_CLASS, []);
+    updateAutoProps(editor, allData, "xs", true);
+    const currentSectionPath = path.split("|").map(m => parseInt(m));
+    reRenderChildNodes(editor, currentSectionPath);
+    setAutoAlign(false);
+  }, []);
   return /*#__PURE__*/_jsx(Box, {
     className: "force-mobile-virtual-mode",
     ref: virtualRef,
-    sx: {
-      visibility: "hidden",
-      ...classes.root
-    },
+    sx: classes.root,
     "aria-hidden": "true",
-    dangerouslySetInnerHTML: {
-      __html: getItems()
-    },
     contentEditable: false
   });
 }

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

@@ -1,4 +1,4 @@
-import { ROW_HEIGHT } from "../Utils/gridDropItem";
+import { ROW_HEIGHT, calculateGridArea } from "../Utils/gridDropItem";
 import { Transforms, Editor } from "slate";
 const isBulletOrTickIcon = (width, itemStartRow, startRow) => {
   return width <= 40 && itemStartRow === startRow;
@@ -278,4 +278,98 @@ export const handleBoxAlignment = (editor, sectionNode, sectionPath) => {
       });
     });
   }
+};
+export const getMarginTop = y => {
+  const calcMargin = y % ROW_HEIGHT;
+  return calcMargin <= 0 ? 0 : calcMargin;
+};
+export const calculateProps = (curPath, dom, domClass, allData, parentDom, isBoxHeader) => {
+  const rect = dom?.getBoundingClientRect();
+  const bufferHeight = parentDom ? 0 : 12;
+  const sectionProps = {
+    path: curPath,
+    props: {
+      height: rect?.height + bufferHeight
+    }
+  };
+  const itemsData = [];
+  const items = dom.querySelectorAll(domClass);
+  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.path-${nextItemPathLength}`, allData, dom);
+    } else {
+      const y = Math.abs(rect.top - itemRect?.top);
+      const left = Math.abs(rect.left - itemRect?.left);
+      const isAppHeader = isBoxHeader || dom?.classList?.contains("appHeaderBox");
+      itemsData.push({
+        path: items[i]?.dataset.path,
+        props: {
+          top: y,
+          left: isAppHeader ? left : 24,
+          marginTop: getMarginTop(y),
+          width: itemRect?.width,
+          height: itemRect?.height,
+          gridArea: calculateGridArea(y)
+        }
+      });
+      sectionHeight += itemRect?.height;
+    }
+  }
+  if (dom?.classList.contains("type_box") && parentDom) {
+    const parentDomRect = parentDom?.getBoundingClientRect();
+    const isAppHeader = isBoxHeader || dom?.classList.contains("appHeaderBox");
+    const y = Math.abs(parentDomRect.top - rect?.top);
+    sectionProps.props.gridArea = calculateGridArea(y);
+    sectionProps.props.left = isAppHeader ? 6 : 24;
+    sectionProps.props.marginTop = getMarginTop(y);
+    sectionProps.props.width = rect?.width;
+  }
+  allData = [sectionProps, [...allData, ...itemsData]]?.flat();
+  return allData;
+};
+export const sortElements = (items, container) => {
+  const elementsArray = Array.from(items);
+  elementsArray.sort((a, b) => {
+    const aGridArea = a.dataset.gridAreaXs;
+    const bGridArea = b.dataset.gridAreaXs;
+
+    // If either element has no gridArea, push it to the end
+    if (!aGridArea) return 1;
+    if (!bGridArea) return -1;
+    const [aRow] = aGridArea.split("/").map(Number);
+    const [bRow] = bGridArea.split("/").map(Number);
+    if (aRow !== bRow) {
+      return aRow - bRow; // Sort by start row first
+    }
+
+    const aLeft = parseFloat(a.dataset.leftXs) || 0;
+    const bLeft = parseFloat(b.dataset.leftXs) || 0;
+    return aLeft - bLeft;
+  });
+
+  // Append sorted elements to container
+  elementsArray.forEach(item => {
+    container.appendChild(item);
+
+    // If item is a box, recursively sort its children
+    if (item.classList.contains("type_box")) {
+      const nestedContainer = item.querySelector(":scope > .fgi_type_box");
+      const isAppHeader = item.querySelector(".type_appHeader");
+      if (isAppHeader) {
+        item.classList.add("appHeaderBox");
+      }
+      if (nestedContainer) {
+        const childToRemove = nestedContainer.querySelector(":scope > .simple-text");
+        if (childToRemove) {
+          nestedContainer.removeChild(childToRemove);
+        }
+        const children = nestedContainer.children;
+        sortElements(children, nestedContainer);
+        item.appendChild(nestedContainer);
+      }
+    }
+  });
 };

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

@@ -56,6 +56,7 @@ export const useAutoAlignStyles = () => ({
     top: 0,
     height: "auto !important",
     pointerEvents: "none",
+    visibility: "hidden",
     "& .leaf-item": {
       fontSize: "var(--fontSize_xs) !important",
       "& span": {
@@ -139,6 +140,33 @@ export const useAutoAlignStyles = () => ({
       "& .embed": {
         minHeight: "300px"
       }
+    },
+    "& .appHeaderBox, &.header-box-mobile-virtual-mode": {
+      width: "calc(100% - 12px) !important",
+      "& .fgi_type_box": {
+        display: "flex",
+        justifyContent: "space-evenly !important",
+        flexWrap: "wrap"
+      },
+      "& .freegrid-item": {
+        left: "4px !important",
+        marginLeft: "0px !important"
+      },
+      "& .type_text": {
+        width: "fit-content !important"
+      },
+      "& .type_appHeader": {
+        width: "40px !important"
+      },
+      "& .shadow-element": {
+        display: "none"
+      }
+    },
+    "&.header-box-mobile-virtual-mode": {
+      width: "320px !important",
+      display: "flex",
+      justifyContent: "space-evenly !important",
+      flexWrap: "wrap"
     }
   }
 });

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

@@ -23,6 +23,7 @@ import { reRenderChildNodes } from "./Utils/gridDropItem";
 import VirtualTextElement from "./VirtualElement/VirtualTextElement";
 import useAutoScroll from "../../hooks/useAutoScroll";
 import ForceAutoAlignment from "./VirtualElement/ForceAutoAlignment";
+import BoxHeaderAutoAlignment from "./VirtualElement/BoxHeaderAutoAlignment";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -73,7 +74,8 @@ const RnD = props => {
     sectionElement,
     dataSets,
     autoAlign,
-    setAutoAlign
+    setAutoAlign,
+    isBoxHeader
   } = props;
   const {
     isSelectedElement,
@@ -682,6 +684,10 @@ const RnD = props => {
       dataSets: dataSets,
       autoAlign: autoAlign,
       setAutoAlign: setAutoAlign
+    }) : null, isBoxHeader && breakpoint === "lg" ? /*#__PURE__*/_jsx(BoxHeaderAutoAlignment, {
+      boxCls: `.freegrid-box_${path.join("_")}`,
+      path: str_path,
+      editor: editor
     }) : null]
   });
 };

package/dist/Editor/plugins/withEmbeds.js

@@ -18,7 +18,19 @@ const withEmbeds = editor => {
   };
   editor.insertNodes = (...args) => {
     try {
+      const {
+        selection
+      } = editor;
+      if (!selection || !selection.focus) {
+        console.warn("No valid selection. Inserting nodes without selection.");
+        insertNodes(...args);
+        return;
+      }
       const parentPath = Path.parent(editor.selection.focus.path);
+      if (parentPath[parentPath.length - 1] === 0) {
+        insertNodes(...args);
+        return;
+      }
       const parentNode = Node.get(editor, parentPath);
       const previousPath = Path.previous(parentPath);
       const previousNode = Node.get(editor, previousPath);

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Element as SlateElement, Range, Text, Element } from "slate";
+import { Editor, Transforms, Element as SlateElement, Range } from "slate";
 import { Box } from "@mui/material";
 import { sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
@@ -49,13 +49,23 @@ import ColumnView from "../Elements/DataView/Layouts/ColumnView";
 import SearchAttachment from "../Elements/Search/SearchAttachment";
 import { wrapThemeBreakpoints } from "../Elements/FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter", "alignJustify"];
 const list_types = ["orderedList", "unorderedList"];
 const LIST_FORMAT_TYPE = {
   orderedList: "list-item",
   unorderedList: "list-item"
 };
-const NEWLINESAFTER = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix"];
+
+// const NEWLINESAFTER = [
+//   "headingOne",
+//   "headingTwo",
+//   "headingThree",
+//   "headingFour",
+//   "headingFive",
+//   "headingSix",
+// ];
+
 const THEME_BLOCK_FIELDS = ["headingOne", "headingTwo", "headingThree", "headingFour", "headingFive", "headingSix", "paragraphOne", "paragraphTwo", "paragraphThree"];
 export const toggleBlock = (editor, format, selection = true, attr = {}) => {
   const isActive = isBlockActive(editor, format);
@@ -402,40 +412,52 @@ export const getBlock = props => {
   });
   switch (element.type) {
     case "headingOne":
-      return /*#__PURE__*/_jsx("h1", {
+      return /*#__PURE__*/_jsxs("h1", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 1"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "headingTwo":
-      return /*#__PURE__*/_jsx("h2", {
+      return /*#__PURE__*/_jsxs("h2", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 2"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "headingThree":
-      return /*#__PURE__*/_jsx("h3", {
+      return /*#__PURE__*/_jsxs("h3", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 3"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "headingFour":
-      return /*#__PURE__*/_jsx("h4", {
+      return /*#__PURE__*/_jsxs("h4", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 4"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "headingFive":
-      return /*#__PURE__*/_jsx("h5", {
+      return /*#__PURE__*/_jsxs("h5", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 5"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "headingSix":
-      return /*#__PURE__*/_jsx("h6", {
+      return /*#__PURE__*/_jsxs("h6", {
         ...commonHeadingProps(),
         placeholder: translation("Heading 6"),
-        children: children
+        children: [children, /*#__PURE__*/_jsx("span", {
+          contentEditable: false
+        })]
       });
     case "paragraphOne":
       return /*#__PURE__*/_jsx("p", {

package/package.json

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