@flozy/editor 5.5.7 → 5.5.8

package/dist/Editor/Elements/AI/PopoverAIInput.js

@@ -4,9 +4,9 @@ import Styles from "./Styles";
 import { Fade, Paper, Popper } from "@mui/material";
 import AIInput from "./AIInput";
 import { ReactEditor, useSlate } from "slate-react";
-import { Node, Range, Transforms } from "slate";
+import { Node, Transforms } from "slate";
 import { MODES } from "./helper";
-import { getSelectedText, getSlateDom } from "../../utils/helper";
+import { getSelectedText } from "../../utils/helper";
 import { VoiceToText } from "./VoiceToText";
 import deserialize from "../../helper/deserialize";
 import useEditorScroll from "../../hooks/useEditorScroll";
@@ -23,7 +23,7 @@ const scrollToAIInput = editor => {
       const slateWrapper = document.getElementById("slate-wrapper-scroll-container");
       let selectionRect;
       if (getSelectedText(editor)) {
-        selectionRect = ReactEditor.toDOMRange(editor, editor.selection)?.getBoundingClientRect();
+        selectionRect = window.getSelection().getRangeAt(0).getBoundingClientRect();
       } else {
         selectionRect = ReactEditor.toDOMRange(editor, getNextLine(editor).at).getBoundingClientRect();
       }
@@ -62,7 +62,7 @@ const getNextLine = editor => {
     } = editor;
     const {
       focus
-    } = selection || {};
+    } = selection;
     if (focus?.path?.length > 0) {
       const {
         text = ""
@@ -102,47 +102,56 @@ const getNextLine = editor => {
     return null;
   }
 };
-const getNextLineDom = editor => {
-  let caret;
-  const sel = getNextLine(editor);
-  if (sel) {
-    const domElement = ReactEditor.toDOMRange(editor, sel.at);
-    const {
-      textContent,
-      parentElement
-    } = domElement?.commonAncestorContainer || {};
-    caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
-  }
-
-  return caret;
-};
 const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
   try {
-    const {
-      selection
-    } = editor || {};
-    const isHavingSelection = selection && !Range.isCollapsed(selection) && getSelectedText(editor).trim();
-    const caret = isHavingSelection ? getSlateDom(editor, editor.selection) : getNextLineDom(editor);
-    const caretPos = caret?.getBoundingClientRect() || {};
-    const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
-    const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
-    const selectedSectionRect = sectionEle?.getBoundingClientRect() || {};
-    const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
-    const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
+    if (!editor.selection) {
+      return;
+    }
+    const selection = window.getSelection();
+    if (openAI === "fromToolBar" && selection.anchorOffset !== selection.focusOffset) {
+      // to fix some issue in Drag n Drop
+      return;
+    }
+    if (selection.rangeCount) {
+      let caret;
+      if (getSelectedText(editor)) {
+        // selected text as caret
+        caret = selection.getRangeAt(0);
+      } else {
+        const sel = getNextLine(editor);
+        if (sel) {
+          const domElement = ReactEditor.toDOMRange(editor, sel.at);
+          const {
+            textContent,
+            parentElement
+          } = domElement?.commonAncestorContainer || {};
+          caret = textContent ? domElement : parentElement; // in mobile, if textContent in not available, it is pointing some <br> tag (getBoundingClientRect not working correctly for <br>), to avoid that, we are pointing the parent element as caret
+        }
+      }
 
-    const rect = {
-      y: yValue,
-      height: caretPos.height,
-      top: yValue,
-      right: caretPos.right,
-      bottom: caretPos.bottom,
-      x: selectedSectionRect.x,
-      left: selectedSectionRect.left,
-      width: selectedSectionRect.width
-    };
-    setAnchorEl({
-      getBoundingClientRect: () => rect
-    });
+      const getBoundingClientRect = () => {
+        const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
+        const caretPos = caret.getBoundingClientRect();
+        const sectionEle = selectedElement?.anchorEl || document.querySelector(".ed-section-inner");
+        const selectedSectionRect = sectionEle?.getBoundingClientRect();
+        const isAIInputReachTop = caretPos.height + caretPos.y <= editorContainer.y;
+        const yValue = isAIInputReachTop ? "-500" : caretPos.y; // -500 is to hide the AI input if the toolbar reached the top
+
+        return {
+          y: yValue,
+          height: caretPos.height,
+          top: yValue,
+          right: caretPos.right,
+          bottom: caretPos.bottom,
+          x: selectedSectionRect.x,
+          left: selectedSectionRect.left,
+          width: selectedSectionRect.width
+        };
+      };
+      setAnchorEl({
+        getBoundingClientRect
+      });
+    }
   } catch (err) {
     console.log(err);
   }
@@ -171,7 +180,7 @@ function PopoverAIInput({
   const editor = useSlate();
   const updateAnchor = useCallback(() => {
     updateAnchorEl(setAnchorEl, editor, openAI, selectedEleRef.current);
-  }, [editor?.selection, openAI, selectedEleRef.current]);
+  }, [setAnchorEl, editor, openAI, selectedEleRef.current]);
   useEditorScroll(editorWrapper, updateAnchor);
   const onClickOutside = () => {
     setAnchorEl(null);
@@ -284,24 +293,9 @@ function PopoverAIInput({
   const onInputChange = e => {
     setInputValue(e.target.value);
   };
-  useEffect(() => {
-    if (openAI && getSelectedText(editor).trim()) {
-      const customSelection = document.querySelectorAll(".slate-highlight");
-      const selectionBg = "rgba(35, 131, 226, 0.35)";
-      if (customSelection?.length) {
-        customSelection?.forEach(el => el.style.background = selectionBg);
-
-        // if ai is opened, remove the window selection class and open then slate selection, To resolve: focussing on the ai input removes window selection automatically
-        const selection = window.getSelection();
-        if (selection) {
-          selection.removeAllRanges(); // Clears the selection
-        }
-      }
-    }
-  }, [editor.selection, openAI]);
   return /*#__PURE__*/_jsxs("div", {
     children: [/*#__PURE__*/_jsx(Popper, {
-      open: Boolean(openAI) && anchorEl,
+      open: Boolean(openAI),
       anchorEl: anchorEl,
       transition: true,
       placement: "bottom-start",

package/dist/Editor/Elements/AI/Styles.js

@@ -39,13 +39,7 @@ const Styles = theme => ({
         color: "#94A3B8",
         opacity: 1 /* Firefox */,
         fontFamily: '"Inter", sans-serif',
-        fontWeight: 500,
-        whiteSpace: "nowrap",
-        overflow: "hidden",
-        textOverflow: "ellipsis"
-      },
-      "&:placeholder-shown": {
-        height: "auto !important"
+        fontWeight: 500
       },
       "&::-ms-input-placeholder": {
         /* Edge 12-18 */color: "#94A3B8",
@@ -121,7 +115,7 @@ const Styles = theme => ({
     overflow: "auto",
     // width: "240px",
     minWidth: "200px",
-    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+    border: "1px solid #E0E0E0",
     padding: "6px"
   },
   optionWrapper: {
@@ -148,28 +142,16 @@ const Styles = theme => ({
       gap: "8px"
     },
     "&:hover": {
-      backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-      "& svg path": {
-        stroke: `${theme?.palette?.editor?.textColor} !important`
-      },
-      "& svg": {
-        color: `${theme?.palette?.editor?.textColor} !important`
-      }
-    },
-    "& svg path": {
-      stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
-    },
-    "& svg": {
-      color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+      background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`
     },
     "&.active": {
       background: `${theme?.palette?.containers?.bg3 || "#E9F3FE"}`,
-      color: theme?.palette?.editor?.menuOptionsSelectedTextColor,
+      color: "#2563EB",
       "& svg path": {
-        stroke: theme?.palette?.editor?.menuOptionsSelectedTextColor
+        stroke: "#2563EB"
       },
       "& svg": {
-        color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+        color: "#2563EB !important"
       }
     }
   },

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -6,8 +6,7 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { GridSettingsIcon } from "../../common/iconslist";
 import Icon from "../../common/Icon";
-import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
+import { useEditorSelection } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const accordionBtnStyleKeys = {
@@ -79,10 +78,6 @@ const Accordion = props => {
     textColor,
     bgColor
   } = element;
-  const {
-    theme
-  } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const onToggle = () => {
     setToggle(!toggle);
   };
@@ -102,7 +97,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onSettings,
-          sx: classes.buttonMoreOption,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
@@ -111,7 +105,6 @@ const Accordion = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           onClick: onDelete,
-          sx: classes.buttonMoreOption2,
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -250,10 +250,10 @@ function AppHeader(props) {
               },
               sx: {
                 mr: 2,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "none"
                 },
-                [theme?.breakpoints.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "block"
                 }
               },
@@ -272,10 +272,10 @@ function AppHeader(props) {
               },
               sx: {
                 flexGrow: 1,
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 },
                 "& img": {
@@ -293,10 +293,10 @@ function AppHeader(props) {
               }) : null, appTitle]
             }), /*#__PURE__*/_jsxs(Box, {
               sx: {
-                [theme?.breakpoints?.up("sm")]: {
+                [theme.breakpoints.up("sm")]: {
                   display: "block"
                 },
-                [theme?.breakpoints?.between("xs", "md")]: {
+                [theme.breakpoints.between("xs", "md")]: {
                   display: "none"
                 }
               },

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

@@ -11,7 +11,6 @@ import { handleLinkType, windowVar } from "../../utils/helper";
 import LinkSettings from "../../common/LinkSettings";
 import Icon from "../../common/Icon";
 import { useEditorContext } from "../../hooks/useMouseMove";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +36,6 @@ const EditorButton = props => {
   const [edit, setEdit] = useState(false);
   const [openNav, setOpenNav] = useState(false);
   const [openMoreOptions, setOpenMoreOptions] = useState(false);
-  const classes = useCommonStyle(appTheme);
   const {
     label,
     bgColor,
@@ -138,7 +136,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("edit"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "pagesSettings"
             })
@@ -148,7 +145,6 @@ const EditorButton = props => {
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onMenuClick("nav"),
-            sx: classes.buttonMoreOption,
             children: /*#__PURE__*/_jsx(Icon, {
               icon: "link"
             })
@@ -161,8 +157,7 @@ const EditorButton = props => {
               sx: {
                 display: "inline-flex",
                 color: "rgba(0, 0, 0, 0.54)",
-                marginBottom: "0px !important",
-                ...classes.buttonMoreOption3
+                marginBottom: "0px !important"
               },
               ...btnProps,
               children: /*#__PURE__*/_jsx(Icon, {

package/dist/Editor/Elements/Carousel/CarouselItem.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Node, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
-import { Tooltip, IconButton, Box } from "@mui/material";
+import { Tooltip, IconButton } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -37,7 +37,7 @@ const CarouselItem = props => {
       className: "element-toolbar hr",
       style: {
         top: "0px",
-        left: "0px"
+        right: "28px"
       },
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -53,7 +53,7 @@ const CarouselItem = props => {
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
     className: "carousel-item",
-    children: /*#__PURE__*/_jsxs(Box, {
+    children: /*#__PURE__*/_jsxs("div", {
       className: "carousel-item-inner",
       style: {
         minHeight: "50px",
@@ -61,14 +61,6 @@ const CarouselItem = props => {
         justifyContent: "center",
         alignItems: "center"
       },
-      sx: {
-        "& .ico-grp-ss": {
-          position: "absolute",
-          top: "0px",
-          right: "0px",
-          display: "flex"
-        }
-      },
       children: [children, /*#__PURE__*/_jsx(Toolbar, {})]
     })
   });

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Box, IconButton, Popover } from "@mui/material";
-import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import Button from "../../common/Button";
 import { colors } from "./defaultColors";
 import ColorPicker from "./colorPicker.svg";
@@ -46,7 +46,7 @@ const SingleColorButton = ({
       id: `in_${id}`,
       onClick: handleMore,
       className: "more-btn-cbs",
-      children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
+      children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
     }) : null]
   }, `ci_bs_row_${index}}`);
 };
@@ -82,7 +82,7 @@ export const AllColors = props => {
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
           style: {
-            padding: "5px"
+            padding: "8px"
           },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {
@@ -109,13 +109,11 @@ const ColorButtons = props => {
     forMiniTool,
     openColorTool,
     onClose,
-    onColorPickerClick,
-    defaultColors = []
+    onColorPickerClick
   } = props;
   const [row1, ...restRows] = ColorChunks([]);
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
-  const firstRow = defaultColors?.length ? defaultColors : row1;
   const handleMore = e => {
     setAnchorEl(e.currentTarget);
   };
@@ -133,7 +131,7 @@ const ColorButtons = props => {
     sx: classes.colorButtons,
     children: [forMiniTool ? null : /*#__PURE__*/_jsx(Box, {
       className: "buttonsWrpr first",
-      children: [firstRow].map((m, i) => {
+      children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
           id: `p1_${id}`,
           crs: m,

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

@@ -9,18 +9,13 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       marginRight: "8px",
-      border: "unset"
+      border: "1px solid #ccc"
     }
   },
   colorPopper: {
     marginTop: "20px",
-    borderRadius: "7px !important",
     "& .MuiPaper-root": {
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      background: `${theme?.palette?.editor?.miniToolBarBackground}`,
-      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
-      borderRadius: "7px !important",
-      padding: "0px 5px",
+      backgroundColor: theme?.palette?.editor?.background,
       '@media only screen and (max-width: 600px)': {
         marginTop: "-40px"
       }
@@ -59,7 +54,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "unset"
+      border: "1px solid #ccc"
     }
   },
   colorPickerIcon: {

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

@@ -1,4 +1,4 @@
-export const colors = ["#000000", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
+export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"
 // "#E6E6E6",
-// "#BEBEBE",
+// "#BEBEBE"
 ];

package/dist/Editor/Elements/Divider/Divider.js

@@ -5,7 +5,6 @@ import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import DividerPopup from "./DividerPopup";
 import { Transforms } from "slate";
-import useCommonStyle from "../../commonStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Divider = props => {
@@ -18,11 +17,10 @@ const Divider = props => {
   const {
     theme
   } = useEditorContext();
-  const classes = useCommonStyle(theme);
   const {
-    borderColor = theme?.palette?.primary?.main || "#0F172A",
-    borderWidth = "1px",
-    borderStyle = "solid"
+    borderColor = theme?.palette?.primary?.main || '#0F172A',
+    borderWidth = '1px',
+    borderStyle = 'solid'
   } = element;
   const {
     readOnly
@@ -35,7 +33,7 @@ const Divider = props => {
   } = useEditorContext();
   const [showTool] = useEditorSelection(editor);
   const selected = hoverPath === path.join(",");
-  const width = borderWidth?.includes("px") ? borderWidth : `${borderWidth}px`;
+  const width = borderWidth?.includes('px') ? borderWidth : `${borderWidth}px`;
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -45,21 +43,16 @@ const Divider = props => {
     showTool,
     onSettings
   }) => {
-    // const hoverStyles = readOnly
-    //   ? {
-    //       "&.MuiIconButton-root:hover": {
-    //         background:
-    //           theme?.palette?.type === "dark"
-    //             ? `${theme?.palette?.greyshades?.light8} !important`
-    //             : `${theme?.palette?.containers?.card} !important`,
-    //       },
-    //     }
-    //   : {};
+    const hoverStyles = readOnly ? {
+      '&.MuiIconButton-root:hover': {
+        background: theme?.palette?.type === 'dark' ? `${theme?.palette?.greyshades?.light8} !important` : `${theme?.palette?.containers?.card} !important`
+      }
+    } : {};
     return /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "divider-settings",
       style: {
-        top: "-33px",
+        top: "-20px",
         left: 0
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
@@ -68,22 +61,14 @@ const Divider = props => {
         children: /*#__PURE__*/_jsx(IconButton, {
           size: "small",
           sx: {
-            // background:
-            //   theme?.palette?.type === "dark"
-            //     ? theme?.palette?.greyshades?.light8
-            //     : theme?.palette?.containers?.card,
-            // border:
-            //   theme?.palette?.type === "dark"
-            //     ? "1px solid #E4E8EB33"
-            //     : "none",
-            boxShadow: "0px 0px 4px 0px #00000040",
-            borderRadius: "50%",
-            "& svg": {
-              width: '16px',
-              height: '16px'
+            background: theme?.palette?.type === 'dark' ? theme?.palette?.greyshades?.light8 : theme?.palette?.containers?.card,
+            border: theme?.palette?.type === 'dark' ? '1px solid #E4E8EB33' : 'none',
+            boxShadow: '0px 0px 4px 0px #00000040',
+            borderRadius: '50%',
+            '& svg': {
+              stroke: theme?.palette?.text?.secondary3
             },
-            // ...hoverStyles,
-            ...classes.buttonMoreOption
+            ...hoverStyles
           },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -118,15 +103,14 @@ const Divider = props => {
     className: `dividerComponent`,
     style: {
       userSelect: "none",
-      position: "relative"
+      position: 'relative'
     },
     contentEditable: false,
     children: [!readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-root element-selector`,
       contentEditable: false,
       style: {
-        zIndex: 1000,
-        left: "0%"
+        zIndex: 1000
       },
       children: /*#__PURE__*/_jsx(DividerToolbar, {
         selected: selected,
@@ -142,7 +126,7 @@ const Divider = props => {
         borderTop: !borderColor?.includes("linear") ? `${width} ${borderStyle} ${borderColor}` : `transparent`,
         backgroundImage: borderColor?.includes("linear") ? borderColor : "none",
         height: borderColor?.includes("linear") ? borderWidth : undefined,
-        marginTop: "15px"
+        marginTop: '15px'
       }
     }), /*#__PURE__*/_jsx("span", {
       style: {