@flozy/editor 5.3.6 → 5.3.7

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

@@ -2,21 +2,21 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SettingsIcon = props => {
   return /*#__PURE__*/_jsxs("svg", {
-    width: "17",
+    width: "18",
     height: "18",
-    viewBox: "0 0 17 18",
+    viewBox: "0 0 18 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     ...props,
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M8.5 11.125C9.6736 11.125 10.625 10.1736 10.625 9C10.625 7.82639 9.6736 6.875 8.5 6.875C7.32639 6.875 6.375 7.82639 6.375 9C6.375 10.1736 7.32639 11.125 8.5 11.125Z",
+      d: "M9 11.25C10.2426 11.25 11.25 10.2426 11.25 9C11.25 7.75736 10.2426 6.75 9 6.75C7.75736 6.75 6.75 7.75736 6.75 9C6.75 10.2426 7.75736 11.25 9 11.25Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M1.4165 9.62343V8.37676C1.4165 7.6401 2.01859 7.03093 2.76234 7.03093C4.04442 7.03093 4.56859 6.12426 3.924 5.01218C3.55567 4.37468 3.77525 3.54593 4.41984 3.1776L5.64525 2.47635C6.20484 2.14343 6.92734 2.34176 7.26025 2.90135L7.33817 3.03593C7.97567 4.14801 9.024 4.14801 9.66859 3.03593L9.7465 2.90135C10.0794 2.34176 10.8019 2.14343 11.3615 2.47635L12.5869 3.1776C13.2315 3.54593 13.4511 4.37468 13.0828 5.01218C12.4382 6.12426 12.9623 7.03093 14.2444 7.03093C14.9811 7.03093 15.5903 7.63301 15.5903 8.37676V9.62343C15.5903 10.3601 14.9882 10.9693 14.2444 10.9693C12.9623 10.9693 12.4382 11.8759 13.0828 12.988C13.4511 13.6326 13.2315 14.4543 12.5869 14.8226L11.3615 15.5238C10.8019 15.8568 10.0794 15.6584 9.7465 15.0988L9.66859 14.9643C9.03109 13.8522 7.98275 13.8522 7.33817 14.9643L7.26025 15.0988C6.92734 15.6584 6.20484 15.8568 5.64525 15.5238L4.41984 14.8226C3.77525 14.4543 3.55567 13.6255 3.924 12.988C4.56859 11.8759 4.04442 10.9693 2.76234 10.9693C2.01859 10.9693 1.4165 10.3601 1.4165 9.62343Z",
+      d: "M1.5 9.6591V8.3391C1.5 7.5591 2.1375 6.9141 2.925 6.9141C4.2825 6.9141 4.8375 5.9541 4.155 4.7766C3.765 4.1016 3.9975 3.2241 4.68 2.8341L5.9775 2.0916C6.57 1.7391 7.335 1.9491 7.6875 2.5416L7.77 2.6841C8.445 3.8616 9.555 3.8616 10.2375 2.6841L10.32 2.5416C10.6725 1.9491 11.4375 1.7391 12.03 2.0916L13.3275 2.8341C14.01 3.2241 14.2425 4.1016 13.8525 4.7766C13.17 5.9541 13.725 6.9141 15.0825 6.9141C15.8625 6.9141 16.5075 7.5516 16.5075 8.3391V9.6591C16.5075 10.4391 15.87 11.0841 15.0825 11.0841C13.725 11.0841 13.17 12.0441 13.8525 13.2216C14.2425 13.9041 14.01 14.7741 13.3275 15.1641L12.03 15.9066C11.4375 16.2591 10.6725 16.0491 10.32 15.4566L10.2375 15.3141C9.5625 14.1366 8.4525 14.1366 7.77 15.3141L7.6875 15.4566C7.335 16.0491 6.57 16.2591 5.9775 15.9066L4.68 15.1641C3.9975 14.7741 3.765 13.8966 4.155 13.2216C4.8375 12.0441 4.2825 11.0841 2.925 11.0841C2.1375 11.0841 1.5 10.4391 1.5 9.6591Z",
       stroke: "#64748B",
       strokeWidth: "1.5",
       strokeMiterlimit: "10",

package/dist/Editor/common/ColorPickerButton.js

@@ -82,10 +82,12 @@ const ColorPickerButton = props => {
         height: "22px",
         minWidth: "22px",
         borderRadius: "26px"
-        // border: "2px solid #E7E7E7",
       },
-
-      onClick: handleColorPicker
+      onClick: handleColorPicker,
+      className: "colorPickerButton",
+      sx: {
+        ...classes.colorPickerBtnBorder
+      }
     }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
       open: open,
       onClose: handleClose,

package/dist/Editor/common/DnD/Draggable.js

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {
   const {
@@ -35,7 +36,7 @@ const Draggable = props => {
     contentEditable: false,
     style: dragStyle,
     sx: classes.dragHandle,
-    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+    children: /*#__PURE__*/_jsx(SectionDragIcon, {})
   });
 };
 export default Draggable;

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -41,9 +41,9 @@ const FontLoader = props => {
             // Retry loading the same batch
             loadNextBatch();
           } else {
-            console.log(
-              // `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            );
+            // console.log(
+            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
+            // );
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
@@ -67,7 +67,7 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        console.log(err);
+        // console.log(err);
       });
     } else {
       function correctFontArray(fontString) {

package/dist/Editor/common/Icon.js

@@ -11,6 +11,7 @@ import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import GridOnIcon from "@mui/icons-material/GridOn";
 import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
 import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
@@ -271,6 +272,11 @@ const iconList = {
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
   addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
+  dataView: /*#__PURE__*/_jsx(GridOnIcon, {
+    sx: {
+      fill: "#64748B"
+    }
+  }),
   editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
   deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),

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

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

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

@@ -58,11 +58,32 @@ const ImageSelectorStyles = theme => ({
       borderRadius: "12px",
       backgroundColor: theme?.palette?.editor?.background
     },
+    "& .MuiDialogTitle-root": {
+      fontSize: "16px",
+      fontWeight: "700",
+      "& button": {
+        "& svg": {
+          "& rect": {
+            fill: theme?.palette?.editor?.closeButtonBgColor
+          },
+          "& path": {
+            stroke: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      }
+    },
+    "& .MuiDivider-root": {
+      background: theme?.palette?.editor?.deviderBgColor,
+      "@media only screen and (min-width: 899px)": {
+        margin: "0px 24px",
+        width: 'calc(100% - 48px)'
+      }
+    },
     "& .primaryBtn": {
       background: "#2563eb !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
       color: "#ffffff !important",
@@ -71,23 +92,43 @@ const ImageSelectorStyles = theme => ({
       marginLeft: "0px !important"
     },
     "& .secondaryBtn": {
-      background: "#ffffff !important",
+      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
-      color: "#2563eb !important",
-      border: "1px solid #2563eb !important",
+      color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+      border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`,
       width: "auto !important",
       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`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      }
+    },
+    "& .MuiImageList-root": {
+      margin: '0px'
+    },
+    "& .MuiDialogContent-root": {
+      padding: '20px 24px 5px 24px'
     }
   },
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor,
-    fontFamily: 'Inter, sans-serif'
+    fontFamily: "Inter, sans-serif"
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

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

@@ -1,26 +1,38 @@
 const UploadStyles = theme => ({
   uploadContainer: {
-    border: "1px solid #2563EB",
+    border: `1px solid ${theme?.palette?.editor?.uploadFileBorder}`,
     padding: "10px",
-    borderRadius: "7px",
-    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
+    borderRadius: "11px",
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+    background: theme?.palette?.editor?.uploadFileBg,
+    height: '100%',
+    minHeight: '150px'
   },
   uploadField: {
     width: "100%",
     backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
-    height: "250px",
+    height: "auto",
     position: "relative",
-    backgroundColor: theme?.palette?.editor?.background,
+    backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
-    border: "1px dashed #2563EB"
+    border: "1px dashed #2563EB",
+    minHeight: '150px'
   },
   uploadIcon: {
+    display: "grid !important",
     "& svg": {
+      display: 'flex',
+      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
+    },
+    '& span': {
+      display: 'flex',
+      width: '100%',
+      marginTop: '5px'
     }
   }
 });

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

@@ -3,9 +3,10 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
+    // padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden",
-    padding: "8px 0px !important",
+    // padding: "8px 0px !important",
     background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
     "& .MuiPaper-root": {
       background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
@@ -21,131 +22,12 @@ const usePopupStyles = theme => ({
         "& button": {
           padding: "0px 0px 0px 4px !important",
           "& svg": {
-            width: "18px !important",
-            margin: "5px 12px 6px 6px !important"
+            width: "21px !important",
+            margin: "5px 12px 6px 4px !important"
           },
           "&:hover": {
             borderRadius: "10px",
             background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
-            // "& svg": {
-            //   fill: "#007bff",
-            // },
-          }
-        },
-
-        "& .active": {
-          border: "unset !important",
-          "& .MuiPaper-root": {
-            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-            borderRadius: "7px",
-            "& .MuiBox-root": {
-              "& .MuiCardContent-root": {
-                "& .MuiTypography-root": {
-                  color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-                }
-              }
-            }
-          },
-          "& button": {
-            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-            borderRadius: "7px",
-            "& svg": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& span": {
-              "& .MuiTypography-root": {
-                color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .BrainIcon": {
-              "& .bainIconPathStroke": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: "unset !important"
-              },
-              "& .bainIconPathStroke2": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            }
-          },
-          "& .MuiCardMedia-root": {
-            "& .signatureElementIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .commonSvgStyle": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .calederIconSvg": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& rect": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .colorBoxElementIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                fill: "none"
-              }
-            },
-            "& .gridElementIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .newLineElementIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .blockQuoteSvg": {
-              fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-            },
-            "& .orderedListIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& text": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .bulletedListTextIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& circle": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .checkedListTextIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .accordianListTextIcon": {
-              // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-              "& svg": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .accordianIconSvgTextFormat": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            }
           }
         },
         "&:hover": {
@@ -171,6 +53,111 @@ const usePopupStyles = theme => ({
     },
     "& button": {
       color: theme?.palette?.editor?.textColor
+    },
+    "@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`
+    },
+    "&::-webkit-scrollbar-track": {
+      visibility: "hidden"
+    },
+    "& svg": {
+      width: "20px",
+      height: "20px"
+    },
+    "& .signatureElementIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .commonSvgStyle": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .commonSvgStyle2": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .colorBoxElementIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        fill: "none"
+      }
+    },
+    "& .gridElementIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .newLineElementIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .orderedListIcon": {
+      "& .strokePathList": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      "& .fillPathList": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .bulletedListTextIcon": {
+      "& path": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke,
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      "& circle": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .checkedListTextIcon": {
+      "& path": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .accordianIconSvgTextFormat": {
+      "& path": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .blockQuoteSvg": {
+      fill: theme?.palette?.editor?.closeButtonSvgStroke,
+      stroke: theme?.palette?.editor?.closeButtonSvgStroke
+    },
+    "& .BrainIcon": {
+      "& .bainIconPathStroke": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke,
+        stroke: "unset !important"
+      },
+      "& .bainIconPathStroke2": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke,
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .calederIconSvg": {
+      '& rect': {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      '& .strokePath': {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      '& .fillPath': {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
     }
   },
   groupHeader: {

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

@@ -62,6 +62,7 @@ const FormSettings = props => {
       MuiAccordion: {
         styleOverrides: {
           root: {
+            background: theme?.palette?.editor?.miniToolBarBackground,
             "& .MuiAccordionSummary-root": {
               flexDirection: "row-reverse",
               "& .MuiSvgIcon-root": {

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

@@ -22,7 +22,7 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% - 160px)"
       }
     },
@@ -35,13 +35,13 @@ const useGuideLineStyle = ({
       backgroundColor: "#FFF",
       pointerEvents: "none",
       zIndex: 1,
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         left: "calc(50% + 160px)"
       }
     },
     "& .white-wrapper": {
       overflowX: "hidden",
-      [theme.breakpoints.between("xs", "md")]: {
+      [theme?.breakpoints?.between("xs", "md")]: {
         position: "absolute",
         width: "calc(50% - 162px)",
         height: "calc(100% - 2px)",

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

@@ -10,7 +10,7 @@ const useShadowElementStyles = ({
     position: "relative",
     backgroundColor: "rgba(0,0,0,0)",
     marginLeft: `calc((100% - 980px) * 0.5)`,
-    [theme.breakpoints.between("xs", "md")]: {
+    [theme?.breakpoints?.between("xs", "md")]: {
       marginLeft: `calc((100% - 320px) * 0.5)`
     }
   }

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

@@ -3,24 +3,35 @@ import PersonalVideoIcon from "@mui/icons-material/PersonalVideo";
 import PhoneIphoneIcon from "@mui/icons-material/PhoneIphone";
 import useSwitchViewport from "./styles";
 import { useEffect } from "react";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 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, {
         className: `${!breakpoint || breakpoint === "lg" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("");
           onChange("");
         },
         children: /*#__PURE__*/_jsx(PersonalVideoIcon, {})
@@ -30,6 +41,7 @@ const SwitchViewport = props => {
       children: /*#__PURE__*/_jsx(IconButton, {
         className: `${breakpoint === "xs" ? "active" : ""}`,
         onClick: () => {
+          setActiveBreakPoint("xs");
           onChange("xs");
         },
         children: /*#__PURE__*/_jsx(PhoneIphoneIcon, {})

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

@@ -1,5 +1,6 @@
 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,
@@ -75,7 +76,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props) {
+function isContainerElement(editor, moveTopath, props, appenBp) {
   try {
     const {
       path,
@@ -91,6 +92,7 @@ function isContainerElement(editor, moveTopath, props) {
       parentNode = Node.get(editor, Path.parent(dragItemPath));
     }
     const moveToNode = Node.get(editor, moveTopath);
+    const leftOfMoveToNode = moveToNode[`left${appenBp}`];
     if (moveToNode.type === "freegridBox") {
       if (parentNode.type === "freegridBox") {
         // same box
@@ -98,10 +100,10 @@ function isContainerElement(editor, moveTopath, props) {
           return props.calX;
         } else {
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
         }
       } else {
-        return props.calX - moveToNode?.left;
+        return props.calX - leftOfMoveToNode;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
@@ -133,14 +135,16 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const cCalx = isContainerElement(editor, moveTo, props);
+    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
+    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
+
     // const posX = parseInt(
     //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
     // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();
-    const y = endPosition.y - startPosition.diffY - rect.top;
+    const y = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -150,7 +154,6 @@ export function onDropItem(props, parentClass) {
 
     // Update grid area
     const gridArea = `${row} / 1 / ${row + 1} / 2`;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
     Transforms.setNodes(editor, {
       [`gridArea${appenBp}`]: gridArea,
       [`left${appenBp}`]: cCalx,