@flozy/editor 1.6.6 → 1.6.8

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/Grid/GridItem.js

@@ -32,7 +32,8 @@ const GridItem = props => {
     margin,
     bgColorHover,
     borderColorHover,
-    textColor
+    textColor,
+    animation
   } = element;
   const {
     left,
@@ -126,6 +127,10 @@ const GridItem = props => {
       display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
+      borderColor: borderColor || "transparent",
+      borderWidth: borderWidth || "1px",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
@@ -159,7 +164,7 @@ const GridItem = props => {
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
     }), /*#__PURE__*/_jsx(Box, {
-      className: "gi-inner-cw",
+      className: `gi-inner-cw ${animation || ""}`,
       component: "div",
       "data-path": path.join(","),
       sx: {
@@ -171,10 +176,7 @@ const GridItem = props => {
         paddingBottom: `${bottom}px`,
         justifyContent: vertical,
         height: gridHeight || "100%",
-        borderColor: borderColor || "transparent",
-        borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-        borderStyle: borderStyle || "solid",
+        width: "100%",
         color: textColor || "#000",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -13,8 +13,7 @@ const InlineIcon = props => {
     textColor,
     bannerSpacing,
     borderRadius,
-    borderColor,
-    icon
+    borderColor
   } = element;
   const {
     left,

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/Elements/SimpleText.js

@@ -37,13 +37,11 @@ const SimpleText = props => {
   } = props;
   const {
     readOnly
-  } = props;
+  } = customProps;
   const classes = SimpleTextStyle();
   const editor = useSlateStatic();
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  // const parentPath = Path.parent(path);
-  // const parentNode = Node.get(editor, parentPath);
   const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
   const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
   return /*#__PURE__*/_jsxs(Box, {

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -82,10 +82,10 @@ const TopBanner = props => {
       src: url,
       alt: "Top Banner",
       style: {
-        width: "90%",
+        width: "100%",
         height: "320px",
         objectFit: "cover",
-        borderRadius: "12px",
+        borderRadius: "0px",
         margin: "0px 0px"
       }
     }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {

package/dist/Editor/Elements/TopBanner/TopBannerButton.js

@@ -14,7 +14,6 @@ const TopBannerButton = props => {
   } = props;
   const [open, setOpen] = useState(false);
   const onSelectImage = url => {
-    console.log(url);
     if (url) {
       insertTopBanner(editor, {
         url

package/dist/Editor/Styles/EditorStyles.js

@@ -9,6 +9,7 @@ const editorStyles = ({
     justifyContent: "center"
   },
   slateWrapper: {
+    paddingTop: "0px",
     height: `${window.innerHeight - padHeight}px`,
     width: "100%",
     overflowY: "auto",
@@ -17,7 +18,6 @@ const editorStyles = ({
     flexDirection: "column",
     alignItems: "center",
     "& .max-content": {
-      maxWidth: "1280px",
       width: "100%",
       display: "flex",
       flex: 1,
@@ -30,7 +30,7 @@ const editorStyles = ({
       flex: 1
     },
     "& .editor-wrapper": {
-      maxWidth: "90%",
+      maxWidth: "1440px",
       height: "100%",
       backgroundColor: "#FFF",
       overflow: "visible"

package/dist/Editor/Toolbar/Mini/Styles.js

@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",
-    bottom: "-25px",
+    bottom: "-15px",
     left: 0,
     right: 0,
     margin: "auto",
     border: "1px solid #D8DDE1",
     borderRadius: "22px",
-    width: "200px",
+    width: "fit-content",
     height: "37px",
     zIndex: 1000,
     background: "#FFF",
+    boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
+    padding: "0px 8px",
     "& button": {
       "& svg": {
         stroke: "#64748B"

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
+import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
 import WidthFullIcon from "@mui/icons-material/WidthFull";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";

package/dist/Editor/Toolbar/Toolbar.js

@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
       case "app-header":
         return /*#__PURE__*/_jsx(AppHeaderButton, {
           editor: editor,
-          customProps: customProps
+          customProps: customProps,
+          icoBtnType: icoBtnType
         }, element.id);
       case "form":
         return /*#__PURE__*/_jsx(FormButton, {

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
 }, {
   id: 37,
   format: "appHeader",
-  type: "app-header"
+  type: "app-header",
+  group: "elements"
 }, {
   id: 38,
   format: "form",

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 } 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, {
@@ -77,7 +77,7 @@ const iconList = {
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(IoIosLink, {
+  link: /*#__PURE__*/_jsx(LinkIcon, {
     size: 20
   }),
   // image: <MdImage size={20} />,
@@ -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
   }),
@@ -181,7 +179,9 @@ const iconList = {
   }),
   accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
     size: 20
-  })
+  }),
+  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
+  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
 };
 const Icon = props => {
   const {

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, { useEffect, useState } from "react";
-import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
+import React, { useState } from "react";
+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;