@flozy/editor 1.1.1 → 1.1.4

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

@@ -0,0 +1,243 @@
+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,
+    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);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleSave = () => {
+    onSave(signedData);
+    handleClose();
+  };
+  const handleClear = () => {
+    onClear();
+    handleClose();
+  };
+  const onDataChange = data => {
+    setSignedData({
+      ...signedData,
+      ...data
+    });
+  };
+  const onChange = e => {
+    setSignedData({
+      ...signedData,
+      [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`,
+      children: /*#__PURE__*/_jsx("button", {
+        contentEditable: false,
+        onClick: handleOpen,
+        children: "Sign Here"
+      })
+    }), /*#__PURE__*/_jsxs(Dialog, {
+      open: open,
+      onClose: handleClose,
+      fullWidth: true,
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: {
+              display: "flex"
+            },
+            children: "Signature"
+          }), /*#__PURE__*/_jsx("div", {
+            style: {
+              display: "flex"
+            },
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleClose,
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: "signature-btn-grps",
+          children: [/*#__PURE__*/_jsx(Button, {
+            onClick: () => setTab(0),
+            className: tab === 0 ? "active" : "",
+            children: "Draw Signature"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: () => setTab(1),
+            className: tab === 1 ? "active" : "",
+            children: "Type Signature"
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: () => setTab(2),
+            className: tab === 2 ? "active" : "",
+            children: "Upload Signature"
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          className: "signature-tab-content",
+          children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
+            onDataChange: onDataChange,
+            customProps: {
+              ...(customProps || {}),
+              brush: brush
+            },
+            onUploadDone: onUploadDone
+          }) : null
+        }), /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          padding: 2,
+          style: {
+            display: "flex",
+            justifyContent: "space-between"
+          },
+          children: [/*#__PURE__*/_jsxs(Grid, {
+            item: true,
+            xs: 5,
+            style: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/_jsx(Grid, {
+              style: {
+                marginRight: "8px"
+              },
+              children: /*#__PURE__*/_jsx("label", {
+                htmlFor: "signedBy",
+                children: "Name:"
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              children: /*#__PURE__*/_jsx(TextField, {
+                id: "signedBy",
+                name: "signedBy",
+                placeholder: "Enter Name",
+                size: "small",
+                onChange: onChange
+              })
+            })]
+          }), /*#__PURE__*/_jsxs(Grid, {
+            item: true,
+            xs: 5,
+            style: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: [/*#__PURE__*/_jsx(Grid, {
+              style: {
+                marginRight: "8px"
+              },
+              children: /*#__PURE__*/_jsx("label", {
+                htmlFor: "signedOn",
+                children: "Date:"
+              })
+            }), /*#__PURE__*/_jsx(Grid, {
+              children: /*#__PURE__*/_jsx(DatePicker, {
+                showIcon: true,
+                id: "signedOn",
+                selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
+                dateFormat: "MM/dd/yyyy",
+                onChange: date => {
+                  setSignedData({
+                    ...signedData,
+                    signedOn: new Date(date).toISOString().split("T")[0]
+                  });
+                }
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        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]
+      })]
+    })]
+  });
+};
+export default SignaturePopup;

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

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { IconButton } from "@mui/material";
+import { Transforms } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { fontFamilyMap } from "../../utils/font";
+import { formatDate } from "../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Signed = props => {
+  const editor = useSlateStatic();
+  const {
+    attributes,
+    element,
+    children
+  } = props;
+  const {
+    signature,
+    signedBy,
+    signedOn,
+    signedText,
+    fontFamily
+  } = element;
+  const [selected, setSelected] = useState(false);
+  const onSelect = () => {
+    setSelected(!selected);
+  };
+  const onDelete = () => {
+    const path = ReactEditor.findPath(editor, element);
+    Transforms.removeNodes(editor, {
+      at: path
+    });
+  };
+  const renderSign = () => {
+    if (signature) {
+      return /*#__PURE__*/_jsx("img", {
+        src: signature,
+        alt: "signature",
+        style: {
+          width: "150px",
+          height: "auto"
+        }
+      });
+    } else if (signedText) {
+      return /*#__PURE__*/_jsx("span", {
+        className: "signed-text",
+        style: {
+          fontFamily: fontFamilyMap[fontFamily]
+        },
+        children: signedText
+      });
+    }
+    return null;
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "signature-signed-wrapper",
+    ...attributes,
+    children: [/*#__PURE__*/_jsxs("span", {
+      className: "signature-signed-span",
+      contentEditable: false,
+      children: [selected ? /*#__PURE__*/_jsx(IconButton, {
+        className: "signed-btn-del",
+        onClick: onDelete,
+        children: /*#__PURE__*/_jsx(DeleteIcon, {})
+      }) : null, /*#__PURE__*/_jsxs("button", {
+        className: "signed-btn",
+        onClick: onSelect,
+        children: [renderSign(), /*#__PURE__*/_jsx("div", {
+          style: {
+            fontWeight: "bold"
+          },
+          children: signedBy || ""
+        }), /*#__PURE__*/_jsx("div", {
+          children: formatDate(signedOn, "MM/DD/YYYY")
+        })]
+      })]
+    }), children]
+  });
+};
+export default Signed;

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

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

@@ -0,0 +1,181 @@
+import React, { useState } from "react";
+import { Transforms, Editor, Element } from "slate";
+import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { IconButton } from "@mui/material";
+import AlignHorizontalLeftIcon from "@mui/icons-material/AlignHorizontalLeft";
+import AlignHorizontalRightIcon from "@mui/icons-material/AlignHorizontalRight";
+import AlignVerticalTopIcon from "@mui/icons-material/AlignVerticalTop";
+import AlignVerticalBottomIcon from "@mui/icons-material/AlignVerticalBottom";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import SettingsIcon from "@mui/icons-material/Settings";
+import DeleteCellIcon from "./DeleteCellIcon";
+import DeleteRowIcon from "./DeleteRowIcon";
+import { TableUtil } from "../../utils/table";
+import TablePopup from "./TablePopup";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const TABLE_MENUS = [{
+  Icon: AlignHorizontalRightIcon,
+  text: "Insert Columns to the Right",
+  action: {
+    type: "insertColumn",
+    position: "after"
+  }
+}, {
+  Icon: AlignHorizontalLeftIcon,
+  text: "Insert Columns to the Left",
+  action: {
+    type: "insertColumn",
+    position: "at"
+  }
+}, {
+  Icon: AlignVerticalTopIcon,
+  text: "Insert Row Above",
+  action: {
+    type: "insertRow",
+    positon: "at"
+  }
+}, {
+  Icon: AlignVerticalBottomIcon,
+  text: "Insert Row Below",
+  action: {
+    type: "insertRow",
+    position: "after"
+  }
+}, {
+  Icon: DeleteRowIcon,
+  text: "Delete Row",
+  action: {
+    type: "deleteRow"
+  }
+}, {
+  Icon: DeleteCellIcon,
+  text: "Delete Column",
+  action: {
+    type: "deleteColumn"
+  }
+}, {
+  Icon: SettingsIcon,
+  text: "Settings",
+  action: {
+    type: "settings"
+  }
+}, {
+  Icon: DeleteForeverIcon,
+  text: "Remove Table",
+  action: {
+    type: "remove"
+  }
+}];
+const TableCell = props => {
+  const {
+    element,
+    attributes,
+    children,
+    customProps
+  } = props;
+  const [openSetttings, setOpenSettings] = useState(false);
+  const {
+    bgColor,
+    borderColor
+  } = element;
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const table = new TableUtil(editor);
+  const tableProps = table.getTableProps();
+  const path = ReactEditor.findPath(editor, element);
+  const [tableNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+  });
+  const [rowNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table-row"
+  });
+  const [parentProps] = tableNode || [{}];
+  const [rowProps] = rowNode || [{}];
+  const handleInsert = ({
+    type,
+    position
+  }) => () => {
+    Transforms.select(editor, editor.selection);
+    switch (type) {
+      case "insertRow":
+        table.insertRow(position);
+        break;
+      case "insertColumn":
+        table.insertColumn(position);
+        break;
+      case "deleteRow":
+        table.deleteRow();
+        break;
+      case "deleteColumn":
+        table.deleteColumn();
+        break;
+      case "remove":
+        table.removeTable();
+        break;
+      case "settings":
+        if (tableProps) {
+          onSettings(true);
+        }
+        break;
+      default:
+        return;
+    }
+  };
+  const ToolBar = () => {
+    return selected ? /*#__PURE__*/_jsx("div", {
+      contentEditable: false,
+      style: {
+        position: "absolute",
+        top: "-40px",
+        left: 0,
+        backgroundColor: "#CCC"
+      },
+      children: TABLE_MENUS.map(({
+        Icon,
+        text,
+        action
+      }) => {
+        return /*#__PURE__*/_jsx(IconButton, {
+          title: text,
+          onClick: handleInsert(action),
+          children: /*#__PURE__*/_jsx(Icon, {})
+        }, text);
+      })
+    }) : null;
+  };
+  const onSettings = () => {
+    setOpenSettings(true);
+  };
+  const onSave = data => {
+    const updateData = {
+      ...data
+    };
+    delete updateData.children;
+    delete updateData.type;
+    table.updateTableStyle(updateData, {
+      ...tableProps
+    });
+    onClose();
+  };
+  const onClose = () => {
+    setOpenSettings(false);
+  };
+  return /*#__PURE__*/_jsxs("td", {
+    ...element.attr,
+    ...attributes,
+    style: {
+      backgroundColor: bgColor,
+      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`
+    },
+    children: [/*#__PURE__*/_jsx(ToolBar, {}), children, openSetttings ? /*#__PURE__*/_jsx(TablePopup, {
+      element: tableProps?.styleProps || {},
+      onSave: onSave,
+      onClose: onClose,
+      customProps: customProps
+    }) : null]
+  });
+};
+export default TableCell;

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

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

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

@@ -0,0 +1,31 @@
+import React from "react";
+import { Editor, Element } from "slate";
+import { useSlateStatic, ReactEditor } from "slate-react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const TableRow = props => {
+  const {
+    attributes,
+    children,
+    element
+  } = props;
+  const {
+    bgColor,
+    borderColor
+  } = element;
+  const editor = useSlateStatic();
+  const path = ReactEditor.findPath(editor, element);
+  const [tableNode] = Editor.nodes(editor, {
+    at: path,
+    match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "table"
+  });
+  const [tableProps] = tableNode || [{}];
+  return /*#__PURE__*/_jsx("tr", {
+    ...attributes,
+    style: {
+      backgroundColor: bgColor,
+      border: `1px solid ${borderColor || tableProps?.borderColor}`
+    },
+    children: children
+  });
+};
+export default TableRow;