@flozy/editor 4.9.9 → 5.0.1

package/dist/Editor/CommonEditor.js

@@ -298,9 +298,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     hideTools: updatedHideTools || []
   }) : [];
   const handleEditorChange = newValue => {
-    debounced(newValue);
-    if (!isInteracted) {
-      setIsInteracted(true);
+    if (JSON.stringify(newValue) !== JSON.stringify(debouncedValue?.current)) {
+      debounced(newValue);
+      if (!isInteracted) {
+        setIsInteracted(true);
+      }
     }
   };
   const onDrawerOpen = status => {

package/dist/Editor/Editor.css

@@ -648,9 +648,12 @@ blockquote {
   height: fit-content;
   margin-left: auto;
   margin-right: auto;
-  background: #000000b6;
-  padding: 6px 10px 2px 10px;
-  border-radius: 8px 8px 0 0;
+  padding: 4px;
+  border-radius: 8px;
+}
+
+.embed .element-toolbar .last-btn {
+  margin-right: 0px
 }
 
 .embed-code .element-toolbar {
@@ -667,6 +670,13 @@ blockquote {
   position: absolute !important;
   bottom: 2px;
   right: 2px;
+  border-radius: 7px !important;
+  padding: 2px !important;
+  color: #64748B !important;
+}
+
+.resize-br.img-resizer {
+  bottom: 8px;
 }
 
 .visible-on-hover {
@@ -814,6 +824,7 @@ blockquote {
 
 .element-toolbar button {
   margin-right: 4px;
+  margin-bottom: 0px;
 }
 
 .empty-carousel-wrapper .element-selector {
@@ -1075,6 +1086,10 @@ blockquote {
   font-size: 14px;
 }
 
+.listItemMargin {
+  margin: 0px;
+}
+
 .content-editable.empty {
   position: relative;
 }

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 ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
 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(ArrowDropDownIcon, {})
+      children: /*#__PURE__*/_jsx(KeyboardArrowDownRoundedIcon, {})
     }) : null]
   }, `ci_bs_row_${index}}`);
 };

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/Image.js

@@ -41,6 +41,7 @@ const ToolBar = ({
       title: "Link Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
+        className: "last-btn",
         onClick: () => setOpenNav(true),
         children: /*#__PURE__*/_jsx(LinkIcon, {})
       })
@@ -299,13 +300,13 @@ const Image = props => {
           editor: editor,
           handleImageClick: handleImageClick
         })
-      }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      }) : null, selected && !readOnly && url && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,
           background: "#FFF"
         },
-        className: "resize-br visible-on-hover",
+        className: "resize-br visible-on-hover img-resizer",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
     }), /*#__PURE__*/_jsx("span", {

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

@@ -312,7 +312,7 @@ const Grid = props => {
   return /*#__PURE__*/_jsx(GridProvider, {
     children: /*#__PURE__*/_jsxs(GridContainer, {
       container: true,
-      className: `grid-container ${grid} has-hover element-root dpath ${equalItems ? "equal-cols" : ""} cc-${element?.children?.length}`,
+      className: `grid-container ${grid} element-root dpath ${equalItems ? "equal-cols" : ""} cc-${element?.children?.length}`,
       ...attributes,
       ...sectionId,
       sx: {

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

@@ -125,6 +125,7 @@ const GridItem = props => {
   const [parentDOM, setParentDOM] = useState({});
   const [alert, setAlert] = useState(null);
   const childCount = getChildCount(editor, path);
+  const lastChild = childCount - 1 === [...path].pop();
   const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
     ...parentDOM
   });
@@ -283,6 +284,7 @@ const GridItem = props => {
       }
     },
     "data-path": path.join(","),
+    "data-info": "handle-outside-editor-click",
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
@@ -327,6 +329,7 @@ const GridItem = props => {
         }
       },
       placeholder: "Column",
+      "data-info": "handle-outside-editor-click",
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
@@ -336,7 +339,7 @@ const GridItem = props => {
       customProps: customProps
     }) : null, !readOnly ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
-      className: resizing ? "resizing" : "",
+      className: `${lastChild ? "last-resize" : ""} ${resizing ? "resizing" : ""}`,
       onMouseDown: onMouseDown,
       height: "auto"
     }) : null, /*#__PURE__*/_jsxs(Dialog, {

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

@@ -41,8 +41,8 @@ const GridStyles = (theme, appTheme) => ({
             display: "none !important"
           }
         },
-        "&:last-child": {
-          "& .col-width-resizer": {
+        "& .col-width-resizer": {
+          "&.last-resize": {
             display: "none"
           }
         },

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/Elements/Table/Table.js

@@ -172,15 +172,18 @@ const Table = props => {
     table.insertColumn("after");
     Transforms.deselect(editor);
   };
-  const handleScrollStop = useDebouncedCallback(() => {
-    containerRef?.current?.classList.add("hideScroll");
-  }, 200);
-  const handleScroll = () => {
+  const handleRowDragBtns = () => {
     if (containerRef?.current?.scrollLeft > 0) {
       hideRowDragBtns("none", dragRowBtnCls);
     } else {
       hideRowDragBtns("", dragRowBtnCls);
     }
+  };
+  const handleScrollStop = useDebouncedCallback(() => {
+    containerRef?.current?.classList.add("hideScroll");
+  }, 200);
+  const handleScroll = () => {
+    handleRowDragBtns();
     containerRef?.current?.classList.remove("hideScroll");
     handleScrollStop();
   };

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

@@ -113,6 +113,7 @@ const TableCell = props => {
   const tableDOM = table.getDOMNode(path, true);
   const isCellSelected = getSelectedCells();
   const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
+  const containerEle = tableDOM?.parentNode?.parentNode;
   useEffect(() => {
     if (tableDOM) {
       const {
@@ -390,6 +391,7 @@ const TableCell = props => {
     dndProps,
     resetSelection
   };
+  const showRowDragBtn = (showRowDrag || isRowDragging) && containerEle?.scrollLeft <= 0;
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs("td", {
       ...element.attr,
@@ -429,7 +431,7 @@ const TableCell = props => {
         dragType: "col",
         onDrag: onColDrag,
         hideDelete: rowProps?.children?.length <= 1
-      }) : null, showRowDrag || isRowDragging ? /*#__PURE__*/_jsx(DragButton, {
+      }) : null, showRowDragBtn ? /*#__PURE__*/_jsx(DragButton, {
         ...commonDragBtnProps,
         dragType: "row",
         onDrag: onRowDrag,

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,37 @@ const usePopupStyle = theme => ({
     "& .MuiDialog-paperFullScreen": {
       borderRadius: "0px !important"
     },
+    "& .inputField": {
+      height: "29px",
+      "& .MuiIconButton-root": {
+        padding: "5px"
+      },
+      "& .MuiOutlinedInput-root ": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+        borderRadius: "8px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& .MuiFormControl-root": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "8px",
+        height: "29px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid transparent`
+      },
+      "& .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 +87,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 +632,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 +688,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

@@ -104,7 +104,7 @@ const Section = props => {
     });
   };
   const isFreeGrid = element?.children?.find(f => f.type === "freegrid");
-  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "needHover" : "";
+  const needHover = element?.children?.find(f => f.type === "grid" && !list_types.includes(element.type)) ? "" : "";
   let tempProps = {};
   if (element?.type === "temp") {
     tempProps = {

package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography } from "@mui/material";
+import { Grid, Radio, RadioGroup, FormControl, FormLabel, FormControlLabel, Typography, Tooltip } from "@mui/material";
 import { JustifyStartIcon, JustifyCenterIcon, JustifyEndIcon, AlignEndIcon, AlignCenterIcon, AlignStartIcon, DirectionRowIcon, DirectionColumIcon, DirectionReverseIcon } from "../../iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -44,7 +44,7 @@ const Alignment = props => {
           },
           children: [/*#__PURE__*/_jsxs(RadioGroup, {
             row: true,
-            "aria-labelledby": "pos-align-tems",
+            "aria-labelledby": "pos-jc",
             name: "horizantal",
             value: value?.horizantal || "start",
             onChange: handleChange,
@@ -52,22 +52,31 @@ const Alignment = props => {
             style: {
               display: "flex"
             },
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              value: "start",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(AlignStartIcon, {})
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "center",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "end",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(AlignEndIcon, {})
+            children: [/*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Left",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "start",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Center",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "center",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Right",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "end",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
+              })
             })]
           }), /*#__PURE__*/_jsxs(RadioGroup, {
             row: true,
-            "aria-labelledby": "pos-jc",
+            "aria-labelledby": "pos-align-tems",
             name: "vertical",
             value: value?.vertical || "start",
             onChange: handleChange,
@@ -75,18 +84,27 @@ const Alignment = props => {
             style: {
               display: "flex"
             },
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              value: "start",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(JustifyStartIcon, {})
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "center",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(JustifyCenterIcon, {})
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "end",
-              control: /*#__PURE__*/_jsx(Radio, {}),
-              label: /*#__PURE__*/_jsx(JustifyEndIcon, {})
+            children: [/*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Top",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "start",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(AlignStartIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Middle",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "center",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(AlignCenterIcon, {})
+              })
+            }), /*#__PURE__*/_jsx(Tooltip, {
+              title: "Align Bottom",
+              children: /*#__PURE__*/_jsx(FormControlLabel, {
+                value: "end",
+                control: /*#__PURE__*/_jsx(Radio, {}),
+                label: /*#__PURE__*/_jsx(AlignEndIcon, {})
+              })
             })]
           })]
         })]

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/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/plugins/withEmbeds.js

@@ -1,9 +1,11 @@
 import { Transforms, Path, Node } from "slate";
 const AvoidCopying = ["headingOne", "headingTwo", "headingThree", "blockquote"];
+const BlockTypes = ["grid"];
 const withEmbeds = editor => {
   const {
     isVoid,
-    insertBreak
+    insertBreak,
+    insertNodes
   } = editor;
   editor.isVoid = element => {
     if (["video", "htmlCode"].includes(element.type)) {
@@ -14,6 +16,30 @@ const withEmbeds = editor => {
       return isVoid(element);
     }
   };
+  editor.insertNodes = (...args) => {
+    try {
+      const parentPath = Path.parent(editor.selection.focus.path);
+      const parentNode = Node.get(editor, parentPath);
+      const previousPath = Path.previous(parentPath);
+      const previousNode = Node.get(editor, previousPath);
+      if (BlockTypes.includes(previousNode?.children[0]?.type) && parentNode?.type?.indexOf("heading") >= 0) {
+        console.log("grid is in previous", parentPath, previousPath, [...args]);
+        insertNodes(...[{
+          type: "paragraph",
+          children: [{
+            text: ""
+          }]
+        }, {
+          at: parentPath
+        }]);
+      } else {
+        insertNodes(...args);
+      }
+    } catch (err) {
+      console.log(err);
+      insertNodes(...args);
+    }
+  };
   editor.insertBreak = (...args) => {
     const parentPath = Path.parent(editor.selection.focus.path);
     const parentNode = Node.get(editor, parentPath);

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/dist/Editor/utils/helper.js

@@ -110,10 +110,31 @@ export const isEmptyNode = (editor, children, path) => {
   }
 };
 export const outsideEditorClickLabel = "handle-outside-editor-click";
+const insertNewLineOnColumn = (editor, pathStr) => {
+  try {
+    const path = pathStr.split(",").map(m => parseInt(m));
+    const colNode = Node.get(editor, path);
+    if (colNode?.type === "grid-item") {
+      const newPath = [...path, colNode?.children.length];
+      Transforms.insertNodes(editor, [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }], {
+        at: newPath,
+        select: true
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
 export const handleInsertLastElement = (event, editor) => {
   if (event.target.dataset.info !== outsideEditorClickLabel) {
     return;
   }
+  const hasPath = event.target.dataset.path;
   const lastElement = editor.children[editor.children?.length - 1];
   const isFreeGrid = lastElement?.type === "freegrid" || lastElement?.children[0]?.type === "freegrid";
   if (isFreeGrid) {
@@ -122,6 +143,10 @@ export const handleInsertLastElement = (event, editor) => {
   const isLastElementEmpty = lastElement.type === "paragraph" && !lastElement.children[0]?.text && !lastElement.children?.some(c => c.type === "grid");
   if (!ReactEditor.isFocused(editor)) {
     if (isLastElementEmpty) {
+      if (hasPath) {
+        insertNewLineOnColumn(editor, hasPath);
+        return;
+      }
       // just focus on the last empty element
       const path = [editor.children.length - 1, 0];
       const move = {
@@ -136,6 +161,11 @@ export const handleInsertLastElement = (event, editor) => {
       Transforms.move(editor, move);
       Transforms.select(editor, move);
     } else {
+      // if dataset has path insert new line on the path (for columns / grid)
+      if (hasPath) {
+        insertNewLineOnColumn(editor, hasPath);
+        return;
+      }
       // insert an new empty element and focus
       Transforms.insertNodes(editor, [{
         type: "paragraph",
@@ -148,6 +178,8 @@ export const handleInsertLastElement = (event, editor) => {
       });
     }
     ReactEditor.focus(editor);
+  } else if (hasPath) {
+    insertNewLineOnColumn(editor, hasPath);
   }
 };
 export const isListItem = editor => {

package/package.json

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