@flozy/editor 1.7.5 → 1.7.7

package/dist/Editor/CommonEditor.js

@@ -9,24 +9,27 @@ import { draftToSlate } from "./utils/draftToSlate";
 import useMentions from "./hooks/useMentions";
 import MentionsPopup from "./common/MentionsPopup";
 import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
-import { mentionsEvent, commands, indentation, escapeEvent } from "./utils/events";
+import { mentionsEvent, commands, indentation, escapeEvent, enterEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
 import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
-import { getThumbnailImage } from "./helper";
+import { getThumbnailImage, invertColor } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
-import { Box } from "@mui/material";
+import { Box, Typography } from "@mui/material";
 import Shorthands from "./common/Shorthands";
 import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
-import DragHandle from "./common/DnD/DragHandle";
 import DragAndDrop from "./common/DnD";
+import Section from "./common/Section";
 import "animate.css";
+import decorators from "./utils/Decorators";
+import useFormat from "./utils/customHooks/useFormat";
+import useElement from "./utils/customHooks/useElement";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -46,7 +49,10 @@ const Item = /*#__PURE__*/forwardRef(({
 });
 Item.displayName = "Item";
 const Element = props => {
-  return getBlock(props);
+  return /*#__PURE__*/_jsx(Section, {
+    ...props,
+    children: getBlock(props)
+  });
 };
 const Leaf = ({
   attributes,
@@ -95,9 +101,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     fullWidth = "80%"
   } = otherProps || {};
   const [drag, setDrag] = useState(null);
-  const classes = editorStyles({
-    padHeight: !fullScreen ? otherProps?.padHeight : 120
-  });
   const editor = useMemo(() => {
     if (collaborativeEditor) return collaborativeEditor;
     return withCommon(createEditor(), {
@@ -120,6 +123,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       bottom: 0
     }
   };
+  const classes = editorStyles({
+    padHeight: !fullScreen ? otherProps?.padHeight : 120,
+    placeHolderColor: invertColor(pageColor || "#FFF")
+  });
+  const isListItem = useElement(editor, ["list-item", "check-list-item", "accordion-summary"]);
+  console.log(editor.selection);
   useEffect(() => {
     setValue(draftToSlate({
       data: content
@@ -297,6 +306,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       escapeEvent({
         editor
       });
+    } else if (event.key === "Enter") {
+      enterEvent(event, editor, isListItem);
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
@@ -336,11 +347,11 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           onChange: handleEditorChange,
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
-              children: /*#__PURE__*/_jsx(Box, {
+              children: /*#__PURE__*/_jsxs(Box, {
                 className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
-                children: /*#__PURE__*/_jsxs(Box, {
+                children: [/*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
@@ -358,7 +369,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         paddingTop: `${bannerSpacing?.top}px`,
                         paddingBottom: `${bannerSpacing?.bottom}px`,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,
-                        // width: viewport.w ? `${viewport.w}px` : "100%",
                         height: viewport.h ? `${viewport.h}px` : `100%`,
                         alignSelf: "center",
                         transformOrigin: "left top",
@@ -372,6 +382,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         readOnly: isReadOnly,
                         renderElement: renderElement,
                         renderLeaf: renderLeaf,
+                        decorate: decorators,
                         onKeyDown: onKeyDown
                       }), /*#__PURE__*/_jsx(MentionsPopup, {
                         ref: mentionsRef,
@@ -388,7 +399,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                     customProps: customProps,
                     toolbarOptions: toolbarOptions
                   }) : null]
-                })
+                }), readOnly && /*#__PURE__*/_jsx(Typography, {
+                  sx: {
+                    color: "rgb(100, 116, 139)",
+                    fontSize: "13px"
+                  },
+                  align: "center",
+                  children: footer
+                })]
               })
             })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {

package/dist/Editor/DialogWrapper.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Grid } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, IconButton, Grid } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 // import styled from "@emotion/styled";
 // import commonStyle from "./commonStyle";
@@ -9,8 +9,7 @@ const DialogWrapper = props => {
   const {
     fullScreen,
     onClose,
-    children,
-    footer
+    children
   } = props;
   return fullScreen ? /*#__PURE__*/_jsxs(Dialog, {
     className: `dialogComp`,
@@ -38,13 +37,6 @@ const DialogWrapper = props => {
         padding: "0px"
       },
       children: children
-    }), /*#__PURE__*/_jsx(DialogActions, {
-      style: {
-        justifyContent: "center",
-        color: "#64748B",
-        fontSize: "13px"
-      },
-      children: footer
     })]
   }) : children;
 };

package/dist/Editor/Editor.css

@@ -772,6 +772,10 @@ blockquote {
   padding: 6px;
 }
 
+.iconRadioButton .MuiFormControlLabel-root {
+  margin-right: 8px;
+}
+
 .iconRadioButton .MuiTypography-root {
   width: 32px;
   height: 32px;
@@ -810,6 +814,80 @@ blockquote {
   outline: none !important;
 }
 
+.bannerSpaceBoxLeft {
+  width: 12px;
+  height: 80px;
+  border-radius: 2px 8px 8px 2px;
+  border: 2px solid #2563eb;
+  top: 14px;
+  position: absolute;
+  left: 0;
+}
+
+.bannerSpaceBoxTop {
+  height: 12px;
+  width: 86px;
+  border-radius: 2px 2px 8px 8px;
+  border: 2px solid #2563eb;
+  position: absolute;
+  left: 9px;
+  top: 0;
+}
+.bannerSpaceBoxRight {
+  width: 12px;
+  height: 80px;
+  border-radius: 8px 2px 2px 8px;
+  border: 2px solid #2563eb;
+  position: absolute;
+  right: 0;
+  top: 14px;
+}
+.bannerSpaceBoxBottom {
+  height: 12px;
+  width: 86px;
+  border-radius: 8px 8px 2px 2px;
+  border: 2px solid #2563eb;
+  position: absolute;
+  left: 9px;
+  bottom: 0;
+}
+.bannerSpaceBox {
+  position: relative;
+  width: 106px;
+  height: 106px;
+  flex-shrink: 0;
+}
+
+.sliderInput {
+  width: 66px;
+  padding: 2px 10px;
+  margin-left: 18px;
+  box-shadow: 0px 4px 16px 0px #0000000d;
+  border: 1px solid #6f6f6f33;
+  border-radius: 4px;
+}
+.sld-wrpr {
+  padding-left: 16px;
+}
+.cradio-primary .MuiRadio-root {
+  color: #E0E0E0;
+}
+.cradio-primary .MuiRadio-root.Mui-checked,
+.ccheckbox-primary .MuiCheckbox-root.Mui-checked {
+  color: #2563eb
+}
+
+.spacingSlider .MuiSlider-thumb {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #fff;
+  box-shadow: 0px 1px 6px #aaa;
+}
+.spacingSlider {
+  height: 9px !important;
+  color: #2563eb !important;
+}
+
 .uploadImageSection {
   position: absolute;
   transform: translate(-50%, -50%);
@@ -874,6 +952,33 @@ blockquote {
   height: 0px;
 }
 
+.sidebar-wrpr-eds {
+  padding: 8px 0px;
+}
+.sidebar-wrpr-eds .MuiTypography-body1 {
+  color: #0F172A;
+  font-size: 14px;
+}
+
+.content-editable.empty {
+  position: relative;
+}
+.content-editable.empty:after {
+  content: attr(placeholder);
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.af-pl-1::after {
+  padding-left: 12px;
+}
+.af-pl-2::after {
+  padding-left: 24px;
+}
+.af-pt-2::after {
+  padding-top: 8px;
+}
+
 /* HTML: <div class="loader"></div> */
 .img-loader-wrapper {
   width: 28px;

package/dist/Editor/Elements/Color Picker/ColorButtons.js

@@ -8,26 +8,31 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 let c = [];
 const ColorChunks = (recentColors = []) => [...recentColors, ...colors].reduce((a, b, i) => {
   if (i % 7 === 0) {
-    a.push(c);
+    if (c.length > 0) {
+      a.push(c);
+    }
     c = [];
   }
   c.push(b);
   return a;
-}, []).reverse();
+}, []);
 const SingleColorButton = ({
   crs,
   index,
   handleSelect,
   classes,
   handleMore,
-  activeColor
+  activeColor,
+  id,
+  padding
 }) => {
   return /*#__PURE__*/_jsxs(Box, {
     style: {
       width: "100%",
       display: "flex",
       alignItems: "center",
-      padding: "8px"
+      padding: padding || "8px",
+      justifyContent: "center"
     },
     children: [crs.map(m => /*#__PURE__*/_jsx(Button, {
       onClick: handleSelect(m),
@@ -37,6 +42,7 @@ const SingleColorButton = ({
       sx: classes.colorButtonSingle,
       className: `${activeColor === m ? "active" : ""}`
     }, `color_bs_${m}`)), index === 0 && handleMore ? /*#__PURE__*/_jsx(IconButton, {
+      id: `in_${id}`,
       onClick: handleMore,
       className: "more-btn-cbs",
       children: /*#__PURE__*/_jsx(ArrowDropDownIcon, {})
@@ -45,6 +51,7 @@ const SingleColorButton = ({
 };
 export const AllColors = props => {
   const {
+    id,
     classes,
     open,
     anchorEl,
@@ -72,13 +79,18 @@ export const AllColors = props => {
         sx: classes.allColorInner,
         children: /*#__PURE__*/_jsx(Box, {
           className: "buttonsWrpr",
+          style: {
+            padding: "8px"
+          },
           children: all.map((m, i) => {
             return /*#__PURE__*/_jsx(SingleColorButton, {
+              id: `pi_${id}`,
               crs: m,
               index: i,
               handleSelect: onSelect,
               classes: classes,
-              activeColor: activeColor
+              activeColor: activeColor,
+              padding: "0px"
             }, `si_btn_row1_${m}_${i}`);
           })
         })
@@ -88,6 +100,7 @@ export const AllColors = props => {
 };
 const ColorButtons = props => {
   const {
+    id,
     onSelect,
     classes,
     activeColor
@@ -111,6 +124,7 @@ const ColorButtons = props => {
       className: "buttonsWrpr first",
       children: [row1].map((m, i) => {
         return /*#__PURE__*/_jsx(SingleColorButton, {
+          id: `p1_${id}`,
           crs: m,
           index: i,
           handleSelect: handleSelect,
@@ -135,6 +149,7 @@ const ColorButtons = props => {
         sx: classes.colorButtonsInner,
         children: restRows.map((m, i) => {
           return /*#__PURE__*/_jsx(SingleColorButton, {
+            id: `p2_${id}`,
             crs: m,
             index: i,
             handleSelect: handleSelect,

package/dist/Editor/Elements/Color Picker/ColorPicker.js

@@ -5,9 +5,9 @@ import ColorPickerTool from "react-gcolor-picker";
 import { IconButton, Tooltip, Box, Popover } from "@mui/material";
 import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions";
 import { logo } from "./LogoIcon";
-import "./ColorPicker.css";
 import ColorButtons from "./ColorButtons";
 import ColorPickerStyles from "./Styles";
+import "./ColorPicker.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,6 +16,7 @@ const DEFAULT_COLOR = {
   bgcolor: "#FFFFFF"
 };
 const ColorPicker = ({
+  id,
   format,
   editor,
   showHex,
@@ -55,6 +56,7 @@ const ColorPicker = ({
       title: title,
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
+        sx: pickerStyles.colorPickerIcon,
         onClick: onOpen,
         children: Logo
       })
@@ -64,18 +66,19 @@ const ColorPicker = ({
     }) : null, /*#__PURE__*/_jsx(ColorButtons, {
       classes: pickerStyles,
       onSelect: onSelect,
-      activeColor: activeColor
-    }), /*#__PURE__*/_jsx(Popover, {
+      activeColor: activeColor,
+      id: id
+    }, id), /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
       onClose: handleClose,
       anchorOrigin: {
-        vertical: "bottom",
+        vertical: "top",
         horizontal: "center"
       },
       transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
+        vertical: "bottom",
+        horizontal: "top"
       },
       children: /*#__PURE__*/_jsx(ColorPickerTool, {
         gradient: true,

package/dist/Editor/Elements/Color Picker/LogoIcon.js

@@ -1,59 +1,25 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 export const logo = {
   color: color => /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 11 14",
+    fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    fill: "#64748B",
-    height: "20px",
-    width: "20px",
-    version: "1.1",
-    id: "Icons",
-    viewBox: "0 0 32 32",
-    children: /*#__PURE__*/_jsxs("g", {
-      children: [/*#__PURE__*/_jsx("path", {
-        d: "M29,27H3c-0.6,0-1,0.4-1,1s0.4,1,1,1h26c0.6,0,1-0.4,1-1S29.6,27,29,27z",
-        fill: color || "#64748B"
-      }), /*#__PURE__*/_jsx("path", {
-        d: "M5,24h4c0.6,0,1-0.4,1-1s-0.4-1-1-1H8.6l1.9-4h11.1l1.9,4H23c-0.6,0-1,0.4-1,1s0.4,1,1,1h4c0.6,0,1-0.4,1-1s-0.4-1-1-1   h-1.4L16.9,3.6C16.7,3.2,16.4,3,16,3s-0.7,0.2-0.9,0.6L6.4,22H5c-0.6,0-1,0.4-1,1S4.4,24,5,24z M16,6.3l4.6,9.7h-9.2L16,6.3z"
-      })]
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M5.16796 0C5.16796 0 0 5.92326 0 8.8319C0 12.0176 2.65524 14 5.16796 14C7.83258 14 10.3359 11.9129 10.3359 8.8319C10.3359 5.92326 5.16796 0 5.16796 0ZM8.7402 9.70788C8.45278 11.3396 7.03388 12.0548 5.89918 12.0548C5.80706 12.0543 9.14466 10.6134 7.85834 6.30322C8.53622 7.06776 8.96266 8.4448 8.7402 9.70788Z",
+      fill: "#778599"
     })
   }),
-  bgColor: color => /*#__PURE__*/_jsxs("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24px",
-    height: "24px",
-    viewBox: "0 0 50 50",
+  bgColor: color => /*#__PURE__*/_jsx("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
     fill: "none",
-    children: [/*#__PURE__*/_jsx("rect", {
-      width: "48",
-      height: "48",
-      fill: "white",
-      fillOpacity: "0.01"
-    }), /*#__PURE__*/_jsx("path", {
-      fillRule: "evenodd",
-      clipRule: "evenodd",
-      d: "M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M13.5512 6.73405L6.71385 12.8277C6.30072 13.1996 5.76365 13.3648 5.22658 13.3442C4.6895 13.3235 4.19375 13.0756 3.80127 12.6625L0.516875 8.98561C-0.226762 8.13869 -0.164793 6.83733 0.682127 6.09369L7.51946 0L13.5512 6.7547V6.73405ZM13.3859 8.01475C13.4479 8.26263 11.6095 11.1959 13.138 11.3818C14.9558 11.5883 13.324 7.76687 13.3859 8.01475ZM12.5183 6.67208L7.47814 1.03283L1.19854 6.65142L12.5183 6.69273V6.67208Z",
       fill: "#64748B"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M20.8535 5.50439L24.389 9.03993",
-      stroke: "#64748B",
-      strokeWidth: "4",
-      strokeLinecap: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z",
-      stroke: "#64748B",
-      strokeWidth: "4",
-      strokeLinejoin: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M12 20.0732L28.961 25.6496",
-      stroke: "#64748B",
-      strokeWidth: "4",
-      strokeLinecap: "round"
-    }), /*#__PURE__*/_jsx("path", {
-      d: "M4 43H44",
-      stroke: color || "#FFF",
-      strokeWidth: "4",
-      strokeLinecap: "round"
-    })]
+    })
   })
 };

package/dist/Editor/Elements/Color Picker/Styles.js

@@ -1,5 +1,6 @@
 const ColorPickerStyles = () => ({
   colorButtons: {
+    padding: "0px",
     "& .buttonsWrpr": {
       display: "flex",
       justifyCotnent: "center"
@@ -16,18 +17,18 @@ const ColorPickerStyles = () => ({
       "&:before": {
         content: '" "',
         position: "absolute",
-        top: "-2px",
-        left: "-2px",
-        width: "calc(100% + 4px)",
-        height: "calc(100% + 4px)",
-        border: "3px solid blue",
+        top: "-4px",
+        left: "-4px",
+        width: "calc(100% + 8px)",
+        height: "calc(100% + 8px)",
+        border: "2px solid #2563EB",
         borderRadius: "50%"
       }
     }
   },
   colorButtonsInner: {
     width: "100%",
-    padding: "4px",
+    padding: "0px",
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -46,6 +47,26 @@ const ColorPickerStyles = () => ({
       margin: "0px 4px",
       border: "1px solid #ccc"
     }
+  },
+  colorPickerIcon: {
+    background: "linear-gradient(324.06deg, #7025EB 12.92%, #30C8E9 25.48%, #2967F0 38.81%, #DE1E1E 52.54%, #EECE28 68.51%, #64EA61 86.62%)",
+    position: "relative",
+    padding: "9px",
+    zIndex: 1,
+    "&:before": {
+      content: '" "',
+      position: "absolute",
+      top: "3px",
+      left: "3px",
+      width: "calc(100% - 6px)",
+      height: "calc(100% - 6px)",
+      borderRadius: "50%",
+      background: "#E9F3FE",
+      zIndex: 2
+    },
+    "& svg": {
+      zIndex: 3
+    }
   }
 });
 export default ColorPickerStyles;

package/dist/Editor/Elements/Color Picker/defaultColors.js

@@ -1 +1 @@
-export const colors = ["#000000", "#e60000", "#ff9900", "#ffff00", "#008a00", "#0066cc", "#9933ff", "#ffffff", "#facccc", "#ffebcc", "#ffffcc", "#cce8cc", "#cce0f5", "#ebd6ff", "#bbbbbb", "#f06666", "#ffc266", "#ffff66", "#66b966", "#66a3e0", "#c285ff", "#888888", "#a10000", "#b26b00", "#b2b200", "#006100", "#0047b2", "#6b24b2", "#444444", "#5c0000", "#663d00", "#666600", "#003700", "#002966", "#3d1466", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)"];
+export const colors = ["#292D32", "#578CFF", "#A58CFF", "#46BBFF", "#FFC93A", "#33B24F", "#F06C83", "#64748B", "#82A9FE", "#C4B3FF", "#71CBFF", "#FFD055", "#61D57A", "#FA91A4", "#A2B0B9", "#A4C1FF", "#D7CBFF", "#9FDCFF", "#FFDC80", "#8AE59E", "#FCB0BE", "#E4ECF3", "#CDDCFF", "#E0D7FF", "#BEE7FF", "#FFE49E", "#B9F6C6", "#FDCAD3", "#FFFFFF", "#489FF8", "#FE7A00", "linear-gradient(327.62deg, #EBB9E0 13.53%, #9CEEE5 86.82%)", "linear-gradient(310.6deg, #7FA4F4 15.53%, #805EF5 83.64%)", "linear-gradient(95.19deg, #A831E7 4.17%, #F05339 88.89%)", "linear-gradient(90deg, #3F2AB7 12.5%, #0DC9B5 100%)", "#0F172A", "#2563EB", "#8360FD", "#19A9FC", "#FDB52A", "#0E8E2A", "#E1425E"];

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

@@ -4,10 +4,10 @@ import { Node, Transforms, Editor } from "slate";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import useResize from "../../utils/customHooks/useResize";
 import EmbedPopup from "./EmbedPopup";
-import { IconButton, Tooltip } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import { GridSettingsIcon } from "../../common/iconslist";
-import QuiltedImageList from "../../common/ImageList";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Image = ({
@@ -19,14 +19,11 @@ const Image = ({
   const {
     url,
     alt,
-    images = [],
     bannerSpacing,
     alignment,
     bgColor,
     borderColor,
     borderRadius,
-    cols,
-    rowHeight,
     boxShadow
   } = element;
   const {
@@ -105,15 +102,6 @@ const Image = ({
       at: path
     });
   };
-
-  // const onAddText = () => {
-  //   Transforms.wrapNodes(editor, {
-  //     type: "image-text-wrapper",
-  //     children: [],
-  //   });
-  //   insertImageText(editor, [...path, 1]);
-  // };
-
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
       className: "element-toolbar visible-on-hover",
@@ -128,6 +116,28 @@ const Image = ({
       })
     }) : null;
   };
+  const ImageContent = () => {
+    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+      component: "button",
+      className: "element-empty-btn",
+      onClick: onSettings,
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "video"
+      }), "Add Image"]
+    }) : /*#__PURE__*/_jsx("img", {
+      style: {
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        objectFit: "cover",
+        boxShadow: boxShadow || "none"
+      },
+      alt: alt,
+      src: url,
+      onClick: handleImageClick,
+      "data-path": path.join(","),
+      draggable: false
+    });
+  };
   const totalMinus = (parseInt(left) || 0) + (parseInt(right) || 0);
   const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
   return /*#__PURE__*/_jsxs("div", {
@@ -164,23 +174,7 @@ const Image = ({
         width: `${width}`,
         height: `${size.height}px`
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), images?.length > 1 ? /*#__PURE__*/_jsx(QuiltedImageList, {
-        itemData: images || [],
-        readOnly: true,
-        rowHeight: rowHeight,
-        cols: cols
-      }) : /*#__PURE__*/_jsx("img", {
-        style: {
-          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-          objectFit: "cover",
-          boxShadow: boxShadow || "none"
-        },
-        alt: alt,
-        src: url,
-        onClick: handleImageClick,
-        "data-path": path.join(","),
-        draggable: false
-      }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(ImageContent, {}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           opacity: 1,