@flozy/editor 1.9.5 → 1.9.6

package/dist/Editor/CommonEditor.js

@@ -75,7 +75,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     readOnly,
     toolbarOptions,
     otherProps,
-    isIframe
+    isIframe,
+    theme
   } = props;
   const editorWrapper = useRef();
   const mentionsRef = useRef();
@@ -130,7 +131,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const classes = editorStyles({
     padHeight: !fullScreen ? otherProps?.padHeight : 120,
-    placeHolderColor: invertColor(pageColor || "#FFF")
+    placeHolderColor: invertColor(pageColor || "#FFF"),
+    theme
   });
   const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
   useEffect(() => {
@@ -228,7 +230,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     },
     getPageSettings: {
-      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || "#fff"
+      background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }
   }));
   const [htmlAction, setHtmlAction] = useState({
@@ -339,6 +341,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }) : null;
   };
   return /*#__PURE__*/_jsx(EditorProvider, {
+    theme: theme,
     children: /*#__PURE__*/_jsx(DialogWrapper, {
       ...props,
       fullScreen: fullScreen,
@@ -357,21 +360,18 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""}`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: {
-                  background: pageColor || "#FFF"
+                  background: pageColor || "",
+                  color: pageTextColor || ""
                 },
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
-                    style: {
-                      // background: pageColor || "#FFF",
-                      color: pageTextColor || "#000000"
-                    },
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
                       ref: editorWrapper,
@@ -390,7 +390,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
-                        onDrawerOpen: onDrawerOpen
+                        onDrawerOpen: onDrawerOpen,
+                        theme: theme
                       }) : null, /*#__PURE__*/_jsx(Editable, {
                         className: "innert-editor-textbox",
                         readOnly: isReadOnly,
@@ -406,12 +407,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         target: target,
                         index: index,
                         chars: chars,
-                        type: type
+                        type: type,
+                        theme: theme
                       }) : null]
                     })
                   }), !readOnly ? /*#__PURE__*/_jsx(MiniToolbar, {
                     customProps: customProps,
-                    toolbarOptions: toolbarOptions
+                    toolbarOptions: toolbarOptions,
+                    theme: theme
                   }) : null, footer && /*#__PURE__*/_jsx(Typography, {
                     sx: {
                       color: "rgb(100, 116, 139)",

package/dist/Editor/Editor.css

@@ -1,6 +1,5 @@
 .editor-wrapper {
   font-family: "Inter", sans-serif;
-  color: #0f172a;
   line-height: 1.43;
   font-weight: 400;
   letter-spacing: 0.01071em;
@@ -248,7 +247,6 @@ blockquote {
 }
 
 .close-popupbtn {
-  background-color: #f8fafc !important;
   border-radius: 4px !important;
   width: 24px;
   height: 24px;
@@ -779,10 +777,6 @@ blockquote {
   font-weight: 500;
 }
 
-.dialogComp .MuiOutlinedInput-notchedOutline {
-  border: 1px solid #ececec;
-}
-
 .iconRadioButton .MuiRadio-root {
   visibility: hidden;
   width: 0px;

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -72,6 +72,7 @@ export const AllColors = props => {
       horizontal: "center"
     },
     onClose: onClose,
+    sx: classes.colorPopper,
     children: /*#__PURE__*/_jsx(Box, {
       component: "div",
       sx: classes.allColor,
@@ -145,6 +146,8 @@ const ColorButtons = props => {
         vertical: "top",
         horizontal: "right"
       },
+      sx: classes.colorPopper,
+      className: "colorPopper",
       children: /*#__PURE__*/_jsx(Box, {
         sx: classes.colorButtonsInner,
         children: restRows.map((m, i) => {

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -8,6 +8,7 @@ import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
 import colorWheel from "./colorWheel.png";
 import "./ColorPicker.css";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -23,10 +24,13 @@ const ColorPicker = ({
   title,
   classes
 }) => {
+  const {
+    theme
+  } = useEditorContext();
   const [selection, setSelection] = useState();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const pickerStyles = ColorPickerStyles();
+  const pickerStyles = ColorPickerStyles(theme);
   const onOpen = e => {
     e.preventDefault();
     setAnchorEl(e.currentTarget);
@@ -82,6 +86,7 @@ const ColorPicker = ({
         vertical: "bottom",
         horizontal: "top"
       },
+      sx: classes.colorPickerPopup,
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,
         value: activeColor,

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -1,4 +1,4 @@
-const ColorPickerStyles = () => ({
+const ColorPickerStyles = theme => ({
   colorButtons: {
     padding: "0px",
     "& .buttonsWrpr": {
@@ -12,6 +12,11 @@ const ColorPickerStyles = () => ({
       border: "1px solid #ccc"
     }
   },
+  colorPopper: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
+  },
   colorButtonSingle: {
     "&.active": {
       "&:before": {
@@ -49,9 +54,9 @@ const ColorPickerStyles = () => ({
     }
   },
   colorPickerIcon: {
-    '& img': {
-      width: '24px',
-      height: '24px'
+    "& img": {
+      width: "24px",
+      height: "24px"
     }
   }
 });

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField, Button, Menu } from "@mui/material";
-import FormStyles from "./Styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import UserInputs from "./UserInputs";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -21,9 +20,9 @@ const FormWorkflow = props => {
     bodyData,
     setBodyData,
     handleSelectedVariables,
-    handleInputReset
+    handleInputReset,
+    classes
   } = props;
-  const classes = FormStyles();
   const [anchorEl, setAnchorEl] = useState(null);
   const variables = element?.children;
   const type = 1;

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

@@ -1,4 +1,4 @@
-const FormStyles = () => ({
+const FormStyles = theme => ({
   addButton: {
     display: "flex",
     justifyContent: "flex-end"
@@ -224,6 +224,24 @@ const FormStyles = () => ({
     color: "#fff",
     padding: "8px",
     marginLeft: "8px"
+  },
+  formWorkflow: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& svg": {
+      color: theme?.palette?.editor?.activeColor
+    },
+    "& input": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& textarea": {
+      backgroundColor: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor
+    }
   }
 });
 export default FormStyles;

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

@@ -6,6 +6,7 @@ import { RestRight } from "../../../common/iconslist";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const UserInputs = props => {
@@ -18,8 +19,11 @@ const UserInputs = props => {
     handleInputReset
   } = props;
   const variables = element?.children;
-  const classes = FormStyles();
-  const popupClasses = PopupToolStyle();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FormStyles(theme);
+  const popupClasses = PopupToolStyle(theme);
   const [activeColor, setActiveColor] = useState(["#000000"]);
   //state
   const [anchorEl, setAnchorEl] = useState(null);

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

@@ -8,6 +8,7 @@ import FormWorkflow from "./FormWorkflow";
 import { minutes, hours, days } from "./constant";
 import ListWorkflow from "./ListWorkflow";
 import { PlusIcon } from "../../../common/iconslist";
+import { useEditorContext } from "../../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Workflow = props => {
@@ -20,7 +21,10 @@ const Workflow = props => {
   const {
     workflow
   } = element;
-  const classes = FormStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = FormStyles(theme);
   const [workflowList, setWorkflowList] = useState([]);
   const [formData, setFormData] = useState(false);
   const [schedule, setSchedule] = useState("immediately");
@@ -111,6 +115,7 @@ const Workflow = props => {
     }
   };
   return /*#__PURE__*/_jsxs(Dialog, {
+    sx: classes?.formWorkflow,
     open: openWorkflow,
     onClose: closeWorkflow,
     fullWidth: true,
@@ -155,7 +160,8 @@ const Workflow = props => {
         setScheduleEvery: setScheduleEvery,
         setScheduleOn: setScheduleOn,
         handleSelectedVariables: handleSelectedVariables,
-        handleInputReset: handleInputReset
+        handleInputReset: handleInputReset,
+        classes: classes
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: classes.dialogFooter,

package/dist/Editor/Elements/SimpleText.js

@@ -4,6 +4,7 @@ import { Box } from "@mui/material";
 import { getPageSettings } from "../utils/pageSettings";
 import { invertColor } from "../helper";
 import { isTextSelected } from "../utils/helper";
+import { useEditorContext } from "../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SimpleTextStyle = ({
@@ -45,6 +46,9 @@ const SimpleTextStyle = ({
   }
 });
 const SimpleText = props => {
+  const {
+    theme
+  } = useEditorContext();
   const editor = useSlateStatic();
   const {
     element,
@@ -64,7 +68,7 @@ const SimpleText = props => {
     pageColor
   } = pageSt?.pageProps || {};
   const classes = SimpleTextStyle({
-    pageColor: pageColor || "rgba(255,255,255,1)"
+    pageColor: pageColor || theme?.palette?.editor?.background
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Styles/EditorStyles.js

@@ -1,6 +1,7 @@
 const editorStyles = ({
   padHeight,
-  placeHolderColor
+  placeHolderColor,
+  theme
 }) => ({
   root: {
     display: "flex",
@@ -26,6 +27,11 @@ const editorStyles = ({
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
+    color: "#0f172a",
+    "&.no-color": {
+      backgroundColor: theme?.palette?.editor?.background,
+      color: theme?.palette?.editor?.textColor
+    },
     "& .max-content": {
       width: "100%",
       display: "flex",
@@ -171,7 +177,10 @@ const editorStyles = ({
       }
     },
     "& .tools-drawer": {
-      zIndex: 1300
+      zIndex: 1300,
+      "& .MuiDrawer-paper": {
+        backgroundColor: theme?.palette?.editor?.background
+      }
     },
     "& .section-tw": {
       "& button": {

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -4,6 +4,7 @@ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Dropdown = ({
+  classes,
   editor,
   format,
   options,
@@ -26,10 +27,14 @@ const Dropdown = ({
       fontFamily: fontFamilyMap[value],
       width: width || "100%",
       height: "36px",
-      overflow: "hidden",
       borderRadius: "10px",
       fontSize: "14px"
     },
+    MenuProps: {
+      PaperProps: {
+        sx: classes?.textOptions
+      }
+    },
     children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
       style: {
         fontFamily: item.text

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -10,6 +10,7 @@ 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 TextSize = ({
+  classes,
   editor,
   format,
   fullWidth
@@ -63,6 +64,7 @@ const TextSize = ({
   };
   return /*#__PURE__*/_jsx(_Fragment, {
     children: /*#__PURE__*/_jsx(TextField, {
+      sx: classes?.textSize,
       value: combinedOldVal,
       onChange: onChangeSize,
       size: "small",

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useSlate } from "slate-react";
-import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
+import { Box, Dialog, IconButton, Paper, Popper, Tooltip, useTheme } from "@mui/material";
 import MENU_OPTIONS from "./Options/Options";
 import TextFormat from "../PopupTool/TextFormat";
 import AddElements from "../PopupTool/AddElements";
@@ -27,10 +27,11 @@ const POPUP_TITLE = {
 };
 const MiniToolbar = props => {
   const {
-    customProps
+    customProps,
+    theme
   } = props;
-  const classes = miniToolbarStyles();
-  const popupStyles = usePopupStyle();
+  const classes = miniToolbarStyles(theme);
+  const popupStyles = usePopupStyle(theme);
   const editor = useSlate();
   const [popper, setPopper] = useState(null);
   const [anchorEl, setAnchorEl] = useState(null);

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

@@ -1,4 +1,4 @@
-const miniToolbarStyles = () => ({
+const miniToolbarStyles = theme => ({
   root: {
     display: "flex",
     flexDirection: "row",
@@ -26,6 +26,20 @@ const miniToolbarStyles = () => ({
           stroke: "#2563EB"
         }
       }
+    },
+    "&.mini-tool-wrpr-ei": {
+      background: theme?.palette?.editor?.background,
+      borderColor: theme?.palette?.editor?.borderColor,
+      "& button": {
+        "& svg": {
+          stroke: theme?.palette?.editor?.textColor
+        },
+        "&.active": {
+          "& svg": {
+            stroke: theme?.palette?.editor?.activeColor
+          }
+        }
+      }
     }
   }
 });

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

@@ -80,6 +80,7 @@ const PopperHeader = props => {
           title: "Close",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
+            sx: classes.closeBtn,
             className: "close-popupbtn",
             onClick: onClose,
             children: /*#__PURE__*/_jsx(CloseIcon, {})

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

@@ -1,4 +1,4 @@
-const usePopupStyle = () => ({
+const usePopupStyle = theme => ({
   popupWrapper: {
     boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
     zIndex: 1300,
@@ -14,6 +14,37 @@ const usePopupStyle = () => ({
     },
     "&.xs": {
       transform: "none !important"
+    },
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .MuiTypography-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiInputBase-root": {
+      color: theme?.palette?.editor?.textColor,
+      "& svg": {
+        color: theme?.palette?.editor?.textColor
+      },
+      "&.MuiOutlinedInput-root:hover": {
+        "& .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${theme?.palette?.editor?.textColor}`
+        }
+      }
+    },
+    "& .MuiCheckbox-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`
+    },
+    "& button": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& .buttonsWrpr": {
+      "& button": {
+        color: theme?.palette?.editor?.textColor
+      }
     }
   },
   textFormatWrapper: {
@@ -37,7 +68,7 @@ const usePopupStyle = () => ({
       marginBottom: "20px"
     },
     "& .MuiOutlinedInput-notchedOutline": {
-      border: "1px solid #ECECEC"
+      border: `1px solid ${theme?.palette?.editor?.borderColor}`
     },
     "& .MuiOutlinedInput-root": {
       boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
@@ -70,6 +101,16 @@ const usePopupStyle = () => ({
         fontSize: "14px",
         color: "#64748B"
       }
+    },
+    "& .MuiTab-root": {
+      color: theme?.palette?.editor?.textColor
+    },
+    "& button": {
+      "&:hover": {
+        "& span": {
+          color: theme?.palette?.editor?.activeColor
+        }
+      }
     }
   },
   textFormatLabel: {
@@ -187,25 +228,40 @@ const usePopupStyle = () => ({
     marginTop: "8px",
     textTransform: "capitalize",
     "&.active": {
-      background: "rgba(45,66,91,0.1)"
+      backgroundColor: theme?.palette?.editor?.background,
+      border: `1px solid transparent`,
+      color: theme?.palette?.editor?.activeColor
     }
   },
   btnGroup: {
-    backgroundColor: "#fff",
+    backgroundColor: theme?.palette?.editor?.background,
     "& button": {
+      backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
-      color: "#64748B",
-      border: "1px solid #ECECEC",
+      color: theme?.palette?.editor?.textColor,
+      borderColor: theme?.palette?.editor?.borderColor,
       textTransform: "capitalize",
+      marginBottom: "0px",
+      "&:hover": {
+        color: theme?.palette?.editor?.borderColor,
+        background: theme?.palette?.editor?.background
+      },
       "&.active": {
-        backgroundColor: "#ECECEC"
+        background: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: "1px solid #ECECEC"
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+      }
+    }
+  },
+  allColor: {
+    "& .buttonsWrpr": {
+      "& button": {
+        color: theme?.palette?.editor?.textColor
       }
     }
   },
-  allColor: {},
   allColorInner: {
     "& .buttonsWrpr": {
       "& button": {
@@ -269,6 +325,54 @@ const usePopupStyle = () => ({
     "& svg": {
       color: "#CCC"
     }
+  },
+  textOptions: {
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
+  },
+  textSize: {
+    "& .textFontArrows": {
+      "& svg": {
+        stroke: theme?.palette?.editor?.textColor
+      }
+    }
+  },
+  closeBtn: {
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
+  },
+  colorPickerPopup: {
+    "& .MuiPaper-root": {
+      overflow: "auto",
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .popup_tabs": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .popup_tabs-header": {
+      backgroundColor: theme?.palette?.editor?.background,
+      "& .popup_tabs-header-label-active": {
+        color: theme?.palette?.editor?.activeColor,
+        backgroundColor: theme?.palette?.editor?.background
+      }
+    },
+    "& .colorpicker": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .color-picker-panel": {
+      backgroundColor: theme?.palette?.editor?.background
+    },
+    "& .input_rgba": {
+      "& input": {
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor
+      }
+    }
+  },
+  colorPopper: {
+    "& .MuiPaper-root": {
+      backgroundColor: theme?.palette?.editor?.background
+    }
   }
 });
 export default usePopupStyle;

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

@@ -131,6 +131,7 @@ const TextFormat = props => {
         xs: 12,
         sx: classes.textFormatField,
         children: /*#__PURE__*/_jsx(Dropdown, {
+          classes: classes,
           ...fontFamily,
           editor: editor
         })
@@ -151,6 +152,7 @@ const TextFormat = props => {
           xs: 12,
           sx: classes.textFormatField,
           children: /*#__PURE__*/_jsx(Dropdown, {
+            classes: classes,
             ...fontWeight,
             editor: editor,
             width: "100%"
@@ -169,6 +171,7 @@ const TextFormat = props => {
           xs: 12,
           sx: classes.textFormatCG,
           children: /*#__PURE__*/_jsx(TextSize, {
+            classes: classes,
             format: "fontSize",
             activeMark: activeMark,
             editor: editor,

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

@@ -11,7 +11,10 @@ import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PopupTool = props => {
-  const classes = usePopupStyle();
+  const {
+    theme
+  } = props;
+  const classes = usePopupStyle(theme);
   const [anchorEl, setAnchorEl] = useState(null);
   const [open, setOpen] = useState(false);
   const editor = useSlate();