@flozy/editor 1.4.2 → 1.4.4

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

@@ -1,11 +1,16 @@
-import React, { useState } from "react";
-import { Transforms, Path } from "slate";
+import React, { useState, useEffect } from "react";
+import { Transforms, Path, Node } from "slate";
 import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
 import { gridItem } from "../../utils/gridItem";
 import GridPopup from "./GridPopup";
 import { IconButton, Tooltip } from "@mui/material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import AddIcon from "@mui/icons-material/Add";
+import NoteAddIcon from "@mui/icons-material/NoteAdd";
+import CompressIcon from "@mui/icons-material/Compress";
+import { insertGrid } from "../../utils/grid";
+import useDragAndDrop from "../../common/useDragAndDrop";
+import useResize from "../../utils/customHooks/useResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Grid = props => {
@@ -26,7 +31,9 @@ const Grid = props => {
     bgColor,
     alignment,
     backgroundImage,
-    borderColor
+    borderColor,
+    size: elSize,
+    fgColor
   } = element;
   const {
     left,
@@ -39,9 +46,45 @@ const Grid = props => {
     horizantal,
     flexDirection
   } = alignment || {};
+  const {
+    height: elHeight
+  } = elSize || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
+  const [parentDOM, setParentDOM] = useState(null);
+
+  // resize
+  const [size, onMouseDown, resizing, onLoad] = useResize({
+    parentDOM,
+    size: element?.size,
+    isGrid: true
+  });
+  const arr = Array.from(Node.elements(editor));
+  const ele = arr.find(([elem]) => element === elem);
+  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, {
@@ -85,12 +128,56 @@ const Grid = props => {
     setOpenSettings(false);
   };
   const onDelete = () => {
-    if (path) {
-      Transforms.removeNodes(editor, {
-        at: path
+    try {
+      if (path) {
+        Transforms.removeNodes(editor, {
+          at: path
+        });
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const onAddSection = (defaultGrid = null, next = true) => () => {
+    try {
+      const insertPath = next ? Path.next(path) : path;
+      insertGrid(editor, defaultGrid, insertPath);
+    } catch (err) {
+      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 GridToolBar = () => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       className: "grid-container-toolbar",
@@ -109,6 +196,13 @@ const Grid = props => {
           onClick: onAddGridItem,
           children: /*#__PURE__*/_jsx(AddIcon, {})
         })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Add Section",
+        arrow: true,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: onAddSection(null, true),
+          children: /*#__PURE__*/_jsx(NoteAddIcon, {})
+        })
       })]
     }) : null;
   };
@@ -116,7 +210,7 @@ const Grid = props => {
     id
   } : {};
   return /*#__PURE__*/_jsxs("div", {
-    className: `grid-container ${grid} element-root`,
+    className: `grid-container ${grid} has-hover element-root ${isDragging ? "dragging" : ""} ${isActiveDrag ? "active_drag" : ""}`,
     ...attributes,
     ...sectionId,
     style: {
@@ -125,7 +219,17 @@ const Grid = props => {
       backgroundImage: backgroundImage && backgroundImage !== "none" ? `url(${backgroundImage})` : "none",
       border: `1px solid ${borderColor}`
     },
-    children: [!readOnly && /*#__PURE__*/_jsx("div", {
+    children: [fgColor && /*#__PURE__*/_jsx("div", {
+      style: {
+        position: "absolute",
+        pointerEvents: "none",
+        width: "100%",
+        height: "100%",
+        background: fgColor,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "cover"
+      }
+    }), dndElements, !readOnly && /*#__PURE__*/_jsx("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
       children: /*#__PURE__*/_jsx(GridToolBar, {})
@@ -136,18 +240,38 @@ const Grid = props => {
       onDelete: onDelete,
       customProps: customProps
     }) : null, /*#__PURE__*/_jsx("div", {
+      className: "grid-c-wrpr",
       style: {
         display: "flex",
         paddingLeft: `${left}px`,
         paddingRight: `${right}px`,
         paddingTop: `${top}px`,
         paddingBottom: `${bottom}px`,
-        alignItems: horizantal,
-        justifyContent: horizantal,
-        flexDirection: flexDirection,
-        width: "100%"
+        alignItems: vertical || "start",
+        justifyContent: horizantal || "start",
+        flexDirection: flexDirection || "row",
+        width: "100%",
+        height: resizing ? `${size?.height}px` : elHeight ? `${elHeight}px` : "fit-content"
       },
       children: children
+    }), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
+      onPointerDown: onMouseDown,
+      style: {
+        opacity: 1,
+        background: "#FFF",
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: "-28px",
+        margin: "auto",
+        color: "#FFF",
+        backgroundColor: "#2684ff",
+        width: "42px",
+        height: "42px",
+        zIndex: 1000
+      },
+      className: "",
+      children: /*#__PURE__*/_jsx(CompressIcon, {})
     })]
   });
 };

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

@@ -28,7 +28,6 @@ const GridItem = props => {
     borderWidth,
     borderColor,
     margin,
-    textColorHover,
     bgColorHover,
     borderColorHover,
     textColor
@@ -108,10 +107,7 @@ const GridItem = props => {
       marginTop: `${margin?.top || 0}px`,
       marginBottom: `${margin?.bottom || 0}px`,
       "&:hover": {
-        background: `${bgColorHover || bgColor || "transparent"}`,
-        "& *": {
-          color: textColorHover || textColor || "#000"
-        }
+        background: `${bgColorHover || bgColor || "transparent"}`
       }
     },
     children: [!readOnly && /*#__PURE__*/_jsx("div", {

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -1,23 +1,32 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import SignatureCanvas from "react-signature-canvas";
 import { Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const DrawSignature = props => {
   let canvasRef = useRef();
   const {
     onDataChange,
     customProps: {
-      brush
+      brush,
+      services
     }
   } = props;
-  const onSigned = () => {
+  const [uploading, setUploading] = useState(false);
+  const onSigned = async () => {
+    setUploading(true);
+    const strImage = canvasRef.toDataURL();
+    const result = await services("uploadFile", {
+      image: strImage
+    });
+    setUploading(false);
     onDataChange({
-      signature: canvasRef.toDataURL()
+      signature: result?.imageURL || strImage
     });
   };
-  return /*#__PURE__*/_jsx(Grid, {
+  return /*#__PURE__*/_jsxs(Grid, {
     container: true,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: [uploading ? "Uploading..." : "", /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       style: {
@@ -33,7 +42,7 @@ const DrawSignature = props => {
         maxWidth: brush.size || 2,
         penColor: brush?.color || "#000"
       })
-    })
+    })]
   });
 };
 export default DrawSignature;

package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { convertBase64 } from "../../../utils/helper";
-import { uploadFile } from "../../../service/fileupload";
 import { Grid, Typography } from "@mui/material";
 import { CloudUpload } from "../../../common/EditorIcons";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,15 +19,13 @@ const UploadSignature = props => {
   };
   const doUpload = async strImage => {
     setUploading(true);
-    const result = await uploadFile({
+    const result = await customProps?.services("uploadFile", {
       image: strImage
-    }, customProps);
+    });
     setUploading(false);
-    if (result && result?.imageURL) {
-      onUploadDone({
-        signature: result?.imageURL
-      });
-    }
+    onUploadDone({
+      signature: result?.imageURL || strImage
+    });
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "signature-tab",

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

@@ -97,24 +97,34 @@ const SignaturePopup = props => {
               p: 0,
               pb: 2
             },
-            children: /*#__PURE__*/_jsxs("div", {
-              style: {
-                display: "flex",
-                justifyContent: "space-between"
-              },
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: "h6",
-                className: "popupTitle",
-                color: "primary",
-                children: "SIGNATURE"
-              }), /*#__PURE__*/_jsx("div", {
-                style: {
-                  display: "flex"
-                },
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  onClick: handleClose,
-                  className: "close-popupbtn",
-                  children: /*#__PURE__*/_jsx(CloseIcon, {})
+            children: /*#__PURE__*/_jsxs(Grid, {
+              container: true,
+              justifyContent: "space-between",
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                children: /*#__PURE__*/_jsx(Typography, {
+                  variant: "h6",
+                  className: "popupTitle",
+                  color: "primary",
+                  children: "SIGNATURE"
+                })
+              }), /*#__PURE__*/_jsx(Grid, {
+                item: true,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  children: [customProps?.customComponents?.signature?.header?.map((elem, index) => /*#__PURE__*/_jsx(Grid, {
+                    sx: {
+                      pr: 1
+                    },
+                    children: elem
+                  }, index)), /*#__PURE__*/_jsx(Grid, {
+                    item: true,
+                    children: /*#__PURE__*/_jsx(IconButton, {
+                      onClick: handleClose,
+                      className: "close-popupbtn",
+                      children: /*#__PURE__*/_jsx(CloseIcon, {})
+                    })
+                  })]
                 })
               })]
             })

package/dist/Editor/Toolbar/FormatTools/Autocomplete.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { Autocomplete, TextField } from "@mui/material";
+import { Autocomplete as SelectFreeSolo, TextField } from "@mui/material";
 import { activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const SelectFreeSolo = ({
+const Autocomplete = ({
   editor,
   format,
   options
@@ -16,7 +16,7 @@ const SelectFreeSolo = ({
     // addMarkData(editor, { format, value });
   };
 
-  return /*#__PURE__*/_jsx(Autocomplete, {
+  return /*#__PURE__*/_jsx(SelectFreeSolo, {
     size: "small",
     style: {},
     value: value?.value,
@@ -30,4 +30,4 @@ const SelectFreeSolo = ({
     })
   });
 };
-export default SelectFreeSolo;
+export default Autocomplete;

package/dist/Editor/Toolbar/Toolbar.js

@@ -132,7 +132,8 @@ const Toolbar = props => {
             }, element.id);
           case "page-settings":
             return /*#__PURE__*/_jsx(PageSettingsButton, {
-              editor: editor
+              editor: editor,
+              customProps: customProps
             }, element.id);
           case "carousel":
             return /*#__PURE__*/_jsx(CarouselButton, {

package/dist/Editor/common/DroppableOverlay.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { ReactEditor } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DroppableOverlay = ({
+  editor,
+  dragData
+}) => {
+  const {
+    data: {
+      current: {
+        element
+      }
+    }
+  } = dragData || {
+    data: {
+      current: {
+        element: null
+      }
+    }
+  };
+  const dragEle = element ? ReactEditor.toDOMNode(editor, element) : null;
+  const {
+    width,
+    height
+  } = dragEle?.getBoundingClientRect() || {};
+  return dragEle ? /*#__PURE__*/_jsx("div", {
+    style: {
+      width: width,
+      height: height
+    }
+  }) : null;
+};
+export default DroppableOverlay;

package/dist/Editor/common/EditorIcons.js

@@ -78,4 +78,31 @@ export const CloudUpload = props => /*#__PURE__*/_jsx("svg", {
     fill: "#2563EB",
     stroke: "#2563EB"
   })
+});
+export const WorkFlow = () => /*#__PURE__*/_jsxs("svg", {
+  width: "20",
+  height: "21",
+  viewBox: "0 0 20 21",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M0 20.4H20V0.4H0V20.4Z",
+    fill: "url(#pattern0)"
+  }), /*#__PURE__*/_jsxs("defs", {
+    children: [/*#__PURE__*/_jsx("pattern", {
+      id: "pattern0",
+      patternContentUnits: "objectBoundingBox",
+      width: "1",
+      height: "1",
+      children: /*#__PURE__*/_jsx("use", {
+        href: "#image0_1919_14564",
+        transform: "scale(0.00625)"
+      })
+    }), /*#__PURE__*/_jsx("image", {
+      id: "image0_1919_14564",
+      width: "160",
+      height: "160",
+      href: "data:image/png;base64,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"
+    })]
+  })]
 });

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

@@ -34,6 +34,11 @@ const appHeaderStyle = [{
     label: "App Logo",
     key: "appLogo",
     type: "backgroundImage"
+  }, {
+    label: "Move Logo to Right",
+    key: "isLogoRight",
+    type: "selectBox",
+    placeholder: "Move Logo to Right"
   }]
 }, {
   tab: "General",

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

@@ -19,6 +19,7 @@ const Alignment = props => {
       }
     });
   };
+  const flexDirection = value?.flexDirection || "row";
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     style: {
@@ -34,7 +35,7 @@ const Alignment = props => {
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
-            children: "Horizantal Position"
+            children: "Align Items"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
@@ -45,7 +46,7 @@ const Alignment = props => {
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "start",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Left"
+            label: "Start"
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "center",
             control: /*#__PURE__*/_jsx(Radio, {}),
@@ -53,7 +54,7 @@ const Alignment = props => {
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "end",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Right"
+            label: "End"
           })]
         })]
       })
@@ -66,7 +67,7 @@ const Alignment = props => {
           children: /*#__PURE__*/_jsx(Typography, {
             variant: "body1",
             color: "primary",
-            children: "Vertical Position"
+            children: "Justify Content"
           })
         }), /*#__PURE__*/_jsxs(RadioGroup, {
           row: true,
@@ -77,7 +78,7 @@ const Alignment = props => {
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "start",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Top"
+            label: "Start"
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "center",
             control: /*#__PURE__*/_jsx(Radio, {}),
@@ -85,7 +86,7 @@ const Alignment = props => {
           }), /*#__PURE__*/_jsx(FormControlLabel, {
             value: "end",
             control: /*#__PURE__*/_jsx(Radio, {}),
-            label: "Bottom"
+            label: "End"
           })]
         })]
       })
@@ -104,7 +105,7 @@ const Alignment = props => {
           row: true,
           "aria-labelledby": "demo-row-radio-buttons-group-label",
           name: "flexDirection",
-          value: value?.flexDirection || "column",
+          value: flexDirection,
           onChange: handleChange,
           children: [/*#__PURE__*/_jsx(FormControlLabel, {
             value: "row",
@@ -114,6 +115,10 @@ const Alignment = props => {
             value: "column",
             control: /*#__PURE__*/_jsx(Radio, {}),
             label: "Column"
+          }), /*#__PURE__*/_jsx(FormControlLabel, {
+            value: "row-reverse",
+            control: /*#__PURE__*/_jsx(Radio, {}),
+            label: "Row reverse"
           })]
         })]
       })

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

@@ -1,6 +1,7 @@
 import React from "react";
-import { Grid, Checkbox, FormControlLabel } from "@mui/material";
+import { Grid, Checkbox, FormControlLabel, FormHelperText } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const SelectBox = props => {
   const {
     value,
@@ -19,16 +20,19 @@ const SelectBox = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     padding: 1,
-    children: /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsxs(Grid, {
       item: true,
       xs: 12,
-      children: /*#__PURE__*/_jsx(FormControlLabel, {
+      children: [/*#__PURE__*/_jsx(FormControlLabel, {
         control: /*#__PURE__*/_jsx(Checkbox, {
           value: value,
+          checked: value,
           onChange: handleChange
         }),
         label: placeholder
-      })
+      }), /*#__PURE__*/_jsx(FormHelperText, {
+        children: data?.helperText
+      })]
     })
   });
 };

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

@@ -71,11 +71,6 @@ const gridItemStyle = [{
   tab: "Hover Colors",
   value: "hoverColors",
   fields: [{
-    label: "Text",
-    key: "textColorHover",
-    type: "color",
-    needPreview: true
-  }, {
     label: "Background",
     key: "bgColorHover",
     type: "color"

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

@@ -7,6 +7,12 @@ const gridStyle = [{
     key: "id",
     type: "text",
     placeholder: "Id should be unique for the page..."
+  }, {
+    label: "Copy Grid",
+    key: "copyGrid",
+    type: "selectBox",
+    placeholder: "Copy Grid",
+    helperText: "This Grid will get copied when creating a new page from this page."
   }]
 }, {
   tab: "Padding",
@@ -63,6 +69,10 @@ const gridStyle = [{
     label: "Background",
     key: "bgColor",
     type: "color"
+  }, {
+    label: "Foreground Color",
+    key: "fgColor",
+    type: "color"
   }, {
     label: "Border",
     key: "borderColor",