@flozy/editor 1.1.0 → 1.1.2

package/dist/Editor/CommonEditor.js

@@ -72,9 +72,11 @@ const CommonEditor = props => {
       onSave(JSON.stringify(value));
     }
   };
-  const renderElement = useCallback(props => /*#__PURE__*/_jsx(Element, {
-    ...props
-  }), []);
+  const renderElement = useCallback(props => {
+    return /*#__PURE__*/_jsx(Element, {
+      ...props
+    });
+  }, []);
   const renderLeaf = useCallback(props => {
     return /*#__PURE__*/_jsx(Leaf, {
       ...props
@@ -87,7 +89,8 @@ const CommonEditor = props => {
     }));
   };
   const onKeyDown = useCallback(event => {
-    const isCtrlKey = event.ctrlKey || event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
+    const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
+    const isCtrlKey = event.ctrlKey || isMetaKey;
     if (target && chars.length > 0 && !isCtrlKey) {
       mentionsEvent({
         event,

package/dist/Editor/Editor.css

@@ -99,6 +99,127 @@ html{
     position: relative;
 }
 
+.accordion-container {
+    padding: 0px;
+}
+
+.accordion-title {
+    position: relative;
+}
+
+.accordion-content {
+    padding-left: 32px;
+}
+
+.accordion-summary-container {
+    padding: 8px 0px;
+    margin: 0px;
+    position: relative;
+    padding-left: 40px;
+}
+
+.accordion-summary-collapse-btn {
+    position: absolute;
+    top: 12px;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    z-index: 1;
+    border-radius: 50%;
+    line-height: 1px;
+}
+
+.accordion-details-container {
+    margin: 0px;
+    padding: 8px;
+}
+
+.signature-btn-container button {
+    background-color: #0052CC;
+    padding: 8px 12px;
+    color: #FFFFFF;
+    font-weight: bold;
+    border-radius: 12px;
+    opacity: 1;
+}
+
+.signature-btn-grps {
+    display: flex;
+    justify-content: space-around;
+}
+
+.signature-btn-grps .MuiButtonBase-root {
+    border: 1px solid #2563eb;
+    color: #0f172a;
+    opacity: 1;
+}
+
+.signature-btn-grps .MuiButtonBase-root.active {
+    background-color: #0052CC;
+    color: #FFFFFF;
+}
+
+.signature-tab-content {
+    display: flex;
+    margin: 12px 16px;
+    padding: 0px;
+    border: 0px solid #CCC;
+    min-height: 100px;
+}
+
+.signature-signed-wrapper {
+    position: relative;
+    display: flex;
+}
+.signature-signed-span {
+    position: relative;
+}
+.signature-signed-wrapper .signed-btn-del {
+    position: absolute;
+    right: -20px;
+    top: -20px;
+    opacity: 1;
+    z-index: 1;
+}
+.signed-btn {
+    text-align: center;
+    opacity: 1;
+}
+
+.signed-text {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #000;
+}
+
+.typesignature-fontfamily .MuiButtonBase-root {
+    opacity: 1;
+    border: 1px solid #ccc;
+}
+.typesignature-fontfamily .MuiButtonBase-root.active {
+    border: 1px solid #0052CC;
+}
+
+.signature-canvas{
+    height: 100%;
+    width: 100%;
+    border: 1px solid #0052CC;
+    border-radius: 12px;
+  }
+
+  .react-datepicker__input-container {
+    display: flex !important;
+    align-items: center;
+  }
+  .react-datepicker__input-container input {
+    height: 36px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    width: 100%;
+  }
+
 @media (max-width: 480px) {
     .toolbar {
         display: flex;

package/dist/Editor/Elements/Accordion/Accordion.js

@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Accordion = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  const [toggle, setToggle] = useState(false);
+  const onToggle = () => {
+    setToggle(!toggle);
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: `accordion-container`,
+    ...attributes,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "accordion-title",
+      children: [/*#__PURE__*/_jsx("button", {
+        className: "accordion-summary-collapse-btn",
+        contentEditable: false,
+        onClick: onToggle,
+        children: toggle ? /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}) : /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})
+      }), children[0]]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "accordion-content",
+      style: {
+        display: toggle ? "block" : "none"
+      },
+      children: children[1]
+    })]
+  });
+};
+export default Accordion;

package/dist/Editor/Elements/Accordion/AccordionButton.js

@@ -0,0 +1,21 @@
+import React from "react";
+import ExpandCircleDownIcon from "@mui/icons-material/ExpandCircleDown";
+import { insertAccordion } from "../../utils/accordion";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AccordionButton = props => {
+  const {
+    editor
+  } = props;
+  const handleInsertAccordion = () => {
+    insertAccordion(editor);
+  };
+  return /*#__PURE__*/_jsx("button", {
+    onClick: handleInsertAccordion,
+    title: "Accordion",
+    style: {
+      marginLeft: "0px"
+    },
+    children: /*#__PURE__*/_jsx(ExpandCircleDownIcon, {})
+  });
+};
+export default AccordionButton;

package/dist/Editor/Elements/Accordion/AccordionDetails.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const AccordionDetails = props => {
+  const {
+    attributes,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx("div", {
+    className: `accordion-details-container`,
+    ...attributes,
+    style: {
+      height: "auto",
+      overflow: "hidden"
+    },
+    children: children
+  });
+};
+export default AccordionDetails;

package/dist/Editor/Elements/Accordion/AccordionSummary.js

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

package/dist/Editor/Elements/Embed/Video.js

@@ -1,5 +1,6 @@
-import React from "react";
-import { useSelected, useFocused } from "slate-react";
+import React, { useState, useEffect } from "react";
+import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
+import { Node, Transforms } from "slate";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -13,21 +14,45 @@ const Video = ({
     url,
     alt
   } = element;
-  const [size, onMouseDown, resizing] = useResize();
+  const editor = useSlateStatic();
   const selected = useSelected();
   const focused = useFocused();
+  const [parentDOM, setParentDOM] = useState(null);
+  const [size, onMouseDown, resizing, onLoad] = useResize({
+    parentDOM,
+    size: element?.size
+  });
+  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]));
+      setParentDOM(dom);
+      onLoad(dom);
+    }
+  }, []);
+  useEffect(() => {
+    if (!resizing) {
+      Transforms.setNodes(editor, {
+        size: size
+      });
+    }
+  }, [resizing]);
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed",
     style: {
       display: "flex",
+      width: "100%",
+      maxWidth: "100%",
       boxShadow: selected && focused && "0 0 3px 3px lightgray"
     },
     ...element.attr,
     children: [/*#__PURE__*/_jsxs("div", {
       contentEditable: false,
       style: {
-        width: `${size.width}px`,
+        position: "relative",
+        width: size.widthInPercent ? `${size.widthInPercent}%` : `${size.width}px`,
         height: `${size.height}px`
       },
       children: [
@@ -50,7 +75,7 @@ const Video = ({
         frameBorder: "0",
         title: alt
       }), selected && /*#__PURE__*/_jsx("button", {
-        onMouseDown: onMouseDown,
+        onPointerDown: onMouseDown,
         style: {
           width: "15px",
           height: "15px",

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

@@ -0,0 +1,48 @@
+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
+  } = 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: "https://sweetp-user-uploads.s3.eu-west-2.amazonaws.com/stage%20/%201696579641724_notes",
+      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, {
+      onSave: onSave,
+      onClear: onClear
+    }) : null, children]
+  });
+};
+export default Signature;

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

@@ -0,0 +1,18 @@
+import React from "react";
+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("button", {
+    onClick: handleInsertSignature,
+    title: "Signature",
+    children: /*#__PURE__*/_jsx(DrawIcon, {})
+  });
+};
+export default SignatureButton;

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

@@ -0,0 +1,34 @@
+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
+  } = 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
+      })
+    })
+  });
+};
+export default DrawSignature;

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

@@ -0,0 +1,83 @@
+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, {
+        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-0-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/index.js

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

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

@@ -0,0 +1,174 @@
+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 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 SignaturePopup = props => {
+  const {
+    onSave,
+    onClear
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [tab, setTab] = useState(0);
+  const SeletectedTab = SignatureOptions[tab];
+  const [signedData, setSignedData] = useState({});
+  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
+    });
+  };
+  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
+          }) : 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 => {
+                  console.log(date);
+                  setSignedData({
+                    ...signedData,
+                    signedOn: new Date(date).toISOString().split("T")[0]
+                  });
+                }
+              })
+            })]
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClear,
+          children: "Clear"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleSave,
+          children: "Save"
+        })]
+      })]
+    })]
+  });
+};
+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/Toolbar/Toolbar.js

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from "react";
+import { Select, MenuItem } from "@mui/material";
 import { useSlate } from "slate-react";
 import Button from "../common/Button";
 import Icon from "../common/Icon";
 import { toggleBlock, toggleMark, isMarkActive, addMarkData, isBlockActive, activeMark } from "../utils/SlateUtilityFunctions.js";
+import { fontFamilyMap } from "../utils/font";
 import useFormat from "../utils/customHooks/useFormat.js";
 import defaultToolbarGroups from "./toolbarGroups.js";
 import "./styles.css";
@@ -17,6 +19,8 @@ import CodeToTextButton from "../Elements/CodeToText/CodeToTextButton";
 import HtmlContextMenu from "../Elements/CodeToText/HtmlContextMenu";
 import GridButton from "../Elements/Grid/GridButton";
 import NewLineButton from "../Elements/NewLine/NewLineButton";
+import AccordionButton from "../Elements/Accordion/AccordionButton";
+import SignatureButton from "../Elements/Signature/SignatureButton";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Toolbar = props => {
@@ -72,10 +76,20 @@ const Toolbar = props => {
     format,
     options
   }) => {
-    return /*#__PURE__*/_jsx("select", {
-      value: activeMark(editor, format),
+    const value = activeMark(editor, format);
+    return /*#__PURE__*/_jsx(Select, {
+      value: value,
       onChange: e => changeMarkData(e, format),
-      children: options.map((item, index) => /*#__PURE__*/_jsx("option", {
+      style: {
+        fontFamily: fontFamilyMap[value],
+        width: "200px",
+        height: "40px",
+        overflow: "hidden"
+      },
+      children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
+        style: {
+          fontFamily: item.text
+        },
         value: item.value,
         children: item.text
       }, index))
@@ -147,6 +161,14 @@ const Toolbar = props => {
             return /*#__PURE__*/_jsx(NewLineButton, {
               editor: editor
             }, element.id);
+          case "accordion":
+            return /*#__PURE__*/_jsx(AccordionButton, {
+              editor: editor
+            }, element.id);
+          case "signature":
+            return /*#__PURE__*/_jsx(SignatureButton, {
+              editor: editor
+            }, element.id);
           default:
             return null;
         }

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -1,17 +1,9 @@
+import { fontOptions } from "../utils/font";
 const toolbarGroups = [[{
   id: 1,
   format: "fontFamily",
   type: "dropdown",
-  options: [{
-    text: "Sans Serif",
-    value: "sans"
-  }, {
-    text: "Serif",
-    value: "serif"
-  }, {
-    text: "MonoSpace",
-    value: "monospace"
-  }]
+  options: fontOptions
 }, {
   id: 2,
   format: "fontSize",
@@ -127,5 +119,11 @@ const toolbarGroups = [[{
 }, {
   id: 29,
   type: "newLine"
+}, {
+  id: 30,
+  type: "accordion"
+}, {
+  id: 31,
+  type: "signature"
 }]];
 export default toolbarGroups;

package/dist/Editor/utils/SlateUtilityFunctions.js

@@ -1,4 +1,5 @@
 import { Editor, Transforms, Element as SlateElement } from "slate";
+import { fontFamilyMap, sizeMap } from "./font";
 import Link from "../Elements/Link/Link";
 import Image from "../Elements/Embed/Image";
 import Video from "../Elements/Embed/Video";
@@ -8,20 +9,14 @@ import Table from "../Elements/Table/Table";
 import Mentions from "../Elements/Mentions/Mentions";
 import Grid from "../Elements/Grid/Grid";
 import GridItem from "../Elements/Grid/GridItem";
+import Accordion from "../Elements/Accordion/Accordion";
+import AccordionSummary from "../Elements/Accordion/AccordionSummary";
+import AccordionDetails from "../Elements/Accordion/AccordionDetails";
+import Signature from "../Elements/Signature/Signature";
+import Signed from "../Elements/Signature/Signed";
 import { jsx as _jsx } from "react/jsx-runtime";
 const alignment = ["alignLeft", "alignRight", "alignCenter"];
 const list_types = ["orderedList", "unorderedList"];
-export const sizeMap = {
-  small: "0.75em",
-  normal: "1em",
-  medium: "1.75em",
-  huge: "2.5em"
-};
-export const fontFamilyMap = {
-  sans: "Helvetica,Arial, sans serif",
-  serif: "Georgia, Times New Roaman,serif",
-  monospace: "Monaco, Courier New,monospace"
-};
 export const toggleBlock = (editor, format) => {
   const isActive = isBlockActive(editor, format);
   const isList = list_types.includes(format);
@@ -294,6 +289,26 @@ export const getBlock = props => {
       return /*#__PURE__*/_jsx(GridItem, {
         ...props
       });
+    case "accordion":
+      return /*#__PURE__*/_jsx(Accordion, {
+        ...props
+      });
+    case "accordion-summary":
+      return /*#__PURE__*/_jsx(AccordionSummary, {
+        ...props
+      });
+    case "accordion-details":
+      return /*#__PURE__*/_jsx(AccordionDetails, {
+        ...props
+      });
+    case "signature":
+      return /*#__PURE__*/_jsx(Signature, {
+        ...props
+      });
+    case "sign":
+      return /*#__PURE__*/_jsx(Signed, {
+        ...props
+      });
     default:
       return /*#__PURE__*/_jsx("div", {
         ...element.attr,

package/dist/Editor/utils/accordion.js

@@ -0,0 +1,25 @@
+import { Transforms } from "slate";
+export const insertAccordion = editor => {
+  const accordion = {
+    type: "accordion",
+    children: [{
+      type: "accordion-summary",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Accordion Header"
+        }]
+      }]
+    }, {
+      type: "accordion-details",
+      children: [{
+        type: "paragraph",
+        children: [{
+          text: "Accordion Content"
+        }]
+      }]
+    }]
+  };
+  Transforms.insertNodes(editor, accordion);
+  Transforms.move(editor);
+};

package/dist/Editor/utils/font.js

@@ -0,0 +1,59 @@
+export const sizeMap = {
+  small: "12",
+  normal: "16",
+  medium: "28",
+  huge: "40"
+};
+export const fontFamilyMap = {
+  sans: "Helvetica,Arial, sans serif",
+  serif: "Georgia, Times New Roaman,serif",
+  monospace: "Monaco, Courier New,monospace",
+  roboto: "'Roboto', sans-serif",
+  qwitcher: "'Qwitcher Grypen', cursive",
+  garamond: "'EB Garamond', serif",
+  anton: "'Anton', sans-serif",
+  dmserif: "'DM Serif Text', serif",
+  inter: "'Inter', sans-serif",
+  libre: "'Libre Baskerville', serif",
+  montserrat: "'Montserrat', sans-serif",
+  opensans: "'Open Sans', sans-serif",
+  publicsans: "'Public Sans', sans-serif",
+  raleway: "'Raleway', sans-serif",
+  spacemono: "'Space Mono', sans-serif",
+  bulgarian: "'Bulgarian Garamond', monospace",
+  impact: "'Impact', serif",
+  redacted: "'Redacted Script', cursive",
+  greatVibes: "'Great Vibes', cursive",
+  zeyada: "'Zeyada', cursive",
+  allura: "'Allura', cursive",
+  pinyon: "'Pinyon Script', cursive",
+  muellerhoff: "'Herr Von Muellerhoff', cursive",
+  dawning: "'Dawning of a New Day', cursive",
+  //New Font Added for Type Signature
+  comingsoon: "'Coming Soon', cursive",
+  dancingScript: "'Dancing Script', cursive",
+  engagement: "'Engagement', cursive",
+  gaegu: "'Gaegu', cursive",
+  ingridDarling: "'Ingrid Darling', cursive",
+  kitaOne: "'Kite One', sans - serif",
+  laBelleAurore: "'La Belle Aurore', cursive",
+  lobster: "'Lobster', cursive",
+  meaCulpa: "'Mea Culpa', cursive",
+  meddon: "'Meddon', cursive",
+  merriWeather: "'Merriweather', serif",
+  theGirlNextDoor: "'The Girl Next Door', cursive"
+};
+export const fontOptions = Object.keys(fontFamilyMap).map(m => {
+  return {
+    text: fontFamilyMap[m],
+    value: m
+  };
+});
+
+// get last 12 fonts for signature text fonts
+export const signedTextFonts = Object.keys(fontFamilyMap).slice(-12).map(m => {
+  return {
+    text: fontFamilyMap[m],
+    value: m
+  };
+});

package/dist/Editor/utils/helper.js

@@ -0,0 +1,16 @@
+export const formatDate = (date, format = "MM/DD/YYYY") => {
+  var d = new Date(date),
+    month = "" + (d.getMonth() + 1),
+    day = "" + d.getDate(),
+    year = d.getFullYear();
+  if (month.length < 2) month = "0" + month;
+  if (day.length < 2) day = "0" + day;
+  switch (format) {
+    case "MM/DD/YYYY":
+      return [month, day, year].join("/");
+    case "YYYY-MM-DD":
+      return [year, month, day].join("-");
+    default:
+      return [year, month, day].join("-");
+  }
+};

package/dist/Editor/utils/signature.js

@@ -0,0 +1,23 @@
+import { Transforms } from "slate";
+export const insertSignature = editor => {
+  const signature = {
+    type: "signature",
+    alignment: "center",
+    data: {
+      name: "",
+      email: "",
+      date: "" // YYYY-MM-DD
+    },
+
+    size: {
+      height: 535,
+      widthInPercent: 99.75490196078437,
+      width: 1628.000000000001
+    },
+    children: [{
+      text: ""
+    }]
+  };
+  Transforms.insertNodes(editor, signature);
+  Transforms.move(editor);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"
@@ -22,9 +22,11 @@
     "interweave": "^13.1.0",
     "lint-staged": "^13.2.3",
     "prettier": "^3.0.1",
+    "react-datepicker": "^4.18.0",
     "react-icons": "^4.10.1",
     "react-katex": "^3.0.1",
     "react-scripts": "5.0.1",
+    "react-signature-canvas": "^1.0.6",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",
     "slate-react": "^0.98.3",
@@ -34,12 +36,12 @@
     "yjs": "^13.6.8"
   },
   "peerDependencies": {
-    "react": ">=15.0.0",
-    "react-dom": ">=15.0.0"
+    "react": ">=16.0.0",
+    "react-dom": ">=16.0.0"
   },
   "scripts": {
     "prepare": "husky install .husky",
-    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore . --fix",
+    "lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
     "start": "craco start",
     "build": "craco build",
     "test": "craco test --passWithNoTests",
@@ -115,7 +117,12 @@
   },
   "babel": {
     "presets": [
-      ["@babel/preset-react", {"runtime": "automatic"}]
+      [
+        "@babel/preset-react",
+        {
+          "runtime": "automatic"
+        }
+      ]
     ]
   }
 }