@flozy/editor 1.6.0 → 1.6.2

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
@@ -7,6 +7,7 @@ import EmbedPopup from "./EmbedPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
 import QuiltedImageList from "../../common/ImageList";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -47,7 +48,7 @@ const Image = ({
     horizantal
   } = alignment || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
   const [size, onMouseDown, resizing, onLoad] = useResize({
@@ -57,8 +58,12 @@ const Image = ({
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
   const path = ReactEditor.findPath(editor, element);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   useEffect(() => {
-    if (editor && ele[1] !== undefined) {
+    if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
       onLoad(element?.size || {});
@@ -129,6 +134,7 @@ const Image = ({
     }) : null;
   };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
+  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover",
@@ -146,6 +152,7 @@ const Image = ({
       border: `1px solid ${borderColor}`
     },
     ...element.attr,
+    "data-path": path.join(","),
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,
@@ -157,11 +164,11 @@ const Image = ({
       contentEditable: false,
       style: {
         position: "relative",
-        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
+        width: `${width}`,
         height: `${size.height}px`
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
-        itemData: images,
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images?.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
+        itemData: images || [],
         readOnly: true,
         rowHeight: rowHeight,
         cols: cols
@@ -171,7 +178,8 @@ const Image = ({
         },
         alt: alt,
         src: url,
-        onClick: handleImageClick
+        onClick: handleImageClick,
+        "data-path": path.join(",")
       }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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

@@ -19,7 +19,8 @@ const Video = ({
   const {
     url,
     alt,
-    alignment
+    alignment,
+    bannerSpacing
   } = element;
   const editor = useSlateStatic();
   const selected = useSelected();
@@ -33,6 +34,10 @@ const Video = ({
     vertical,
     horizantal
   } = alignment || {};
+  const {
+    left,
+    right
+  } = bannerSpacing || {};
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
     size: element?.size
@@ -98,13 +103,14 @@ const Video = ({
       at: path
     });
   };
+  const totalMinus = parseInt(left || 0) + parseInt(right || 0);
+  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover",
     style: {
       display: "flex",
-      width: "100%",
-      maxWidth: "100%",
+      width: `calc(100% - ${totalMinus}px)`,
       boxShadow: selected && focused && "0 0 3px 3px lightgray",
       justifyContent: horizantal,
       alignContent: vertical
@@ -121,7 +127,7 @@ const Video = ({
       contentEditable: false,
       style: {
         position: "relative",
-        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
+        width: `${width}`,
         height: `${size.height}px`
       },
       children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
@@ -145,7 +151,8 @@ const Video = ({
           border: "none",
           position: "absolute",
           width: "100%",
-          height: "100%"
+          height: "100%",
+          left: "0px"
         },
         src: url,
         title: alt

package/dist/Editor/Elements/Emoji/EmojiButton.js

@@ -0,0 +1,73 @@
+import React, { useState, forwardRef, useImperativeHandle } from "react";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { Paper, Popover } from "@mui/material";
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { insertEmoji } from "../../utils/emoji";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
+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 EmojiButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    icoBtnType,
+    selectionTarget
+  } = props;
+  const editor = useSlateStatic();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [target, setTarget] = useState(selectionTarget);
+  const open = Boolean(anchorEl);
+  useImperativeHandle(ref, () => ({
+    triggerClick: target => {
+      setTarget(target);
+      onClick();
+    }
+  }));
+  const onClick = () => {
+    if (editor.selection) {
+      const domRange = ReactEditor.toDOMRange(editor, editor.selection);
+      const rect = domRange.getBoundingClientRect();
+      setAnchorEl({
+        getBoundingClientRect: () => rect,
+        nodeType: 1
+      });
+    }
+  };
+  const onEmojiSelect = emoji => {
+    insertEmoji(editor, emoji?.native, target || editor.selection);
+    setAnchorEl(null);
+  };
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Emoji",
+      onClick: onClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "emoji"
+      }),
+      icoBtnType: icoBtnType
+    }), /*#__PURE__*/_jsx(Popover, {
+      style: {
+        zIndex: 10001
+      },
+      open: open,
+      anchorEl: anchorEl,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "left"
+      },
+      onClose: handleClose,
+      children: /*#__PURE__*/_jsx(Paper, {
+        children: /*#__PURE__*/_jsx(Picker, {
+          data: data,
+          onEmojiSelect: onEmojiSelect
+        })
+      })
+    })]
+  });
+});
+EmojiButton.displayName = "EmojiButton";
+export default EmojiButton;

package/dist/Editor/Elements/Form/Form.js

@@ -3,9 +3,8 @@ import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
-import SettingsIcon from "@mui/icons-material/Settings";
-import AddIcon from "@mui/icons-material/Add";
 import BackupIcon from "@mui/icons-material/Backup";
+import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
 import { formField } from "../../utils/formfield";
@@ -61,6 +60,7 @@ const Form = props => {
   const [editButton, setEditButton] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const [loading, setLoading] = useState(false);
+  const [showOptions, setShowOptions] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const btnBorderStyle = buttonProps?.borderColor?.indexOf("linear") >= 0 ? {
     borderImageSource: buttonProps?.borderColor,
@@ -170,33 +170,42 @@ const Form = props => {
       setAnchorEl(e.currentTarget);
     }
   };
+  const onMouseOver = () => {
+    setShowOptions(true);
+  };
+  const onMouseLeave = () => {
+    setShowOptions(false);
+  };
   const FormToolbar = () => {
     return /*#__PURE__*/_jsxs("div", {
-      className: "",
+      className: "element-toolbar hr",
       contentEditable: false,
       style: {
-        backgroundColor: "#ccc",
-        width: "fit-content"
+        top: "-42px",
+        left: "0px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Form Settings",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+          className: "mr",
+          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Add Form Field",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onAddFormField,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
+          className: "mr",
+          children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), /*#__PURE__*/_jsx(Tooltip, {
         title: "Delete Form",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onDelete,
+          className: "mr",
           children: /*#__PURE__*/_jsx(DeleteIcon, {})
         })
       })]
@@ -206,10 +215,12 @@ const Form = props => {
     ...attributes,
     className: "form-wrapper element-root",
     style: {
-      border: !readOnly ? "1px dotted red" : "none",
+      border: !readOnly ? "none" : "none",
       padding: "10px"
     },
-    children: [!readOnly && /*#__PURE__*/_jsx(FormToolbar, {}), /*#__PURE__*/_jsxs("form", {
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    children: [/*#__PURE__*/_jsxs("form", {
       id: `${formName}`,
       onSubmit: handleSubmit,
       style: {
@@ -222,7 +233,8 @@ const Form = props => {
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`
+        paddingBottom: `${bottom}px`,
+        position: "relative"
       },
       ref: formEle,
       children: [/*#__PURE__*/_jsx(Grid, {
@@ -277,7 +289,7 @@ const Form = props => {
             })
           })]
         })
-      }), loading && /*#__PURE__*/_jsx("div", {
+      }), !readOnly && showOptions && /*#__PURE__*/_jsx(FormToolbar, {}), loading && /*#__PURE__*/_jsx("div", {
         style: {
           position: "absolute",
           top: 0,
@@ -313,7 +325,7 @@ const Form = props => {
           title: "Button Settings",
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
-            children: /*#__PURE__*/_jsx(SettingsIcon, {})
+            children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
           })
         })
       }), /*#__PURE__*/_jsx(MenuItem, {

package/dist/Editor/Elements/Form/FormButton.js

@@ -1,21 +1,23 @@
 import React from "react";
 import { useSlateStatic } from "slate-react";
-import { IconButton, Tooltip } from "@mui/material";
-import { FormIcon } from "../../common/iconslist";
 import { insertForm } from "../../utils/form";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const FormButton = props => {
+const FormButton = ({
+  icoBtnType
+}) => {
   const editor = useSlateStatic();
   const onClick = () => {
     insertForm(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Form",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: onClick,
-      children: /*#__PURE__*/_jsx(FormIcon, {})
-    })
+    onClick: onClick,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "form"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default FormButton;

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -13,6 +13,7 @@ const FormText = props => {
     borderColor,
     textColor,
     bgColor,
+    lockSpacing,
     ...rest
   } = fieldProps;
   const {

package/dist/Editor/Elements/Form/FormField.js

@@ -12,6 +12,7 @@ const FormField = props => {
   const {
     attributes,
     element,
+    children: rootChildren,
     customProps
   } = props;
   const {
@@ -94,7 +95,12 @@ const FormField = props => {
       element: element,
       onSave: onSave,
       onClose: onClose
-    }) : null]
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: rootChildren
+    })]
   });
 };
 export default FormField;

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

@@ -4,7 +4,7 @@ import { Transforms, Path, Node } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Grid as GridContainer } from "@mui/material";
 import { insertGrid } from "../../utils/grid";
 // import useDragAndDrop from "../../common/useDragAndDrop";
 import useResize from "../../utils/customHooks/useResize";
@@ -12,6 +12,7 @@ import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../com
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -59,7 +60,7 @@ const Grid = props => {
   } = borderRadius || {};
   // const { height: elHeight } = elSize || {};
   const editor = useSlateStatic();
-  const selected = useSelected();
+  // const selected = useSelected();
   // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
   const [parentDOM, setParentDOM] = useState(null);
@@ -71,6 +72,10 @@ const Grid = props => {
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
@@ -314,7 +319,8 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs(GridContainer, {
+    container: true,
     className: `grid-container ${grid} has-hover element-root`,
     ...attributes,
     ...sectionId,
@@ -327,6 +333,7 @@ const Grid = props => {
       borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
       borderStyle: borderStyle || "solid"
     },
+    "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {
       style: {
         position: "absolute",
@@ -359,7 +366,9 @@ const Grid = props => {
       onClose: onClose,
       onDelete: onDelete,
       customProps: customProps
-    }) : null, /*#__PURE__*/_jsx("div", {
+    }) : null, /*#__PURE__*/_jsx(GridContainer, {
+      item: true,
+      xs: 12,
       className: "grid-c-wrpr",
       style: {
         display: "flex",
@@ -378,6 +387,8 @@ const Grid = props => {
         //   ? `${elHeight}px`
         //   : "fit-content",
       },
+
+      "data-path": path.join(","),
       children: children
     }), /*#__PURE__*/_jsx(NewLineButtons, {})]
   });

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

@@ -1,15 +1,21 @@
 import React, { useState } from "react";
-import { Button, Dialog, DialogContent, DialogTitle, Grid, IconButton, ImageListItemBar, Tooltip } from "@mui/material";
-import { insertGrid } from "../../utils/grid";
+import { Button, Dialog, DialogContent, DialogTitle, Grid,
+// ImageListItemBar,
+Tooltip, Box } from "@mui/material";
+import { insertGrid, insertPlainGrid } from "../../utils/grid";
 import { GridIcon } from "../../common/iconslist";
-import { ImageList, ImageListItem } from "@mui/material";
+// import { ImageList, ImageListItem } from "@mui/material";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import GridStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 const GridButton = props => {
+  const classes = GridStyles();
   const {
     editor,
-    customProps
+    customProps,
+    icoBtnType
   } = props;
   const {
     services
@@ -48,17 +54,19 @@ const GridButton = props => {
   const handleClose = () => {
     setOpen(false);
   };
-  const {
-    list
-  } = templates;
+  const handleGridClick = count => () => {
+    insertGrid(editor, insertPlainGrid(count));
+    handleClose();
+  };
+
+  // const { list } = templates;
+
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Grid",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: onButtonClick,
-        children: /*#__PURE__*/_jsx(GridIcon, {})
-      })
+      onClick: onButtonClick,
+      icon: /*#__PURE__*/_jsx(GridIcon, {}),
+      icoBtnType: icoBtnType
     }), /*#__PURE__*/_jsxs(Dialog, {
       open: open,
       onClose: handleClose,
@@ -69,7 +77,7 @@ const GridButton = props => {
           children: [/*#__PURE__*/_jsx(Grid, {
             item: true,
             xs: 6,
-            children: "Templates"
+            children: "Grid"
           }), /*#__PURE__*/_jsx(Grid, {
             item: true,
             xs: 6,
@@ -81,21 +89,36 @@ const GridButton = props => {
           })]
         })
       }), /*#__PURE__*/_jsx(DialogContent, {
-        children: /*#__PURE__*/_jsx(ImageList, {
-          variant: "quilted",
-          cols: 1,
-          children: list.map(item => {
-            return /*#__PURE__*/_jsxs(ImageListItem, {
-              onClick: handleInsertGrid(item),
-              children: [/*#__PURE__*/_jsx("img", {
-                src: item.thumbnail,
-                alt: item.title,
-                width: "auto",
-                height: "250px"
-              }), /*#__PURE__*/_jsx(ImageListItemBar, {
-                title: item.title
-              })]
-            }, item.thumbnail);
+        children: /*#__PURE__*/_jsx(Grid, {
+          container: true,
+          spacing: 2,
+          style: {
+            display: "flex"
+          },
+          children: Array.from(Array(12).keys()).map(m => {
+            m = m + 1;
+            return /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 2,
+              style: {
+                display: "flex"
+              },
+              children: /*#__PURE__*/_jsx(Box, {
+                component: "div",
+                style: {
+                  display: "flex"
+                },
+                children: /*#__PURE__*/_jsx(Tooltip, {
+                  title: `Insert ${m} Column Grid`,
+                  arrow: true,
+                  children: /*#__PURE__*/_jsx(Button, {
+                    sx: classes.gridButton,
+                    onClick: handleGridClick(m),
+                    children: m
+                  })
+                })
+              })
+            }, `in_grid_co_${m}`);
           })
         })
       })]

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

@@ -3,8 +3,9 @@ import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import GridItemPopup from "./GridItemPopup";
-import { IconButton, Tooltip, Box } from "@mui/material";
+import { IconButton, Tooltip, Box, Grid as Item } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
+import { useEditorContext } from "../../hooks/useMouseMove";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -52,9 +53,13 @@ const GridItem = props => {
   } = borderRadius || {};
   const editor = useSlateStatic();
   // const selected = useSelected();
-  const [selected, setSelected] = useState(false);
+  // const [selected, setSelected] = useState(false);
   const itemWidth = (grid || 6) / 12 * 100;
   const path = ReactEditor.findPath(editor, element);
+  const {
+    hoverPath
+  } = useEditorContext();
+  const selected = hoverPath === path.join(",");
   const GridItemToolbar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
@@ -98,18 +103,21 @@ const GridItem = props => {
       });
     }
   };
-  const onMouseOver = e => {
-    if (!readOnly) {
-      e.stopPropagation();
-      setSelected(true);
-    }
-  };
-  const onMouseLeave = e => {
-    if (!readOnly) {
-      e.stopPropagation();
-      setSelected(false);
-    }
-  };
+
+  // const onMouseOver = (e) => {
+  //   if (!readOnly) {
+  //     e.stopPropagation();
+  //     setSelected(true);
+  //   }
+  // };
+
+  // const onMouseLeave = (e) => {
+  //   if (!readOnly) {
+  //     e.stopPropagation();
+  //     setSelected(false);
+  //   }
+  // };
+
   return /*#__PURE__*/_jsxs(Box, {
     component: "div",
     className: `grid-item xs-${grid} element-root gi-top-wrpr`,
@@ -127,10 +135,13 @@ const GridItem = props => {
       marginBottom: `${margin?.bottom || 0}px`,
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
-      }
+      },
+      height: "100%"
     },
-    onMouseOver: onMouseOver,
-    onMouseLeave: onMouseLeave,
+    "data-path": path.join(",")
+    // onMouseOver={onMouseOver}
+    // onMouseLeave={onMouseLeave}
+    ,
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
@@ -150,16 +161,16 @@ const GridItem = props => {
     }), /*#__PURE__*/_jsx(Box, {
       className: "gi-inner-cw",
       component: "div",
+      "data-path": path.join(","),
       sx: {
         display: "flex",
         flexDirection: flexDirection || "column",
-        width: "100%",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
         justifyContent: vertical,
-        height: gridHeight || "auto",
+        height: gridHeight || "100%",
         borderColor: borderColor || "transparent",
         borderWidth: borderWidth || "1px",
         borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,

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

@@ -0,0 +1,11 @@
+const GridStyles = () => ({
+  gridButton: {
+    background: "#007FFF",
+    color: "#fff",
+    "&:hover": {
+      background: "#0066CC",
+      color: "#FFF"
+    }
+  }
+});
+export default GridStyles;