@flozy/editor 9.1.2 → 9.1.3

package/dist/Editor/Elements/DataView/styles.js

@@ -11,7 +11,7 @@ const useDataViewStyles = (theme, appTheme) => ({
     },
     "& table th": {
       cursor: "pointer",
-      width: "200px"
+      minWidth: "200px"
     },
     "& table, th, td": {
       border: "1px solid black",
@@ -48,7 +48,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         "& .tv-ck-box": {
           "& svg": {
             color: appTheme?.palette?.editor?.tv_border,
-            '& rect': {
+            "& rect": {
               fill: appTheme?.palette?.editor?.tv_chk_box_fill,
               stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
             }
@@ -56,9 +56,9 @@ const useDataViewStyles = (theme, appTheme) => ({
           "&.Mui-checked": {
             "& svg": {
               color: "rgba(37, 99, 235, 1)",
-              '& rect': {
+              "& rect": {
                 fill: appTheme?.palette?.editor?.activeColor,
-                stroke: 'none'
+                stroke: "none"
               }
             }
           }
@@ -94,7 +94,7 @@ const useDataViewStyles = (theme, appTheme) => ({
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
         borderRadius: "8px",
-        minWidth: '148px'
+        minWidth: "148px"
       },
       "& input": {
         paddingBottom: "0px",
@@ -140,12 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
-      fontFamily: 'Inter !important',
+      fontFamily: "Inter !important",
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
-        padding: '6px 8px',
+        padding: "6px 8px",
         "& svg": {
           width: "16px",
           height: "16px",
@@ -157,7 +157,7 @@ const useDataViewStyles = (theme, appTheme) => ({
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
-            '& path': {
+            "& path": {
               stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
             }
           }

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

@@ -5,7 +5,7 @@ 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 { GridSettingsIcon, LinkIcon } from "../../common/iconslist";
+import { LinkIcon } from "../../common/iconslist";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import Icon from "../../common/Icon";
@@ -32,7 +32,7 @@ const ToolBar = ({
       top: "-4px",
       left: topM ? "35px" : "0px",
       margin: "0px",
-      gap: '3px'
+      gap: "3px"
     },
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Image Settings",

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -180,20 +180,6 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
-            bgColor: "#2563EB",
-            textColor: "#FFF",
-            borderRadius: {
-              topLeft: 30,
-              topRight: 30,
-              bottomLeft: 30,
-              bottomRight: 30
-            },
-            bannerSpacing: {
-              left: 12,
-              top: 12,
-              right: 12,
-              bottom: 12
-            },
             textAlign: "center",
             label: "Get Started"
           }],

package/dist/Editor/Elements/FreeGrid/FreeGridBox.js

@@ -59,7 +59,8 @@ const FreeGridBox = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData
+      ...updateData,
+      [`${breakpoint}_updatedOn`]: new Date().getTime()
     }, {
       at: path
     });

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -59,7 +59,8 @@ const FreeGridItem = props => {
     delete updateData.children;
     updateData = formatBreakpointValues(element.type, breakpoint, updateData);
     Transforms.setNodes(editor, {
-      ...updateData
+      ...updateData,
+      [`${breakpoint}_updatedOn`]: new Date().getTime()
     }, {
       at: path
     });

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -338,6 +338,9 @@ const useFreeGridStyles = ({
           fontSize: "14px",
           borderRadius: "7px"
         }
+      },
+      "& .remove-resize-styles": {
+        transform: "none !important"
       }
     }
   },

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

@@ -50,8 +50,7 @@ const GridItemToolbar = props => {
     open: true,
     placement: "top-end",
     sx: classes.popTools,
-    className: "gi-tool-pp",
-    disablePortal: true,
+    className: "gi-tool-pp hide-popper-on-overlap",
     contentEditable: false,
     children: /*#__PURE__*/_jsxs(Box, {
       className: "ico-grp-ss",
@@ -288,7 +287,7 @@ const GridItem = props => {
       ...getBRProps,
       display: "flex",
       flexDirection: flexDirection || "column",
-      background: bgColor || "transparent",
+      background: bgColor,
       borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderStyle: borderStyle || "solid",

package/dist/Editor/Elements/Link/Link.js

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { Node, Transforms } from "slate";
-import { ReactEditor, useFocused, useSelected, useSlateStatic } from "slate-react";
-import { Box, IconButton, Tooltip } from "@mui/material";
+import { ReactEditor, useSelected, useSlateStatic } from "slate-react";
+import { Box, IconButton, Popper, Tooltip } from "@mui/material";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import EditIcon from "@mui/icons-material/Edit";
 import LinkOffIcon from "@mui/icons-material/LinkOff";
@@ -11,6 +11,62 @@ import { getLinkType, handleLinkType } 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 Toolbar = props => {
+  const {
+    urlPath,
+    linkType,
+    showInNewTab,
+    selected,
+    linkRef,
+    onEditLink,
+    editor
+  } = props;
+  const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
+  const navType = getLinkType(linkType, urlPath);
+  const hideOpenLink = navType === "page" || !navType;
+  return selected ? /*#__PURE__*/_jsx(Popper, {
+    anchorEl: linkRef?.current,
+    open: true,
+    placement: "top-start",
+    className: "hide-popper-on-overlap",
+    contentEditable: false,
+    style: {
+      zIndex: 1000
+    },
+    children: /*#__PURE__*/_jsxs(Box, {
+      className: "element-toolbar hr",
+      style: {
+        width: "150px",
+        display: "flex",
+        position: "unset"
+      },
+      component: "div",
+      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: {
+            display: "inline-flex",
+            color: "rgba(0, 0, 0, 0.54)"
+          },
+          ...btnProps,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Edit",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onEditLink,
+          children: /*#__PURE__*/_jsx(EditIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    })
+  }) : null;
+};
 const linkStyles = () => ({
   linkBtn: {
     border: "none",
@@ -40,7 +96,6 @@ const Link = props => {
   } = customProps;
   const editor = useSlateStatic();
   const selected = useSelected();
-  const focused = useFocused();
   const [showInput, setShowInput] = useState(false);
   const [linkData, setLinkData] = useState({
     name: "",
@@ -53,6 +108,7 @@ const Link = props => {
   const showInNewTab = element?.showInNewTab || element?.target;
   const linkType = element?.linkType;
   const classes = linkStyles();
+  const linkRef = useRef(null);
   const updateLink = data => {
     Transforms.setNodes(editor, data, {
       at: path
@@ -77,54 +133,25 @@ const Link = props => {
   const handleClose = () => {
     setShowInput(false);
   };
-  const Toolbar = () => {
-    const btnProps = handleLinkType(urlPath, linkType, true, showInNewTab === "_blank");
-    const navType = getLinkType(linkType, urlPath);
-    const hideOpenLink = navType === "page" || !navType;
-    return selected && focused ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar hr",
-      contentEditable: false,
-      style: {
-        width: "150px",
-        top: "100%",
-        left: "0px",
-        display: "flex"
-      },
-      children: [hideOpenLink ? null : /*#__PURE__*/_jsx(Tooltip, {
-        title: "Open",
-        children: /*#__PURE__*/_jsx(Box, {
-          sx: {
-            display: "inline-flex",
-            color: "rgba(0, 0, 0, 0.54)"
-          },
-          ...btnProps,
-          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Edit",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onEditLink,
-          children: /*#__PURE__*/_jsx(EditIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Remove",
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: () => removeLink(editor),
-          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
-        })
-      })]
-    }) : null;
-  };
   const buttonProps = handleLinkType(urlPath, linkType, readOnly, showInNewTab === "_blank");
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
+    ref: linkRef,
     children: [/*#__PURE__*/_jsx(Box, {
       ...attributes,
       ...element.attr,
       sx: classes.linkBtn,
       ...buttonProps,
       children: children
-    }), /*#__PURE__*/_jsx(Toolbar, {}), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
+    }), /*#__PURE__*/_jsx(Toolbar, {
+      urlPath: urlPath,
+      linkType: linkType,
+      showInNewTab: showInNewTab,
+      selected: selected,
+      linkRef: linkRef,
+      onEditLink: onEditLink,
+      editor: editor
+    }), showInput ? /*#__PURE__*/_jsx(LinkSettings, {
       handleClose: handleClose,
       onSave: ({
         linkType,

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

@@ -5,7 +5,6 @@ import { Box } from "@mui/material";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-// import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

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

@@ -35,8 +35,8 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: 'inline-flex',
-      alignItems: 'center',
+      display: "inline-flex",
+      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Table/Table.js

@@ -12,9 +12,11 @@ import useTable, { TableProvider, getDefaultTableSelection } from "../../hooks/u
 import AddRowCol from "./AddRowCol";
 import TableTool from "./TableTool";
 import { MoreIcon, SettingsIcon } from "../../assets/svg/TableIcons";
+import { DeleteIcon } from "../../assets/svg/AIIcons";
 import { getSelectedCls } from "../../utils/helper";
 import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const hideRowDragBtns = (hide, dragRowBtnCls) => {
   const rowDragBtns = document.querySelectorAll(`.${dragRowBtnCls}`);
@@ -30,14 +32,16 @@ const ToolTableComponent = props => {
   const {
     updateTableSelection
   } = useTable();
-  return /*#__PURE__*/_jsx(TableTool, {
-    theme: editorTheme,
-    handleToolAction: (type, option) => {
-      handleAction(type, option);
-      if (type === "duplicate") {
-        updateTableSelection(getDefaultTableSelection());
+  return /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsx(TableTool, {
+      theme: editorTheme,
+      handleToolAction: (type, option) => {
+        handleAction(type, option);
+        if (type === "duplicate") {
+          updateTableSelection(getDefaultTableSelection());
+        }
       }
-    }
+    })
   });
 };
 const MoreTableSettings = props => {
@@ -89,34 +93,44 @@ const ToolBar = props => {
     handleExpand,
     handleAction,
     exandTools,
-    openSetttings
+    openSetttings,
+    hideTools
   } = props;
   const {
     getSelectedCells
   } = useTable();
   const viewTool = selected && !showTool && getSelectedCells()?.length <= 1;
-  return viewTool ? /*#__PURE__*/_jsxs(Box, {
+  return viewTool ? /*#__PURE__*/_jsx(Box, {
     component: "div",
     contentEditable: false,
     className: `tableToolBar ${exandTools ? "active" : ""}`,
     sx: classes.tableToolBar,
-    children: [/*#__PURE__*/_jsx(Tooltip, {
-      title: "Settings",
-      arrow: true,
-      onClick: () => handleAction("settings"),
-      children: /*#__PURE__*/_jsx(IconButton, {
-        className: getSelectedCls("toolbtn toggle", openSetttings),
-        children: /*#__PURE__*/_jsx(SettingsIcon, {})
-      })
-    }), /*#__PURE__*/_jsx(Tooltip, {
-      title: "Show Tools",
+    children: !hideTools.includes("settings") ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        onClick: () => handleAction("settings"),
+        children: /*#__PURE__*/_jsx(IconButton, {
+          className: getSelectedCls("toolbtn toggle", openSetttings),
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Show Tools",
+        arrow: true,
+        onClick: handleExpand,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          className: getSelectedCls("toolbtn toggle", exandTools),
+          children: /*#__PURE__*/_jsx(MoreIcon, {})
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(Tooltip, {
+      title: "Delete",
       arrow: true,
-      onClick: handleExpand,
+      onClick: () => handleAction("delete"),
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: getSelectedCls("toolbtn toggle", exandTools),
-        children: /*#__PURE__*/_jsx(MoreIcon, {})
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
       })
-    })]
+    })
   }) : null;
 };
 const Table = props => {
@@ -133,7 +147,8 @@ const Table = props => {
   const classes = TableStyles(editorTheme);
   const {
     readOnly,
-    isMobile
+    isMobile,
+    hideTools = []
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
   const [exandTools, setExpandTools] = useState(null);
@@ -304,12 +319,12 @@ const Table = props => {
           ...attributes,
           children: children
         })
-      }), /*#__PURE__*/_jsx(AddRowCol, {
+      }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
         ...commonAddBtnProps,
         addType: "col",
         onAdd: addCol
       })]
-    }), /*#__PURE__*/_jsx(AddRowCol, {
+    }), !hideTools.includes("add_column") && /*#__PURE__*/_jsx(AddRowCol, {
       ...commonAddBtnProps,
       addType: "row",
       onAdd: addRow
@@ -320,7 +335,8 @@ const Table = props => {
       handleExpand: handleExpand,
       handleAction: handleAction,
       exandTools: exandTools,
-      openSetttings: openSetttings
+      openSetttings: openSetttings,
+      hideTools: hideTools
     }), /*#__PURE__*/_jsx(MoreTableSettings, {
       exandTools: exandTools,
       handleAction: handleAction,

package/dist/Editor/Elements/Table/TableCell.js

@@ -48,7 +48,8 @@ const TableCell = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    hideTools = []
   } = customProps;
   const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const {
@@ -106,8 +107,8 @@ const TableCell = props => {
   const isFirstRow = row === 0;
   const isFirstColumn = column === 0;
   const [hoverRow, hoverCol] = hoverPath ? hoverPath.slice(-2) : [];
-  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly;
-  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly;
+  const showColDrag = isFirstRow && hoverCol === column && !resizing && !readOnly && !hideTools.includes("drag");
+  const showRowDrag = isFirstColumn && hoverRow === row && !resizing && !readOnly && !hideTools.includes("drag");
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
   const tableDOM = table.getDOMNode(path, true);

package/dist/Editor/Elements/Title/title.js

@@ -1,18 +1,24 @@
-import React, { useEffect, useState } from "react";
-import { Editor } from "slate";
-import { useSlate } from "slate-react";
-import { getNodeText } from "../../utils/helper";
+import React from "react";
+import { Text } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
+const isEmptyTextNode = node => {
+  if (Text.isText(node)) {
+    return !node.text.trim();
+  }
+  return false;
+};
 const Title = props => {
   const {
+    element,
     attributes,
     children,
-    element,
     customProps
   } = props;
-  useDetectExitFromTitle(element, customProps?.getTitleSaveData);
+  const isEmpty = !customProps?.readOnly && isEmptyTextNode(element?.children[0]) ? "empty" : "";
   return /*#__PURE__*/_jsx("div", {
     ...attributes,
+    placeholder: "Title",
+    className: `content-editable ${isEmpty}`,
     style: {
       fontWeight: "bold",
       fontSize: "20px"
@@ -20,28 +26,4 @@ const Title = props => {
     children: children
   });
 };
-export default Title;
-const useDetectExitFromTitle = (titleNode, onSaveTitle) => {
-  const editor = useSlate();
-  const [wasInsideTitle, setWasInsideTitle] = useState(false);
-  useEffect(() => {
-    if (!editor.selection) return;
-
-    // Get the current node where the cursor is
-    const [nodeEntry] = Editor.nodes(editor, {
-      at: editor.selection,
-      match: n => n.type === "title"
-    });
-    if (nodeEntry) {
-      setWasInsideTitle(true); // User was inside the title
-    } else if (wasInsideTitle) {
-      // User exited the title node
-      const text = getNodeText(titleNode) || "";
-      if (text?.trim() && text !== "Untitled" && onSaveTitle) {
-        onSaveTitle(text);
-      }
-      setWasInsideTitle(false);
-    }
-  }, [editor.selection]);
-  return null;
-};
+export default Title;

package/dist/Editor/Elements/Variables/Style.js

@@ -1,4 +1,4 @@
-const VariableStyles = () => ({
+const VariableStyles = theme => ({
   variablesItem: {
     color: "#2563EB",
     background: "#EEEEEE"
@@ -37,8 +37,34 @@ const VariableStyles = () => ({
     "& .MuiMenuItem-root": {
       color: "#64748B"
     },
+    "& .MuiPaper-root": {
+      borderRadius: '8px',
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      marginTop: '5px',
+      "@media only screen and (max-width: 599px)": {
+        padding: '10px 0px'
+      }
+    },
+    "& .MuiList-root": {
+      padding: '0px'
+    },
+    "& .MuiButtonBase-root": {
+      margin: '6px',
+      borderRadius: '8px',
+      padding: '6px 14px',
+      fontSize: '14px',
+      fontWeight: '400',
+      color: theme?.palette?.editor?.deletePopUpButtonTextColor,
+      "&:hover": {
+        background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+      },
+      "@media only screen and (max-width: 599px)": {
+        minHeight: '30px',
+        margin: '0px 6px'
+      }
+    },
     "& .Mui-selected": {
-      backgroundColor: "rgba(0, 0, 0, 0.04) !important"
+      backgroundColor: 'unset !important'
     }
   }
 });

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,11 +3,15 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
-  const classes = VariableStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = VariableStyles(theme);
   const editor = useSlateStatic();
   const {
     options
@@ -24,13 +28,14 @@ const VariableButton = props => {
     value: "",
     sx: classes.variableBtn,
     onChange: updateVariable,
-    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {}),
     MenuProps: {
       sx: classes.variableMenuItem,
       PaperProps: {
         style: {
           maxHeight: 300,
-          overflowY: "auto"
+          overflowY: "auto",
+          transformOrigin: 'top left'
         },
         sx: {
           "&::-webkit-scrollbar-track": {
@@ -40,6 +45,14 @@ const VariableButton = props => {
             borderRadius: "16px"
           }
         }
+      },
+      anchorOrigin: {
+        vertical: 'bottom',
+        horizontal: 'right'
+      },
+      transformOrigin: {
+        vertical: 'top',
+        horizontal: 'right'
       }
     },
     children: [/*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Styles/EditorStyles.js

@@ -133,7 +133,7 @@ const editorStyles = ({
       },
       "& .accordion-summary-collapse-btn": {
         padding: "4px",
-        width: '5px'
+        width: "5px"
       },
       "& .workflow-icon-btn": {
         pointerEvents: "none",
@@ -242,7 +242,7 @@ const editorStyles = ({
         }
       },
       "& .section-tw": {
-        background: 'transparent !important',
+        background: "transparent !important",
         "& button": {
           padding: "2px",
           borderRadius: "0px",
@@ -291,8 +291,8 @@ const editorStyles = ({
         }
       },
       "& ::selection": {
-        background: 'rgba(35, 131, 226, 0.35)!important',
-        color: 'inherit'
+        background: "rgba(35, 131, 226, 0.35)!important",
+        color: "inherit"
       },
       "&.readOnlyContainer": {
         "& .max-content": {
@@ -302,7 +302,7 @@ const editorStyles = ({
     },
     fullScreenWrapper: {
       "& .editor-wrapper": {
-        paddingTop: '20px'
+        paddingTop: "20px"
       },
       "& .MuiDialog-paper, & .MuiPopover-paper": {
         background: `${theme?.palette?.editor?.background} !important`