@flozy/editor 2.0.3 → 2.0.5

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

@@ -15,9 +15,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Toolbar from "@mui/material/Toolbar";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import DeleteIcon from "@mui/icons-material/Delete";
-import AppHeaderPopup from "./AppHeaderPopup";
 import { Tooltip } from "@mui/material";
+import AppHeaderPopup from "./AppHeaderPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,6 +32,9 @@ function AppHeader(props) {
     customProps,
     children
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const {
     appTitle,
     appLogo,
@@ -60,37 +62,29 @@ function AppHeader(props) {
     setMobileOpen(prevState => !prevState);
   };
   const onSettings = e => {
-    e.stopPropagation();
-    setOpenSettings(true);
-  };
-  const ToolBar = () => {
-    return customProps?.readOnly !== true ? /*#__PURE__*/_jsxs("div", {
-      className: "element-toolbar",
-      contentEditable: false,
-      style: {
-        top: "0px",
-        right: "0px",
-        zIndex: 1000
-      },
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "App Header Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onSettings,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Delete App Header",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onDelete,
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
-        })
-      })]
-    }) : null;
+    if (!readOnly) {
+      e.stopPropagation();
+      e.preventDefault();
+      setOpenSettings(true);
+    }
   };
+
+  // const ToolBar = () => {
+  //   return customProps?.readOnly !== true ? (
+  //     <div
+  //       className="element-toolbar"
+  //       contentEditable={false}
+  //       style={{ top: "0px", right: "0px", zIndex: 1000 }}
+  //     >
+  //       <Tooltip title="App Header Settings" arrow>
+  //         <IconButton size="small" onClick={onSettings}>
+  //           <GridSettingsIcon />
+  //         </IconButton>
+  //       </Tooltip>
+  //     </div>
+  //   ) : null;
+  // };
+
   const onSave = data => {
     const updateData = {
       ...data
@@ -111,7 +105,7 @@ function AppHeader(props) {
     setOpenSettings(false);
   };
   const handleFocus = e => {
-    if (!customProps?.readOnly) {
+    if (!readOnly) {
       e.preventDefault();
       try {
         const [[, gridItemPath]] = Editor.nodes(editor, {
@@ -202,6 +196,7 @@ function AppHeader(props) {
             },
             zIndex: 999
           },
+          onClick: onSettings,
           children: /*#__PURE__*/_jsxs(Toolbar, {
             style: {
               flexDirection: isLogoRight ? "row-reverse" : "row",
@@ -244,7 +239,6 @@ function AppHeader(props) {
                 }
               },
               className: "app-logo",
-              onClick: onSettings,
               children: [appLogo && appLogo !== "none" ? /*#__PURE__*/_jsx("img", {
                 alt: `${appTitle} Logo`,
                 style: {
@@ -326,7 +320,7 @@ function AppHeader(props) {
             },
             children: drawer
           })
-        }), /*#__PURE__*/_jsx(ToolBar, {})]
+        })]
       }), /*#__PURE__*/_jsx("div", {
         contentEditable: false,
         style: {
@@ -338,6 +332,7 @@ function AppHeader(props) {
       element: element,
       onSave: onSave,
       onClose: onClose,
+      onDelete: onDelete,
       customProps: customProps
     }) : null]
   });

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

@@ -7,6 +7,7 @@ const AppHeaderPopup = props => {
     element,
     onSave,
     onClose,
+    onDelete,
     customProps
   } = props;
   return /*#__PURE__*/_jsx(StyleBuilder, {
@@ -15,6 +16,7 @@ const AppHeaderPopup = props => {
     element: element,
     onSave: onSave,
     onClose: onClose,
+    onDelete: onDelete,
     renderTabs: appHeaderStyle,
     customProps: customProps
   });

package/dist/Editor/Elements/Embed/Frames/InstaFrameDark.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: "#12141d",
+      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/LiteFrame.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: "314",
+    height: "541",
+    viewBox: "0 0 314 541",
+    fill: "none",
+    children: [/*#__PURE__*/_jsx("g", {
+      filter: "url(#filter0_d_15055_295724)",
+      children: /*#__PURE__*/_jsx("rect", {
+        x: "7",
+        y: "7",
+        width: "290",
+        height: "517",
+        rx: "20",
+        stroke: "white",
+        strokeWidth: "14",
+        shapeRendering: "crispEdges",
+        fill: `url(#imageSource_${id})`
+      })
+    }), /*#__PURE__*/_jsxs("defs", {
+      children: [/*#__PURE__*/_jsx("pattern", {
+        id: `imageSource_${id}`,
+        patternUnits: "userSpaceOnUse",
+        width: "290",
+        height: "517",
+        children: /*#__PURE__*/_jsx("image", {
+          x: "0",
+          y: "0",
+          height: "100%",
+          href: href
+        })
+      }), /*#__PURE__*/_jsxs("filter", {
+        id: "filter0_d_15055_295724",
+        x: "0",
+        y: "0",
+        width: "314",
+        height: "541",
+        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 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in2: "BackgroundImageFix",
+          result: "effect1_dropShadow_15055_295724"
+        }), /*#__PURE__*/_jsx("feBlend", {
+          mode: "normal",
+          in: "SourceGraphic",
+          in2: "effect1_dropShadow_15055_295724",
+          result: "shape"
+        })]
+      })]
+    })]
+  });
+};
+export default DarkFrame;

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

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

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

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

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

@@ -67,11 +67,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsxs(RadioGroup, {
+          children: /*#__PURE__*/_jsx(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -80,16 +80,7 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: "after",
-              label: "After",
-              onChange: () => {
-                setSchedule("after");
-              },
-              control: /*#__PURE__*/_jsx(Radio, {
-                size: "small"
-              })
-            })]
+            })
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,

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

@@ -272,7 +272,8 @@ const Grid = props => {
       borderRadius: {
         ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
       },
-      borderStyle: borderStyle || "solid"
+      borderStyle: borderStyle || "solid",
+      height: "auto"
     },
     "data-path": path.join(","),
     children: [fgColor && /*#__PURE__*/_jsx("div", {

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

@@ -51,6 +51,7 @@ const GridItem = props => {
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
   const isEmpty = !readOnly && isEmptyNode(editor, element?.children, path) ? "empty" : "";
+  console.log(cellGHeight);
   const GridItemToolbar = () => {
     return selected && !showTool ? /*#__PURE__*/_jsx("div", {
       contentEditable: false,
@@ -129,7 +130,8 @@ const GridItem = props => {
       },
       "&:hover": {
         background: `${bgColorHover || bgColor || "transparent"}`
-      }
+      },
+      flex: 1
     },
     "data-path": path.join(","),
     style: {

package/dist/Editor/MiniEditor.js

@@ -1,12 +1,14 @@
-import React, { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState, useEffect } from "react";
 import { createEditor } from "slate";
 import { Slate, Editable } from "slate-react";
+import { useDebounce } from "use-debounce";
 import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
 import { commands, mentionsEvent } from "./utils/events";
 import useMentions from "./hooks/useMentions";
 import Shorthands from "./common/Shorthands";
 import BasicToolbar from "./Toolbar/Basic";
 import withCommon from "./hooks/withCommon";
+import { serializeToText } from "./utils/serializeToText";
 import "./Editor.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -20,7 +22,8 @@ const MiniEditor = props => {
     readOnly,
     miniEditorPlaceholder,
     className,
-    otherProps
+    otherProps,
+    onSave
   } = props;
   const {
     CHARACTERS = []
@@ -30,6 +33,9 @@ const MiniEditor = props => {
   const [editor] = useState(() => withCommon(createEditor(), {
     needLayout: false
   }));
+  const [isInteracted, setIsInteracted] = useState(false);
+  const [value, setValue] = useState(content);
+  const [deboundedValue] = useDebounce(value, 500);
   const isReadOnly = readOnly === "readonly";
   const customProps = {
     ...(otherProps || {}),
@@ -50,6 +56,24 @@ const MiniEditor = props => {
     ...mentions,
     CHARACTERS
   }) : [];
+  useEffect(() => {
+    if (onSave && isInteracted) {
+      const {
+        value: strVal,
+        ...restVal
+      } = getOnSaveData(deboundedValue);
+      onSave(strVal, restVal);
+    }
+  }, [deboundedValue]);
+  const getOnSaveData = val => {
+    const text = serializeToText(val);
+    const title = val?.find(f => f.type === "title");
+    return {
+      value: JSON.stringify(val),
+      text: text,
+      title: serializeToText(title?.children) || "Untitled"
+    };
+  };
   const Leaf = ({
     attributes,
     children,
@@ -97,10 +121,17 @@ const MiniEditor = props => {
       customProps: customProps
     });
   }, []);
+  const onChange = newVal => {
+    if (!isInteracted) {
+      setIsInteracted(true);
+    }
+    handleEditorChange(newVal);
+    setValue(newVal);
+  };
   return /*#__PURE__*/_jsxs(Slate, {
     editor: editor,
     initialValue: content,
-    onChange: handleEditorChange,
+    onChange: onChange,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {

package/dist/Editor/common/DnD/DragHandleButton.js

@@ -13,7 +13,7 @@ const DragHandleStyle = () => ({
     opacity: 0,
     content: '" "',
     position: "absolute",
-    top: "0px",
+    top: "3px",
     left: "-52px",
     borderRadius: "0px",
     padding: "0px",

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -59,13 +59,17 @@ const ImageSelector = props => {
     }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
-        children: [/*#__PURE__*/_jsx(Grid, {
+        children: [TAB_SHOW[title].length > 1 && /*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 4,
+          xs: 12,
+          sx: {
+            display: "flex",
+            justifyContent: "space-evenly"
+          },
           children: /*#__PURE__*/_jsxs(Tabs, {
             sx: classes.tabs,
             onChange: handleTabChange,
-            orientation: "vertical",
+            orientation: "horizontal",
             value: tabValue,
             children: [/*#__PURE__*/_jsx(Tab, {
               className: `${isActive("upload")} ${TAB_SHOW[title].indexOf("upload") === -1 ? "hidden" : ""}`,
@@ -88,6 +92,9 @@ const ImageSelector = props => {
             }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("addLink")} ${TAB_SHOW[title].indexOf("addLink") === -1 ? "hidden" : ""}`,
               sx: classes.tab,
+              style: {
+                marginRight: 0
+              },
               icon: /*#__PURE__*/_jsx(Icon, {
                 icon: "link"
               }),
@@ -98,7 +105,7 @@ const ImageSelector = props => {
           })
         }), /*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 8,
+          xs: 12,
           sx: classes.imsRightWrpr,
           children: /*#__PURE__*/_jsx(Comp, {
             ...props,

package/dist/Editor/common/ImageSelector/Styles.js

@@ -6,8 +6,8 @@ const ImageSelectorStyles = theme => ({
       fontWeight: "500",
       textTransform: "capitalize",
       minHeight: "40px",
-      padding: "10px",
-      marginRight: "24px",
+      padding: "10px 30px",
+      marginRight: "14px",
       borderRadius: "7px",
       marginBottom: "12px",
       color: theme?.palette?.editor?.textColor,
@@ -26,7 +26,12 @@ const ImageSelectorStyles = theme => ({
       "&:hover": {
         backgroundColor: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor,
-        border: `1px solid ${theme?.palette?.editor?.activeColor}`
+        border: `1px solid ${theme?.palette?.editor?.activeColor}`,
+        "& svg": {
+          "& path": {
+            stroke: theme?.palette?.editor?.activeColor
+          }
+        }
       },
       "& svg": {
         marginRight: "8px",

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

@@ -14,12 +14,41 @@ const SectionStyle = () => ({
     "&:hover": {
       "& .dh-para": {
         opacity: 1
+      },
+      "& .sectionIcon": {
+        opacity: 1
       }
     },
     "& .element-toolbar": {
       "&:hover": {
         display: "block"
       }
+    },
+    "& .sectionIcon": {
+      opacity: 0,
+      padding: "0px",
+      background: "transparent",
+      border: "none",
+      width: "20px",
+      height: "20px",
+      "& button": {
+        boxShadow: "none",
+        background: "transparent",
+        width: "20px",
+        height: "20px"
+      },
+      "& svg": {
+        fill: "#ccc",
+        width: "20px",
+        marginTop: '-5px'
+      },
+      "&:hover": {
+        opacity: 1,
+        background: "#eee"
+      },
+      "&.active": {
+        opacity: 1
+      }
     }
   }
 });
@@ -56,10 +85,10 @@ const Section = props => {
   const Toolbar = () => {
     return !readOnly && !showTool ? /*#__PURE__*/_jsx(Box, {
       component: "div",
-      className: "element-toolbar no-border-button ss hr section-tw",
+      className: `element-toolbar no-border-button hr section-tw sectionIcon`,
       style: {
         left: "-28px",
-        top: "0px"
+        top: "3px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",

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

@@ -19,16 +19,25 @@ const embedImageStyle = [{
       label: "No Frame"
     }, {
       value: "InstaFrame",
-      label: "Instagram Frame (Landscape)"
+      label: "Instagram Light Frame"
+    }, {
+      value: "InstaFrameDark",
+      label: "Instagram Dark Frame"
     }, {
       value: "DarkFrame",
-      label: "Dark Frame (Portrait)"
+      label: "Portrait Dark Frame"
+    }, {
+      value: "LiteFrame",
+      label: "Portrait Lite Frame"
     }, {
       value: "RoundedDark",
       label: "Rounded Dark Frame"
     }, {
       value: "RoundedLight",
       label: "Rounded Light Frame"
+    }, {
+      value: "RoundedLightB2",
+      label: "Rounded Light B2 Frame"
     }]
   }]
 }, {

package/dist/Editor/common/iconslist.js

@@ -1183,6 +1183,7 @@ export const TextPlusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1.08203 3.43359L3.51526 1.00036L5.94849 3.43359",
+    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });
@@ -1194,6 +1195,7 @@ export const TextMinusIcon = props => /*#__PURE__*/_jsx("svg", {
   fill: "none",
   children: /*#__PURE__*/_jsx("path", {
     d: "M1 0.805664L3.43323 3.2389L5.86646 0.805664",
+    stroke: "#64748B",
     strokeLinecap: "round"
   })
 });

package/dist/Editor/utils/embed.js

@@ -25,7 +25,8 @@ export const createEmbedNode = (type, {
   },
   alignment: {
     horizantal: "center"
-  }
+  },
+  objectFit: type === "image" ? true : false
 });
 export const insertEmbed = (editor, embedData, format) => {
   try {

package/dist/Editor/utils/helper.js

@@ -85,7 +85,6 @@ 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);

package/package.json

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