@flozy/editor 4.0.1 → 4.0.3

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -48,6 +48,8 @@ const MiniToolbar = props => {
   const {
     popupType
   } = useEditorContext();
+  const canUndo = editor.history.undos.length > 0;
+  const canRedo = editor.history.redos.length > 0;
   const [toolTip, setToolTip] = useState(false);
   const [data, setData] = useState(null);
   useEffect(() => {
@@ -92,14 +94,14 @@ const MiniToolbar = props => {
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type; // for textFormat type
+        const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false; // for textFormat type
 
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: type === popper ? "active" : "",
+            className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
             onClick: handleClick(type),
             disabled: isDisabled,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {

package/dist/Editor/Toolbar/Mini/Options/Options.js

@@ -2,6 +2,8 @@ import TextIcon from "../../../assets/svg/TextIcon";
 import AddElementIcon from "../../../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../../../assets/svg/AddTemplateIcon";
 import PageSettingsButton from "../../../Elements/PageSettings/PageSettingsButton";
+import UndoButton from "../../../Elements/Undo/UndoButton";
+import RedoButton from "../../../Elements/Redo/RedoButton";
 const MENU_OPTIONS = [{
   type: "textFormat",
   icon: TextIcon,
@@ -18,5 +20,13 @@ const MENU_OPTIONS = [{
   type: "page-settings",
   icon: PageSettingsButton,
   label: "Page Settings"
+}, {
+  type: "undo",
+  icon: UndoButton,
+  label: "Undo"
+}, {
+  type: "redo",
+  icon: RedoButton,
+  label: "Redo"
 }];
 export default MENU_OPTIONS;

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -41,6 +41,13 @@ const miniToolbarStyles = theme => ({
           "& svg": {
             stroke: theme?.palette?.editor?.activeColor
           }
+        },
+        "&.disabled": {
+          "& svg": {
+            '& path': {
+              stroke: theme?.palette?.editor?.svgStrokeDisabled
+            }
+          }
         }
       }
     }

package/dist/Editor/Toolbar/PopupTool/index.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
 import { Editor, Range } from "slate";
-import { useSlate, useFocused } from "slate-react";
+import { useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import { TableUtil } from "../../utils/table";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -23,7 +23,6 @@ const PopupTool = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();
-  const inFocus = useFocused();
   const {
     selection
   } = editor;
@@ -47,7 +46,7 @@ const PopupTool = props => {
     }
   }, [event, anchorEl]);
   useEffect(() => {
-    if (!selection || !inFocus || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
+    if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
       setAnchorEl(null);
     } else {
       updateAnchorEl();

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

@@ -1,29 +1,32 @@
 import React from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const AddElementIcon = () => {
+const AddTemplateIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "17",
-    height: "16",
-    viewBox: "0 0 17 16",
+    height: "18",
+    viewBox: "0 0 17 18",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M9.17334 1.94688L13.1067 3.69354C14.24 4.19354 14.24 5.02021 13.1067 5.52021L9.17334 7.26688C8.72667 7.46688 7.99334 7.46688 7.54667 7.26688L3.61334 5.52021C2.48 5.02021 2.48 4.19354 3.61334 3.69354L7.54667 1.94688C7.99334 1.74687 8.72667 1.74687 9.17334 1.94688Z",
-      strokeWidth: "1.2",
+      d: "M9.21541 2.18999L13.3946 4.15499C14.5987 4.71749 14.5987 5.64749 13.3946 6.20999L9.21541 8.17499C8.74083 8.39999 7.96166 8.39999 7.48708 8.17499L3.30791 6.20999C2.10374 5.64749 2.10374 4.71749 3.30791 4.15499L7.48708 2.18999C7.96166 1.96499 8.74083 1.96499 9.21541 2.18999Z",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.5 7.3335C2.5 7.8935 2.92 8.54016 3.43333 8.76683L7.96 10.7802C8.30667 10.9335 8.7 10.9335 9.04 10.7802L13.5667 8.76683C14.08 8.54016 14.5 7.8935 14.5 7.3335",
-      strokeWidth: "1.2",
+      d: "M2.125 8.25C2.125 8.88 2.57125 9.6075 3.11667 9.8625L7.92625 12.1275C8.29458 12.3 8.7125 12.3 9.07375 12.1275L13.8833 9.8625C14.4287 9.6075 14.875 8.88 14.875 8.25",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M2.5 10.6665C2.5 11.2865 2.86667 11.8465 3.43333 12.0998L7.96 14.1132C8.30667 14.2665 8.7 14.2665 9.04 14.1132L13.5667 12.0998C14.1333 11.8465 14.5 11.2865 14.5 10.6665",
-      strokeWidth: "1.2",
+      d: "M2.125 12C2.125 12.6975 2.51458 13.3275 3.11667 13.6125L7.92625 15.8775C8.29458 16.05 8.7125 16.05 9.07375 15.8775L13.8833 13.6125C14.4854 13.3275 14.875 12.6975 14.875 12",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     })]
   });
 };
-export default AddElementIcon;
+export default AddTemplateIcon;

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RedoIcon = props => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "18",
+    viewBox: "0 0 17 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M12.25 14.5H6.25C4.18 14.5 2.5 12.484 2.5 10C2.5 7.516 4.18 5.5 6.25 5.5H14.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M12.5 7.5L14.5 5.5L12.5 3.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default RedoIcon;

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

@@ -0,0 +1,28 @@
+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",
+    height: "18",
+    viewBox: "0 0 17 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",
+      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",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default SettingsIcon;

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

@@ -4,22 +4,25 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const TextIcon = () => {
   return /*#__PURE__*/_jsxs("svg", {
     width: "15",
-    height: "14",
-    viewBox: "0 0 15 14",
+    height: "16",
+    viewBox: "0 0 15 16",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     children: [/*#__PURE__*/_jsx("path", {
-      d: "M2.0575 4.18274V3.12107C2.0575 2.45024 2.59999 1.91357 3.265 1.91357H11.735C12.4058 1.91357 12.9425 2.45607 12.9425 3.12107V4.18274",
+      d: "M1.66895 4.9813V3.8438C1.66895 3.12505 2.2502 2.55005 2.9627 2.55005H12.0377C12.7564 2.55005 13.3314 3.1313 13.3314 3.8438V4.9813",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M7.5 12.0866V2.39746",
+      d: "M7.5 13.4501V3.06885",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }), /*#__PURE__*/_jsx("path", {
-      d: "M5.20166 12.0864H9.79833",
+      d: "M5.0376 13.45H9.9626",
+      stroke: "#64748B",
       strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const UndoIcon = props => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "17",
+    height: "18",
+    viewBox: "0 0 17 18",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: [/*#__PURE__*/_jsx("path", {
+      d: "M4.75 14.5H10.75C12.82 14.5 14.5 12.484 14.5 10C14.5 7.516 12.82 5.5 10.75 5.5H2.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeMiterlimit: "10",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M4.5 7.5L2.5 5.5L4.5 3.5",
+      stroke: "#64748B",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+};
+export default UndoIcon;

package/dist/Editor/common/ColorPickerButton.js

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from "react";
+import React, { useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
@@ -11,8 +11,7 @@ const ColorPickerButton = props => {
     onSave,
     defaultColors = [],
     classes = {},
-    recentColors = [],
-    hideGradient
+    recentColors = []
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const [color, setColor] = useState(value);
@@ -30,13 +29,6 @@ const ColorPickerButton = props => {
   const handleColorChange = color => {
     setColor(color);
   };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
@@ -69,10 +61,10 @@ const ColorPickerButton = props => {
           xs: 12,
           children: [/*#__PURE__*/_jsx("div", {
             children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
+              gradient: true,
               value: color,
               onChange: handleColorChange,
-              defaultColors: initialColors
+              defaultColors: [...recentColors, ...defaultColors] || []
             })
           }), /*#__PURE__*/_jsxs("div", {
             style: {

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

@@ -8,58 +8,67 @@ import { Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DRAGGABLE_TYPES = ["paragraph", "headingOne", "headingTwo", "headingThree", "grid"];
-const DragHandleStyle = () => ({
-  dragHandle: {
-    opacity: 0,
-    content: '" "',
+const DragHandleStyle = fromPopper => {
+  const handleDragStyle = fromPopper ? {
+    position: "absolute",
+    top: "6px",
+    left: "4px"
+  } : {
     position: "absolute",
     top: "3px",
-    left: "-52px",
-    borderRadius: "0px",
-    padding: "0px",
-    width: "20px",
-    height: "20px",
-    border: 0,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    cursor: "grab",
-    color: "#D7D7D6",
-    background: "rgb(221, 221, 221, 0.1)",
-    "& svg": {
-      width: "20px"
+    left: "-52px"
+  };
+  return {
+    dragHandle: {
+      opacity: 0,
+      content: '" "',
+      ...handleDragStyle,
+      borderRadius: "0px",
+      padding: "0px",
+      width: "20px",
+      height: "20px",
+      border: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "grab",
+      color: "#D7D7D6",
+      background: "rgb(221, 221, 221, 0.1)",
+      "& svg": {
+        width: "20px"
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "rgb(221, 221, 221, 0.8)"
+      },
+      "&.active": {
+        opacity: 1,
+        cursor: "grabbing"
+      }
     },
-    "&:hover": {
-      opacity: 1,
-      background: "rgb(221, 221, 221, 0.8)"
+    dropArea: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none",
+      zIndex: -1,
+      "&.dragging": {
+        backgroundColor: "#def4ff"
+      }
     },
-    "&.active": {
-      opacity: 1,
-      cursor: "grabbing"
+    dropAreaOver: {
+      position: "absolute",
+      left: 0,
+      top: 0,
+      width: "100%",
+      height: "4px"
     }
-  },
-  dropArea: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "100%",
-    pointerEvents: "none",
-    zIndex: -1,
-    "&.dragging": {
-      backgroundColor: "#def4ff"
-    }
-  },
-  dropAreaOver: {
-    position: "absolute",
-    left: 0,
-    top: 0,
-    width: "100%",
-    height: "4px"
-  }
-});
+  };
+};
 const DragHandle = props => {
-  const classes = DragHandleStyle();
+  const classes = DragHandleStyle(props.fromPopper);
   const editor = useSlateStatic();
   const [dragging, setDragging] = useState(false);
   const {

package/dist/Editor/common/Icon.js

@@ -12,6 +12,12 @@ 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 SettingsIcon from "../assets/svg/SettingsIcon";
+import UndoIcon from "../assets/svg/UndoIcon";
+import RedoIcon from "../assets/svg/RedoIcon";
+import TextIcon from "../assets/svg/TextIcon";
+import AddElementIcon from "../assets/svg/AddElementIcon";
+import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -244,7 +250,13 @@ const iconList = {
   checkedIcon: /*#__PURE__*/_jsx(CheckedIcon, {}),
   uncheckedIcon: /*#__PURE__*/_jsx(UncheckedIcon, {}),
   infinityIcon: /*#__PURE__*/_jsx(InfinityIcon, {}),
-  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {})
+  resetIcon: /*#__PURE__*/_jsx(ResetIcon, {}),
+  pagesSettings: /*#__PURE__*/_jsx(SettingsIcon, {}),
+  undoIcon: /*#__PURE__*/_jsx(UndoIcon, {}),
+  redoIcon: /*#__PURE__*/_jsx(RedoIcon, {}),
+  textIcon: /*#__PURE__*/_jsx(TextIcon, {}),
+  addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
+  addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {})
 };
 const Icon = props => {
   const {

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

@@ -1,15 +1,17 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const list_types = ["orderedList", "unorderedList"];
 const Section = props => {
   const classes = SectionStyle();
@@ -38,14 +40,33 @@ const Section = props => {
     flexDirection
   } = sectionAlignment || {};
   const path = ReactEditor.findPath(editor, element);
+  const anchorEl = useRef(null);
+  const popperEl = useRef(null);
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
+  const [isHovering, setIsHovering] = useState(false);
+  const onMouseEnter = () => {
+    setIsHovering(true);
+  };
+  const onMouseLeave = () => {
+    setIsHovering(false);
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
-  const Toolbar = () => {
+  const Toolbar = ({
+    fromPopper
+  }) => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
       className: `element-toolbar no-border-button hr section-tw sectionIcon`,
-      style: {
+      style: fromPopper ? {
+        position: "unset",
+        marginLeft: "28px",
+        paddingTop: "4px",
+        marginRight: "10px",
+        height: "100%"
+      } : {
         left: "-28px",
         top: "3px"
       },
@@ -99,6 +120,8 @@ const Section = props => {
       alignItems: horizantal,
       justifyContent: vertical
     },
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
     children: [/*#__PURE__*/_jsxs(Box, {
       className: "ed-section-inner",
       sx: {
@@ -107,9 +130,36 @@ const Section = props => {
           ...getBreakPointsValue(sectionGridSize || 8, null, "overrideGridSize", true)
         }
       },
-      children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
-        ...props
-      }) : null, children, /*#__PURE__*/_jsx(Toolbar, {})]
+      ref: anchorEl,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
+        anchorEl: anchorEl?.current,
+        placement: "top-start",
+        sx: {
+          zIndex: 9999
+        },
+        disablePortal: true,
+        ref: popperEl,
+        className: "sectionPopper",
+        children: /*#__PURE__*/_jsxs(Box, {
+          sx: {
+            bgcolor: "background.paper",
+            background: "#F6F6F6",
+            height: "30px",
+            position: "relative"
+          },
+          children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+            ...props,
+            fromPopper: true
+          }) : null, /*#__PURE__*/_jsx(Toolbar, {
+            fromPopper: true
+          })]
+        })
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -6,6 +6,9 @@ const SectionStyle = () => ({
       },
       "& .sectionIcon": {
         opacity: 1
+      },
+      "& .sectionPopper": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
@@ -13,6 +16,14 @@ const SectionStyle = () => ({
         display: "block"
       }
     },
+    "& .sectionPopper": {
+      "&:hover": {
+        opacity: 1
+      }
+    },
+    "& .sectionPopper": {
+      opacity: 0
+    },
     "& .sectionIcon": {
       opacity: 0,
       padding: "0px",

package/dist/Editor/common/StyleBuilder/accordionTitleBtnStyle.js

@@ -5,8 +5,7 @@ const accordionTitleBtnStyle = [{
     label: "Accordion Color",
     key: "accordionTextColor",
     type: "color",
-    needPreview: true,
-    hideGradient: true
+    needPreview: true
   }, {
     label: "Accordion Background Color",
     key: "accordionBgColor",