@flozy/editor 5.3.4 → 5.3.6

package/dist/Editor/common/ColorPickerButton.js

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

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

@@ -2,7 +2,6 @@ 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 {
@@ -36,7 +35,7 @@ const Draggable = props => {
     contentEditable: false,
     style: dragStyle,
     sx: classes.dragHandle,
-    children: /*#__PURE__*/_jsx(SectionDragIcon, {})
+    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
   });
 };
 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,7 +11,6 @@ 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";
@@ -272,11 +271,6 @@ 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,8 +18,7 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: 0,
-      height: '100%'
+      padding: 0
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

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

@@ -58,32 +58,11 @@ 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: "32px !important",
+      height: "28px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
       color: "#ffffff !important",
@@ -92,43 +71,23 @@ const ImageSelectorStyles = theme => ({
       marginLeft: "0px !important"
     },
     "& .secondaryBtn": {
-      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      background: "#ffffff !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "32px !important",
+      height: "28px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
-      color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
-      border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`,
+      color: "#2563eb !important",
+      border: "1px solid #2563eb !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,38 +1,26 @@
 const UploadStyles = theme => ({
   uploadContainer: {
-    border: `1px solid ${theme?.palette?.editor?.uploadFileBorder}`,
+    border: "1px solid #2563EB",
     padding: "10px",
-    borderRadius: "11px",
-    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
-    background: theme?.palette?.editor?.uploadFileBg,
-    height: '100%',
-    minHeight: '150px'
+    borderRadius: "7px",
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
   },
   uploadField: {
     width: "100%",
     backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
-    height: "auto",
+    height: "250px",
     position: "relative",
-    backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
+    backgroundColor: theme?.palette?.editor?.background,
     borderRadius: "9px",
-    border: "1px dashed #2563EB",
-    minHeight: '150px'
+    border: "1px dashed #2563EB"
   },
   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,10 +3,9 @@ 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`,
@@ -22,12 +21,131 @@ const usePopupStyles = theme => ({
         "& button": {
           padding: "0px 0px 0px 4px !important",
           "& svg": {
-            width: "21px !important",
-            margin: "5px 12px 6px 4px !important"
+            width: "18px !important",
+            margin: "5px 12px 6px 6px !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": {
@@ -53,111 +171,6 @@ 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,7 +62,6 @@ 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,35 +3,24 @@ 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,
-    show
+    onChange
   } = props;
   const classes = useSwitchViewport();
-  const {
-    setSelectedElement,
-    setActiveBreakPoint
-  } = useEditorContext();
   useEffect(() => {
-    // to reset selection on viewport changes - FS-6589
-    setSelectedElement({});
+    console.log(breakpoint);
   }, [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, {})
@@ -41,7 +30,6 @@ 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,6 +1,5 @@
 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,
@@ -76,7 +75,7 @@ const reRenderChildNodes = (editor, path) => {
     console.log(err);
   }
 };
-function isContainerElement(editor, moveTopath, props, appenBp) {
+function isContainerElement(editor, moveTopath, props) {
   try {
     const {
       path,
@@ -92,7 +91,6 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
       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
@@ -100,10 +98,10 @@ function isContainerElement(editor, moveTopath, props, appenBp) {
           return props.calX;
         } else {
           // for different box
-          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - leftOfMoveToNode);
+          return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
         }
       } else {
-        return props.calX - leftOfMoveToNode;
+        return props.calX - moveToNode?.left;
       }
     } else if (moveToNode.type === "freegrid") {
       if (parentNode.type === "freegridBox") {
@@ -135,16 +133,14 @@ export function onDropItem(props, parentClass) {
     const from = parentPath.split("|").map(m => parseInt(m));
     let newPath = [];
     newPath = moveTo;
-    const appenBp = breakpoint === "lg" ? "" : `_${breakpoint}`;
-    const cCalx = isContainerElement(editor, moveTo, props, appenBp);
-
+    const cCalx = isContainerElement(editor, moveTo, props);
     // 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 = handleNegativeInteger(endPosition.y - startPosition.diffY - rect.top);
+    const y = endPosition.y - startPosition.diffY - rect.top;
 
     // Calculate grid position
     const row = Math.floor(y / ROW_HEIGHT) + 1;
@@ -154,6 +150,7 @@ 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,

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

@@ -18,7 +18,7 @@ import { selectText } from "../../utils/helper";
 import { removeSign } from "./ElementSettings/OtherSettings";
 import useDragging from "../../hooks/useDragging";
 import { dragOverOn } from "../../helper/RnD/focusNode";
-import { focusSelection, clearSelection, clearSelectionOnly } from "../../helper";
+import { focusSelection, clearSelection } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -163,7 +163,6 @@ const RnD = props => {
       }
       switch (e.detail) {
         case 1:
-          clearSelectionOnly(editor); //for selection removal on click outside 
           if (!enable) {
             setSelectedElement({
               path: str_path,

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

@@ -3,13 +3,13 @@ import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Popper, Tooltip } from "@mui/material";
+import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
-import { SectionSettingIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -72,13 +72,13 @@ const Section = props => {
         height: "100%"
       } : {
         left: "-28px",
-        top: "1px"
+        top: "3px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
+          children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
       })
     }) : null;