@flozy/editor 1.1.2 → 1.1.5

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

@@ -0,0 +1,20 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import gridItemStyle from "../../common/StyleBuilder/gridItemStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridItemPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Grid Item",
+    type: "gridItemStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: gridItemStyle
+  });
+};
+export default GridItemPopup;

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

@@ -0,0 +1,22 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import gridStyle from "../../common/StyleBuilder/gridStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const GridPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Grid",
+    type: "gridStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: gridStyle,
+    customProps: customProps
+  });
+};
+export default GridPopup;

package/dist/Editor/Elements/ID/Id.js

@@ -30,7 +30,7 @@ const Id = ({
     setId("");
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "popup-wrapper",
+    className: "popup-wrapper1",
     ref: idInputRef,
     children: [/*#__PURE__*/_jsx(Button, {
       className: showInput ? "clicked" : "",

package/dist/Editor/Elements/ImageText/ImageText.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageText = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: "image-text",
+    ...attributes,
+    children: children
+  });
+};
+export default ImageText;

package/dist/Editor/Elements/ImageText/ImageTextWrapper.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ImageTextWrapper = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    ...attributes,
+    className: "image-text-wrapper",
+    children: children
+  });
+};
+export default ImageTextWrapper;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -41,7 +41,7 @@ const LinkButton = props => {
   };
   return /*#__PURE__*/_jsxs("div", {
     ref: linkInputRef,
-    className: "popup-wrapper",
+    className: "popup-wrapper1",
     children: [/*#__PURE__*/_jsx(Button, {
       className: showInput ? "clicked" : "",
       active: isBlockActive(editor, "link"),

package/dist/Editor/Elements/NewLine/NewLineButton.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { IconButton } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { useSlateStatic } from "slate-react";
@@ -15,7 +16,7 @@ const NewLineButton = props => {
       at: [editor.children.length]
     });
   };
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx(IconButton, {
     title: "New Line",
     onClick: onAddNewLine,
     children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {})

package/dist/Editor/Elements/PageSettings/PageSettingsButton.js

@@ -0,0 +1,88 @@
+import React, { useState } from "react";
+import { Transforms, Editor, Element } from "slate";
+import { IconButton } from "@mui/material";
+import ArticleIcon from "@mui/icons-material/Article";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import PageSettingsPopup from "./PageSettingsPopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const PageSettingsButton = props => {
+  const {
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const [pageProps, setPageProps] = useState({});
+  const editor = useSlateStatic();
+  const onSettings = () => {
+    const {
+      element
+    } = getPageSettingsPath();
+    if (element) {
+      setPageProps(element?.pageProps || {});
+      setOpenSettings(true);
+    }
+  };
+  const getPageSettingsPath = () => {
+    try {
+      const [pageSettingsNode] = Editor.nodes(editor, {
+        at: [],
+        match: n => {
+          return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
+        }
+      });
+      const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
+      return {
+        path,
+        element: pageSettingsNode[0]
+      };
+    } catch (err) {
+      console.log(err);
+      return {
+        path: null
+      };
+    }
+  };
+  const onSave = data => {
+    const {
+      path
+    } = getPageSettingsPath();
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    if (path) {
+      Transforms.setNodes(editor, {
+        pageProps: {
+          ...updateData
+        }
+      }, {
+        at: path
+      });
+    } else {
+      Transforms.insertNodes(editor, [{
+        type: "page-settings",
+        pageProps: {
+          ...updateData
+        },
+        children: [{
+          text: ""
+        }]
+      }]);
+    }
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs(IconButton, {
+    title: "Page Settings",
+    onClick: onSettings,
+    children: [/*#__PURE__*/_jsx(ArticleIcon, {}), openSetttings ? /*#__PURE__*/_jsx(PageSettingsPopup, {
+      element: pageProps,
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
+  });
+};
+export default PageSettingsButton;

package/dist/Editor/Elements/PageSettings/PageSettingsPopup.js

@@ -0,0 +1,22 @@
+import React from "react";
+import StyleBuilder from "../../common/StyleBuilder";
+import pageSettingsStyle from "../../common/StyleBuilder/pageSettingsStyle";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PageSettingsPopup = props => {
+  const {
+    element,
+    onSave,
+    onClose,
+    customProps
+  } = props;
+  return /*#__PURE__*/_jsx(StyleBuilder, {
+    title: "Grid",
+    type: "pageSettingsStyle",
+    element: element,
+    onSave: onSave,
+    onClose: onClose,
+    renderTabs: pageSettingsStyle,
+    customProps: customProps
+  });
+};
+export default PageSettingsPopup;

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

@@ -9,7 +9,8 @@ const Signature = props => {
   const {
     attributes,
     children,
-    element
+    element,
+    customProps
   } = props;
   const editor = useSlateStatic();
   const isSigned = element?.children[0]?.type === "sign";
@@ -18,7 +19,7 @@ const Signature = props => {
     onClear();
     Transforms.insertNodes(editor, [{
       type: "sign",
-      signature: "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201696579641724_notes",
+      signature: null,
       fontFamily: "",
       signedBy: "",
       signedOn: formatDate(new Date(), "MM/DD/YYYY"),
@@ -40,6 +41,7 @@ const Signature = props => {
     className: `signature-container`,
     ...attributes,
     children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
+      customProps: customProps,
       onSave: onSave,
       onClear: onClear
     }) : null, children]

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

@@ -1,4 +1,5 @@
 import React from "react";
+import { IconButton } from "@mui/material";
 import DrawIcon from "@mui/icons-material/Draw";
 import { insertSignature } from "../../utils/signature";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -9,7 +10,7 @@ const SignatureButton = props => {
   const handleInsertSignature = () => {
     insertSignature(editor);
   };
-  return /*#__PURE__*/_jsx("button", {
+  return /*#__PURE__*/_jsx(IconButton, {
     onClick: handleInsertSignature,
     title: "Signature",
     children: /*#__PURE__*/_jsx(DrawIcon, {})

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

@@ -5,7 +5,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 const DrawSignature = props => {
   let canvasRef = useRef();
   const {
-    onDataChange
+    onDataChange,
+    customProps: {
+      brush
+    }
   } = props;
   const onSigned = () => {
     onDataChange({
@@ -26,7 +29,9 @@ const DrawSignature = props => {
           className: "signature-canvas"
         },
         onEnd: onSigned,
-        ref: ref => canvasRef = ref
+        ref: ref => canvasRef = ref,
+        maxWidth: brush.size || 2,
+        penColor: brush?.color || "#000"
       })
     })
   });

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

@@ -26,6 +26,7 @@ const TypeSignature = props => {
   const renderFontFamily = () => {
     return signedTextFonts.map((m, i) => {
       return /*#__PURE__*/_jsx(Grid, {
+        item: true,
         padding: 1,
         xs: 4,
         style: {
@@ -44,7 +45,7 @@ const TypeSignature = props => {
     });
   };
   return /*#__PURE__*/_jsxs("div", {
-    className: "signature-tab-0-wrapper",
+    className: "signature-tab-1-wrapper",
     children: [/*#__PURE__*/_jsx("div", {
       className: "typesignature-input-wrapper",
       children: /*#__PURE__*/_jsx(Grid, {

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

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { convertBase64 } from "../../../utils/helper";
+import { uploadFile } from "../../../service/fileupload";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const UploadSignature = props => {
+  const {
+    customProps,
+    onUploadDone
+  } = props;
+  const [base64, setBase64] = useState(null);
+  const [uploading, setUploading] = useState(false);
+  console.log(customProps);
+  const onChange = async e => {
+    const file = e.target.files[0];
+    const strImage = await convertBase64(file);
+    setBase64(strImage);
+    doUpload(strImage);
+  };
+  const doUpload = async strImage => {
+    setUploading(true);
+    const result = await uploadFile({
+      image: strImage
+    }, customProps);
+    setUploading(false);
+    if (result && result?.imageURL) {
+      onUploadDone({
+        signature: result?.imageURL
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "signature-tab",
+    children: [uploading ? "Uploading..." : "", base64 ? /*#__PURE__*/_jsx("div", {
+      className: "upload-sign-img-wrapper",
+      children: /*#__PURE__*/_jsx("img", {
+        className: "upload-sign-img",
+        src: base64,
+        alt: "Signature"
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      className: "upload-input-wrapper",
+      children: /*#__PURE__*/_jsx("input", {
+        type: "file",
+        onChange: onChange
+      })
+    })]
+  });
+};
+export default UploadSignature;

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

@@ -1,4 +1,5 @@
 import DrawSignature from "./DrawSignature";
 import TypeSignature from "./TypeSignature";
-const SignatureOptions = [DrawSignature, TypeSignature];
+import UploadSignature from "./UploadSignature";
+const SignatureOptions = [DrawSignature, TypeSignature, UploadSignature];
 export default SignatureOptions;

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

@@ -1,21 +1,28 @@
 import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
+import BrushIcon from "@mui/icons-material/Brush";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const BrushSizes = [1, 3, 5];
 const SignaturePopup = props => {
   const {
     onSave,
-    onClear
+    onClear,
+    customProps
   } = props;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
   const [signedData, setSignedData] = useState({});
+  const [brush, setBrush] = useState({
+    size: 1,
+    color: "#000000"
+  });
   const handleOpen = () => {
     setOpen(true);
   };
@@ -42,6 +49,26 @@ const SignaturePopup = props => {
       [e.target.name]: e.target.value
     });
   };
+  const onBrushSize = val => () => {
+    setBrush({
+      ...brush,
+      size: val
+    });
+  };
+  const onBrushColor = e => {
+    setBrush({
+      ...brush,
+      color: e.target.value
+    });
+  };
+  const onUploadDone = data => {
+    setSignedData({
+      ...signedData,
+      ...data
+    });
+    handleSave();
+    setOpen(false);
+  };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       className: `signature-btn-container`,
@@ -94,7 +121,12 @@ const SignaturePopup = props => {
         }), /*#__PURE__*/_jsx("div", {
           className: "signature-tab-content",
           children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
-            onDataChange: onDataChange
+            onDataChange: onDataChange,
+            customProps: {
+              ...(customProps || {}),
+              brush: brush
+            },
+            onUploadDone: onUploadDone
           }) : null
         }), /*#__PURE__*/_jsxs(Grid, {
           container: true,
@@ -149,7 +181,6 @@ const SignaturePopup = props => {
                 selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
                 dateFormat: "MM/dd/yyyy",
                 onChange: date => {
-                  console.log(date);
                   setSignedData({
                     ...signedData,
                     signedOn: new Date(date).toISOString().split("T")[0]
@@ -160,13 +191,51 @@ const SignaturePopup = props => {
           })]
         })]
       }), /*#__PURE__*/_jsxs(DialogActions, {
-        children: [/*#__PURE__*/_jsx(Button, {
-          onClick: handleClear,
-          children: "Clear"
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleSave,
-          children: "Save"
-        })]
+        className: "dialog-actions-si",
+        children: [tab === 0 ? /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          padding: 2,
+          style: {
+            display: "flex",
+            alignItems: "center"
+          },
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx("input", {
+              type: "color",
+              className: "brushcolorpic",
+              onChange: onBrushColor,
+              size: "4",
+              value: brush?.color
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(Grid, {
+              className: "dflex alignCenter sizeIcons",
+              children: BrushSizes.map(m => {
+                return /*#__PURE__*/_jsx(IconButton, {
+                  onClick: onBrushSize(m),
+                  disableRipple: true,
+                  className: brush.size === m ? "active" : "",
+                  children: /*#__PURE__*/_jsx(BrushIcon, {
+                    style: {
+                      width: 24 + m,
+                      height: 24 + m
+                    }
+                  })
+                }, `sit-bs-${m}`);
+              })
+            })
+          })]
+        }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: handleClear,
+            children: "Clear"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleSave,
+            children: "Save"
+          })]
+        }) : null]
       })]
     })]
   });

package/dist/Editor/Elements/Table/DeleteCellIcon.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DeleteCell = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 16V20L4 20V4H20V8H18.5V5.5H15V18.5L18.5 18.5V16H20ZM5.5 16.5V18.5H8.5V16.5L5.5 16.5ZM10 16.5V18.5L13.5 18.5V16.5L10 16.5ZM13.5 8.01957V5.5H10V8.01958L13.5 8.01957ZM8.5 8.01958V5.5H5.5V8.01959L8.5 8.01958ZM8.5 9.51958L5.5 9.51959V11.5L8.5 11.5V9.51958ZM8.5 13L5.5 13V15L8.5 15V13ZM10 13V15L13.5 15V13L10 13ZM10 11.5L13.5 11.5V9.51957L10 9.51958V11.5Z",
+      fill: "#1F2328"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M18.7176 13.0606L19.9373 14.2803L20.9979 13.2197L19.7782 12L20.9979 10.7803L19.9372 9.71967L18.7176 10.9393L17.4979 9.71968L16.4373 10.7803L17.6569 12L16.4373 13.2196L17.4979 14.2803L18.7176 13.0606Z",
+      fill: "#1F2328"
+    })]
+  });
+};
+export default DeleteCell;

package/dist/Editor/Elements/Table/DeleteRowIcon.js

@@ -0,0 +1,24 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DeleteCell = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    width: "24px",
+    height: "24px",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [/*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 4H4V20H8V18.5H5.5V13H18.5V18.5H16V20H20V4ZM5.5 8V5.5H8.5V8H5.5ZM10 8V5.5H14L13.9999 8H10ZM15.4999 8L15.5 5.5H18.5V8H15.4999ZM15.4999 9.5H18.5V11.5H15.4998L15.4999 9.5ZM8.5 11.5H5.5V9.5H8.5V11.5ZM10 11.5V9.5H13.9999L13.9998 11.5H10Z",
+      fill: "#1F2328"
+    }), /*#__PURE__*/_jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M12 18.7804L13.2197 20.0001L14.2803 18.9395L13.0606 17.7197L14.2802 16.5001L13.2196 15.4395L12 16.6591L10.7803 15.4395L9.71968 16.5001L10.9393 17.7197L9.71967 18.9394L10.7803 20.0001L12 18.7804Z",
+      fill: "#1F2328"
+    })]
+  });
+};
+export default DeleteCell;

package/dist/Editor/Elements/Table/Table.js

@@ -5,13 +5,21 @@ const Table = ({
   children,
   element
 }) => {
+  const {
+    bgColor,
+    borderColor
+  } = element;
   return /*#__PURE__*/_jsx("div", {
     style: {
       minWidth: "100%",
       maxWidth: "100%",
-      overflow: "auto"
+      position: "relative"
     },
     children: /*#__PURE__*/_jsx("table", {
+      style: {
+        backgroundColor: bgColor,
+        border: `1px solid ${borderColor}`
+      },
       children: /*#__PURE__*/_jsx("tbody", {
         ...attributes,
         children: children