@flozy/editor 1.1.1 → 1.1.4

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

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useState } from "react";
 import { Transforms, Element } from "slate";
-import { useSelected, useSlateStatic } from "slate-react";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import GridItemPopup from "./GridItemPopup";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const GridItem = props => {
@@ -9,12 +10,27 @@ const GridItem = props => {
     children,
     element
   } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
   const {
-    grid
+    grid,
+    bannerSpacing,
+    bgColor,
+    alignment
   } = element;
+  const {
+    left,
+    top,
+    right,
+    bottom
+  } = bannerSpacing || {};
+  const {
+    vertical,
+    horizantal
+  } = alignment || {};
   const editor = useSlateStatic();
   const selected = useSelected();
   const itemWidth = (grid || 6) / 12 * 100;
+  const path = ReactEditor.findPath(editor, element);
   const onItemSizeDecrease = () => {
     Transforms.setNodes(editor, {
       grid: grid <= 1 ? 1 : grid - 1
@@ -37,7 +53,13 @@ const GridItem = props => {
     return selected ? /*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       className: "grid-item-toolbar",
+      style: {
+        top: "0px"
+      },
       children: [/*#__PURE__*/_jsx("button", {
+        onClick: onSettings,
+        children: "Settings"
+      }), /*#__PURE__*/_jsx("button", {
         onClick: onItemSizeDecrease,
         children: "-"
       }), /*#__PURE__*/_jsx("button", {
@@ -46,13 +68,45 @@ const GridItem = props => {
       })]
     }) : null;
   };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    Transforms.setNodes(editor, {
+      ...updateData
+    }, {
+      at: path
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: `grid-item xs-${grid}`,
     ...attributes,
     style: {
-      width: `${itemWidth}%`
+      display: "flex",
+      flexDirection: "column",
+      paddingLeft: `${left}px`,
+      paddingRight: `${right}px`,
+      paddingTop: `${top}px`,
+      paddingBottom: `${bottom}px`,
+      backgroundColor: bgColor,
+      alignItems: horizantal,
+      alignContent: vertical,
+      width: `${itemWidth}%`,
+      margin: "0px"
     },
-    children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {})]
+    children: [children, /*#__PURE__*/_jsx(GridItemToolbar, {}), openSetttings ? /*#__PURE__*/_jsx(GridItemPopup, {
+      element: element,
+      onSave: onSave,
+      onClose: onClose
+    }) : null]
   });
 };
 export default GridItem;

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

@@ -0,0 +1,50 @@
+import React from "react";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import SignaturePopup from "./SignaturePopup";
+import { formatDate } from "../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Signature = props => {
+  const {
+    attributes,
+    children,
+    element,
+    customProps
+  } = props;
+  const editor = useSlateStatic();
+  const isSigned = element?.children[0]?.type === "sign";
+  const path = ReactEditor.findPath(editor, element);
+  const onSave = (data = {}) => {
+    onClear();
+    Transforms.insertNodes(editor, [{
+      type: "sign",
+      signature: null,
+      fontFamily: "",
+      signedBy: "",
+      signedOn: formatDate(new Date(), "MM/DD/YYYY"),
+      signedText: "",
+      children: [{
+        text: ""
+      }],
+      ...data
+    }], {
+      at: [...path, 0]
+    });
+  };
+  const onClear = () => {
+    Transforms.removeNodes(editor, {
+      at: [...path, 0]
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: `signature-container`,
+    ...attributes,
+    children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
+      customProps: customProps,
+      onSave: onSave,
+      onClear: onClear
+    }) : null, children]
+  });
+};
+export default Signature;

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

@@ -0,0 +1,19 @@
+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";
+const SignatureButton = props => {
+  const {
+    editor
+  } = props;
+  const handleInsertSignature = () => {
+    insertSignature(editor);
+  };
+  return /*#__PURE__*/_jsx(IconButton, {
+    onClick: handleInsertSignature,
+    title: "Signature",
+    children: /*#__PURE__*/_jsx(DrawIcon, {})
+  });
+};
+export default SignatureButton;

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

@@ -0,0 +1,39 @@
+import React, { useRef } from "react";
+import SignatureCanvas from "react-signature-canvas";
+import { Grid } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DrawSignature = props => {
+  let canvasRef = useRef();
+  const {
+    onDataChange,
+    customProps: {
+      brush
+    }
+  } = props;
+  const onSigned = () => {
+    onDataChange({
+      signature: canvasRef.toDataURL()
+    });
+  };
+  return /*#__PURE__*/_jsx(Grid, {
+    container: true,
+    children: /*#__PURE__*/_jsx(Grid, {
+      item: true,
+      xs: 12,
+      style: {
+        width: "100%",
+        height: "209px"
+      },
+      children: /*#__PURE__*/_jsx(SignatureCanvas, {
+        canvasProps: {
+          className: "signature-canvas"
+        },
+        onEnd: onSigned,
+        ref: ref => canvasRef = ref,
+        maxWidth: brush.size || 2,
+        penColor: brush?.color || "#000"
+      })
+    })
+  });
+};
+export default DrawSignature;

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

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import { signedTextFonts } from "../../../utils/font";
+import { Grid, Button, TextField, InputAdornment, IconButton } from "@mui/material";
+import ClearIcon from "@mui/icons-material/Clear";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TypeSignature = props => {
+  const {
+    onDataChange
+  } = props;
+  const [name, setName] = useState("");
+  const [fontFamily, setFontFamily] = useState("");
+  const onChange = e => {
+    setName(e.target.value);
+    onDataChange({
+      signedText: e.target.value,
+      signature: ""
+    });
+  };
+  const onFontFamilyChange = val => () => {
+    setFontFamily(val);
+    onDataChange({
+      fontFamily: val
+    });
+  };
+  const renderFontFamily = () => {
+    return signedTextFonts.map((m, i) => {
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        padding: 1,
+        xs: 4,
+        style: {
+          textAlign: "center"
+        },
+        children: /*#__PURE__*/_jsx(Button, {
+          style: {
+            fontFamily: m.text
+          },
+          fullWidth: true,
+          onClick: onFontFamilyChange(m.value),
+          className: m.value === fontFamily ? "active" : "",
+          children: name || "Signature"
+        })
+      }, `typesign-ff-${m.value}`);
+    });
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "signature-tab-1-wrapper",
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "typesignature-input-wrapper",
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        children: /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          padding: 1,
+          xs: 12,
+          style: {
+            textAlign: "center"
+          },
+          children: /*#__PURE__*/_jsx(TextField, {
+            value: name,
+            onChange: onChange,
+            size: "small",
+            fullWidth: true,
+            InputProps: {
+              endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                position: "end",
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => setName(""),
+                  children: /*#__PURE__*/_jsx(ClearIcon, {})
+                })
+              })
+            }
+          })
+        })
+      })
+    }), /*#__PURE__*/_jsx(Grid, {
+      container: true,
+      className: "typesignature-fontfamily",
+      children: renderFontFamily()
+    })]
+  });
+};
+export default TypeSignature;

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

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