@flozy/editor 9.3.4 → 9.3.6

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

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useMemo, useRef } from "react";
 import { Path, Transforms, Node } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
@@ -43,7 +43,8 @@ const FreeGrid = props => {
   } = props;
   const {
     sectionName,
-    sectionBorderRadius
+    sectionBorderRadius,
+    height_xs
   } = element;
   const {
     readOnly,
@@ -62,13 +63,17 @@ const FreeGrid = props => {
     height
   } = breakpointValues(element.type, breakpoint, element);
   const {
-    setSelectedElement
+    setSelectedElement,
+    setAutoAlign,
+    autoAlign
   } = useEditorContext();
+  const count = useRef(2);
+  const childrenCountRef = useRef(element?.children?.length);
   const onChange = data => {
     const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const updateData = {
       ...data,
-      [`height${append}`]: height + data.height
+      [`height${append}`]: data.height
     };
     if (append !== "") {
       delete updateData.height;
@@ -130,6 +135,10 @@ const FreeGrid = props => {
             setSelectedElement
           });
           break;
+        case "forceAutoAlignment":
+          setAutoAlign(true);
+          setSelectedElement({});
+          break;
         default:
       }
     } catch (err) {
@@ -144,9 +153,12 @@ const FreeGrid = props => {
       console.log(err);
     }
   };
+  useEffect(() => {
+    childrenCountRef.current = element?.children?.length;
+  }, [element?.children?.length]);
   const handleAddElementClick = type => () => {
     const isEmpty = isEmptySection();
-    const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
+    const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
     switch (type) {
       case "addText":
         Transforms.insertNodes(editor, [{
@@ -353,6 +365,17 @@ const FreeGrid = props => {
         break;
       default:
     }
+    if (breakpoint === "lg") {
+      // auto align in mobile
+      Transforms.setNodes(editor, {
+        xs_updatedOn: null,
+        updated_at: new Date().getTime()
+      }, {
+        at: path
+      });
+    }
+    count.current = count.current + 1;
+
     // focus on newly added element
     focusOnNewItem(editor, insertAt, {
       setSelectedElement
@@ -424,8 +447,16 @@ const FreeGrid = props => {
     }
   }, theme);
   const sectionTypeOptions = (itemOptions?.section || []).filter(f => (hideTools || []).indexOf(f) === -1);
+  const id = useMemo(() => {
+    let eleId = `freegrid_container_${path.join("|")}_${breakpoint}`;
+    if (autoAlign) {
+      eleId += `_${updated_at}`; // re-render component on force auto align
+    }
+
+    return eleId;
+  }, [autoAlign, updated_at, breakpoint, path]);
   return /*#__PURE__*/_jsx(RnD, {
-    id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
+    id: id,
     className: `
         freegrid-section breakpoint-${breakpoint} 
         freegrid-section_${path.join("_")}
@@ -437,6 +468,9 @@ const FreeGrid = props => {
       position: "relative",
       "--height": `${height}px`
     },
+    dataSets: {
+      "data-height-xs": height_xs
+    },
     defaultStyle: {
       width: "100%",
       height: height ? `${height}px` : "auto"
@@ -493,7 +527,8 @@ const FreeGrid = props => {
           },
           customProps: {
             customProps
-          }
+          },
+          breakpoint
         }
       },
       settings: {
@@ -505,8 +540,7 @@ const FreeGrid = props => {
           path,
           classes,
           customProps,
-          translation,
-          customProps
+          translation
         }
       }
     },
@@ -516,6 +550,7 @@ const FreeGrid = props => {
     handleContextMenuClick: handleContextMenuClick,
     translation: translation,
     customProps: customProps,
+    sectionElement: element,
     children: /*#__PURE__*/_jsxs(Box, {
       ...attributes,
       id: sectionName,

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

@@ -37,7 +37,11 @@ const FreeGridBox = props => {
     sectionBorderRadius,
     borderWidth,
     borderColor,
-    borderStyle
+    borderStyle,
+    height_xs,
+    marginTop_xs,
+    gridArea_xs,
+    width_xs
   } = element;
   // get values based on breakpoint size
   const {
@@ -168,12 +172,22 @@ const FreeGridBox = props => {
       "--gridArea": `${gridArea}`,
       "--width": `${width}px`,
       "--height": `${height}px`,
-      "--zIndex": 100 + arrangeIndex
+      "--zIndex": 100 + arrangeIndex,
+      "--height_xs": height_xs ? `${height_xs}px` : "auto",
+      "--marginTop_xs": marginTop_xs ? `${marginTop_xs}px` : "24px"
+      // "--gridArea_xs": gridArea_xs ? gridArea_xs : "unset",
     },
+
     defaultStyle: {
       height: `${height}px`,
       width: `${width}px`
     },
+    dataSets: {
+      "data-grid-area-xs": gridArea_xs,
+      "data-margin-top-xs": marginTop_xs,
+      "data-height-xs": height_xs,
+      "data-width-xs": width_xs
+    },
     gridArea: gridArea,
     onChange: onChange,
     delta: {

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

@@ -35,7 +35,11 @@ const FreeGridItem = props => {
   const {
     updated_at,
     childType,
-    zIndex
+    zIndex,
+    height_xs,
+    width_xs,
+    marginTop_xs,
+    gridArea_xs
   } = element;
   // get values based on breakpoint size
   const {
@@ -53,6 +57,9 @@ const FreeGridItem = props => {
   const arrangeIndex = zIndex === undefined ? path[path.length - 1] : zIndex;
   const [popup, setPopup] = useState(null);
   const onChangeSettings = () => {};
+  // const refInput = useRef();
+  // const [virtualHeight, setVirtualHeight] = useState(height || 0);
+
   const onChange = data => {
     let updateData = {
       ...data
@@ -108,6 +115,13 @@ const FreeGridItem = props => {
       Transforms.removeNodes(editor, {
         at: path
       });
+      const parentPath = Path.parent(path);
+      Transforms.setNodes(editor, {
+        xs_updatedOn: null,
+        updated_at: new Date().getTime()
+      }, {
+        at: parentPath
+      });
     } catch (err) {
       console.log(err);
     }
@@ -253,7 +267,17 @@ const FreeGridItem = props => {
       "--gridArea": `${gridArea}`,
       "--width": `${width}px`,
       "--height": `${height}px`,
-      "--zIndex": 100 + arrangeIndex
+      "--zIndex": 100 + arrangeIndex,
+      "--height_xs": height_xs ? `${height_xs}px` : "auto",
+      "--marginTop_xs": marginTop_xs ? `${marginTop_xs}px` : "0px"
+      // "--gridArea_xs": gridArea_xs ? gridArea_xs : "unset",
+    },
+
+    dataSets: {
+      "data-grid-area-xs": gridArea_xs,
+      "data-margin-top-xs": marginTop_xs,
+      "data-height-xs": height_xs,
+      "data-width-xs": width_xs
     },
     defaultStyle: {
       height: `${height}px`,

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

@@ -5,7 +5,8 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const More = props => {
   const {
     handleClick,
-    translation
+    translation,
+    breakpoint
   } = props;
   return /*#__PURE__*/_jsx(Box, {
     children: /*#__PURE__*/_jsxs(List, {
@@ -18,7 +19,11 @@ const More = props => {
         className: "item-wrapper",
         onClick: handleClick("duplicateSection"),
         children: translation?.translation("Duplicate Section")
-      })]
+      }), breakpoint === "xs" ? /*#__PURE__*/_jsx(ListItemButton, {
+        className: "item-wrapper",
+        onClick: handleClick("forceAutoAlignment"),
+        children: "Force Auto Alignment"
+      }) : null]
     })
   });
 };

package/dist/Editor/Elements/Table/TableCell.js

@@ -193,6 +193,7 @@ const TableCell = props => {
     setHoverPath(null);
   };
   const onMouseDownInCell = e => {
+    setHoverPath(path);
     if (
     // for shift selection
     e.shiftKey && startCellPath?.length && startCellPath.toString() !== path.toString()) {
@@ -376,6 +377,9 @@ const TableCell = props => {
     setOpenSettings(false);
   };
   const onSave = data => {
+    const tableProps = table.getTableProps({
+      at: path
+    });
     const updateData = {
       ...data
     };

package/dist/Editor/MiniEditor.js

@@ -45,12 +45,13 @@ const MiniEditor = props => {
   const {
     translationMock
   } = otherProps;
+  const dummyTranslation = () => {};
   const customProps = {
     ...(otherProps || {}),
     readOnly: isReadOnly,
     editorPlaceholder: miniEditorPlaceholder,
     page_id: id,
-    translation: translation || translationMock
+    translation: translation || translationMock || dummyTranslation
   };
   const [mentions, setMentions] = useMentions({
     editor,

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

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const ClearAllIcon = () => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  children: [/*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "5",
+    width: "12",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "9",
+    width: "10",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  }), /*#__PURE__*/_jsx("rect", {
+    x: "4",
+    y: "13",
+    width: "12",
+    height: "2",
+    rx: "1",
+    fill: "currentColor"
+  })]
+});
+export default ClearAllIcon;

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

@@ -1,6 +1,7 @@
-import { Transforms, Node, Path } from "slate";
+import { Transforms, Node, Path, Editor } from "slate";
 import { ReactEditor } from "slate-react";
 import { handleNegativeInteger } from "../../../utils/helper";
+import { handleBoxAlignment } from "../VirtualElement/helper";
 export const ROW_HEIGHT = 50;
 
 // const MARGIN_OF = {
@@ -21,9 +22,18 @@ export function updateRows() {}
 export function updateCols() {}
 const handleMoveNode = (editor, path, newPath, {
   isEmpty
-}) => {
+}, autoAlign) => {
   try {
-    const replaceNode = Node.get(editor, path);
+    let replaceNode = Node.get(editor, path);
+    if (autoAlign) {
+      // reset node for auto alignment in mobile
+      replaceNode = {
+        ...replaceNode,
+        gridArea_xs: null,
+        xs_updatedOn: null,
+        marginTop_xs: null
+      };
+    }
     if (isEmpty) {
       const toPath = [...newPath, 0];
       Transforms.insertNodes(editor, [{
@@ -57,9 +67,10 @@ const handleMoveNode = (editor, path, newPath, {
  * This method will update prop in child node so it will re-render and update the path
  * @param {*} path - contains the parent section path
  */
-const reRenderChildNodes = (editor, path) => {
+export const reRenderChildNodes = (editor, path) => {
   try {
     const sectionNode = Node.get(editor, path);
+    console.log("sectionNode", sectionNode);
     // parent node
     Transforms.setNodes(editor, {
       updated_at: new Date().getTime()
@@ -92,7 +103,9 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
       // get parent node
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
+    console.log("moveTopath", moveTopath, path, parentPath, dragOver);
     const moveToNode = Node.get(editor, moveTopath);
+    console.log("parentNode, moveToNode", parentNode, moveToNode);
     const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
@@ -127,6 +140,9 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
     console.log(err);
   }
 }
+const isInsidePath = (from, moveTo) => {
+  return Path.isAncestor(from, moveTo);
+};
 export function onDropItem(props, parentClass) {
   try {
     const {
@@ -174,7 +190,17 @@ export function onDropItem(props, parentClass) {
     }, {
       at: path
     });
-    reRenderChildNodes(editor, from);
+    let reRenderSectionPath;
+    const [sectionData] = Editor.nodes(editor, {
+      at: moveTo,
+      match: n => n.type === "freegrid"
+    });
+    const [sectionNode, sectionPath] = sectionData || [];
+    if (needMove && isInsidePath(from, moveTo)) {
+      reRenderSectionPath = sectionPath;
+    } else {
+      reRenderChildNodes(editor, from);
+    }
 
     // move the node if section parent changed
     if (needMove) {
@@ -183,10 +209,35 @@ 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 (moveSectionToSection && autoAlign) {
+        // auto align in mobile
+        Transforms.setNodes(editor, {
+          xs_updatedOn: null
+        }, {
+          at: moveTo
+        });
+      } else if (autoAlign) {
+        Transforms.setNodes(editor, {
+          autoAlign: true,
+          xs_updatedOn: new Date().getTime()
+        }, {
+          at: moveTo
+        });
+      }
       const rPath = handleMoveNode(editor, path, newPath, {
         isEmpty
-      });
-      reRenderChildNodes(editor, moveTo);
+      }, autoAlign);
+      reRenderChildNodes(editor, reRenderSectionPath || moveTo);
+      if (autoAlign) {
+        handleBoxAlignment(editor, sectionNode, sectionPath);
+      }
       return {
         updated_at: rPath
       };

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

@@ -293,4 +293,7 @@ export function getAbsolutePositionY(currentEle) {
     gridArea,
     marginTop
   };
+}
+export function getPathFromElement(element) {
+  return element?.dataset.path?.split("|").map(m => parseInt(m));
 }

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

@@ -0,0 +1,110 @@
+import { Box } from "@mui/material";
+import { useAutoAlignStyles } from "./styles";
+import { useEffect, useRef } from "react";
+import { ROW_HEIGHT, calculateGridArea, reRenderChildNodes } from "../Utils/gridDropItem";
+import updateAutoProps from "./updateAutoProps";
+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;
+};
+function ForceAutoAlignment(props) {
+  const {
+    editor,
+    sectionCls,
+    path,
+    autoAlign,
+    setAutoAlign
+  } = props;
+  const classes = useAutoAlignStyles();
+  const virtualRef = useRef();
+  useEffect(() => {
+    let timeoutId;
+    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);
+        setAutoAlign(false);
+      }, 100);
+    }
+    return () => {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [autoAlign, 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;
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    className: "force-mobile-virtual-mode",
+    ref: virtualRef,
+    sx: {
+      visibility: "hidden",
+      ...classes.root
+    },
+    "aria-hidden": "true",
+    dangerouslySetInnerHTML: {
+      __html: getItems()
+    }
+  });
+}
+export default ForceAutoAlignment;

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

@@ -0,0 +1,112 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+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) {
+    return;
+  }
+  const textItemIndex = path[parentPath.length];
+  const textItem = gridItems.find((_, index) => textItemIndex === index);
+  const {
+    marginTop_xs: marginTop,
+    gridArea_xs: gridArea,
+    height_xs
+  } = 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
+    });
+  }
+};
+function VirtualTextElement(props) {
+  const {
+    dataSets,
+    getCurrentEle,
+    path,
+    editor
+  } = props;
+  const textRef = useRef(null);
+  const currElement = getCurrentEle();
+  useEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        const {
+          height
+        } = entry.contentRect;
+        updateTextHeight(editor, path, height);
+      }
+    });
+    const elementRef = textRef?.current;
+    if (elementRef) {
+      observer.observe(elementRef);
+    }
+    return () => {
+      const elementRef = textRef?.current;
+      if (elementRef) {
+        observer.unobserve(elementRef);
+      }
+      observer.disconnect();
+    };
+  }, []);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: "fixed",
+      width: dataSets["data-width-xs"],
+      minHeight: "fit-content",
+      visibility: "hidden",
+      pointerEvents: "none",
+      right: 0,
+      top: 0
+    },
+    ref: textRef,
+    children: currElement?.innerText
+  });
+}
+export default VirtualTextElement;