@flozy/editor 2.0.2 → 2.0.3

package/dist/Editor/CommonEditor.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
-import { createEditor, Transforms } from "slate";
+import { createEditor, Editor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
 import { useDebounce } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
@@ -18,7 +18,7 @@ import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Box, Typography } from "@mui/material";
+import { Box, Button, Typography } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
@@ -195,9 +195,20 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     getContent() {
       return getOnSaveData(deboundedValue);
     },
-    insertFragments(fragments, clearAll = false) {
+    insertFragments(fragments, clearAll = false, rest = {}) {
       if (!clearAll) {
-        editor.insertNode(fragments);
+        if (rest?.nextLine) {
+          const {
+            anchor
+          } = editor?.selection || {};
+          if (anchor?.path !== undefined && anchor?.path[0] !== undefined) {
+            editor.insertNode(fragments, {
+              at: [anchor?.path[0] + 1]
+            });
+          }
+        } else {
+          editor.insertNode(fragments);
+        }
       } else {
         // loop delete all
         editor.children.forEach(() => {
@@ -225,6 +236,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
         h
       });
     },
+    undo() {
+      editor?.undo();
+    },
+    redo() {
+      editor?.redo();
+    },
     getPageSettings: {
       background: pageBgImage && pageBgImage !== "none" ? `url(${pageBgImage})` : pageColor || ""
     }

package/dist/Editor/Editor.css

@@ -979,6 +979,10 @@ blockquote {
   left: 0;
   top: 0;
 }
+.content-editable.empty.np:after {
+  left: auto;
+  top: auto;
+}
 .af-pl-1::after {
   padding-left: 12px;
 }

package/dist/Editor/Elements/AppHeader/AppHeader.js

@@ -244,6 +244,7 @@ function AppHeader(props) {
                 }
               },
               className: "app-logo",
+              onClick: onSettings,
               children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
                 alt: `${appTitle} Logo`,
                 style: {

package/dist/Editor/Elements/Button/ButtonPopup.js

@@ -9,7 +9,8 @@ const ButtonPopup = props => {
     customProps,
     onClose,
     style,
-    styleName
+    styleName,
+    onDelete
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
     title: "Button",
@@ -17,6 +18,7 @@ const ButtonPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
+    onDelete: onDelete,
     renderTabs: style ? style : buttonStyle,
     customProps: customProps
   });

package/dist/Editor/Elements/Button/EditorButton.js

@@ -96,7 +96,8 @@ const EditorButton = props => {
     return !readOnly ? /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar hr",
       style: {
-        width: "max-content"
+        width: "max-content",
+        top: "-38px"
       },
       children: [/*#__PURE__*/_jsx(Tooltip, {
         title: "Settings",
@@ -112,13 +113,6 @@ const EditorButton = props => {
           onClick: onMenuClick("open"),
           children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
         })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onMenuClick("delete"),
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
       })]
     }) : null;
   };
@@ -151,6 +145,14 @@ const EditorButton = props => {
         display: {
           lg: "inline",
           xs: xsHidden ? "none" : "inline"
+        },
+        "& .element-toolbar": {
+          display: "none"
+        },
+        "&:hover": {
+          "& .element-toolbar": {
+            display: "block"
+          }
         }
       },
       children: /*#__PURE__*/_jsxs("span", {
@@ -215,6 +217,7 @@ const EditorButton = props => {
       element: element,
       onSave: onSave,
       onClose: onClose,
+      onDelete: onMenuClick("delete"),
       customProps: customProps
     })]
   });

package/dist/Editor/Elements/Embed/Embed.css

@@ -6,7 +6,6 @@
 
 .embed img {
   width: 100%;
-  height: auto
 }
 .embed iframe {
   width: 100%;

package/dist/Editor/Elements/Embed/Frames/DarkFrame.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DarkFrame = ({
+  href,
+  id
+}) => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "330",
+    height: "557",
+    viewBox: "0 0 330 557",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("g", {
+      filter: "url(#filter0_d_14731_299242)",
+      children: /*#__PURE__*/_jsx("rect", {
+        x: "7.5",
+        y: "7.5",
+        width: "305",
+        height: "532",
+        rx: "27.5",
+        stroke: "#1E1E1E",
+        strokeWidth: "15",
+        shapeRendering: "crispEdges",
+        fill: `url(#imageSource_${id})`
+      })
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "305",
+        height: "532",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter0_d_14731_299242",
+        x: "0",
+        y: "0",
+        width: "330",
+        height: "557",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB",
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dx: "10",
+          dy: "10"
+        }), /*#__PURE__*/_jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 1 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_14731_299242"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_14731_299242",
+          result: "shape"
+        })]
+      })]
+    })]
+  });
+};
+export default DarkFrame;

package/dist/Editor/Elements/Embed/Frames/InstaFrame.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const InstaFrame = ({
+  href,
+  id
+}) => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "366",
+    height: "489",
+    viewBox: "0 0 366 489",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("rect", {
+      x: "2.5",
+      y: "2.5",
+      width: "361",
+      height: "484",
+      rx: "17.5",
+      fill: "white",
+      stroke: "#D5D5D5",
+      strokeWidth: "5"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "27.5",
+      y: "28.5",
+      width: "35",
+      height: "35",
+      rx: "17.5",
+      fill: "#D5D5D5",
+      stroke: "#D5D5D5",
+      strokeWidth: "5"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "80.5",
+      y: "40.5",
+      width: "121",
+      height: "11",
+      rx: "5.5",
+      fill: "#D5D5D5",
+      stroke: "#D5D5D5",
+      strokeWidth: "5"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M328.287 453.992L318.575 447.922L308.863 453.992L308.863 427.284C308.863 426.962 308.991 426.654 309.219 426.426C309.447 426.198 309.755 426.07 310.077 426.07L327.073 426.07C327.395 426.07 327.704 426.198 327.932 426.426C328.159 426.654 328.287 426.962 328.287 427.284L328.287 453.992Z",
+      stroke: "#D5D5D5",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M48.4231 452.778C48.4231 452.778 33.248 444.28 33.248 433.961C33.248 432.137 33.8801 430.369 35.0366 428.959C36.1931 427.548 37.8027 426.581 39.5915 426.224C41.3803 425.866 43.2378 426.139 44.8479 426.996C46.4581 427.854 47.7215 429.242 48.4231 430.926V430.926C49.1247 429.242 50.3881 427.854 51.9982 426.996C53.6084 426.139 55.4659 425.866 57.2547 426.224C59.0435 426.581 60.653 427.548 61.8096 428.959C62.9661 430.369 63.5981 432.137 63.5981 433.961C63.5981 444.28 48.4231 452.778 48.4231 452.778Z",
+      stroke: "#D5D5D5",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M90.8913 446.86C89.0838 443.81 88.4515 440.206 89.1132 436.723C89.775 433.24 91.6851 430.119 94.4852 427.945C97.2852 425.771 100.783 424.693 104.321 424.915C107.859 425.137 111.194 426.642 113.701 429.149C116.207 431.656 117.713 434.991 117.935 438.529C118.156 442.067 117.079 445.565 114.905 448.365C112.731 451.165 109.609 453.075 106.127 453.737C102.644 454.398 99.0397 453.766 95.9901 451.959V451.959L90.952 453.385C90.7456 453.445 90.5267 453.449 90.3184 453.396C90.11 453.343 89.9198 453.234 89.7678 453.082C89.6157 452.93 89.5073 452.74 89.454 452.532C89.4007 452.323 89.4045 452.104 89.4648 451.898L90.8913 446.86Z",
+      stroke: "#D5D5D5",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M170.92 425.447L142.634 433.414C142.393 433.479 142.179 433.618 142.019 433.81C141.86 434.002 141.764 434.239 141.744 434.488C141.724 434.737 141.781 434.985 141.908 435.201C142.035 435.416 142.225 435.587 142.452 435.69L155.442 441.836C155.696 441.954 155.901 442.158 156.018 442.412L162.164 455.402C162.268 455.629 162.438 455.819 162.654 455.946C162.869 456.073 163.118 456.13 163.366 456.11C163.615 456.09 163.852 455.994 164.044 455.835C164.236 455.675 164.375 455.461 164.441 455.22L172.408 426.934C172.468 426.727 172.472 426.509 172.418 426.3C172.365 426.092 172.257 425.902 172.105 425.75C171.953 425.597 171.762 425.489 171.554 425.436C171.346 425.383 171.127 425.386 170.92 425.447V425.447Z",
+      stroke: "#D5D5D5",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M155.836 442.019L162.695 435.16",
+      stroke: "#D5D5D5",
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }), /*#__PURE__*/_jsx("rect", {
+      x: "27.5",
+      y: "86.5",
+      width: "311",
+      height: "311",
+      rx: "17.5",
+      stroke: "#D5D5D5",
+      strokeWidth: "5",
+      fill: `url(#imageSource_${id})`
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "338.5",
+        height: "397.5",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      })
+    })]
+  });
+};
+export default InstaFrame;

package/dist/Editor/Elements/Embed/Frames/RoundedDark.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RoundedDark = ({
+  href,
+  id
+}) => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "105",
+    height: "105",
+    viewBox: "0 0 105 105",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("g", {
+      filter: "url(#filter0_d_14731_299244)",
+      children: /*#__PURE__*/_jsx("circle", {
+        cx: "50",
+        cy: "50",
+        r: "46.5",
+        stroke: "#1E1E1E",
+        strokeWidth: "7",
+        shapeRendering: "crispEdges",
+        fill: `url(#imageSource_${id})`
+      })
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "100",
+        height: "100",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter0_d_14731_299244",
+        x: "0",
+        y: "0",
+        width: "105",
+        height: "105",
+        filterUnits: "userSpaceOnUse",
+        colorInterpolationFilters: "sRGB",
+        children: [/*#__PURE__*/_jsx("feFlood", {
+          floodOpacity: "0",
+          result: "BackgroundImageFix"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          in: "SourceAlpha",
+          type: "matrix",
+          values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+          result: "hardAlpha"
+        }), /*#__PURE__*/_jsx("feOffset", {
+          dx: "5",
+          dy: "5"
+        }), /*#__PURE__*/_jsx("feComposite", {
+          in2: "hardAlpha",
+          operator: "out"
+        }), /*#__PURE__*/_jsx("feColorMatrix", {
+          type: "matrix",
+          values: "0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 0 0.117647 0 0 0 1 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_14731_299244"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_14731_299244",
+          result: "shape"
+        })]
+      })]
+    })]
+  });
+};
+export default RoundedDark;

package/dist/Editor/Elements/Embed/Frames/RoundedLight.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const RoundedLight = ({
+  href,
+  id
+}) => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "152",
+    height: "152",
+    viewBox: "0 0 152 152",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("circle", {
+      cx: "76",
+      cy: "76",
+      r: "75",
+      stroke: "white",
+      strokeWidth: "2",
+      fill: `url(#imageSource_${id})`
+    }), /*#__PURE__*/_jsx("defs", {
+      children: /*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "152",
+        height: "152",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      })
+    })]
+  });
+};
+export default RoundedLight;

package/dist/Editor/Elements/Embed/Frames/index.js

@@ -0,0 +1,11 @@
+import InstaFrame from "./InstaFrame";
+import DarkFrame from "./DarkFrame";
+import RoundedDark from "./RoundedDark";
+import RoundedLight from "./RoundedLight";
+const frames = {
+  InstaFrame: InstaFrame,
+  DarkFrame: DarkFrame,
+  RoundedDark: RoundedDark,
+  RoundedLight: RoundedLight
+};
+export default frames;

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

@@ -9,6 +9,7 @@ import { GridSettingsIcon } from "../../common/iconslist";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
 import Icon from "../../common/Icon";
+import frames from "./Frames";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -27,7 +28,9 @@ const Image = ({
     borderRadius,
     boxShadow,
     width: oldWidth,
-    xsHidden
+    xsHidden,
+    objectFit,
+    frame = null
   } = element;
   const {
     readOnly
@@ -70,6 +73,7 @@ const Image = ({
     hoverPath
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
+  const ImageFrame = frame ? frames[frame] : null;
   useEffect(() => {
     if (editor && ele && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, element);
@@ -110,6 +114,12 @@ const Image = ({
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
       contentEditable: false,
+      style: {
+        top: "0px",
+        right: "0px",
+        left: "auto",
+        margin: "0px"
+      },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Image Settings",
         arrow: true,
@@ -131,12 +141,15 @@ const Image = ({
       }), "Add Image"]
     }) : /*#__PURE__*/_jsx(Box, {
       component: "img",
+      className: "emb-img",
       sx: {
         borderRadius: {
           ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
         },
         objectFit: "cover",
-        boxShadow: boxShadow || "none"
+        boxShadow: boxShadow || "none",
+        height: objectFit ? "100%" : "auto",
+        opacity: frame ? 0 : 1
       },
       alt: alt,
       src: url,
@@ -148,13 +161,17 @@ const Image = ({
   const getWidth = () => {
     if (resizing) {
       return {
-        width: `${size.width}px`
+        width: `${size.width}px`,
+        height: objectFit ? `${size.height}px` : "auto"
       };
     } else {
       return {
         width: url ? {
           ...getBreakPointsValue(getSize(), null, "overrideReSize", true)
-        } : "100%"
+        } : "100%",
+        height: objectFit && url ? {
+          ...getBreakPointsValue(getSize(), null, "overrideReSizeH", true)
+        } : "auto"
       };
     }
   };
@@ -195,7 +212,14 @@ const Image = ({
         position: "relative",
         ...getWidth()
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), url && ImageFrame ? /*#__PURE__*/_jsx(Box, {
+        component: "div",
+        className: "image-frame",
+        children: /*#__PURE__*/_jsx(ImageFrame, {
+          href: url,
+          id: path.join(",")
+        })
+      }) : null, selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,

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

@@ -66,10 +66,20 @@ const Grid = props => {
     const insertPath = ancestorsPath[1];
     if (insertPath) {
       insertPath[insertPath.length - 1] = element.children.length;
-      Transforms.insertNodes(editor, [{
-        ...gridItem()
-      }], {
-        at: [...path, 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, [{
@@ -111,10 +121,10 @@ const Grid = props => {
       console.log(err);
     }
   };
-  const onAddSection = (defaultGrid = null, next = true) => () => {
+  const onAddSection = () => () => {
     try {
-      const insertPath = next ? Path.next(path) : path;
-      insertGrid(editor, defaultGrid, insertPath);
+      const duplicateGrid = JSON.parse(JSON.stringify(element));
+      insertGrid(editor, duplicateGrid, [path[0] + 1, 0]);
     } catch (err) {
       console.log(err);
     }
@@ -216,7 +226,7 @@ const Grid = props => {
         title: "Add Section",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
-          onClick: onAddSection(null, true),
+          onClick: onAddSection(),
           children: /*#__PURE__*/_jsx(GridAddSectionIcon, {})
         })
       }), path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
@@ -311,7 +321,8 @@ const Grid = props => {
         width: "100%",
         flexWrap: {
           ...getBreakPointsValue(flexWrap || "wrap")
-        }
+        },
+        height: "fit-content"
       },
       "data-path": path.join(","),
       children: children

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

@@ -1,12 +1,13 @@
 /* eslint-disable no-unused-vars */
 import React, { useState } from "react";
-import { Transforms } from "slate";
+import { Transforms, Node } 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 { getBreakPointsValue, getTRBLBreakPoints } from "../../helper/theme";
+import { isEmptyNode } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -49,12 +50,14 @@ const GridItem = props => {
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
+  const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
   const GridItemToolbar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
       style: {
-        top: "0px"
+        top: "-14px",
+        left: "-14px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Grid Item Settings",
@@ -92,10 +95,13 @@ const GridItem = props => {
       });
     }
   };
+  const getBorderColor = () => {
+    return borderColor || "transparent";
+  };
   return /*#__PURE__*/_jsxs(Item, {
     item: true,
     component: "div",
-    className: `grid-item element-root gi-top-wrpr content-editable`,
+    className: `grid-item element-root gi-top-wrpr`,
     ...attributes,
     sx: {
       width: {
@@ -110,7 +116,7 @@ const GridItem = props => {
       },
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
-      borderColor: borderColor || "transparent",
+      borderColor: getBorderColor(),
       borderWidth: borderWidth || "1px",
       borderRadius: {
         ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
@@ -129,7 +135,6 @@ const GridItem = props => {
     style: {
       textAlign: element.alignment || "left"
     },
-    placeholder: "Grid Item",
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
@@ -150,7 +155,7 @@ const GridItem = props => {
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
     }), /*#__PURE__*/_jsx(Box, {
-      className: `gi-inner-cw ${animation || ""}`,
+      className: `gi-inner-cw ${animation || ""} content-editable ${isEmpty} np`,
       component: "div",
       "data-path": path.join(","),
       sx: {
@@ -166,6 +171,7 @@ const GridItem = props => {
           borderColor: borderColorHover || borderColor || "transparent"
         }
       },
+      placeholder: "Grid Item",
       children: children
     }), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
       element: element,

package/dist/Editor/Styles/EditorStyles.js

@@ -210,6 +210,22 @@ const editorStyles = ({
       backgroundColor: "#F8FAFF",
       textAlign: "center",
       border: "1px solid #CFD8F5"
+    },
+    "& .embed-image-wrpr .image-frame": {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      padding: "0px",
+      pointerEvents: "none",
+      "& svg": {
+        width: "100%",
+        height: "100%",
+        "& .op-zero": {
+          fillOpacity: 0
+        }
+      }
     }
   },
   fullScreenWrapper: {

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

@@ -10,6 +10,26 @@ const embedImageStyle = [{
     label: "File",
     key: "url",
     type: "backgroundImage"
+  }, {
+    label: "Image Frame",
+    key: "frame",
+    type: "textOptions",
+    options: [{
+      value: "",
+      label: "No Frame"
+    }, {
+      value: "InstaFrame",
+      label: "Instagram Frame (Landscape)"
+    }, {
+      value: "DarkFrame",
+      label: "Dark Frame (Portrait)"
+    }, {
+      value: "RoundedDark",
+      label: "Rounded Dark Frame"
+    }, {
+      value: "RoundedLight",
+      label: "Rounded Light Frame"
+    }]
   }]
 }, {
   tab: "Banner Spacing",
@@ -31,6 +51,11 @@ const embedImageStyle = [{
   tab: "Position",
   value: "position",
   fields: [{
+    label: "Disable Aspect Ratio",
+    key: "objectFit",
+    type: "selectBox",
+    placeholder: "Disable Aspect Ratio"
+  }, {
     label: "Hide on Mobile",
     key: "xsHidden",
     type: "selectBox",

package/dist/Editor/common/ToolbarIcon.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Tooltip, IconButton } from "@mui/material";
+import { Tooltip, IconButton, Typography } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const ToolbarIcon = props => {
@@ -14,11 +14,23 @@ const ToolbarIcon = props => {
   const renderIconText = () => {
     if (icoBtnType === "mini") {
       return /*#__PURE__*/_jsx("span", {
-        children: title
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: '14px',
+            fontWeight: 500
+          },
+          children: title
+        })
       });
     } else if (icoBtnType === "cmd") {
       return /*#__PURE__*/_jsx("span", {
-        children: title
+        children: /*#__PURE__*/_jsx(Typography, {
+          sx: {
+            fontSize: '14px',
+            fontWeight: 500
+          },
+          children: title
+        })
       });
     }
     return null;

package/dist/Editor/utils/button.js

@@ -13,10 +13,10 @@ export const insertButton = editor => {
     bgColor: "#2563EB",
     textColor: "#FFF",
     borderRadius: {
-      topLeft: 8,
-      topRight: 8,
-      bottomLeft: 8,
-      bottomRight: 8
+      topLeft: 30,
+      topRight: 30,
+      bottomLeft: 30,
+      bottomRight: 30
     },
     bannerSpacing: {
       left: 16,

package/dist/Editor/utils/events.js

@@ -129,7 +129,6 @@ export const enterEvent = (e, editor, ele) => {
   try {
     // on shift enter break line in same node
     if (e.shiftKey) {
-      console.log("shif enter");
       e.preventDefault();
       Transforms.insertText(editor, "\n");
     } else if (ele && ele[0]) {

package/dist/Editor/utils/grid.js

@@ -6,7 +6,7 @@ export const insertPlainGrid = count => {
   const size = 12 / count;
   const items = Array.from(Array(count).keys()).map(() => gridItem({
     grid: size,
-    borderColor: "#ccc",
+    cellGHeight: "100%",
     lockSpacing: true,
     bannerSpacing: {
       top: "16",

package/dist/Editor/utils/helper.js

@@ -1,4 +1,4 @@
-import { Editor } from "slate";
+import { Editor, Node } from "slate";
 export const formatDate = (date, format = "MM/DD/YYYY") => {
   if (!date) return "";
   var d = new Date(date),
@@ -78,6 +78,17 @@ export const getSelectedText = editor => {
     return Editor.string(editor, editor?.selection);
   } catch (err) {
     console.log(err);
-    return '';
+    return "";
+  }
+};
+export const isEmptyNode = (editor, children, path) => {
+  try {
+    const isEmptyText = Node.string(Node.get(editor, path))?.length === 0;
+    const emptyNode = children?.length === 1 && children[0]?.children[0]?.type === undefined && children[0]?.type === "paragraph";
+    console.log(children[0]?.type, isEmptyText, emptyNode, children);
+    return isEmptyText && emptyNode;
+  } catch (err) {
+    console.log(err);
+    return "";
   }
 };

package/dist/Editor/utils/pageSettings.js

@@ -1,7 +1,6 @@
 import { Editor, Transforms, Element } from "slate";
 export const findPageSettings = editor => {
   try {
-    console.log(editor?.children);
     return {
       element: editor?.children?.find(f => f.type === "page-settings")
     };

package/package.json

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