@flozy/editor 5.0.0 → 5.0.2

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 {

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

@@ -121,7 +121,7 @@ const Carousel = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
-    className: "sliderBg",
+    className: `sliderBg ${edit ? "carousel_slider_edit" : ""}`,
     style: {
       backgroundColor: "transparent",
       position: "relative"
@@ -136,6 +136,7 @@ const Carousel = props => {
       style: {
         padding: "12px"
       },
+      contentEditable: false,
       children: /*#__PURE__*/_jsx(Slider, {
         ...settings,
         children: children.map((m, i) => {

package/dist/Editor/Elements/Carousel/slick.min.css

@@ -13,9 +13,9 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
-  user-select: none;
   -webkit-touch-callout: none;
   -khtml-user-select: none;
+  user-select: none;
   -ms-touch-action: pan-y;
   touch-action: pan-y;
   -webkit-tap-highlight-color: transparent;

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/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/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 {
@@ -165,7 +166,7 @@ const TableCell = props => {
     if (!resizing && tableResizing) {
       table.resizeTableCell({
         "col.size": size
-      }, rowNode);
+      }, path);
     }
     if (resizing) {
       setTableResizing(currentPath);
@@ -204,9 +205,8 @@ const TableCell = props => {
       });
     }
   };
-  const onMouseUp = e => {
+  const onMouseUp = () => {
     if (startCellPath?.length) {
-      e.preventDefault();
       updateTableSelection({
         endCellPath: path,
         isDragging: false
@@ -231,7 +231,7 @@ const TableCell = props => {
       });
     }
   };
-  const cellId = path.toString() + "table-cell";
+  const cellId = "table-cell" + path.toString();
   const cellRef = document.getElementById(cellId);
   const contentEditable = !readOnly && isCellEditable(startCellPath, path);
   const commonTdProps = useMemo(() => {
@@ -280,7 +280,7 @@ const TableCell = props => {
   const isCellDragging = active?.id && active?.id === cellId;
   const isRowDragging = isCellDragging && currentDraggingType === "row";
   const isColDragging = isCellDragging && currentDraggingType === "col";
-  const width = size?.width || tableSize?.cellWidth;
+  const width = isHeader ? size?.width || tableSize?.cellWidth : "0px";
   const sizeProps = {
     minWidth: width,
     maxWidth: width
@@ -390,6 +390,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 +430,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/Elements/TopBanner/Styles.js

@@ -1,4 +1,4 @@
-const TopBannerStyles = () => ({
+const TopBannerStyles = theme => ({
   root: {
     "&:hover": {
       "& .tb-toolbar": {
@@ -9,23 +9,29 @@ const TopBannerStyles = () => ({
   toolbar: {
     position: "absolute",
     width: "auto",
-    bottom: "8px",
-    left: 0,
+    bottom: "23px",
     right: 0,
     margin: "auto",
     display: "none",
     "& button": {
-      background: "#FFF",
-      border: "1px solid #ccc",
-      borderRadius: "6px",
-      color: "#373232",
+      background: theme?.palette?.editor?.background,
+      border: `1px solid ${theme?.palette?.editor?.popUpBorderColor}`,
+      borderRadius: "50%",
+      color: "#000",
       marginRight: "8px",
-      padding: "4px 8px",
-      textTransform: "capitalize",
-      fontSize: "14px",
+      padding: "4px",
+      boxShadow: '0px 0px 32px rgba(255, 255, 255, 0.12)',
       "&:hover": {
-        background: "#ccc",
-        color: "#373232"
+        background: theme?.palette?.editor?.background,
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          fill: theme?.palette?.editor?.activeColor
+        }
+      },
+      "& svg": {
+        width: '20px',
+        height: '20px',
+        fill: theme?.palette?.editor?.menuOptionTextColor
       }
     }
   }

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -1,8 +1,10 @@
 import React, { useState } from "react";
-import { Box, Button } from "@mui/material";
+import { Box, IconButton } from "@mui/material";
 import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
 import ImageSelector from "../../common/ImageSelector/ImageSelector";
 import TopBannerStyles from "./Styles";
+import Icon from "../../common/Icon";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -39,12 +41,16 @@ export const TopBannerToolbar = props => {
       component: "div",
       className: "tb-toolbar",
       sx: classes.toolbar,
-      children: [/*#__PURE__*/_jsx(Button, {
+      children: [/*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("change"),
-        children: "Change Image"
-      }), /*#__PURE__*/_jsx(Button, {
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "editIcon"
+        })
+      }), /*#__PURE__*/_jsx(IconButton, {
         onClick: handleClick("remove"),
-        children: "Remove"
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "deleteIcon"
+        })
       })]
     }), /*#__PURE__*/_jsx(ImageSelector, {
       open: open,
@@ -67,7 +73,10 @@ const TopBanner = props => {
   const {
     url
   } = element;
-  const classes = TopBannerStyles();
+  const {
+    theme
+  } = useEditorContext();
+  const classes = TopBannerStyles(theme);
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     ...attributes,

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

@@ -25,17 +25,23 @@ const usePopupStyle = theme => ({
       borderRadius: "0px !important"
     },
     "& .inputField": {
-      height: '29px',
-      '& .MuiIconButton-root': {
-        padding: '5px'
+      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,
-        borderRadius: "8px"
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "8px",
+        height: "29px"
       },
       "& .MuiOutlinedInput-notchedOutline": {
         borderRadius: "8px",
-        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+        border: `1px solid transparent`
       },
       "& .MuiOutlinedInput-input": {
         padding: "3px 35px 4px 2px !important"
@@ -43,8 +49,8 @@ const usePopupStyle = theme => ({
       "& .MuiInputBase-adornedStart": {
         padding: "0px 0px 0px 9px"
       },
-      '& svg': {
-        '& path': {
+      "& svg": {
+        "& path": {
           stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
         }
       }

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
-import { Editor, Range } from "slate";
+import { Editor, Range, Transforms } from "slate";
 import { ReactEditor, useSlate } from "slate-react";
 import useDrag from "../../hooks/useDrag";
 import useWindowResize from "../../hooks/useWindowResize";
@@ -8,6 +8,7 @@ import MiniTextFormat from "./MiniTextFormat";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import usePopupStyles from "../PopupTool/PopupToolStyle";
 import useEditorScroll from "../../hooks/useEditorScroll";
+import { isCarouselSelected } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 const PopupTool = props => {
   const {
@@ -63,10 +64,15 @@ const PopupTool = props => {
       // for table cell selection
       // const isCellsSelected = table.isCellSelected(editor.selection);
       // if (!isCellsSelected) {
-      setOpen(true);
-      setPopupType("textFormat");
-      setIsTextSelected(true);
       // }
+      const isCarouselEdit = isCarouselSelected(editor);
+      if (isCarouselEdit) {
+        Transforms.deselect(editor);
+      } else {
+        setOpen(true);
+        setPopupType("textFormat");
+        setIsTextSelected(true);
+      }
     } else if (!anchorEl) {
       setOpen(false);
       setPopupType("");

package/dist/Editor/common/Icon.js

@@ -23,6 +23,8 @@ import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from '@mui/icons-material/Delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const iconList = {
@@ -270,7 +272,9 @@ const iconList = {
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
+  editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
+  deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {})
 };
 export const icons = {
   ...iconList

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/helper/deserialize/index.js

@@ -14,7 +14,10 @@ const handleTableCell = (el, children) => {
   });
   return {
     type: "table-cell",
-    overwriteChild: wrapChild
+    overwriteChild: wrapChild,
+    size: {
+      width: 120
+    }
   };
 };
 const ELEMENT_TAGS = {

package/dist/Editor/helper/index.js

@@ -1,4 +1,4 @@
-import { Editor, Transforms, Path } from "slate";
+import { Editor, Transforms, Path, Element } from "slate";
 import { ReactEditor } from "slate-react";
 import html2canvas from "html2canvas";
 import { rectIntersection, closestCenter } from "@dnd-kit/core";
@@ -322,4 +322,24 @@ export const getBorderColor = (borderColor = "") => {
     borderStyle.borderColor = borderColor;
   }
   return borderStyle;
+};
+export const isCarouselSelected = editor => {
+  try {
+    if (!editor.selection) {
+      return false;
+    }
+    const [nodeEntry] = Editor.nodes(editor, {
+      match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === 'carousel'
+    });
+    if (!nodeEntry) {
+      return false;
+    }
+    const [node] = nodeEntry;
+    const carouselDom = ReactEditor.toDOMNode(editor, node);
+    const isEdit = carouselDom.classList.contains('carousel_slider_edit');
+    return !isEdit;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
 };

package/dist/Editor/hooks/useTable.js

@@ -2,11 +2,12 @@ import { ClickAwayListener } from "@mui/material";
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { clearCellText } from "../utils/table";
 import { Editor, Element, Transforms, Range } from "slate";
-import { DndContext, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { encodeToBase64 } from "../utils/helper";
 import { serializeToText } from "../utils/serializeToText";
 import { createCopiedTableStructure, getRectangleBounds, tableNodeToDom } from "../Elements/Table/tableHelper";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const handleDragEnd = (dragData, editor, resetAll) => {
   const {
     active,
@@ -157,15 +158,15 @@ export const TableProvider = ({
   }, [openSetttings]);
   return /*#__PURE__*/_jsx(TableContext.Provider, {
     value: values,
-    children: /*#__PURE__*/_jsx(DndContext, {
+    children: /*#__PURE__*/_jsxs(DndContext, {
       sensors: sensors,
       onDragEnd: data => handleDragEnd(data, editor, resetAll),
-      children: /*#__PURE__*/_jsx(ClickAwayListener, {
+      children: [/*#__PURE__*/_jsx(ClickAwayListener, {
         onClickAway: () => setTableSelection(getDefaultTableSelection()),
         children: /*#__PURE__*/_jsx("div", {
           children: children
         })
-      })
+      }), /*#__PURE__*/_jsx(DragOverlay, {})]
     })
   });
 };

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

@@ -246,7 +246,7 @@ export class TableUtil {
         const isDuplicate = action === "duplicate";
         const isInsertNext = action === "after" || isDuplicate;
         const path = isInsertNext ? Path.next(currentRow) : currentRow;
-        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRow(Array(table.columns).fill(""));
+        const insertData = isDuplicate ? JSON.parse(JSON.stringify(currentRowData)) : createRowOnInsertAbove(currentRowData, currentRow, this.editor);
         Transforms.insertNodes(this.editor, insertData, {
           at: path
         });
@@ -492,16 +492,12 @@ export class TableUtil {
       console.log(err);
     }
   };
-  resizeTableCell = (styleProps, rowNode) => {
+  resizeTableCell = (styleProps, path) => {
     const cellProps = parseByPrefixKey(styleProps, "col.");
-    const [rowData, rowPath] = rowNode;
-    rowData?.children.forEach((_, i) => {
-      const cellPath = [...rowPath, i];
-      Transforms.setNodes(this.editor, {
-        ...cellProps
-      }, {
-        at: cellPath
-      });
+    Transforms.setNodes(this.editor, {
+      ...cellProps
+    }, {
+      at: path
     });
   };
   getTableProps = () => {
@@ -626,14 +622,14 @@ export class TableUtil {
     }
   };
 }
-const createRow = cellText => {
-  const newRow = Array.from(cellText, value => createTableCell(value));
+const createRow = (cellText, other) => {
+  const newRow = Array.from(cellText, value => createTableCell(value, other));
   return {
     type: "table-row",
     children: newRow
   };
 };
-export const createTableCell = text => {
+export const createTableCell = (text, other = {}) => {
   return {
     type: "table-cell",
     children: [{
@@ -644,7 +640,32 @@ export const createTableCell = text => {
     }],
     size: {
       width: 120
+    },
+    ...other
+  };
+};
+const createRowOnInsertAbove = (currentRow, currRowPath, editor) => {
+  const isFirstRow = currRowPath[currRowPath?.length - 1] === 0;
+  const rowChild = currentRow?.children?.map((cell, i) => {
+    let other = {};
+
+    // remove the current row's size and add it on the currently inserting cell
+    if (isFirstRow) {
+      const cellPath = [...currRowPath, i];
+      Transforms.setNodes(editor, {
+        size: null
+      }, {
+        at: cellPath
+      });
+      other = {
+        size: cell?.size
+      };
     }
+    return createTableCell("", other);
+  });
+  return {
+    type: "table-row",
+    children: rowChild
   };
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "5.0.0",
+  "version": "5.0.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -68,7 +68,9 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "NODE_OPTIONS='--max_old_space_size=4096' storybook build",
     "publish:npm": "rm -rf dist && mkdir dist &&  babel src/components -d dist --copy-files",
-    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files"
+    "publish:local": "rm -rf /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac03/flozy/client/node_modules/@flozy/editor/dist --copy-files",
+    "publish:local2": "rm -rf /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist && babel src/components -d /Users/agmac23/Desktop/surya/sweetpsocial-2.0/client/node_modules/@flozy/editor/dist --copy-files",
+    "publish:local3": "rm -rf /Users/agmac23/Desktop/surya/flozy_v2.0/microservices/pages/public && cp -r /Users/agmac23/Desktop/surya/editor/build /Users/agmac23/Desktop/surya/flozy_v2.0/microservices/pages/public"
   },
   "eslintConfig": {
     "extends": [