@flozy/editor 1.6.7 → 1.6.8

package/dist/Editor/CommonEditor.js

@@ -125,7 +125,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }));
   }, [id, content]);
   useEffect(() => {
-    if (editorWrapper && editorWrapper?.current && loadedValue !== deboundedValue && isInteracted && onSave) {
+    if (editorWrapper && editorWrapper?.current && JSON.stringify(loadedValue) !== JSON.stringify(deboundedValue) && isInteracted && onSave) {
       const {
         value: strVal,
         ...restVal

package/dist/Editor/Editor.css

@@ -803,25 +803,25 @@ blockquote {
   visibility: hidden;
   opacity: 0;
   transition: all 0.5s;
+  text-align: center;
 }
 
 .uploadImageSection:hover .removeImageText {
   visibility: visible;
   opacity: 1;
+  text-align: center;
 }
 
 .uploadImageText,
 .removeImageText {
-  border: 2px dashed #fff;
-  border-radius: 8px;
-  color: #fff;
-  padding: 2px 8px;
-  background-color: #00000090;
-  font-size: 13px;
-  font-weight: 600;
+  font-size: 16px;
+  font-weight: 400;
+  width: 200px;
   cursor: pointer;
-  display: flex;
-  align-items: center;
+  color:#464646;
+  span {
+    text-transform: capitalize;
+  }
 }
 
 .textFontArrows {

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

@@ -26,7 +26,8 @@ const Image = ({
     borderColor,
     borderRadius,
     cols,
-    rowHeight
+    rowHeight,
+    boxShadow
   } = element;
   const {
     readOnly
@@ -48,16 +49,22 @@ const Image = ({
     horizantal
   } = alignment || {};
   const editor = useSlateStatic();
-  // const selected = useSelected();
   const [parentDOM, setParentDOM] = useState(null);
   const [openSetttings, setOpenSettings] = useState(false);
+  const path = ReactEditor.findPath(editor, element);
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size
+    size: element?.size,
+    onChange: uSize => {
+      Transforms.setNodes(editor, {
+        size: uSize
+      }, {
+        at: path
+      });
+    }
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
-  const path = ReactEditor.findPath(editor, element);
   const {
     hoverPath
   } = useEditorContext();
@@ -69,18 +76,6 @@ const Image = ({
       onLoad(element?.size || {});
     }
   }, []);
-  useEffect(() => {
-    if (!resizing) {
-      onLoad(element?.size || {});
-    }
-  }, [element?.size]);
-  useEffect(() => {
-    if (!resizing) {
-      Transforms.setNodes(editor, {
-        size: size
-      });
-    }
-  }, [resizing]);
   const handleImageClick = () => {
     Transforms.select(editor, {
       anchor: Editor.start(editor, path),
@@ -121,7 +116,7 @@ const Image = ({
 
   const ToolBar = () => {
     return selected ? /*#__PURE__*/_jsx("div", {
-      className: "element-toolbar",
+      className: "element-toolbar visible-on-hover",
       contentEditable: false,
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Image Settings",
@@ -174,7 +169,9 @@ const Image = ({
         cols: cols
       }) : /*#__PURE__*/_jsx("img", {
         style: {
-          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`
+          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+          objectFit: "cover",
+          boxShadow: boxShadow || "none"
         },
         alt: alt,
         src: url,

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

@@ -38,27 +38,27 @@ const Video = ({
     left,
     right
   } = bannerSpacing || {};
+  const path = ReactEditor.findPath(editor, element);
   const [size, onMouseDown, resizing, onLoad] = useResize({
     parentDOM,
-    size: element?.size
+    size: element?.size,
+    onChange: uSize => {
+      Transforms.setNodes(editor, {
+        size: uSize
+      }, {
+        at: path
+      });
+    }
   });
   const arr = Array.from(Node.elements(editor));
   const ele = arr.find(([elem]) => element === elem);
-  const path = ReactEditor.findPath(editor, element);
   useEffect(() => {
     if (editor && ele[1] !== undefined) {
       const dom = ReactEditor.toDOMNode(editor, Node.get(editor, ele[1]));
       setParentDOM(dom);
-      onLoad(dom);
+      onLoad(element?.size || {});
     }
   }, []);
-  useEffect(() => {
-    if (!resizing) {
-      Transforms.setNodes(editor, {
-        size: size
-      });
-    }
-  }, [resizing]);
   const ToolBar = () => {
     return /*#__PURE__*/_jsxs("div", {
       className: "element-toolbar visible-on-hover",
@@ -104,7 +104,7 @@ const Video = ({
     });
   };
   const totalMinus = parseInt(left || 0) + parseInt(right || 0);
-  const width = resizing ? `${size.width}px` : `${size.widthInPercent}%`;
+  const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover",

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

@@ -1,4 +1,4 @@
-import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextField, TextareaAutosize, Tooltip } from "@mui/material";
+import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, Tooltip } from "@mui/material";
 import React, { useState } from "react";
 import FormStyles from "./Styles";
 import Icon from "../../../common/Icon";

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

@@ -6,8 +6,6 @@ import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 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";
 import { GridAddGridIcon, GridAddSectionIcon, GridSettingsIcon } from "../../common/iconslist";
 import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
@@ -34,7 +32,6 @@ const Grid = props => {
     bgColor,
     alignment,
     backgroundImage,
-    // size: elSize,
     fgColor,
     borderWidth,
     borderColor,
@@ -58,47 +55,14 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
-  // const { height: elHeight } = elSize || {};
   const editor = useSlateStatic();
-  // const selected = useSelected();
-  // const [selected, setSelected] = useState(false);
   const path = ReactEditor.findPath(editor, element);
-  const [parentDOM, setParentDOM] = useState(null);
-  // resize
-  const [size,, resizing, onLoad] = useResize({
-    parentDOM,
-    size: element?.size,
-    isGrid: true
-  });
   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]));
-      const {
-        height
-      } = dom?.getBoundingClientRect();
-      setParentDOM(dom);
-      onLoad(element?.size || {
-        height: height
-      });
-    }
-  }, []);
-
-  // upadate resize data once resize done
-  useEffect(() => {
-    if (!resizing) {
-      Transforms.setNodes(editor, {
-        size: size
-      }, {
-        at: path
-      });
-    }
-  }, [resizing]);
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -209,41 +173,6 @@ const Grid = props => {
       console.log(err);
     }
   };
-
-  // const onDrop = (dropElement) => {
-  //   try {
-  //     Transforms.insertNodes(editor, JSON.parse(dropElement), {
-  //       at: path,
-  //       select: true,
-  //     });
-  //   } catch (err) {
-  //     console.log(err);
-  //   }
-  // };
-
-  // const onDragEnd = () => {
-  //   try {
-  //     const currentDelpath = ReactEditor.findPath(editor, element);
-  //     if (currentDelpath) {
-  //       Transforms.removeNodes(editor, { at: currentDelpath });
-  //     }
-  //   } catch (err) {
-  //     console.log(err);
-  //   }
-  // };
-
-  // const grid_drag_id = `grid_drag_${path.join("_")}`;
-
-  // const [dndElements, isDragging, isActiveDrag] = useDragAndDrop({
-  //   editor,
-  //   id: grid_drag_id,
-  //   selected,
-  //   path,
-  //   element,
-  //   onDragEnd,
-  //   onDrop,
-  // });
-
   const NewLineButtons = () => {
     return !readOnly && selected && path.length === 2 ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx("div", {
@@ -380,14 +309,7 @@ const Grid = props => {
         justifyContent: horizantal || "start",
         flexDirection: flexDirection || "row",
         width: "100%"
-        // height cause overlap issues TBD
-        // height: resizing
-        //   ? `${size?.height}px`
-        //   : elHeight
-        //   ? `${elHeight}px`
-        //   : "fit-content",
       },
-
       "data-path": path.join(","),
       children: children
     }), /*#__PURE__*/_jsx(NewLineButtons, {})]

package/dist/Editor/Elements/Signature/Signed.js

@@ -27,7 +27,17 @@ const Signed = props => {
   };
   const onDelete = () => {
     const path = ReactEditor.findPath(editor, element);
-    Transforms.removeNodes(editor, {
+    Transforms.setNodes(editor, {
+      type: "signature",
+      signature: null,
+      fontFamily: "",
+      signedBy: "",
+      signedOn: formatDate(new Date(), "MM/DD/YYYY"),
+      signedText: "",
+      children: [{
+        text: ""
+      }]
+    }, {
       at: path
     });
   };

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal, UploadImage } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -170,9 +170,7 @@ const iconList = {
     size: 20,
     fill: "#64748B"
   }),
-  fileUpload: /*#__PURE__*/_jsx(MdOutlineFileUpload, {
-    size: 20
-  }),
+  fileUpload: /*#__PURE__*/_jsx(UploadImage, {}),
   media: /*#__PURE__*/_jsx(MdOutlinePermMedia, {
     size: 20
   }),

package/dist/Editor/common/ImageList.js

@@ -30,12 +30,10 @@ const QuiltedImageList = props => {
       width: "100%",
       height: "100%"
     },
-    variant: "quilted",
-    cols: cols || 4,
-    rowHeight: rowHeight || 121,
-    style: {
-      marginTop: "0px"
-    },
+    cols: cols
+    // rowHeight={rowHeight || 121}
+    // style={{ marginTop: "0px" }}
+    ,
     children: [UploaderComp ? /*#__PURE__*/_jsx(ImageListItem, {
       className: "img_upload_btn_list",
       cols: 2,
@@ -47,8 +45,6 @@ const QuiltedImageList = props => {
     }, `img_upload_btn`) : null, (itemData || []).map(item => {
       const isSelected = (selected || []).find(f => f.img === item.img);
       return /*#__PURE__*/_jsxs(ImageListItem, {
-        cols: item.cols || 1,
-        rows: item.rows || 1,
         children: [/*#__PURE__*/_jsx("img", {
           ...srcset(item.img, rowHeight || 121, item.rows, item.cols),
           alt: item.title,

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
+import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography, Divider } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";
 import AddLink from "./Options/AddLink";
@@ -28,6 +28,7 @@ const ImageSelector = props => {
     setTabValue(newValue);
   };
   const onUploaded = url => {
+    console.log(url);
     setImage(url);
   };
   const onSave = () => {
@@ -42,25 +43,15 @@ const ImageSelector = props => {
     sx: classes.dialogWrapper,
     children: [/*#__PURE__*/_jsx(DialogTitle, {
       children: /*#__PURE__*/_jsxs(Typography, {
-        variant: "body1",
         sx: {
           fontSize: "16px",
-          fontWeight: 600
+          fontWeight: 500
         },
         children: ["Add ", title]
       })
-    }), /*#__PURE__*/_jsx(DialogContent, {
-      style: {
-        background: "#F0F5FA",
-        padding: "0px"
-      },
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsx(DialogContent, {
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
-        spacing: 0,
-        style: {
-          width: "100%",
-          padding: "8px"
-        },
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           xs: 4,
@@ -70,15 +61,6 @@ const ImageSelector = props => {
             orientation: "vertical",
             value: tabValue,
             children: [/*#__PURE__*/_jsx(Tab, {
-              className: `${isActive("addLink")}`,
-              sx: classes.tab,
-              icon: /*#__PURE__*/_jsx(Icon, {
-                icon: "link"
-              }),
-              iconPosition: "start",
-              value: "addLink",
-              label: `Add ${title} Link`
-            }), /*#__PURE__*/_jsx(Tab, {
               className: `${isActive("upload")} ${title !== "Image" ? "hidden" : ""}`,
               sx: classes.tab,
               icon: /*#__PURE__*/_jsx(Icon, {
@@ -96,6 +78,15 @@ const ImageSelector = props => {
               iconPosition: "start",
               value: "choose",
               label: "Choose Media"
+            }), /*#__PURE__*/_jsx(Tab, {
+              className: `${isActive("addLink")}`,
+              sx: classes.tab,
+              icon: /*#__PURE__*/_jsx(Icon, {
+                icon: "link"
+              }),
+              iconPosition: "start",
+              value: "addLink",
+              label: `Add ${title} Link`
             })]
           })
         }), /*#__PURE__*/_jsx(Grid, {
@@ -104,28 +95,24 @@ const ImageSelector = props => {
           sx: classes.imsRightWrpr,
           children: /*#__PURE__*/_jsx(Comp, {
             ...props,
+            classes: classes,
             onUploaded: onUploaded
           })
         })]
       })
-    }), /*#__PURE__*/_jsxs(DialogActions, {
+    }), /*#__PURE__*/_jsx(Divider, {}), /*#__PURE__*/_jsxs(DialogActions, {
       sx: {
         p: 2
       },
       children: [/*#__PURE__*/_jsx(Button, {
         onClick: onClose,
         variant: "outlined",
-        color: "secondary",
-        className: "secondaryBtn",
+        sx: classes.closeBtn,
         children: "Cancel"
       }), /*#__PURE__*/_jsx(Button, {
         onClick: onSave,
         variant: "contained",
-        color: "primary",
-        className: " primaryBtn",
-        sx: {
-          ml: 0
-        },
+        sx: classes.saveBtn,
         children: "Save"
       })]
     })]

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

@@ -4,6 +4,7 @@ import CheckIcon from "@mui/icons-material/Check";
 import { jsx as _jsx } from "react/jsx-runtime";
 const AddLink = props => {
   const {
+    classes,
     onUploaded,
     title
   } = props;
@@ -25,11 +26,13 @@ const AddLink = props => {
       value: url,
       onChange: handleChange,
       helperText: "Click Check Icon and Save...",
+      sx: classes.addLinkField,
       InputProps: {
         endAdornment: /*#__PURE__*/_jsx(Tooltip, {
-          title: `Add ${Image} URL`,
+          title: `Add ${title} URL`,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
+            sx: classes.addLinkBtn,
             onClick: handleSave,
             children: /*#__PURE__*/_jsx(CheckIcon, {})
           })

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

@@ -4,6 +4,7 @@ import Uploader from "../../Uploader";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Upload = props => {
   const {
+    classes,
     value,
     onUploaded,
     customProps,
@@ -15,8 +16,12 @@ const Upload = props => {
   return /*#__PURE__*/_jsx(Grid, {
     item: true,
     xs: 12,
+    sx: {
+      padding: 0
+    },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {
+      classes: classes,
       value: value,
       data: {
         key: "url"

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

@@ -2,17 +2,24 @@ const ImageSelectorStyles = () => ({
   root: {},
   tabs: {
     "& button": {
-      fontSize: "14px",
+      fontSize: "12px",
+      fontWeight: "500",
       textTransform: "capitalize",
-      padding: "12px",
-      alignItems: "start",
-      justifyContent: "start",
-      minHeight: "auto",
+      minHeight: '40px',
+      padding: '10px',
+      marginRight: '24px',
       "&.hidden": {
         display: "none"
       },
       "&.active": {
-        backgroundColor: "#FFF"
+        backgroundColor: "#FFF",
+        border: '1px solid #2563EB',
+        borderRadius: '7px',
+        '& svg': {
+          '& path': {
+            stroke: '#2563EB'
+          }
+        }
       },
       "&:hover": {
         backgroundColor: "#ECECEC"
@@ -24,7 +31,7 @@ const ImageSelectorStyles = () => ({
       }
     },
     "& .MuiTabs-indicator": {
-      left: 0
+      display: 'none'
     }
   },
   tab: {},
@@ -32,12 +39,15 @@ const ImageSelectorStyles = () => ({
     height: "300px",
     overflow: "auto",
     backgroundColor: "#fff",
-    padding: "8px",
+    padding: "0 8px",
     "& .MuiFormHelperText-root": {
       marginLeft: "0px"
     }
   },
   dialogWrapper: {
+    '& .MuiDialog-paper': {
+      borderRadius: '12px'
+    },
     "& .primaryBtn": {
       background: "#2563eb !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
@@ -62,6 +72,55 @@ const ImageSelectorStyles = () => ({
       width: "auto !important",
       marginRight: "8px !important"
     }
+  },
+  addLinkField: {
+    "& .MuiOutlinedInput-input": {
+      fontSize: '12px',
+      fontWeight: 500
+    },
+    '& .MuiOutlinedInput-root': {
+      boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)',
+      borderRadius: '7px',
+      '& fieldset': {
+        borderColor: '#D8DDE1'
+      },
+      '&:hover fieldset': {
+        borderColor: '#64748B'
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: '#2563EB'
+      },
+      '& .MuiFormLabel-root': {}
+    }
+  },
+  addLinkBtn: {
+    borderRadius: '5px',
+    background: "#E7EDF7",
+    width: '20px',
+    height: '20px',
+    '& svg': {
+      width: '16px',
+      height: '16px'
+    }
+  },
+  closeBtn: {
+    background: '#F4F6F9',
+    color: '#64748B',
+    fontSize: '14px',
+    fontWeight: 500,
+    padding: '4px 22px',
+    textTransform: 'none',
+    border: '1px solid #D8DDE1',
+    '&:hover': {
+      border: '1px solid #64748B'
+    }
+  },
+  saveBtn: {
+    background: '#2563EB',
+    fontSize: '14px',
+    fontWeight: 500,
+    padding: '4px 24px',
+    textTransform: 'none'
   }
 });
 export default ImageSelectorStyles;

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

@@ -0,0 +1,27 @@
+const UploadStyles = () => ({
+  uploadContainer: {
+    border: '1px solid #2563EB',
+    padding: '10px',
+    borderRadius: "7px",
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.16)'
+  },
+  uploadField: {
+    width: "100%",
+    backgroundSize: "contain",
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    height: "250px",
+    position: "relative",
+    backgroundColor: "#EFF4FF",
+    borderRadius: "9px",
+    border: '1px dashed #2563EB'
+  },
+  uploadIcon: {
+    '& svg': {
+      '& path': {
+        stroke: '#2563EB'
+      }
+    }
+  }
+});
+export default UploadStyles;

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

@@ -11,19 +11,24 @@ const embedImageStyle = [{
     key: "url",
     type: "backgroundImage"
   }]
-}, {
-  tab: "Image List Settings",
-  value: "imageListSettings",
-  fields: [{
-    label: "Image List Columns",
-    key: "cols",
-    type: "text"
-  }, {
-    label: "Row Height",
-    key: "rowHeight",
-    type: "text"
-  }]
-}, {
+},
+// {
+//   tab: "Image List Settings",
+//   value: "imageListSettings",
+//   fields: [
+//     {
+//       label: "Image List Columns",
+//       key: "cols",
+//       type: "text",
+//     },
+//     {
+//       label: "Row Height",
+//       key: "rowHeight",
+//       type: "text",
+//     },
+//   ],
+// },
+{
   tab: "Banner Spacing",
   value: "bannerSpacing",
   fields: [{
@@ -63,6 +68,11 @@ const embedImageStyle = [{
     label: "Border Color",
     key: "borderColor",
     type: "color"
+  }, {
+    label: "Box Shadow",
+    key: "boxShadow",
+    type: "text",
+    placeholder: "Enter Box Shadow Code"
   }]
 }, {
   tab: "Size",

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { Grid, Button, Typography } from "@mui/material";
-import { UploadBtnIcon } from "../../iconslist";
 import ImageSelector from "../../ImageSelector/ImageSelector";
+import UploadStyles from "../../ImageSelector/UploadStyles";
+import Icon from "../../Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BackgroundImage = props => {
@@ -16,6 +17,7 @@ const BackgroundImage = props => {
   } = data;
   const [base64, setBase64] = useState(value);
   const [open, setOpen] = useState(false);
+  const classes = UploadStyles();
   const onRemoveBG = () => {
     setBase64(null);
     onChange({
@@ -36,7 +38,7 @@ const BackgroundImage = props => {
     handleClose();
   };
   return /*#__PURE__*/_jsxs(Grid, {
-    container: true,
+    item: true,
     children: [/*#__PURE__*/_jsx(Typography, {
       variant: "body1",
       color: "primary",
@@ -47,42 +49,41 @@ const BackgroundImage = props => {
       },
       children: "Upload Image"
     }), /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      style: {
-        position: "relative",
-        marginTop: "12px",
-        marginBottom: "12px",
-        width: "100%",
-        backgroundImage: base64 ? `url(${base64})` : "none",
-        height: "200px",
-        borderRadius: "10px",
-        backgroundPosition: "center",
-        backgroundSize: "contain",
-        backgroundRepeat: "no-repeat",
-        backgroundColor: "rgba(0,0,0,0.5)"
-      },
+      container: true,
+      sx: classes.uploadContainer,
       children: /*#__PURE__*/_jsx(Grid, {
-        className: "uploadImageSection",
-        children: base64 ? /*#__PURE__*/_jsx(Grid, {
-          className: "removeImageText",
-          onClick: onRemoveBG,
-          children: "REMOVE"
-        }) : /*#__PURE__*/_jsx(Grid, {
-          className: "uploadImageText",
-          children: /*#__PURE__*/_jsxs(Button, {
-            component: "label",
-            variant: "contained",
-            style: {
-              background: "none"
-            },
-            onClick: handleClick,
-            children: [/*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+        item: true,
+        xs: 12,
+        style: {
+          backgroundImage: base64 ? `url(${base64})` : "none",
+          height: "200px"
+        },
+        sx: classes.uploadField,
+        children: /*#__PURE__*/_jsx(Grid, {
+          className: "uploadImageSection",
+          children: base64 ? /*#__PURE__*/_jsx(Grid, {
+            className: "removeImageText",
+            onClick: onRemoveBG,
+            children: "REMOVE"
+          }) : /*#__PURE__*/_jsx(Grid, {
+            className: "uploadImageText",
+            children: /*#__PURE__*/_jsxs(Button, {
+              component: "label",
+              variant: "text",
               style: {
-                paddingLeft: "8px"
+                background: "none"
               },
-              children: "UPLOAD"
-            })]
+              onClick: handleClick,
+              sx: classes.uploadIcon,
+              children: [/*#__PURE__*/_jsx(Icon, {
+                icon: "fileUpload"
+              }), /*#__PURE__*/_jsx("span", {
+                style: {
+                  paddingLeft: "8px"
+                },
+                children: "upload your image"
+              })]
+            })
           })
         })
       })

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

@@ -125,7 +125,7 @@ const StyleBuilder = props => {
     open: true,
     className: ` dialogComp tools-drawer`,
     anchor: "right",
-    hideBackdrop: true,
+    onClose: onClose,
     children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,

package/dist/Editor/common/Uploader.js

@@ -2,7 +2,8 @@ import React, { useState } from "react";
 import { Grid, Button } from "@mui/material";
 import { convertBase64 } from "../utils/helper";
 import { uploadFile } from "../service/fileupload";
-import { UploadBtnIcon } from "./iconslist";
+import Icon from "./Icon";
+import UploadStyles from "../common/ImageSelector/UploadStyles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Uploader = props => {
@@ -12,6 +13,7 @@ const Uploader = props => {
     onUploaded,
     customProps
   } = props;
+  const classes = UploadStyles();
   const {
     key
   } = data;
@@ -33,22 +35,16 @@ const Uploader = props => {
     const result = await uploadFile(formData, customProps);
     setUploading(false);
     if (result && result?.imageURL) {
-      onUploaded({
-        [key]: result?.imageURL
-      });
+      onUploaded(result?.imageURL[0]);
     }
   };
   const onRemoveBG = () => {
     setBase64(null);
-    onUploaded({
-      [key]: "none"
-    });
+    onUploaded("none");
   };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    sx: {
-      pt: 1
-    },
+    sx: classes.uploadContainer,
     children: [/*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
@@ -58,17 +54,9 @@ const Uploader = props => {
       xs: 12,
       className: "btn--wrpr",
       style: {
-        marginTop: "12px",
-        width: "100%",
-        backgroundImage: base64 ? `url(${base64})` : "none",
-        backgroundSize: "contain",
-        backgroundRepeat: "no-repeat",
-        backgroundPosition: "center",
-        height: "200px",
-        position: "relative",
-        backgroundColor: "rgba(0,0,0,0.5)",
-        borderRadius: "10px"
+        backgroundImage: base64 ? `url(${base64})` : "none"
       },
+      sx: classes.uploadField,
       children: !uploading ? /*#__PURE__*/_jsx(Grid, {
         className: "uploadImageSection",
         children: base64 ? /*#__PURE__*/_jsx(Grid, {
@@ -79,10 +67,11 @@ const Uploader = props => {
           className: "uploadImageText",
           children: /*#__PURE__*/_jsxs(Button, {
             component: "label",
-            variant: "contained",
+            variant: "text",
             style: {
               background: "none"
             },
+            sx: classes.uploadIcon,
             children: [/*#__PURE__*/_jsx("input", {
               type: "file",
               style: {
@@ -90,11 +79,13 @@ const Uploader = props => {
                 width: "0px"
               },
               onChange: handleChange
-            }), /*#__PURE__*/_jsx(UploadBtnIcon, {}), /*#__PURE__*/_jsx("span", {
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: "fileUpload"
+            }), /*#__PURE__*/_jsx("span", {
               style: {
                 paddingLeft: "8px"
               },
-              children: "UPLOAD"
+              children: "upload your image"
             })]
           })
         })

package/dist/Editor/common/iconslist.js

@@ -1517,4 +1517,16 @@ export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
     strokeLinecap: "round",
     strokeLinejoin: "round"
   })]
+});
+export const UploadImage = () => /*#__PURE__*/_jsx("svg", {
+  width: "38",
+  height: "32",
+  viewBox: "0 0 38 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M29.8163 9.58251L29.8806 9.91219L30.2101 9.97734C34.3518 10.7964 37.5 14.4866 37.5 18.9474C37.5 24.0138 33.4469 28.1316 28.5 28.1316H23.9565V28.1315L23.9493 28.1316C23.8527 28.133 23.7566 28.1148 23.6665 28.0779C23.5763 28.041 23.4936 27.9859 23.4234 27.9153C23.3532 27.8448 23.2969 27.7601 23.2583 27.6661C23.2197 27.5721 23.1997 27.4709 23.1997 27.3684C23.1997 27.2659 23.2197 27.1647 23.2583 27.0707C23.2969 26.9767 23.3532 26.8921 23.4234 26.8215C23.4936 26.751 23.5763 26.6959 23.6665 26.6589C23.7566 26.622 23.8527 26.6038 23.9493 26.6052V26.6053H23.9565H28.5C32.6778 26.6053 36.0217 23.1825 36.0217 18.9474C36.0217 14.9479 33.0358 11.6747 29.1933 11.3181C29.0288 11.3014 28.8731 11.2281 28.7524 11.1079C28.6315 10.9874 28.553 10.8271 28.532 10.6527C28.2917 8.54527 27.3763 6.49581 25.7849 4.87354L25.428 5.22368L25.7849 4.87354C23.908 2.9603 21.4566 2.02632 19 2.02632C16.5427 2.02632 14.1061 2.95891 12.228 4.87355C10.0597 7.08383 9.14397 10.0853 9.48097 12.9531L9.48133 12.956C9.49474 13.0646 9.48534 13.1749 9.45388 13.2793C9.42242 13.3836 9.36977 13.4793 9.29996 13.5602C9.23016 13.6411 9.1449 13.7053 9.05021 13.7491C8.95574 13.7928 8.85366 13.8154 8.75058 13.8158H8.26087C4.75072 13.8158 1.97826 16.6559 1.97826 20.2105C1.97826 23.7651 4.75072 26.6053 8.26087 26.6053H14.0435V26.6053L14.0507 26.6052C14.1473 26.6038 14.2434 26.622 14.3335 26.6589C14.4237 26.6959 14.5064 26.751 14.5766 26.8215C14.6468 26.8921 14.7031 26.9767 14.7417 27.0707C14.7803 27.1647 14.8003 27.2659 14.8003 27.3684C14.8003 27.4709 14.7803 27.5721 14.7417 27.6661C14.7031 27.7601 14.6468 27.8448 14.5766 27.9153C14.5064 27.9859 14.4237 28.041 14.3335 28.0779C14.2434 28.1148 14.1473 28.133 14.0507 28.1316L14.0507 28.1316H14.0435H8.26087C3.99094 28.1316 0.5 24.5869 0.5 20.2105C0.5 16.0852 3.61641 12.7343 7.55871 12.3663L8.01514 12.3236L8.01222 11.8652C7.99355 8.93435 9.01416 6.01183 11.1864 3.79752L11.1864 3.7975C13.3418 1.60027 16.1735 0.5 19 0.5C21.8271 0.5 24.6696 1.59883 26.8265 3.79751L27.1834 3.44737L26.8265 3.79752C28.4274 5.42941 29.4021 7.45776 29.8163 9.58251ZM19.498 15.0104L19.4991 15.0115L24.0388 19.2184C24.0393 19.2189 24.0399 19.2194 24.0404 19.2199C24.3569 19.521 24.3533 20.0152 24.088 20.3106C23.838 20.5888 23.3218 20.6127 23.0442 20.3568C23.0441 20.3566 23.0439 20.3565 23.0438 20.3564L20.5794 18.0678L19.7391 17.2875V18.4342V30.7368C19.7391 31.1674 19.3993 31.5 19 31.5C18.6007 31.5 18.2609 31.1674 18.2609 30.7368V18.4342V17.2875L17.4206 18.0678L14.9562 20.3564C14.9561 20.3565 14.956 20.3566 14.9558 20.3568C14.6953 20.5969 14.1897 20.5869 13.8934 20.291C13.6373 20.0351 13.6548 19.5086 13.9591 19.2204C13.9595 19.22 13.96 19.2196 13.9604 19.2191L18.5009 15.0115L18.5022 15.0102C18.609 14.9106 18.6645 14.875 18.7115 14.8552C18.7568 14.8362 18.833 14.8158 19 14.8158C19.1494 14.8158 19.2369 14.8398 19.2955 14.8655C19.3563 14.8922 19.4156 14.9336 19.498 15.0104Z",
+    fill: "#64748B",
+    stroke: "#64748B"
+  })
 });

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

@@ -2,7 +2,8 @@ import { useState } from "react";
 const useResize = ({
   parentDOM,
   size: defaultSize,
-  isGrid
+  isGrid,
+  onChange
 }) => {
   const {
     width,
@@ -16,6 +17,9 @@ const useResize = ({
     ...defaultSize
   });
   const [resizing, setResizing] = useState(false);
+  let latest = {
+    ...size
+  };
   const onLoad = defaultSize => {
     setSize({
       widthInPercent: 100,
@@ -31,16 +35,21 @@ const useResize = ({
   const onMouseUp = () => {
     document.removeEventListener("pointermove", onMouseMove);
     document.removeEventListener("pointerup", onMouseUp);
+    if (onChange) {
+      onChange(latest);
+    }
     setResizing(false);
   };
   const onMouseMove = e => {
     setSize(currentSize => {
       const calcWidth = (currentSize.width || width) + e.movementX;
-      return {
+      const calc = {
         width: calcWidth,
-        height: (currentSize.height || height) + e.movementY,
+        height: (parseInt(currentSize.height) || height) + e.movementY,
         widthInPercent: calcWidth / width * 100
       };
+      latest = calc;
+      return calc;
     });
   };
   return [size, onMouseDown, resizing, onLoad];

package/dist/Editor/utils/embed.js

@@ -20,8 +20,8 @@ export const createEmbedNode = (type, {
     text: " "
   }],
   size: {
-    widthInPercent: "100%",
-    height: "auto"
+    widthInPercent: "100",
+    height: type === "image" ? "auto" : 300
   },
   alignment: {
     horizantal: "center"

package/package.json

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