@flozy/editor 3.8.9 → 3.9.0

package/dist/Editor/Elements/Button/EditorButton.js

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
+// import * as fIcons from "@mui/icons-material";
 import MUIIcon from "../../common/StyleBuilder/fieldTypes/loadIcon";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -9,13 +10,12 @@ import LinkIcon from "@mui/icons-material/Link";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
-import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
-  const theme = useTheme();
   const {
     attributes,
     element,
@@ -81,6 +81,7 @@ const EditorButton = props => {
     }
   };
   const buttonProps = handleLinkType(refURl, linkType, readOnly, openInNewTab, handleTrigger);
+  console.log(openInNewTab);
   const onMenuClick = val => () => {
     switch (val) {
       case "edit":
@@ -153,33 +154,21 @@ const EditorButton = props => {
   const onClose = () => {
     setEdit(false);
   };
-  const tAlign = alignment || textAlign || "left";
-  const btnSp = groupByBreakpoint({
-    borderRadius: {
-      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-    },
-    padding: {
-      ...getTRBLBreakPoints(bannerSpacing)
-    }
-  }, theme);
-  const pSp = groupByBreakpoint({
-    display: {
-      xs: xsHidden ? "none" : "inline-block",
-      lg: "inline-block"
-    }
-  }, theme);
   return /*#__PURE__*/_jsxs("div", {
-    className: `editor-btn-wrapper`,
+    className: "editor-btn-wrapper",
     ...attributes,
     style: {
-      textAlign: tAlign
+      textAlign: alignment || textAlign || "left"
     },
     contentEditable: false,
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "editor-btn-wrapper-inner",
       sx: {
-        ...pSp,
+        display: {
+          lg: "inline-block",
+          xs: xsHidden ? "none" : "inline-block"
+        },
         "& .element-toolbar": {
           display: "none"
         },
@@ -195,15 +184,19 @@ const EditorButton = props => {
           display: "inline-block"
         },
         children: [/*#__PURE__*/_jsxs(Box, {
-          className: `btn textAlign-${tAlign}`,
           sx: {
             textDecoration: "none",
             background: bgColor || "rgb(30, 75, 122)",
             borderBlockStyle: "solid",
             borderColor: borderColor || "transparent",
             borderWidth: borderWidth !== undefined ? borderWidth : borderColor ? "1px" : "0px",
-            ...btnSp,
+            borderRadius: {
+              ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+            },
             borderStyle: borderStyle || "solid",
+            padding: {
+              ...getTRBLBreakPoints(bannerSpacing)
+            },
             color: `${textColor || "#FFFFFF"}`,
             fontSize: textSize || "inherit",
             fontFamily: fontFamily || "PoppinsRegular",

package/dist/Editor/Elements/Embed/Image.js

@@ -4,16 +4,15 @@ import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
 import frames from "./Frames";
 import ImageFrame from "./Frames/ImageFrame";
 import LinkSettings from "../../common/LinkSettings";
 import { handleLinkType } from "../../utils/helper";
-import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolBar = ({
@@ -66,7 +65,6 @@ const ImageContent = ({
     objectFit,
     webAddress
   } = element;
-  const theme = useTheme();
   return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
     component: "button",
     className: "element-empty-btn",
@@ -81,7 +79,9 @@ const ImageContent = ({
     component: "img",
     className: "emb-img",
     sx: {
-      ...wrapThemeBreakpoints(getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true), "borderRadius", theme),
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       objectFit: "cover",
       boxShadow: boxShadow || "none",
       height: objectFit ? "100%" : "auto",
@@ -105,7 +105,6 @@ const Image = ({
   children,
   customProps
 }) => {
-  const theme = useTheme();
   const {
     url,
     bannerSpacing,
@@ -228,14 +227,12 @@ const Image = ({
       };
     } else {
       return {
-        ...groupByBreakpoint({
-          width: url ? {
-            ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
-          } : "100%",
-          height: objectFit && url ? {
-            ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto"
-        }, theme)
+        width: url ? {
+          ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
+        } : "100%",
+        height: objectFit && url ? {
+          ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
+        } : "auto"
       };
     }
   };
@@ -250,7 +247,9 @@ const Image = ({
       },
       width: `100%`,
       maxWidth: "100%",
-      ...wrapThemeBreakpoints(getTRBLBreakPoints(bannerSpacing), "padding", theme),
+      padding: {
+        ...getTRBLBreakPoints(bannerSpacing)
+      },
       backgroundColor: bgColor,
       justifyContent: horizantal,
       alignContent: vertical

package/dist/Editor/Elements/Embed/Video.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
-import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import Icon from "../../common/Icon";
@@ -10,7 +10,7 @@ import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
 import { getEmbedURL } from "../../helper";
-import { getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { getBreakPointsValue } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -19,7 +19,6 @@ const Video = ({
   children,
   customProps
 }) => {
-  const theme = useTheme();
   const {
     alt,
     alignment,
@@ -127,14 +126,12 @@ const Video = ({
       };
     } else {
       return {
-        ...groupByBreakpoint({
-          width: {
-            ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
-          },
-          height: url ? {
-            ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
-          } : "auto"
-        }, theme)
+        width: {
+          ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
+        },
+        height: url ? {
+          ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
+        } : "auto"
       };
     }
   };
@@ -208,7 +205,6 @@ const Video = ({
       onDelete: onDelete
     }) : null, /*#__PURE__*/_jsxs(Box, {
       component: "div",
-      className: "embed-video-wrpr-in",
       contentEditable: false,
       sx: {
         position: "relative",

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -25,17 +25,13 @@ const EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }));
   const onClick = () => {
-    try {
-      if (editor.selection) {
-        const domRange = ReactEditor.toDOMRange(editor, editor.selection);
-        const rect = domRange.getBoundingClientRect();
-        setAnchorEl({
-          getBoundingClientRect: () => rect,
-          nodeType: 1
-        });
-      }
-    } catch (err) {
-      console.log(err);
+    if (editor.selection) {
+      const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect: () => rect,
+        nodeType: 1
+      });
     }
   };
   const onEmojiSelect = emoji => {

package/dist/Editor/Elements/Emoji/EmojiPicker.js

@@ -4,12 +4,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const EmojiPicker = props => {
   const {
-    onEmojiSelect
+    onEmojiSelect,
+    onClose
   } = props;
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(Picker, {
       data: data,
-      onEmojiSelect: onEmojiSelect
+      onEmojiSelect: onEmojiSelect,
+      onClickOutside: onClose
     })
   });
 };

package/dist/Editor/Elements/Form/Form.js

@@ -119,7 +119,7 @@ const Form = props => {
         if (fieldData?.element === "email") {
           rule.push(`isEmail`);
         }
-        if (fieldData?.required || fieldData?.element === "email") {
+        if (fieldData?.required && fieldData?.element === "email") {
           validations.push({
             name: pair[0],
             value: pair[1],

package/dist/Editor/Elements/Grid/Grid.js

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import { Transforms, Path } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { IconButton, Tooltip, Grid as GridContainer, useTheme } from "@mui/material";
+import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
@@ -13,7 +13,7 @@ import GridPopup from "./GridPopup";
 import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
+import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -75,7 +75,6 @@ const GridToolBar = ({
   }) : null;
 };
 const Grid = props => {
-  const theme = useTheme();
   const {
     attributes,
     children,
@@ -276,14 +275,6 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = getBreakPointsValue(borderRadius, size?.device) || {};
-  const gridcwrprProps = groupByBreakpoint({
-    padding: {
-      ...getTRBLBreakPoints(bannerSpacing)
-    },
-    flexWrap: {
-      ...getBreakPointsValue(flexWrap || "wrap")
-    }
-  }, theme);
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
     className: `grid-container ${grid} has-hover element-root dpath`,
@@ -349,11 +340,16 @@ const Grid = props => {
       className: "grid-c-wrpr",
       sx: {
         display: "flex",
-        ...gridcwrprProps,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         alignItems: vertical || "start",
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
         width: "100%",
+        flexWrap: {
+          ...getBreakPointsValue(flexWrap || "wrap")
+        },
         height: "auto"
       },
       "data-path": path.join(","),

package/dist/Editor/Elements/Grid/GridItem.js

@@ -1,15 +1,13 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { useTheme } from "@mui/material";
-import { Transforms } from "slate";
+import { Transforms, Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { groupByBreakpoint, getBreakPointsValue, getBRValue, getTRBLBreakPoints } from "../../helper/theme";
+import { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
 import { isEmptyNode } from "../../utils/helper";
-import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItemToolbar = ({
@@ -36,7 +34,6 @@ const GridItemToolbar = ({
   }) : null;
 };
 const GridItem = props => {
-  const theme = useTheme();
   const {
     attributes,
     children,
@@ -105,44 +102,35 @@ const GridItem = props => {
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
-  const getBRProps = groupByBreakpoint({
-    display: {
-      xs: xsHidden ? "none" : "inline-block",
-      lg: "inline-block"
-    },
-    width: {
-      ...getBreakPointsValue(grid, null, "overrideGridSize", true)
-    },
-    height: {
-      ...getBreakPointsValue(cellGHeight || "auto")
-    },
-    borderRadius: {
-      ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-    },
-    margin: {
-      ...getTRBLBreakPoints(margin)
-    }
-  }, theme);
-  const giInProps = groupByBreakpoint({
-    padding: {
-      ...getTRBLBreakPoints(bannerSpacing)
-    }
-  }, theme);
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
     component: "div",
     className: `grid-item element-root gi-top-wrpr dpath`,
     ...attributes,
     sx: {
-      ...getBRProps,
-      display: "flex",
+      width: {
+        ...getBreakPointsValue(grid, null, "overrideGridSize", true)
+      },
+      height: {
+        ...getBreakPointsValue(cellGHeight || "auto")
+      },
+      display: {
+        lg: "flex",
+        xs: xsHidden ? "none" : "flex"
+      },
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
+      borderRadius: {
+        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
+      },
       borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
+      margin: {
+        ...getTRBLBreakPoints(margin)
+      },
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
       }
@@ -181,7 +169,9 @@ const GridItem = props => {
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        ...giInProps,
+        padding: {
+          ...getTRBLBreakPoints(bannerSpacing)
+        },
         width: "100%",
         height: "100%",
         color: textColor || "#000",

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -11,7 +11,9 @@ const PageSettingsButton = props => {
   const {
     customProps,
     icoBtnType,
-    from
+    from,
+    closePopper,
+    setToolTip
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -38,6 +40,8 @@ const PageSettingsButton = props => {
     }
   };
   const onClose = () => {
+    closePopper(true);
+    setToolTip(false);
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {

package/dist/Editor/Elements/SimpleText/index.js

@@ -6,7 +6,7 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleText = props => {
   const {
     theme,
@@ -38,16 +38,15 @@ const SimpleText = props => {
   const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
   const opacity = !isTextSelected(editor?.selection);
-  const nextType = element?.children[0]?.type;
-  return /*#__PURE__*/_createElement(Box, {
+  return /*#__PURE__*/_jsxs(Box, {
     ...element.attr,
     ...attributes,
-    className: `simple-text ${nextType}`,
+    className: `simple-text`,
     sx: classes.root,
-    key: `para_${path.join("|")}`
-  }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
-    className: "placeholder-simple-text",
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
-  }));
+    children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
+      className: "placeholder-simple-text",
+      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
+    })]
+  });
 };
 export default SimpleText;

package/dist/Editor/Elements/SimpleText/style.js

@@ -23,43 +23,6 @@ const SimpleTextStyle = ({
         background: "transparent",
         color: invertColor(pageColor)
       }
-    },
-    "& .freegrid-section": {
-      "&.enable-1:before": {
-        content: "' '",
-        pointerEvents: "none",
-        position: "absolute",
-        left: "2px",
-        top: "2px",
-        width: "calc(100% - 4px)",
-        height: "calc(100% - 4px)",
-        outline: "2px solid #2563EB",
-        zIndex: 1
-      },
-      "&:hover, &.enable-1": {
-        "& .freegrid-section-infos": {
-          pointerEvents: "none",
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          zIndex: 1,
-          ":before": {
-            position: "absolute",
-            content: "attr(placeholder)",
-            left: "0px",
-            top: "0px",
-            width: "auto",
-            height: "auto",
-            backgroundColor: "#8360FD",
-            padding: "4px 6px",
-            fontSize: "12px",
-            fontWeight: "500",
-            color: "#FFF",
-            lineHeight: "12px"
-          }
-        }
-      }
     }
   },
   section: {

package/dist/Editor/Styles/EditorStyles.js

@@ -29,28 +29,6 @@ const editorStyles = ({
       "& .MuiOutlinedInput-input": {
         color: theme?.palette?.editor?.textColor || "black"
       }
-    },
-    "&.stimulate-xs": {
-      ":before": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "calc(50% - 162px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF"
-      },
-      ":after": {
-        content: '" "',
-        position: "absolute",
-        top: 0,
-        right: 0,
-        width: "calc(50% - 160px)",
-        height: "100%",
-        pointerEvents: "none",
-        backgroundColor: "#FFF"
-      }
     }
   },
   slateWrapper: {
@@ -265,7 +243,6 @@ const editorStyles = ({
       }
     },
     "&.hideScroll": {
-      overflowAnchor: "none",
       "&::-webkit-scrollbar-track": {
         background: "none !important"
       },

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

@@ -9,6 +9,7 @@ import miniToolbarStyles from "./Styles";
 import usePopupStyle from "../PopupTool/PopupToolStyle";
 import PopperHeader from "../PopupTool/PopperHeader";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import PageSettingsButton from "../../Elements/PageSettings/PageSettingsButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -47,12 +48,23 @@ const MiniToolbar = props => {
   const {
     popupType
   } = useEditorContext();
+  const [toolTip, setToolTip] = useState(false);
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    if (data) {
+      setToolTip(false);
+      setData(null);
+    }
+  }, [data]);
   useEffect(() => {
     if (popper) {
       setPopper(null);
     }
   }, [editor.selection]);
   const handleClick = type => e => {
+    if (type === "page-settings") {
+      setToolTip(true);
+    }
     setPopper(type);
     setAnchorEl(e.currentTarget);
   };
@@ -66,6 +78,10 @@ const MiniToolbar = props => {
   const onSearch = e => {
     setSearch(e?.target?.value || "");
   };
+  const closePopper = data => {
+    setData(data);
+    setToolTip("false");
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
@@ -81,11 +97,19 @@ const MiniToolbar = props => {
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
+          disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
             className: type === popper ? "active" : "",
             onClick: handleClick(type),
             disabled: isDisabled,
-            children: /*#__PURE__*/_jsx(Icon, {
+            children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
+              from: "miniToolBar",
+              icoBtnType: "mini",
+              customProps: customProps,
+              editor: editor,
+              closePopper: closePopper,
+              setToolTip: setToolTip
+            }) : /*#__PURE__*/_jsx(Icon, {
               from: "miniToolBar",
               icoBtnType: "mini",
               customProps: customProps,

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

@@ -100,7 +100,6 @@ const TextFormat = props => {
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     sx: classes.textFormatWrapper,
-    className: "text-formatter-popup",
     children: [/*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

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

@@ -31,9 +31,6 @@ const PopupTool = props => {
   const id = open ? "popup-edit-tool" : "";
   const table = new TableUtil(editor);
   const [size] = useWindowResize();
-  const {
-    selectedElement
-  } = useEditorContext();
   useEffect(() => {
     if (event === "end" && anchorEl && !open) {
       // for table cell selection
@@ -56,11 +53,6 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
-  useEffect(() => {
-    if (selectedElement?.enable === 1) {
-      setAnchorEl(null);
-    }
-  }, [selection, selectedElement?.path, selectedElement?.enable]);
   const updateAnchorEl = () => {
     try {
       const domSelection = window.getSelection();