@flozy/editor 1.6.7 → 1.6.9

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
@@ -410,8 +410,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                       className: `editor-wrapper ${pageWidth === "fixed" ? "fixed" : "full"}`,
                       style: {
                         backgroundColor: "transparent",
-                        paddingLeft: `${bannerSpacing?.left || 12}px`,
-                        paddingRight: `${bannerSpacing?.right || 12}px`,
+                        paddingLeft: `${bannerSpacing?.left || 0}px`,
+                        paddingRight: `${bannerSpacing?.right || 0}px`,
                         paddingTop: `${bannerSpacing?.top}px`,
                         paddingBottom: `${bannerSpacing?.bottom}px`,
                         width: !pageWidth || pageWidth === "fixed" ? fixedWidth : fullWidth,

package/dist/Editor/Editor.css

@@ -494,6 +494,12 @@ blockquote {
   .form-btn-wrpr {
     justify-content: center !important;
   }
+  .section-wrapper-fluid .grid-container {
+    width: 100% !important;
+  }
+  .app-drawer-btn {
+    color: #000;
+  }
 }
 
 .editorTabs {
@@ -803,25 +809,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/AppHeader/AppHeader.js

@@ -215,10 +215,14 @@ function AppHeader(props) {
               paddingRight: "0px"
             },
             children: [/*#__PURE__*/_jsx(IconButton, {
+              className: "app-drawer-btn",
               color: "inherit",
               "aria-label": "open drawer",
               edge: "start",
               onClick: handleDrawerToggle,
+              style: {
+                color: textColor
+              },
               sx: {
                 mr: 2,
                 display: {
@@ -262,10 +266,14 @@ function AppHeader(props) {
                 }
               },
               children: [isDrawer ? /*#__PURE__*/_jsx(IconButton, {
+                className: "app-drawer-btn",
                 color: "inherit",
                 "aria-label": "open drawer",
                 edge: "start",
                 onClick: handleDrawerToggle,
+                style: {
+                  color: textColor
+                },
                 children: /*#__PURE__*/_jsx(MenuIcon, {})
               }) : null, !isDrawer ? menus.map((item, i) => /*#__PURE__*/_jsx(Button, {
                 component: "a",

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
-import { IconButton, Menu, MenuItem, Tooltip, Box } from "@mui/material";
+import { IconButton, Tooltip, Box } from "@mui/material";
 import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
@@ -24,7 +24,6 @@ const EditorButton = props => {
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const [edit, setEdit] = useState(false);
-  const [anchorEl, setAnchorEl] = useState(null);
   const {
     label,
     bgColor,
@@ -80,13 +79,8 @@ const EditorButton = props => {
         const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
         window.open(refUrl, "_blank").focus();
       }
-    } else {
-      setAnchorEl(e.currentTarget);
     }
   };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
   const onMenuClick = val => () => {
     switch (val) {
       case "open":
@@ -105,6 +99,36 @@ const EditorButton = props => {
         return;
     }
   };
+  const Toolbar = () => {
+    return !readOnly ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      style: {
+        width: "max-content"
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Settings",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("edit"),
+          children: /*#__PURE__*/_jsx(SettingsIcon, {})
+        })
+      }), /*#__PURE__*/_jsxs(Tooltip, {
+        title: "Open Link",
+        arrow: true,
+        children: [/*#__PURE__*/_jsx(IconButton, {
+          onClick: onMenuClick("open"),
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        }), /*#__PURE__*/_jsx(Tooltip, {
+          title: "Delete",
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            onClick: onMenuClick("delete"),
+            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          })
+        })]
+      })]
+    }) : null;
+  };
   const onSave = data => {
     const updateData = {
       ...data
@@ -152,9 +176,16 @@ const EditorButton = props => {
           fontFamily: fontFamily || "PoppinsRegular",
           display: "inline-flex",
           alignItems: "center",
+          position: "relative",
+          "& .element-toolbar": {
+            display: "none"
+          },
           "&:hover": {
             color: `${textColorHover || textColor || "#FFFFFF"}`,
-            background: bgColorHover || bgColor || "rgb(30, 75, 122)"
+            background: bgColorHover || bgColor || "rgb(30, 75, 122)",
+            "& .element-toolbar": {
+              display: "block"
+            }
           }
         },
         onClick: onClick,
@@ -168,7 +199,7 @@ const EditorButton = props => {
             paddingLeft: "4px",
             paddingRight: "4px"
           }
-        })]
+        }), /*#__PURE__*/_jsx(Toolbar, {})]
       })
     }), /*#__PURE__*/_jsx("div", {
       contentEditable: false,
@@ -176,39 +207,6 @@ const EditorButton = props => {
         display: "inline"
       },
       children: children
-    }), /*#__PURE__*/_jsxs(Menu, {
-      className: "editor-btn-options",
-      open: anchorEl !== null,
-      anchorEl: anchorEl,
-      onClose: handleClose,
-      children: [!readOnly && /*#__PURE__*/_jsx(MenuItem, {
-        onClick: onMenuClick("edit"),
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          title: "Settings",
-          arrow: true,
-          children: /*#__PURE__*/_jsx(IconButton, {
-            children: /*#__PURE__*/_jsx(SettingsIcon, {})
-          })
-        })
-      }), /*#__PURE__*/_jsx(MenuItem, {
-        title: "Open Link",
-        arrow: true,
-        onClick: onMenuClick("open"),
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
-          })
-        })
-      }), !readOnly && /*#__PURE__*/_jsx(MenuItem, {
-        title: "Delete",
-        arrow: true,
-        onClick: onMenuClick("delete"),
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          children: /*#__PURE__*/_jsx(IconButton, {
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
-          })
-        })
-      })]
     }), edit && /*#__PURE__*/_jsx(ButtonPopup, {
       element: element,
       onSave: onSave,

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,12 +169,15 @@ 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,
         onClick: handleImageClick,
-        "data-path": path.join(",")
+        "data-path": path.join(","),
+        draggable: false
       }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {

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", {
@@ -319,78 +248,85 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
-  return /*#__PURE__*/_jsxs(GridContainer, {
-    container: true,
-    className: `grid-container ${grid} has-hover element-root`,
-    ...attributes,
-    ...sectionId,
+  return /*#__PURE__*/_jsx("section", {
+    className: "section-wrapper-fluid",
     style: {
+      display: "flex",
+      width: "100%",
       background: bgColor,
-      alignContent: vertical,
       ...bgImage,
-      borderColor: borderColor || "transparent",
-      borderWidth: borderWidth || "1px",
-      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-      borderStyle: borderStyle || "solid"
+      backgroundSize: "cover",
+      justifyContent: "center",
+      alignItems: "center"
     },
-    "data-path": path.join(","),
-    children: [fgColor && /*#__PURE__*/_jsx("div", {
+    children: /*#__PURE__*/_jsxs(GridContainer, {
+      container: true,
+      className: `grid-container ${grid} has-hover element-root`,
+      ...attributes,
+      ...sectionId,
       style: {
-        position: "absolute",
-        pointerEvents: "none",
-        width: "100%",
-        height: "100%",
-        background: fgColor,
-        backgroundRepeat: "no-repeat",
-        backgroundSize: "cover"
-      }
-    }), !readOnly && /*#__PURE__*/_jsxs("div", {
-      className: `element-selector ${selected ? "selected" : ""}`,
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots tr",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots bl",
-        children: " "
-      }), /*#__PURE__*/_jsx("div", {
-        className: "element-selector-dots br",
-        children: " "
-      }), /*#__PURE__*/_jsx(GridToolBar, {})]
-    }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
-      element: element,
-      onSave: onSave,
-      onClose: onClose,
-      onDelete: onDelete,
-      customProps: customProps
-    }) : null, /*#__PURE__*/_jsx(GridContainer, {
-      item: true,
-      xs: 12,
-      className: "grid-c-wrpr",
-      style: {
-        display: "flex",
-        paddingLeft: `${left}px`,
-        paddingRight: `${right}px`,
-        paddingTop: `${top}px`,
-        paddingBottom: `${bottom}px`,
-        alignItems: vertical || "start",
-        justifyContent: horizantal || "start",
-        flexDirection: flexDirection || "row",
-        width: "100%"
-        // height cause overlap issues TBD
-        // height: resizing
-        //   ? `${size?.height}px`
-        //   : elHeight
-        //   ? `${elHeight}px`
-        //   : "fit-content",
+        // background: bgColor,
+        alignContent: vertical,
+        // ...bgImage,
+        borderColor: borderColor || "transparent",
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid",
+        maxWidth: "1440px",
+        width: "80%"
       },
-
       "data-path": path.join(","),
-      children: children
-    }), /*#__PURE__*/_jsx(NewLineButtons, {})]
+      children: [fgColor && /*#__PURE__*/_jsx("div", {
+        style: {
+          position: "absolute",
+          pointerEvents: "none",
+          width: "100%",
+          height: "100%",
+          background: fgColor,
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover"
+        }
+      }), !readOnly && /*#__PURE__*/_jsxs("div", {
+        className: `element-selector ${selected ? "selected" : ""}`,
+        contentEditable: false,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots tr",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots bl",
+          children: " "
+        }), /*#__PURE__*/_jsx("div", {
+          className: "element-selector-dots br",
+          children: " "
+        }), /*#__PURE__*/_jsx(GridToolBar, {})]
+      }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
+        element: element,
+        onSave: onSave,
+        onClose: onClose,
+        onDelete: onDelete,
+        customProps: customProps
+      }) : null, /*#__PURE__*/_jsx(GridContainer, {
+        item: true,
+        xs: 12,
+        className: "grid-c-wrpr",
+        style: {
+          display: "flex",
+          paddingLeft: `${left}px`,
+          paddingRight: `${right}px`,
+          paddingTop: `${top}px`,
+          paddingBottom: `${bottom}px`,
+          alignItems: vertical || "start",
+          justifyContent: horizantal || "start",
+          flexDirection: flexDirection || "row",
+          width: "100%"
+        },
+        "data-path": path.join(","),
+        children: children
+      }), /*#__PURE__*/_jsx(NewLineButtons, {})]
+    })
   });
 };
 export default Grid;

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

@@ -26,6 +26,17 @@ const SimpleTextStyle = () => ({
         fontSize: "12px"
       }
     }
+  },
+  section: {
+    display: "flex",
+    width: "100%",
+    backgroundSize: "cover",
+    justifyContent: "center",
+    alignItems: "center",
+    "& .simple-text": {
+      width: "80%",
+      maxWidth: "1440px"
+    }
   }
 });
 const SimpleText = props => {

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

@@ -73,7 +73,7 @@ const TopBanner = props => {
     ...attributes,
     style: {
       position: "relative",
-      height: "320px",
+      height: "280px",
       textAlign: "center"
     },
     contentEditable: false,
@@ -83,7 +83,7 @@ const TopBanner = props => {
       alt: "Top Banner",
       style: {
         width: "100%",
-        height: "320px",
+        height: "280px",
         objectFit: "cover",
         borderRadius: "0px",
         margin: "0px 0px"