@flozy/editor 4.8.5 → 4.8.7

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

@@ -15,6 +15,8 @@ import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue, groupByBreakpoint } from "../../helper/theme";
 import useWindowResize from "../../hooks/useWindowResize";
+import GridStyles from "./Styles";
+import { GridProvider } from "./Providers/GridProvider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -92,6 +94,7 @@ const getParentEl = (editor, path) => {
 };
 const Grid = props => {
   const theme = useTheme();
+  const classes = GridStyles(theme);
   const {
     attributes,
     children,
@@ -105,6 +108,7 @@ const Grid = props => {
   const {
     id,
     grid,
+    equalItems,
     bannerSpacing,
     bgColor,
     alignment,
@@ -305,82 +309,85 @@ const Grid = props => {
       ...getBreakPointsValue(flexWrap || "wrap")
     }
   }, theme);
-  return /*#__PURE__*/_jsxs(GridContainer, {
-    container: true,
-    className: `grid-container ${grid} has-hover element-root dpath`,
-    ...attributes,
-    ...sectionId,
-    sx: {
-      display: {
-        lg: "flex",
-        xs: xsHidden ? "none" : "flex"
-      },
-      background: bgColor,
-      alignContent: vertical,
-      ...bgImage,
-      borderColor: borderColor || "transparent",
-      borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
-      borderStyle: borderStyle || "solid",
-      height: "auto"
-    },
-    "data-path": path.join(","),
-    children: [fgColor && /*#__PURE__*/_jsx("div", {
-      style: {
-        position: "absolute",
-        pointerEvents: "none",
-        width: "100%",
-        height: "100%",
-        background: fgColor,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover"
-      }
-    }), !readOnly && /*#__PURE__*/_jsxs("div", {
-      className: `element-selector ${selected ? "selected" : ""}`,
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tr",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots bl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots br",
-        children: " "
-      }), /*#__PURE__*/_jsx(GridToolBar, {
-        selected: selected,
-        showTool: showTool,
-        onSettings: onSettings,
-        onAddGridItem: onAddGridItem,
-        onAddSection: onAddSection,
-        onMoveSection: onMoveSection,
-        path: path,
-        isSectionFullWidth: isSectionFullWidth
-      })]
-    }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      onDelete: onDelete,
-      customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(GridContainer, {
+  return /*#__PURE__*/_jsx(GridProvider, {
+    children: /*#__PURE__*/_jsxs(GridContainer, {
       container: true,
-      className: "grid-c-wrpr",
+      className: `grid-container ${grid} has-hover element-root dpath ${equalItems ? "equal-cols" : ""}`,
+      ...attributes,
+      ...sectionId,
       sx: {
-        display: "flex",
-        ...gridcwrprProps,
-        alignItems: vertical || "start",
-        justifyContent: horizantal || "start",
-        flexDirection: flexDirection || "row",
-        width: "100%",
-        height: "auto"
+        display: {
+          lg: "flex",
+          xs: xsHidden ? "none" : "flex"
+        },
+        background: bgColor,
+        alignContent: vertical,
+        ...bgImage,
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
+        borderStyle: borderStyle || "solid",
+        height: "auto",
+        ...classes?.gridEqual
       },
       "data-path": path.join(","),
-      children: children
-    }), /*#__PURE__*/_jsx(NewLineButtons, {})]
+      children: [fgColor && /*#__PURE__*/_jsx("div", {
+        style: {
+          position: "absolute",
+          pointerEvents: "none",
+          width: "100%",
+          height: "100%",
+          background: fgColor,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover"
+        }
+      }), !readOnly && /*#__PURE__*/_jsxs("div", {
+        className: `element-selector grid-s ${selected ? "selected" : ""}`,
+        contentEditable: false,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tr",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots bl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots br",
+          children: " "
+        }), /*#__PURE__*/_jsx(GridToolBar, {
+          selected: selected,
+          showTool: showTool,
+          onSettings: onSettings,
+          onAddGridItem: onAddGridItem,
+          onAddSection: onAddSection,
+          onMoveSection: onMoveSection,
+          path: path,
+          isSectionFullWidth: isSectionFullWidth
+        })]
+      }), openSetttings ? /*#__PURE__*/_jsx(PoupComp, {
+        element: element,
+        onSave: onSave,
+        onClose: onClose,
+        onDelete: onDelete,
+        customProps: customProps
+      }) : null, /*#__PURE__*/_jsx(GridContainer, {
+        container: true,
+        className: "grid-c-wrpr",
+        sx: {
+          display: "flex",
+          ...gridcwrprProps,
+          alignItems: vertical || "start",
+          justifyContent: horizantal || "start",
+          flexDirection: flexDirection || "row",
+          width: "100%",
+          height: "auto"
+        },
+        "data-path": path.join(","),
+        children: children
+      }), /*#__PURE__*/_jsx(NewLineButtons, {})]
+    })
   });
 };
 export default Grid;

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

@@ -1,10 +1,7 @@
 import React, { useState } from "react";
-import { Button, Dialog, DialogContent, DialogTitle, Grid,
-// ImageListItemBar,
-Tooltip, Box } from "@mui/material";
+import { Button, Dialog, DialogContent, DialogTitle, Grid, Tooltip, Box } from "@mui/material";
 import { insertGrid, insertPlainGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
-// import { ImageList, ImageListItem } from "@mui/material";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import GridStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,28 +11,12 @@ const GridButton = props => {
   const classes = GridStyles();
   const {
     editor,
-    customProps,
     icoBtnType
   } = props;
-  const {
-    services
-  } = customProps;
   const [open, setOpen] = useState(false);
-  const [templates, setTemplates] = useState({
-    loading: false,
-    list: []
-  });
   const onButtonClick = async () => {
-    setTemplates({
-      ...templates,
-      loading: true
-    });
-    setOpen(true);
-    const result = await services("listTemplates", {});
-    setTemplates({
-      ...templates,
-      list: result?.data || []
-    });
+    insertGrid(editor, insertPlainGrid(2));
+    handleClose();
   };
   const handleInsertGrid = item => () => {
     try {
@@ -63,7 +44,7 @@ const GridButton = props => {
 
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
-      title: "Grid",
+      title: "Column",
       onClick: onButtonClick,
       icon: /*#__PURE__*/_jsx(GridIcon, {}),
       icoBtnType: icoBtnType

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

@@ -1,42 +1,92 @@
 /* eslint-disable no-unused-vars */
-import React, { useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useTheme } from "@mui/material";
-import { Transforms } from "slate";
+import { Node, Path, Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
 import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
-import { groupByBreakpoint, getBreakPointsValue, getBRValue, getTRBLBreakPoints } from "../../helper/theme";
+import { groupByBreakpoint, getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+import AddIcon from "@mui/icons-material/Add";
 import { isEmptyNode } from "../../utils/helper";
-import { wrapThemeBreakpoints } from "../FreeGrid/breakpointConstants";
+import { onAddGridItem } from "../../utils/gridItem";
+import useTableResize from "../../utils/customHooks/useTableResize";
+import GridStyles from "./Styles";
+import { useGrid } from "./Providers/GridProvider";
 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 GridItemToolbar = ({
-  selected,
-  showTool,
-  onSettings
+const Resizer = ({
+  classes,
+  onMouseDown,
+  className
 }) => {
-  return selected && !showTool ? /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
+      className: `col-width-resizer ${className}`,
+      contentEditable: false,
+      onPointerDown: onMouseDown,
+      sx: classes.gridEqual,
+      style: {
+        height: `100%`
+      }
+    })
+  });
+};
+const GridItemToolbar = props => {
+  const {
+    selected,
+    showTool,
+    onSettings,
+    onAddColumn
+  } = props;
+  return selected && !showTool ? /*#__PURE__*/_jsxs("div", {
     contentEditable: false,
     className: "grid-item-toolbar",
     style: {
-      top: "-14px",
-      left: "-14px"
+      top: "-34px",
+      left: "-4px",
+      display: "flex",
+      flexDirection: "row"
     },
-    children: /*#__PURE__*/_jsx(Tooltip, {
-      title: "Grid Item Settings",
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Column Settings",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
+        sx: {
+          marginRight: "4px"
+        },
         size: "small",
         onClick: onSettings,
         children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
       })
-    })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Add Column",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        sx: {
+          marginRight: "4px"
+        },
+        size: "small",
+        onClick: onAddColumn,
+        children: /*#__PURE__*/_jsx(AddIcon, {})
+      })
+    })]
   }) : null;
 };
 const GridItem = props => {
+  const {
+    columnWidths,
+    widths,
+    initColumnWidth,
+    updateColumnWidth,
+    updateColNodes
+  } = useGrid();
+  const columnRef = useRef(null);
   const theme = useTheme();
+  const classes = GridStyles(theme);
   const {
     attributes,
     children,
@@ -63,7 +113,8 @@ const GridItem = props => {
     animation,
     cellGHeight,
     xsHidden,
-    forceFullWidth
+    forceFullWidth,
+    minWidth
   } = element;
   const {
     vertical,
@@ -77,7 +128,65 @@ const GridItem = props => {
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
+  const [parentDOM, setParentDOM] = useState({});
+  const [size, onMouseDown, resizing, onLoad, isDone] = useTableResize({
+    ...parentDOM
+  });
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
+  const cmWidth = resizing && size?.width && parentDOM?.gridWidth && widths?.left ? `${widths?.left}%` : minWidth ? `${minWidth}%` : "auto";
+  // for right column width update
+  const isRightCol = path?.join() === columnWidths?.rightPath && !resizing && widths?.right;
+  const minWidthInPercent = isRightCol ? `${widths?.right}%` : cmWidth;
+  useEffect(() => {
+    try {
+      if (columnRef?.current && !parentDOM?.parentDOM) {
+        initDoms();
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  }, [columnRef?.current]);
+  useEffect(() => {
+    if (isDone || isRightCol) {
+      initDoms();
+    }
+  }, [minWidth, isDone]);
+  useEffect(() => {
+    if (!resizing && isDone) {
+      updateColNodes(path);
+    } else if (resizing) {
+      // set init width
+      initColumnWidth(path, size?.width / parentDOM?.gridWidth * 100);
+    }
+  }, [resizing]);
+  useEffect(() => {
+    if (resizing) {
+      updateColumnWidth({
+        left: size?.width / parentDOM?.gridWidth * 100
+      });
+    }
+  }, [resizing, size]);
+  const initDoms = () => {
+    try {
+      const gridNode = Node.get(editor, Path.parent(path));
+      if (gridNode) {
+        const gridDOM = ReactEditor.toDOMNode(editor, gridNode);
+        setParentDOM({
+          gridWidth: gridDOM?.offsetWidth,
+          parentDOM: columnRef?.current,
+          size: {
+            width: columnRef?.current?.offsetWidth
+          }
+        });
+        onLoad({
+          width: columnRef?.current?.offsetWidth,
+          height: 100
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
   const onSettings = () => {
     setOpenSettings(true);
   };
@@ -103,6 +212,19 @@ const GridItem = props => {
       });
     }
   };
+  const onAddColumn = () => {
+    try {
+      const gridPath = Path.parent(path);
+      const gridNode = Node.get(editor, gridPath);
+      onAddGridItem({
+        editor,
+        element: gridNode,
+        children: gridNode?.children || []
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
   const getBorderColor = () => {
     return borderColor || "transparent";
   };
@@ -138,6 +260,10 @@ const GridItem = props => {
     component: "div",
     className: `grid-item element-root gi-top-wrpr dpath`,
     ...attributes,
+    style: {
+      textAlign: element.alignment || "left",
+      "--minWidth": minWidthInPercent
+    },
     sx: {
       ...getBRProps,
       display: "flex",
@@ -153,9 +279,6 @@ const GridItem = props => {
       }
     },
     "data-path": path.join(","),
-    style: {
-      textAlign: element.alignment || "left"
-    },
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
@@ -177,9 +300,11 @@ const GridItem = props => {
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
         selected: selected,
         showTool: showTool,
-        onSettings: onSettings
+        onSettings: onSettings,
+        onAddColumn: onAddColumn
       })]
     }), /*#__PURE__*/_jsx(Box, {
+      ref: columnRef,
       className: `gi-inner-cw ${animation || ""} content-editable ${isEmpty} np`,
       component: "div",
       "data-path": path.join(","),
@@ -194,7 +319,7 @@ const GridItem = props => {
           borderColor: borderColorHover || borderColor || "transparent"
         }
       },
-      placeholder: "Grid Item",
+      placeholder: "Column",
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,
@@ -202,7 +327,12 @@ const GridItem = props => {
       onClose: onClose,
       onDelete: onDelete,
       customProps: customProps
-    }) : null]
+    }) : null, /*#__PURE__*/_jsx(Resizer, {
+      classes: classes,
+      className: resizing ? "resizing" : "",
+      onMouseDown: onMouseDown,
+      height: "auto"
+    })]
   });
 };
 export default GridItem;

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

@@ -0,0 +1,100 @@
+import React, { createContext, useContext, useState } from "react";
+import { Path, Node, Transforms } from "slate";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridContext = /*#__PURE__*/createContext();
+const getAdjacentColumnPath = (editor, currentPath, direction = "next") => {
+  const parentPath = Path.parent(currentPath); // Get the parent grid path
+  const gridNode = Node.get(editor, parentPath); // Get the grid node
+
+  const currentIndex = currentPath[currentPath.length - 1]; // Index of the current column
+  const isNext = direction === "next";
+  const adjacentIndex = isNext ? currentIndex + 1 : currentIndex - 1;
+
+  // Ensure the adjacent index is valid
+  if (adjacentIndex < 0 || adjacentIndex >= gridNode.children.length) {
+    return null; // No adjacent column exists in the given direction
+  }
+
+  return [...parentPath, adjacentIndex]; // Return the adjacent column's path
+};
+
+export const GridProvider = ({
+  children
+}) => {
+  const editor = useSlateStatic();
+  const [columnWidths, setColumnWidths] = useState({});
+  const [widths, setWidths] = useState({});
+  const initColumnWidth = (currentColPath = [], currentMinWidth = 0) => {
+    try {
+      let right = 0;
+      const rightColPath = getAdjacentColumnPath(editor, currentColPath);
+      if (rightColPath) {
+        const parentPath = Path.parent(rightColPath); // Get the parent grid path
+        const gridNode = Node.get(editor, parentPath);
+        const gridNodeDom = ReactEditor.toDOMNode(editor, gridNode);
+        const rightColNode = Node.get(editor, rightColPath);
+        const rightColDom = ReactEditor.toDOMNode(editor, rightColNode);
+        right = rightColNode?.minWidth || rightColDom?.offsetWidth / gridNodeDom?.offsetWidth * 100;
+      }
+      setColumnWidths({
+        left: currentMinWidth,
+        right,
+        rightPath: rightColPath?.join(),
+        rightIndex: rightColPath
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+
+  /**
+   *
+   * @param {*} data - contains {left: calculatedWidth}
+   */
+  const updateColumnWidth = data => {
+    // logic to update right column width
+    const right = columnWidths?.right - (data?.left - columnWidths?.left);
+    const diff = right !== widths?.right;
+    if (right && right > 10 && data?.left > 10 && diff) {
+      setWidths({
+        ...data,
+        right: right
+      });
+    }
+  };
+  const updateColNodes = (currentColPath = []) => {
+    try {
+      if (widths?.left) {
+        Transforms.setNodes(editor, {
+          minWidth: widths?.left
+        }, {
+          at: currentColPath
+        });
+        // update right column node
+        if (columnWidths?.rightPath) {
+          Transforms.setNodes(editor, {
+            minWidth: widths?.right
+          }, {
+            at: columnWidths?.rightIndex
+          });
+        }
+      }
+      setColumnWidths({});
+      setWidths({});
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsx(GridContext.Provider, {
+    value: {
+      widths,
+      updateColumnWidth,
+      initColumnWidth,
+      columnWidths,
+      updateColNodes
+    },
+    children: children
+  });
+};
+export const useGrid = () => useContext(GridContext);

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

@@ -1,4 +1,4 @@
-const GridStyles = () => ({
+const GridStyles = theme => ({
   gridButton: {
     background: "#007FFF",
     color: "#fff",
@@ -6,6 +6,61 @@ const GridStyles = () => ({
       background: "#0066CC",
       color: "#FFF"
     }
+  },
+  gridEqual: {
+    "&.equal-cols": {
+      display: "flex",
+      "& .element-selector.grid-s": {
+        display: "none !important"
+      },
+      "& .element-selector-ctrl": {
+        display: "none !important"
+      },
+      "& .grid-c-wrpr": {
+        gap: "16px",
+        flexWrap: "nowrap",
+        [theme?.breakpoints?.between("xs", "md")]: {
+          flexWrap: "wrap"
+        }
+      },
+      "& .grid-item": {
+        minWidth: "var(--minWidth)",
+        maxWidth: "var(--minWidth)",
+        "& .element-selector": {
+          border: "1px solid transparent",
+          "& .element-selector-dots": {
+            display: "none !important"
+          }
+        },
+        flex: "1 1 0",
+        [theme?.breakpoints?.between("xs", "md")]: {
+          flex: "1 1 100%",
+          padding: "0px !important",
+          minWidth: "100% !important",
+          maxWidth: "100% !important",
+          "& .col-width-resizer": {
+            display: "none !important"
+          }
+        }
+      },
+      "& .col-width-resizer": {
+        position: "absolute",
+        width: "4px",
+        height: "100%",
+        backgroundColor: "#CCC",
+        left: "calc(100% + 4px)",
+        top: "0px",
+        cursor: "col-resize",
+        opacity: 0,
+        borderRadius: "7px",
+        "&.resizing": {
+          opacity: 1
+        },
+        "&:hover": {
+          opacity: 1
+        }
+      }
+    }
   }
 });
 export default GridStyles;

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

@@ -1,114 +1,59 @@
 const default_grid = [{
   type: "grid",
   grid: "container",
+  equalItems: true,
   children: [{
     type: "grid-item",
     grid: 6,
     children: [{
-      type: "alignLeft",
+      type: "paragraph",
       children: [{
-        type: "paragraph",
-        children: [{
-          text: "Ship Sites with Style.",
-          fontSize: "huge",
-          fontFamily: "PoppinsBold"
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          fontSize: "16px",
-          fontFamily: "PoppinsRegular",
-          text: ""
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          fontSize: "16px",
-          fontFamily: "PoppinsRegular",
-          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          fontSize: "16px",
-          fontFamily: "PoppinsRegular",
-          text: ""
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          fontSize: "16px",
-          fontFamily: "PoppinsRegular",
-          text: ""
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          fontSize: "16px",
-          fontFamily: "PoppinsRegular",
-          text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."
-        }]
+        text: ""
       }]
     }],
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "16",
-      left: "16",
-      right: "16",
-      bottom: "16"
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0"
     },
     alignment: {
       horizantal: "center"
-    }
+    },
+    forceFullWidth: true,
+    borderWidth: "0px"
   }, {
     type: "grid-item",
     grid: 6,
     children: [{
-      type: "alignLeft",
+      type: "paragraph",
       children: [{
-        type: "paragraph",
-        children: [{
-          text: ""
-        }]
-      }, {
-        type: "paragraph",
-        children: [{
-          type: "image",
-          url: "https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png",
-          images: [],
-          children: [{
-            text: " "
-          }],
-          size: {
-            width: 570.1953125,
-            height: 450,
-            widthInPercent: 89.06583684178412
-          },
-          alignment: {
-            horizantal: "center"
-          }
-        }]
+        text: ""
       }]
     }],
     bgColor: "rgba(255, 255, 255, 0)",
     lockSpacing: true,
     bannerSpacing: {
-      top: "16",
-      left: "16",
-      right: "16",
-      bottom: "16"
-    }
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0"
+    },
+    forceFullWidth: true,
+    borderWidth: "0px"
   }],
   alignment: {
     flexDirection: "row"
   },
   lockSpacing: true,
   bannerSpacing: {
-    top: "16",
-    left: "16",
-    right: "16",
-    bottom: "16"
-  }
+    top: "0",
+    left: "0",
+    right: "0",
+    bottom: "0"
+  },
+  borderWidth: "0px"
 }];
 export default JSON.stringify(default_grid);

package/dist/Editor/Styles/EditorStyles.js

@@ -293,7 +293,7 @@ const editorStyles = ({
   fullScreenWrapper: {
     "& .MuiPaper-root": {
       borderRadius: "0px !important",
-      paddingTop: '20px',
+      paddingTop: "20px",
       "& .MuiDialogTitle-root": {
         position: "absolute",
         top: 0,

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

@@ -50,7 +50,8 @@ const SectionStyle = (themeReact, theme) => ({
     },
     "& .ed-section-inner": {
       [themeReact.breakpoints.between("xs", "md")]: {
-        maxWidth: `320px !important`
+        maxWidth: `320px !important`,
+        minWidth: "90%"
       }
     },
     "&.is-temp": {

package/dist/Editor/common/Shorthands/elements.js

@@ -174,7 +174,7 @@ const ELEMENTS_LIST = [{
     insertDivider(editor);
   }
 }, {
-  name: "Grid",
+  name: "Column",
   group: "Elements",
   desc: "",
   type: "grid",

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

@@ -80,10 +80,10 @@ const gridItemStyle = [{
     key: "grid",
     type: "gridSize"
   }, {
-    label: "Force Full Width on Mobile",
+    label: "Full Width on Mobile",
     key: "forceFullWidth",
     type: "selectBox",
-    placeholder: "Force Full Width on Mobile"
+    placeholder: "Full Width on Mobile"
   }, {
     label: "Height",
     key: "cellGHeight",

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

@@ -119,6 +119,15 @@ const gridStyle = [{
       });
     }
   }]
+}, {
+  tab: "Grid Item Size",
+  value: "equalItems",
+  fields: [{
+    label: "Equal Column Size",
+    key: "equalItems",
+    type: "selectBox",
+    placeholder: "Hide on Mobile"
+  }]
 }, {
   tab: "Save As Template",
   value: "saveAsTemplate",

package/dist/Editor/hooks/useMentions.js

@@ -82,7 +82,6 @@ const getStartEnd = ({
   }
 };
 export const checkTypings = editor => {
-  console.log(editor?.selection);
   if (editor?.selection) {
     const {
       target,

package/dist/Editor/utils/customHooks/useTableResize.js

@@ -1,7 +1,8 @@
 import { useState } from "react";
 const useTableResize = ({
   parentDOM,
-  size: defaultSize
+  size: defaultSize,
+  onDone
 }) => {
   const {
     width
@@ -15,6 +16,7 @@ const useTableResize = ({
     width
   });
   const [resizing, setResizing] = useState(false);
+  const [isDone, setIsDone] = useState(0);
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
@@ -22,15 +24,18 @@ const useTableResize = ({
       ...defaultSize
     });
   };
-  const onMouseDown = () => {
+  const onMouseDown = e => {
+    e.preventDefault();
     document.addEventListener("pointermove", onMouseMove);
     document.addEventListener("pointerup", onMouseUp);
     setResizing(true);
+    setIsDone(0);
   };
   const onMouseUp = () => {
     document.removeEventListener("pointermove", onMouseMove);
     document.removeEventListener("pointerup", onMouseUp);
     setResizing(false);
+    setIsDone(1);
   };
   const onMouseMove = e => {
     setSize(currentSize => {
@@ -42,6 +47,6 @@ const useTableResize = ({
       };
     });
   };
-  return [size, onMouseDown, resizing, onLoad];
+  return [size, onMouseDown, resizing, onLoad, isDone];
 };
 export default useTableResize;

package/dist/Editor/utils/grid.js

@@ -1,3 +1,4 @@
+import { Node, Path, Transforms } from "slate";
 import default_grid from "../Elements/Grid/templates/default_grid";
 import { gridItem } from "./gridItem";
 import { customInsertNode } from "./helper";
@@ -8,11 +9,13 @@ export const insertPlainGrid = count => {
     cellGHeight: "100%",
     lockSpacing: true,
     bannerSpacing: {
-      top: "16",
-      left: "16",
-      right: "16",
-      bottom: "16"
-    }
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0"
+    },
+    forceFullWidth: true,
+    borderWidth: "0px"
   }));
   return {
     type: "grid",
@@ -23,12 +26,14 @@ export const insertPlainGrid = count => {
     },
     lockSpacing: true,
     bannerSpacing: {
-      top: "16",
-      left: "16",
-      right: "16",
-      bottom: "16"
+      top: "0",
+      left: "0",
+      right: "0",
+      bottom: "0"
     },
-    gridSize: 8
+    equalItems: true,
+    gridSize: 8,
+    borderWidth: "0px"
   };
 };
 export const insertGrid = (editor, item, path) => {
@@ -41,6 +46,18 @@ export const insertGrid = (editor, item, path) => {
       at: path || selection.focus.path,
       select: true
     });
+    // insert new line after grid / column
+    const currentNode = Node.get(editor, selection.focus.path);
+    if (currentNode?.type === "grid") {
+      Transforms.insertNodes(editor, {
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }, {
+        at: Path.next(Path.parent(selection.focus.path))
+      });
+    }
   } catch (err) {
     console.log(err);
   }

package/dist/Editor/utils/gridItem.js

@@ -1,4 +1,5 @@
-import { Transforms } from "slate";
+import { Transforms, Path } from "slate";
+import { ReactEditor } from "slate-react";
 export const gridItem = (props = {}) => {
   return {
     type: "grid-item",
@@ -19,6 +20,44 @@ export const gridItem = (props = {}) => {
     ...(props || {})
   };
 };
+export const onAddGridItem = ({
+  editor,
+  element,
+  children
+}) => {
+  const currentPath = editor.selection?.anchor?.path;
+  const ancestorsPath = Path.ancestors(currentPath, {
+    reverse: true
+  });
+  const insertPath = ancestorsPath[1];
+  if (insertPath) {
+    insertPath[insertPath.length - 1] = element.children.length;
+    const lp = ReactEditor.findPath(editor, element);
+    const lastElement = {
+      ...element.children[element.children.length - 1]
+    };
+    Transforms.insertNodes(editor, gridItem({
+      ...lastElement,
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: ""
+        }]
+      }]
+    }), {
+      at: [...lp, children.length]
+    });
+    // new line
+    Transforms.insertNodes(editor, [{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }], {
+      at: [editor.children.length]
+    });
+  }
+};
 export const insertGridItem = editor => {
   Transforms.insertNodes(editor, {
     ...gridItem()

package/package.json

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