@flozy/editor 4.9.8 → 5.0.0

package/dist/Editor/Editor.css

@@ -1075,6 +1075,10 @@ blockquote {
   font-size: 14px;
 }
 
+.listItemMargin {
+  margin: 0px;
+}
+
 .content-editable.empty {
   position: relative;
 }

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

@@ -9,7 +9,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       marginRight: "8px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPopper: {
@@ -58,7 +58,7 @@ const ColorPickerStyles = theme => ({
       width: "24px",
       height: "24px",
       margin: "0px 4px",
-      border: "1px solid #ccc"
+      border: "unset"
     }
   },
   colorPickerIcon: {

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

@@ -1,4 +1,4 @@
-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"
+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"
 // "#E6E6E6",
-// "#BEBEBE"
+// "#BEBEBE",
 ];

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
 import { IconButton, Tooltip, Box, useTheme } from "@mui/material";
@@ -24,6 +24,13 @@ const VideoContent = props => {
     alt,
     videoSX
   } = props;
+  const iframeRef = useRef(null);
+  useEffect(() => {
+    if (iframeRef.current) {
+      iframeRef.current.src = "about:blank"; // reloading the iframe
+      iframeRef.current.src = embedURL;
+    }
+  }, [embedURL, iframeRef.current]);
   return resizing ? /*#__PURE__*/_jsx("div", {
     style: {
       width: "100%",
@@ -37,6 +44,7 @@ const VideoContent = props => {
       icon: "videoPlayer"
     })
   }) : /*#__PURE__*/_jsx(Box, {
+    ref: iframeRef,
     component: "iframe",
     className: "embedd-iframe",
     sx: {
@@ -52,7 +60,6 @@ const VideoContent = props => {
       background: bgColor || "transparent",
       ...videoSX
     },
-    src: embedURL,
     title: alt,
     allowFullScreen: true
   });

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useEffect, useState, useRef } from "react";
-import { Button, Dialog, DialogActions, DialogContent, useTheme } from "@mui/material";
+import { Button, Dialog, DialogActions, DialogContent, useTheme, Popper } from "@mui/material";
 import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
@@ -37,27 +37,23 @@ const Resizer = ({
 };
 const GridItemToolbar = props => {
   const {
+    classes,
     selected,
     showTool,
     onSettings,
-    onAddColumn
+    onAddColumn,
+    columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
-    contentEditable: false,
-    className: "grid-item-toolbar",
-    style: {
-      top: "-34px",
-      left: "calc(100% - 68px)",
-      display: "flex",
-      flexDirection: "row"
-    },
+  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
+    anchorEl: columnRef?.current,
+    open: true,
+    placement: "top-end",
+    sx: classes.popTools,
+    className: "gi-tool-pp",
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onSettings,
         children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
@@ -66,9 +62,6 @@ const GridItemToolbar = props => {
       title: "Add Column",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        sx: {
-          marginRight: "4px"
-        },
         size: "small",
         onClick: onAddColumn,
         children: /*#__PURE__*/_jsx(AddIcon, {})
@@ -84,9 +77,13 @@ const GridItem = props => {
     updateColumnWidth,
     updateColNodes
   } = useGrid() || {};
+  const {
+    hoverPath,
+    theme: appTheme
+  } = useEditorContext();
   const columnRef = useRef(null);
   const theme = useTheme();
-  const classes = GridStyles(theme);
+  const classes = GridStyles(theme, appTheme);
   const {
     attributes,
     children,
@@ -123,9 +120,6 @@ const GridItem = props => {
   } = alignment || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
-  const {
-    hoverPath
-  } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const [parentDOM, setParentDOM] = useState({});
@@ -308,10 +302,12 @@ const GridItem = props => {
         className: "element-selector-dots br",
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
+        classes: classes,
         selected: selected,
         showTool: showTool,
         onSettings: onSettings,
-        onAddColumn: onAddColumn
+        onAddColumn: onAddColumn,
+        columnRef: columnRef
       })]
     }), /*#__PURE__*/_jsx(Box, {
       ref: columnRef,

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

@@ -1,4 +1,4 @@
-const GridStyles = theme => ({
+const GridStyles = (theme, appTheme) => ({
   gridButton: {
     background: "#007FFF",
     color: "#fff",
@@ -86,6 +86,32 @@ const GridStyles = theme => ({
         }
       }
     }
+  },
+  popTools: {
+    zIndex: 1000,
+    "& button": {
+      borderRadius: "8px",
+      marginRight: "4px",
+      border: "1px solid rgba(37, 99, 235, 0.32)",
+      boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+      background: appTheme?.palette?.editor?.background,
+      color: "#64748B",
+      "& svg": {
+        width: "16px",
+        height: "16px",
+        "& .fillStroke": {
+          stroke: "#64748B"
+        }
+      },
+      "&:hover": {
+        background: appTheme?.palette?.editor?.background,
+        border: "1px solid #2684ff",
+        color: "#2684ff",
+        "& .fillStroke": {
+          stroke: "#2684ff"
+        }
+      }
+    }
   }
 });
 export default GridStyles;

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -36,7 +36,7 @@ const SearchAttachment = props => {
       display: "block"
     },
     children: /*#__PURE__*/_jsxs(Card, {
-      style: {
+      sx: {
         display: "flex",
         justifyContent: "flex-start",
         alignItems: "flex-end",
@@ -48,6 +48,10 @@ const SearchAttachment = props => {
         borderRadius: "7px !important",
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
+        "&.MuiPaper-root.MuiPaper-rounded": {
+          borderRadius: "7px !important",
+          paddingTop: '0px !important'
+        },
         "& *::selection": {
           background: "#000"
         }

package/dist/Editor/Elements/Search/SearchButton.js

@@ -7,6 +7,7 @@ import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
 import SearchAndDocList from "./SearchList";
 import { insertBrain } from "../../utils/brains";
 import { useDebounce } from "use-debounce";
+import { Editor, Transforms } from "slate";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -88,6 +89,15 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
     setSkip(0);
   };
   const handleClose = () => {
+    const {
+      selection
+    } = editor;
+    if (selection) {
+      const [, currentPath] = Editor.node(editor, selection);
+      Transforms.insertText(editor, '', {
+        at: currentPath
+      });
+    }
     setAnchorEl(null);
   };
   const handleClick = data => {

package/dist/Editor/Elements/Search/SearchList.js

@@ -35,12 +35,12 @@ const SearchAndDocList = ({
         },
         sx: {
           borderRadius: "6px",
-          backgroundColor: theme?.palette?.containers?.bg7,
-          border: theme?.palette?.type === 'dark' ? `1px solid ${theme?.palette?.editor?.popUpBorderColor}` : '',
+          backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+          border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
           padding: "5px",
           "&:hover": {
-            backgroundColor: theme?.palette?.containers?.bg8,
-            background: theme?.palette?.containers?.bg8
+            backgroundColor: theme?.palette?.editor?.sectionSettingIconHover,
+            background: theme?.palette?.editor?.sectionSettingIconHover
           }
         },
         children: /*#__PURE__*/_jsx(Icon, {
@@ -77,6 +77,7 @@ const SearchAndDocList = ({
           "& .MuiOutlinedInput-root": {
             color: theme?.palette?.primary?.main,
             boxShadow: theme?.palette?.shadows?.shadow12,
+            backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
             "&:hover .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
@@ -85,7 +86,7 @@ const SearchAndDocList = ({
             "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
               borderRadius: "8px",
               border: `1px solid ${theme?.palette?.primary?.slashBrainBorder}`,
-              borderColor: theme?.palette?.primary?.slashBrainBorder
+              borderColor: `${theme?.palette?.primary?.slashBrainBorder} !important`
             }
           },
           '& .MuiOutlinedInput-notchedOutline': {
@@ -113,7 +114,26 @@ const SearchAndDocList = ({
         overflowY: 'auto',
         overflowX: 'hidden',
         padding: '0px 16px 8px',
-        marginBottom: '20px'
+        marginBottom: '20px',
+        scrollbarWidth: "thin",
+        scrollbarColor: `${theme?.palette?.primary?.slashBrainBorder} transparent`,
+        "&::-webkit-scrollbar": {
+          width: "3px",
+          height: "3px !important",
+          borderRadius: "10px !important"
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder,
+          borderRadius: "10px !important",
+          width: "3px !important"
+        },
+        "&::-webkit-scrollbar-thumb:hover": {
+          backgroundColor: theme?.palette?.primary?.slashBrainBorder
+        },
+        "&::-webkit-scrollbar-track": {
+          background: "transparent",
+          borderRadius: "10px !important"
+        }
       },
       children: [mapData?.map((doc, index) => {
         const title = doc?.title?.trim() === "" ? 'Untitled' : doc?.title;

package/dist/Editor/Styles/EditorStyles.js

@@ -291,9 +291,11 @@ const editorStyles = ({
     }
   },
   fullScreenWrapper: {
+    "& .editor-wrapper": {
+      paddingTop: '20px'
+    },
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
-      paddingTop: "20px",
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

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

@@ -1,10 +1,11 @@
 import React, { useState } from "react";
-import { Grid, Typography, IconButton, Tooltip, TextField } from "@mui/material";
+import { Grid, Typography, IconButton, Tooltip, TextField, InputAdornment } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import OpenInFullIcon from "@mui/icons-material/OpenInFull";
 import CloseFullscreenIcon from "@mui/icons-material/CloseFullscreen";
 import Icon from "../../common/Icon";
 import { ToggleFullScreenIcon } from "../../common/iconListV2";
+import { SearchIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const SearchBox = props => {
@@ -17,7 +18,13 @@ const SearchBox = props => {
     sx: classes.searchBox,
     size: "small",
     value: search,
-    onChange: handleChange
+    onChange: handleChange,
+    InputProps: {
+      startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+        position: "start",
+        children: /*#__PURE__*/_jsx(SearchIcon, {})
+      })
+    }
   });
 };
 const PopperHeader = props => {
@@ -63,6 +70,7 @@ const PopperHeader = props => {
           sx: {
             position: 'relative'
           },
+          className: "inputField",
           children: [/*#__PURE__*/_jsx(IconButton, {
             className: openSearch ? 'searchContainer' : '',
             onClick: handleSearchButton,

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

@@ -24,6 +24,31 @@ const usePopupStyle = theme => ({
     "& .MuiDialog-paperFullScreen": {
       borderRadius: "0px !important"
     },
+    "& .inputField": {
+      height: '29px',
+      '& .MuiIconButton-root': {
+        padding: '5px'
+      },
+      "& .MuiFormControl-root": {
+        background: theme?.palette?.editor?.inputFieldBgColor,
+        borderRadius: "8px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& .MuiOutlinedInput-input": {
+        padding: "3px 35px 4px 2px !important"
+      },
+      "& .MuiInputBase-adornedStart": {
+        padding: "0px 0px 0px 9px"
+      },
+      '& svg': {
+        '& path': {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
+    },
     "&.textSettings": {
       "@media only screen and (max-width: 600px)": {
         margin: "4px !important",
@@ -56,6 +81,11 @@ const usePopupStyle = theme => ({
     "& .buttonsWrpr": {
       "& button": {
         color: theme?.palette?.editor?.textColor
+      },
+      "& .more-btn-cbs": {
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        border: `1.5px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        paddingTop: "10px"
       }
     },
     "@media only screen and (max-width: 599px)": {
@@ -596,7 +626,7 @@ const usePopupStyle = theme => ({
     borderRadius: "7px !important",
     "& .buttonsWrpr": {
       "& button": {
-        border: "1px solid #ccc",
+        // border: "1px solid #ccc",
         margin: "4px",
         width: "24px",
         height: "24px",
@@ -652,14 +682,16 @@ const usePopupStyle = theme => ({
       padding: "7px 15px",
       color: "#FFF",
       width: "100px",
-      marginBottom: "10px"
+      marginBottom: "10px",
+      textTransform: "capitalize"
     },
     "& .outlineBtn": {
       border: "1px solid #D7DBEC",
       borderRadius: "7px",
       padding: "7px 15px",
       color: "#FFF",
-      width: "100px"
+      width: "100px",
+      textTransform: "capitalize"
     }
   },
   searchBox: {

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Button, ButtonGroup, Divider, Grid, Typography } from "@mui/material";
-import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 import { Dropdown, MarkButton, TextSize, BlockButton, AccordionButton } from "../FormatTools";
 import { toolbarGroups } from "../toolbarGroups";
 import ColorPicker from "../../Elements/Color Picker/ColorPicker";
@@ -438,8 +438,8 @@ const TextFormat = props => {
           className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("bgColor"),
-          className: "colorPicker",
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+          className: "colorPicker textFormatMUIIcon",
+          children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
         })]
       }), /*#__PURE__*/_jsxs(ButtonGroup, {
         sx: classes.btnGroup2,
@@ -460,8 +460,8 @@ const TextFormat = props => {
           className: "vl"
         }), /*#__PURE__*/_jsx(Button, {
           onClick: handleColorPicker("color"),
-          className: "colorPicker",
-          children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
+          className: "colorPicker textFormatMUIIcon",
+          children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
         })]
       })]
     }), /*#__PURE__*/_jsx(AllColors, {

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

@@ -9,7 +9,7 @@ import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../.
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
-// import useWindowResize from "../../hooks/useWindowResize"; //commenting for ui demo if okay remove this comment before dev
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -45,11 +45,8 @@ const Section = props => {
   const path = ReactEditor.findPath(editor, element);
   const anchorEl = useRef(null);
   const popperEl = useRef(null);
-
-  // const [size] = useWindowResize();
-  // const isSectionFullWidth =
-  //   sectionGridSize && sectionGridSize[size?.device] >= 12;
-
+  const [size] = useWindowResize();
+  const isSectionFullWidth = sectionGridSize && sectionGridSize[size?.device] >= 12;
   const [isHovering, setIsHovering] = useState(false);
   const onMouseEnter = () => {
     setIsHovering(true);
@@ -80,9 +77,6 @@ const Section = props => {
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
-          sx: {
-            marginBottom: '25px !important'
-          },
           onClick: onSettings,
           children: /*#__PURE__*/_jsx(TuneIcon, {})
         })
@@ -155,16 +149,11 @@ const Section = props => {
       className: "ed-section-inner",
       sx: {
         position: "relative",
-        ...edInnerSp,
-        outline: isHovering ? `1px dashed ${theme?.palette?.editor?.inputFieldBorder}` : 'none'
-        // borderRadius: '5px'
+        ...edInnerSp
       },
-
       ref: anchorEl,
-      children: [isHovering ? /*#__PURE__*/_jsx(Popper, {
-        open: isHovering
-        // open={isHovering && isSectionFullWidth}  //commenting for ui demo if okay remove this comment before dev
-        ,
+      children: [isHovering && isSectionFullWidth ? /*#__PURE__*/_jsx(Popper, {
+        open: isHovering && isSectionFullWidth,
         anchorEl: anchorEl?.current,
         placement: "top-start",
         sx: {
@@ -187,7 +176,11 @@ const Section = props => {
             fromPopper: true
           })]
         })
-      }) : /*#__PURE__*/_jsx(_Fragment, {}), children]
+      }) : /*#__PURE__*/_jsxs(_Fragment, {
+        children: [!readOnly && !showTool ? /*#__PURE__*/_jsx(DragHandle, {
+          ...props
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
+      }), children]
     }), openSetttings ? /*#__PURE__*/_jsx(SectionPopup, {
       element: {
         ...element,

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

@@ -253,7 +253,7 @@ const StyleBuilder = props => {
       style: {
         zIndex: "1300"
       },
-      sx: classes.bottomBarDrawer,
+      sx: classes.sideBarDrawer,
       children: renderDrawerMenu()
     }) : /*#__PURE__*/_jsx(Drawer, {
       open: true,

package/dist/Editor/common/iconslist.js

@@ -1274,6 +1274,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   children: [/*#__PURE__*/_jsx("path", {
     d: "M11 13.75C12.5188 13.75 13.75 12.5188 13.75 11C13.75 9.48122 12.5188 8.25 11 8.25C9.48122 8.25 8.25 9.48122 8.25 11C8.25 12.5188 9.48122 13.75 11 13.75Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",
@@ -1281,6 +1282,7 @@ export const GridSettingsIcon = props => /*#__PURE__*/_jsxs("svg", {
   }), /*#__PURE__*/_jsx("path", {
     d: "M1.8335 11.8066V10.1933C1.8335 9.23998 2.61266 8.45165 3.57516 8.45165C5.23433 8.45165 5.91266 7.27832 5.0785 5.83915C4.60183 5.01415 4.886 3.94165 5.72016 3.46498L7.306 2.55748C8.03016 2.12665 8.96516 2.38332 9.396 3.10748L9.49683 3.28165C10.3218 4.72082 11.6785 4.72082 12.5127 3.28165L12.6135 3.10748C13.0443 2.38332 13.9793 2.12665 14.7035 2.55748L16.2893 3.46498C17.1235 3.94165 17.4077 5.01415 16.931 5.83915C16.0968 7.27832 16.7752 8.45165 18.4343 8.45165C19.3877 8.45165 20.176 9.23082 20.176 10.1933V11.8066C20.176 12.76 19.3968 13.5483 18.4343 13.5483C16.7752 13.5483 16.0968 14.7216 16.931 16.1608C17.4077 16.995 17.1235 18.0583 16.2893 18.535L14.7035 19.4425C13.9793 19.8733 13.0443 19.6166 12.6135 18.8925L12.5127 18.7183C11.6877 17.2791 10.331 17.2791 9.49683 18.7183L9.396 18.8925C8.96516 19.6166 8.03016 19.8733 7.306 19.4425L5.72016 18.535C4.886 18.0583 4.60183 16.9858 5.0785 16.1608C5.91266 14.7216 5.23433 13.5483 3.57516 13.5483C2.61266 13.5483 1.8335 12.76 1.8335 11.8066Z",
     stroke: "#64748B",
+    className: "fillStroke",
     strokeWidth: "1.5",
     strokeMiterlimit: "10",
     strokeLinecap: "round",

package/dist/Editor/commonStyle.js

@@ -162,7 +162,8 @@ const useCommonStyle = theme => ({
         background: `${theme?.palette?.editor?.closeButtonBgColor} !important`
       },
       "& .deleteBtn": {
-        background: "transparent"
+        background: "transparent",
+        margin: '0px !important'
       },
       "& .MuiGrid-container": {
         "& .workFlowButton": {
@@ -170,7 +171,9 @@ const useCommonStyle = theme => ({
           textTransform: "unset !important",
           color: `${theme?.palette?.editor?.textColor} !important`,
           fontSize: "14px !important",
-          fontWeight: "500 !important"
+          fontWeight: "500 !important",
+          borderRadius: "25px",
+          padding: "5px 15px"
         }
       },
       "& .MuiDialogActions-root": {

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -369,12 +369,14 @@ export const getBlock = props => {
       });
     case "orderedList":
       return /*#__PURE__*/_jsx("ol", {
+        className: "listItemMargin",
         type: "1",
         ...attributes,
         children: children
       });
     case "unorderedList":
       return /*#__PURE__*/_jsx("ul", {
+        className: "listItemMargin",
         ...attributes,
         children: children
       });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "4.9.8",
+  "version": "5.0.0",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"