@flozy/editor 8.0.7 → 8.0.8

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,8 +18,8 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: "10px",
-      height: "100%"
+      padding: 0,
+      height: '100%'
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

package/dist/Editor/common/ImageSelector/Styles.js

@@ -76,7 +76,7 @@ const ImageSelectorStyles = theme => ({
       background: theme?.palette?.editor?.deviderBgColor,
       "@media only screen and (min-width: 899px)": {
         margin: "0px 24px",
-        width: 'calc(100% - 48px)'
+        width: "calc(100% - 48px)"
       }
     },
     "& .primaryBtn": {
@@ -104,12 +104,6 @@ const ImageSelectorStyles = theme => ({
       marginRight: "8px !important"
     },
     "& .MuiGrid-root": {
-      "&::-webkit-scrollbar-thumb": {
-        background: `none !important`
-      },
-      "&::-webkit-scrollbar-track": {
-        visibility: "hidden"
-      },
       "&::-webkit-scrollbar-thumb": {
         background: `${theme?.palette?.editor?.brainPopupScroll} !important`
       },
@@ -118,10 +112,10 @@ const ImageSelectorStyles = theme => ({
       }
     },
     "& .MuiImageList-root": {
-      margin: '0px'
+      margin: "0px"
     },
     "& .MuiDialogContent-root": {
-      padding: '20px 24px 5px 24px'
+      padding: "20px 24px 5px 24px"
     }
   },
   titleTypo: {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -5,9 +5,8 @@ const UploadStyles = theme => ({
     borderRadius: "11px",
     boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
     background: theme?.palette?.editor?.uploadFileBg,
-    height: "100%",
-    minHeight: "150px",
-    height: "inherit"
+    height: '100%',
+    minHeight: '150px'
   },
   uploadField: {
     width: "100%",
@@ -19,21 +18,21 @@ const UploadStyles = theme => ({
     backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
     border: "1px dashed #2563EB",
-    minHeight: "150px"
+    minHeight: '150px'
   },
   uploadIcon: {
     display: "grid !important",
     "& svg": {
-      display: "flex",
-      width: "100%",
+      display: 'flex',
+      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
     },
-    "& span": {
-      display: "flex",
-      width: "100%",
-      marginTop: "5px"
+    '& span': {
+      display: 'flex',
+      width: '100%',
+      marginTop: '5px'
     }
   }
 });

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -168,11 +168,6 @@ export const ScrollTopBottom = props => {
       fullWidth: true,
       value: value,
       onChange: e => onChange(e.target.value),
-      MenuProps: {
-        sx: {
-          zIndex: "1302 !important"
-        }
-      },
       children: scrollToOptions.map((option, i) => {
         return /*#__PURE__*/_jsx(MenuItem, {
           value: option.value,

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

@@ -86,11 +86,6 @@ export default function LinkSettings(props) {
           setNavValue("");
         },
         displayEmpty: true,
-        MenuProps: {
-          sx: {
-            zIndex: "1302 !important"
-          }
-        },
         children: navOptions.map((navOption, i) => {
           return /*#__PURE__*/_jsx(MenuItem, {
             value: navOption.value,

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -53,18 +53,12 @@ const usePopupStyles = theme => ({
     "& button": {
       color: theme?.palette?.editor?.textColor
     },
-    "@media only screen and (min-width: 899px)": {
-      maxHeight: "400px"
-    },
+    // "@media only screen and (min-width: 899px)": {
+    //   maxHeight: "400px",
+    // },
     "&  .orderedListIcon, .bulletedListTextIcon, .checkedListTextIcon, .accordianIconSvgTextFormat": {
       width: "20px !important"
     },
-    "&::-webkit-scrollbar-thumb": {
-      background: `none !important`
-    },
-    "&::-webkit-scrollbar-track": {
-      visibility: "hidden"
-    },
     "&::-webkit-scrollbar-thumb": {
       background: `${theme?.palette?.editor?.brainPopupScroll} !important`
     },
@@ -148,13 +142,13 @@ const usePopupStyles = theme => ({
       }
     },
     "& .calederIconSvg": {
-      '& rect': {
+      "& rect": {
         stroke: theme?.palette?.editor?.closeButtonSvgStroke
       },
-      '& .strokePath': {
+      "& .strokePath": {
         stroke: theme?.palette?.editor?.closeButtonSvgStroke
       },
-      '& .fillPath': {
+      "& .fillPath": {
         fill: theme?.palette?.editor?.closeButtonSvgStroke
       }
     }

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -65,7 +65,8 @@ const Settings = props => {
             editor: editor,
             path: path,
             customProps: customProps,
-            theme: theme
+            theme: theme,
+            onClose: onClose
           }) : null
         })]
       })

package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js

@@ -8,7 +8,8 @@ const AppHeaderSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const AppHeaderSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js

@@ -8,7 +8,8 @@ const BoxSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -27,7 +28,7 @@ const BoxSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js

@@ -8,7 +8,8 @@ const ButtonSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const ButtonSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js

@@ -8,7 +8,8 @@ const CodeSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const CodeSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js

@@ -12,7 +12,8 @@ const FormSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path];
@@ -55,13 +56,14 @@ const FormSettings = props => {
     }
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   const muiTheme = createTheme({
     components: {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js

@@ -8,7 +8,8 @@ const ImageSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -27,7 +28,7 @@ const ImageSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js

@@ -9,7 +9,8 @@ const TableSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -57,7 +58,7 @@ const TableSettings = props => {
     }
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js

@@ -8,7 +8,8 @@ const VideoSettings = props => {
   const {
     editor,
     path,
-    customProps
+    customProps,
+    onClose
   } = props;
   const item_path = path?.split("|").map(m => parseInt(m));
   const element_path = [...item_path, 0];
@@ -28,7 +29,7 @@ const VideoSettings = props => {
     });
   };
   const handleClose = () => {
-    console.log("close");
+    onClose();
   };
   return /*#__PURE__*/_jsx(Box, {
     component: "div",

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

@@ -58,9 +58,7 @@ const useElementSettingsStyle = theme => ({
       maxHeight: "500px",
       overflowX: "hidden",
       overflowY: "auto",
-      paddingLeft: "4px",
       background: theme?.palette?.editor?.background,
-      paddingLeft: "4px",
       "& .MuiTypography-root, .MuiInputBase-root, input": {
         color: theme?.palette?.editor?.textColor
       },

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

@@ -9,17 +9,23 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const SwitchViewport = props => {
   const {
     breakpoint,
-    onChange
+    onChange,
+    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",
       children: /*#__PURE__*/_jsx(IconButton, {

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 } from "@mui/material";
+import { useTheme, createTheme } 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";
@@ -51,12 +52,14 @@ const extendedTheme = prevTheme => createTheme({
   }
 });
 const ViewportStimulator = ({
-  children
+  children,
+  selectedTheme
 }) => {
   const theme = useTheme();
   const viewportTheme = extendedTheme(theme);
-  return /*#__PURE__*/_jsx(ThemeProvider, {
+  return /*#__PURE__*/_jsx(MainThemeProvider, {
     theme: viewportTheme,
+    userSelectedTheme: selectedTheme,
     children: children
   });
 };

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

@@ -2,10 +2,11 @@ import { Transforms, Node, Path } from "slate";
 import { ReactEditor } from "slate-react";
 import { handleNegativeInteger } from "../../../utils/helper";
 export const ROW_HEIGHT = 50;
-const MARGIN_OF = {
-  xs: 160,
-  lg: 490
-};
+
+// const MARGIN_OF = {
+//   xs: 160,
+//   lg: 490,
+// };
 
 /**
  * This method will update the grid template rows of parent section based on height

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

@@ -1,6 +1,9 @@
 import { Transforms, Node } from "slate";
 import { ReactEditor } from "slate-react";
 import { getNearestItem } from "./calculateDropItem";
+import { ROW_HEIGHT, getBorderWidth } from "./gridDropItem";
+import { handleNegativeInteger } from "../../../utils/helper";
+import { getDevice } from "../../../helper/theme";
 const GUIDE_LINE_THRESHOLD = 5;
 const GUIDE_LINE_OVERLAP_THRESHOLD = 5;
 const handleMoveNode = (editor, path, newPath, {
@@ -248,4 +251,46 @@ export function getParentSectionPath(props, closestClass) {
   } catch (err) {
     console.log(err);
   }
+}
+export function getAbsolutePositionX(currentEle) {
+  const isMobile = getDevice(window.innerWidth) === "xs";
+  const {
+    left: currElementLeft
+  } = currentEle?.getBoundingClientRect() || {};
+  let parentBoxDom = currentEle?.closest(".fgi_type_box");
+  if (isMobile && !parentBoxDom) {
+    parentBoxDom = currentEle?.closest(".freegrid-section");
+  }
+  const relativeElementX = parentBoxDom || document.querySelector(".rnd-guideline-lv");
+  const {
+    left
+  } = relativeElementX?.getBoundingClientRect() || {};
+  const borderLeftWidth = getBorderWidth(relativeElementX, "borderLeftWidth");
+  const absolutePositionX = parseInt(currElementLeft - left - borderLeftWidth);
+  return {
+    absolutePositionX
+  };
+}
+export function getAbsolutePositionY(currentEle) {
+  const {
+    top: currElementTop
+  } = currentEle?.getBoundingClientRect() || {};
+  const relativeElementY = currentEle?.closest(".freegrid-container-parent");
+  const borderTopWidth = getBorderWidth(relativeElementY, "borderTopWidth");
+  const rect = relativeElementY.getBoundingClientRect();
+  const absolutePositionY = handleNegativeInteger(currElementTop - rect.top - borderTopWidth);
+
+  // Calculate grid position
+  const row = Math.floor(absolutePositionY / ROW_HEIGHT) + 1;
+
+  // Update grid area
+  const gridArea = `${row} / 1 / ${row + 1} / 2`;
+
+  // to calculate difference inside the grid
+  const marginTop = Math.abs((row - 1) * ROW_HEIGHT - absolutePositionY);
+  return {
+    absolutePositionY,
+    gridArea,
+    marginTop
+  };
 }

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

@@ -6,7 +6,7 @@ import Handles from "./TransformHandles";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import ElementOptions from "./ElementOptions";
 import ElementSettings from "./ElementSettings";
-import { getClosestDraggable, getParentSectionPath } from "./Utils";
+import { getAbsolutePositionX, getAbsolutePositionY, getClosestDraggable, getParentSectionPath } from "./Utils";
 import DragInfo from "./DragInfo";
 import GuideLines from "./GuideLines";
 import ShadowElement from "./ShadowElement";
@@ -425,9 +425,26 @@ const RnD = props => {
   };
   const onResizeStop = (e, direction, ref, d, position) => {
     e.preventDefault();
+    let updatedPosition = {};
+    if (type !== "parent") {
+      // update element position while resizing, (for free grid box and item)
+      const {
+        absolutePositionX
+      } = getAbsolutePositionX(ref);
+      const {
+        gridArea,
+        marginTop
+      } = getAbsolutePositionY(ref);
+      updatedPosition = {
+        left: absolutePositionX,
+        gridArea: gridArea,
+        marginTop: marginTop
+      };
+    }
     const updatedSize = {
       width: delta?.width + d.width,
-      height: delta?.height + d.height
+      height: delta?.height + d.height,
+      ...updatedPosition
     };
     onChange({
       ...updatedSize
@@ -505,7 +522,10 @@ const RnD = props => {
       ref: c => {
         positionRef.current = c;
       },
-      className: `${className || ""} ${dragInfoOpen ? "active-drag" : "inactive-drag"} enable-${enable} type_${childType} section_type_${type || "parent"}`,
+      className: `${className || ""} ${dragInfoOpen ? "active-drag" : "inactive-drag"} enable-${enable} type_${childType} section_type_${type || "parent"} ${Object.keys(absPosition)?.length ? "" : "remove-resize-styles"
+      // Fix rerender issue (remove-resize-styles): After resizing, click close button on a free grid-selected element
+      // doesn't remove the default `transform` style from react-rnd. Removing it manually.
+      }`,
       "data-path": str_path,
       style: {
         position: "relative",