@flozy/editor 9.6.5 → 9.6.6

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

@@ -9,19 +9,26 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    translation,
+    show
   } = props;
   const classes = useSwitchViewport();
   const {
+    setSelectedElement,
     setActiveBreakPoint
   } = useEditorContext();
   useEffect(() => {
-    console.log(breakpoint);
+    // to reset selection on viewport changes - FS-6589
+    setSelectedElement({});
   }, [breakpoint]);
   return /*#__PURE__*/_jsxs(Box, {
     sx: classes.root,
+    style: {
+      display: show ? "block" : "none"
+    },
     children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "Desktop View",
+      title: translation("Desktop View"),
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
@@ -31,7 +38,7 @@ const SwitchViewport = props => {
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
       })
     }), /*#__PURE__*/_jsx(Tooltip, {
-      title: "Mobile View",
+      title: translation("Mobile View"),
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {

package/dist/Editor/common/RnD/Theme/MainThemeProvider.js

@@ -0,0 +1,17 @@
+import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme } from "@mui/material/styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+function MainThemeProvider({
+  children,
+  userSelectedTheme,
+  theme = {}
+}) {
+  const themeVars = extendTheme(userSelectedTheme?.theme?.cssVars || {});
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    theme: {
+      ...themeVars,
+      ...theme
+    },
+    children: children
+  });
+}
+export default MainThemeProvider;

package/dist/Editor/common/RnD/Theme/ViewportStimulator.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { useTheme, ThemeProvider, createTheme, useMediaQuery } from "@mui/material";
+import { useTheme, createTheme, useMediaQuery } from "@mui/material";
 import { isStimulator, STIMULATOR_MOCK } from "../../../hooks/useBreakpoints";
+import MainThemeProvider from "./MainThemeProvider";
 
 // Custom breakpoints functions
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -59,13 +60,15 @@ const extendedTheme = (prevTheme, isPrintMode) => createTheme({
   } : getBreakPoints(prevTheme)
 });
 const ViewportStimulator = ({
-  children
+  children,
+  selectedTheme
 }) => {
   const theme = useTheme();
   const isPrintMode = useMediaQuery("print");
   const viewportTheme = extendedTheme(theme, isPrintMode);
-  return /*#__PURE__*/_jsx(ThemeProvider, {
+  return /*#__PURE__*/_jsx(MainThemeProvider, {
     theme: viewportTheme,
+    userSelectedTheme: selectedTheme,
     children: children
   });
 };

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 { getNode, 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);
+
     // parent node
     Transforms.setNodes(editor, {
       updated_at: new Date().getTime()
@@ -127,6 +138,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 +188,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 +207,33 @@ export function onDropItem(props, parentClass) {
       if (!isEmpty) {
         newPath = [...newPath, toSectionNode?.children?.length];
       }
+      const autoAlign = breakpoint === "lg";
+      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
+        }, {
+          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 && !isBoxHeader) {
+        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/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

@@ -0,0 +1,44 @@
+import { Box } from "@mui/material";
+import { useAutoAlignStyles } from "./styles";
+import { useEffect, useRef } from "react";
+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 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,
+    setAutoAlign
+  } = props;
+  const classes = useAutoAlignStyles();
+  const virtualRef = useRef();
+  useEffect(() => {
+    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: classes.root,
+    "aria-hidden": "true",
+    contentEditable: false
+  });
+}
+export default ForceAutoAlignment;

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

@@ -0,0 +1,134 @@
+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 { Box } from "@mui/material";
+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 currElement = getCurrentEle();
+  const textRef = useRef(null);
+  const prevTextRef = useRef(currElement?.innerText);
+  useEffect(() => {
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        const {
+          height
+        } = entry.contentRect;
+        const currentText = currElement?.innerText;
+        const prevText = prevTextRef.current;
+        if (currentText && currentText !== prevText) {
+          updateTextHeight(editor, path, height);
+        }
+        prevTextRef.current = currentText;
+      }
+    });
+    const elementRef = textRef?.current;
+    if (elementRef) {
+      observer.observe(elementRef);
+    }
+    return () => {
+      const elementRef = textRef?.current;
+      if (elementRef) {
+        observer.unobserve(elementRef);
+      }
+      observer.disconnect();
+    };
+  }, [currElement?.innerText]);
+  return /*#__PURE__*/_jsx(Box, {
+    style: {
+      position: "fixed",
+      width: dataSets["data-width-xs"],
+      minHeight: "fit-content",
+      visibility: "hidden",
+      pointerEvents: "none",
+      right: 100,
+      top: 100
+    },
+    ref: textRef,
+    sx: {
+      "& .leaf-item": {
+        fontSize: "var(--fontSize_xs) !important",
+        "& span": {
+          fontSize: "var(--fontSize_xs) !important"
+        }
+      },
+      "& .editor-blocker": {
+        display: "none"
+      }
+    },
+    dangerouslySetInnerHTML: {
+      __html: currElement?.innerHTML
+    },
+    contentEditable: false,
+    id: "virtual-text-element"
+  });
+}
+export default VirtualTextElement;