@flozy/editor 1.6.0 → 1.6.2

package/dist/Editor/Elements/List/CheckList.js

@@ -0,0 +1,57 @@
+import React from "react";
+import { ReactEditor, useReadOnly, useSlateStatic } from "slate-react";
+import { Transforms } from "slate";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const CheckList = ({
+  attributes,
+  children,
+  element
+}) => {
+  const editor = useSlateStatic();
+  const readOnly = useReadOnly();
+  const {
+    checked
+  } = element;
+  return /*#__PURE__*/_jsxs("div", {
+    ...attributes,
+    className: "checkbox-list",
+    style: {
+      textAlign: element.alignment || "left"
+    },
+    children: [/*#__PURE__*/_jsxs("span", {
+      contentEditable: false,
+      className: "checkbox-edit",
+      children: [/*#__PURE__*/_jsx("input", {
+        type: "checkbox",
+        className: "styled-checkbox",
+        checked: checked,
+        style: {
+          marginRight: "8px"
+        },
+        onChange: event => {
+          const path = ReactEditor.findPath(editor, element);
+          const newProperties = {
+            checked: event.target.checked
+          };
+          Transforms.setNodes(editor, newProperties, {
+            at: path
+          });
+        }
+      }), /*#__PURE__*/_jsx("span", {
+        className: "checkbox-inner"
+      })]
+    }), /*#__PURE__*/_jsx("span", {
+      contentEditable: !readOnly,
+      suppressContentEditableWarning: true,
+      className: "",
+      style: {
+        flex: 1,
+        opacity: checked ? 1 : 1,
+        textDecoration: !checked ? "none" : "none"
+      },
+      children: children
+    })]
+  });
+};
+export default CheckList;

package/dist/Editor/Elements/List/CheckListButton.js

@@ -0,0 +1,24 @@
+import React from "react";
+import Icon from "../../common/Icon";
+import { toggleBlock } from "../../utils/SlateUtilityFunctions";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const CheckListButton = props => {
+  const {
+    editor
+  } = props;
+  const handleClick = type => () => {
+    toggleBlock(editor, type);
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(ToolbarIcon, {
+      title: "Check List",
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "checkList"
+      }),
+      onClick: handleClick("checkList")
+    })
+  });
+};
+export default CheckListButton;

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

@@ -1,10 +1,12 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import KeyboardReturnIcon from "@mui/icons-material/KeyboardReturn";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
-const NewLineButton = () => {
+const NewLineButton = ({
+  icoBtnType
+}) => {
   const editor = useSlateStatic();
   const onAddNewLine = () => {
     Transforms.insertNodes(editor, [{
@@ -18,19 +20,17 @@ const NewLineButton = () => {
     });
     ReactEditor.focus(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "New Line",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: onAddNewLine,
-      children: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
-        sx: {
-          fill: "#64748B",
-          width: "18px",
-          height: "18px"
-        }
-      })
-    })
+    onClick: onAddNewLine,
+    icon: /*#__PURE__*/_jsx(KeyboardReturnIcon, {
+      sx: {
+        fill: "#64748B",
+        width: "18px",
+        height: "18px"
+      }
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default NewLineButton;

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

@@ -1,15 +1,16 @@
 import React, { useState } from "react";
-import { Transforms, Editor, Element } from "slate";
-import { IconButton, Tooltip } from "@mui/material";
-import { useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic } from "slate-react";
 import PageSettingsPopup from "./PageSettingsPopup";
 import { PageSettings } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import { getPageSettings, updatePageSettings } from "../../utils/pageSettings";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PageSettingsButton = props => {
   const {
-    customProps
+    customProps,
+    icoBtnType
   } = props;
   const [openSetttings, setOpenSettings] = useState(false);
   const editor = useSlateStatic();
@@ -17,77 +18,33 @@ const PageSettingsButton = props => {
     const {
       element,
       path
-    } = getPageSettingsPath();
+    } = getPageSettings(editor);
     setOpenSettings({
       element: element?.pageProps || {},
       path
     });
   };
-  const getPageSettingsPath = () => {
+  const onSave = data => {
     try {
-      const [pageSettingsNode] = Editor.nodes(editor, {
-        at: [],
-        match: n => {
-          return !Editor.isEditor(n) && Element.isElement(n) && n.type === "page-settings";
-        }
-      });
-      if (pageSettingsNode && pageSettingsNode[0]) {
-        const path = ReactEditor.findPath(editor, pageSettingsNode[0]);
-        return {
-          path,
-          element: pageSettingsNode[0]
-        };
-      } else {
-        return {
-          path: null
-        };
-      }
+      const updateData = {
+        ...data
+      };
+      delete updateData.children;
+      updatePageSettings(editor, updateData);
+      onClose();
     } catch (err) {
       console.log(err);
-      return {
-        path: null
-      };
-    }
-  };
-  const onSave = data => {
-    const updateData = {
-      ...data
-    };
-    delete updateData.children;
-    if (openSetttings?.path) {
-      Transforms.setNodes(editor, {
-        pageProps: {
-          ...updateData
-        }
-      }, {
-        at: openSetttings?.path
-      });
-    } else {
-      Transforms.insertNodes(editor, [{
-        type: "page-settings",
-        pageProps: {
-          ...updateData
-        },
-        children: [{
-          text: ""
-        }]
-      }], {
-        at: [editor.children.length]
-      });
     }
-    onClose();
   };
   const onClose = () => {
     setOpenSettings(false);
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Page Settings",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        onClick: onSettings,
-        children: /*#__PURE__*/_jsx(PageSettings, {})
-      })
+      onClick: onSettings,
+      icon: /*#__PURE__*/_jsx(PageSettings, {}),
+      icoBtnType: icoBtnType
     }), openSetttings !== false ? /*#__PURE__*/_jsx(PageSettingsPopup, {
       element: openSetttings?.element || {},
       onSave: onSave,

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

@@ -29,22 +29,28 @@ const Signature = props => {
       }],
       ...data
     }], {
-      at: [...path, 0]
+      at: path
     });
   };
   const onClear = () => {
     Transforms.removeNodes(editor, {
-      at: [...path, 0]
+      at: path
     });
   };
   return /*#__PURE__*/_jsxs("div", {
     className: `signature-container`,
     ...attributes,
+    contentEditable: false,
     children: [!isSigned ? /*#__PURE__*/_jsx(SignaturePopup, {
       customProps: customProps,
       onSave: onSave,
       onClear: onClear
-    }) : null, children]
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
   });
 };
 export default Signature;

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

@@ -1,22 +1,23 @@
 import React from "react";
-import { IconButton, Tooltip } from "@mui/material";
 import { insertSignature } from "../../utils/signature";
-import { SignatureIcon } from "../../common/iconslist";
+import ToolbarIcon from "../../common/ToolbarIcon";
+import Icon from "../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 const SignatureButton = props => {
   const {
-    editor
+    editor,
+    icoBtnType
   } = props;
   const handleInsertSignature = () => {
     insertSignature(editor);
   };
-  return /*#__PURE__*/_jsx(Tooltip, {
+  return /*#__PURE__*/_jsx(ToolbarIcon, {
     title: "Signature",
-    arrow: true,
-    children: /*#__PURE__*/_jsx(IconButton, {
-      onClick: handleInsertSignature,
-      children: /*#__PURE__*/_jsx(SignatureIcon, {})
-    })
+    onClick: handleInsertSignature,
+    icon: /*#__PURE__*/_jsx(Icon, {
+      icon: "signature"
+    }),
+    icoBtnType: icoBtnType
   });
 };
 export default SignatureButton;

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

@@ -19,6 +19,10 @@ const SignaturePopup = props => {
     customProps,
     className
   } = props;
+  const {
+    readOnly,
+    metadata
+  } = customProps;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
@@ -38,7 +42,13 @@ const SignaturePopup = props => {
       resource_id: customProps?.page_id
     });
     onSave(signedData);
-    handleClose();
+    // manual delay
+    setTimeout(() => {
+      if (metadata && metadata?.actionHandler) {
+        metadata?.actionHandler("signed", signedData);
+      }
+      handleClose();
+    }, 0);
   };
   const handleClear = () => {
     onClear();
@@ -77,7 +87,7 @@ const SignaturePopup = props => {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx("div", {
       className: `signature-btn-container`,
-      children: /*#__PURE__*/_jsx("button", {
+      children: /*#__PURE__*/_jsx(Button, {
         contentEditable: false,
         onClick: handleOpen,
         children: "Sign Here"
@@ -187,13 +197,14 @@ const SignaturePopup = props => {
               sx: {
                 pt: 2
               },
+              spacing: 1,
               style: {
                 display: "flex",
                 justifyContent: "space-between"
               },
               children: [/*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 5,
+                xs: 6,
                 style: {
                   display: "flex",
                   alignItems: "center"
@@ -207,7 +218,10 @@ const SignaturePopup = props => {
                     children: "Name:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
                   children: /*#__PURE__*/_jsx(TextField, {
+                    fullWidth: true,
                     id: "signedBy",
                     name: "signedBy",
                     placeholder: "Enter Name",
@@ -217,7 +231,7 @@ const SignaturePopup = props => {
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 5,
+                xs: 6,
                 style: {
                   display: "flex",
                   alignItems: "center"
@@ -231,6 +245,8 @@ const SignaturePopup = props => {
                     children: "Date:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
                   children: /*#__PURE__*/_jsx(DatePicker, {
                     showIcon: true,
                     id: "signedOn",
@@ -244,6 +260,33 @@ const SignaturePopup = props => {
                     }
                   })
                 })]
+              }), /*#__PURE__*/_jsxs(Grid, {
+                item: true,
+                xs: 6,
+                style: {
+                  display: "flex",
+                  alignItems: "center"
+                },
+                children: [/*#__PURE__*/_jsx(Grid, {
+                  style: {
+                    marginRight: "8px"
+                  },
+                  children: /*#__PURE__*/_jsx("label", {
+                    htmlFor: "signedByEmail",
+                    children: "Email:"
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
+                  children: /*#__PURE__*/_jsx(TextField, {
+                    fullWidth: true,
+                    id: "signedByEmail",
+                    name: "signedByEmail",
+                    placeholder: "Enter Email",
+                    size: "small",
+                    onChange: onChange
+                  })
+                })]
               })]
             })]
           }), /*#__PURE__*/_jsxs(DialogActions, {
@@ -293,11 +336,11 @@ const SignaturePopup = props => {
                 })
               })]
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
-              children: [/*#__PURE__*/_jsx(Button, {
+              children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
                 className: "secondaryBtn",
-                children: "Clear"
-              }), /*#__PURE__*/_jsx(Button, {
+                children: "Delete"
+              }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
                 className: "primaryBtn",
                 children: "Save"

package/dist/Editor/Elements/SimpleText.js

@@ -0,0 +1,62 @@
+import React from "react";
+import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
+import { Node } from "slate";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SimpleTextStyle = () => ({
+  root: {
+    position: "relative",
+    padding: "0px",
+    "& .placeholder-simple-text": {
+      color: "#B8C5D7",
+      background: "#FFF",
+      position: "absolute",
+      zIndex: -1,
+      left: "4px",
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      pointerEvents: "none",
+      height: "18px",
+      padding: "0px",
+      "& .bg-pad-sl": {
+        padding: "2px 4px 2px 4px",
+        background: "#F2F6FA",
+        fontSize: "12px"
+      }
+    }
+  }
+});
+const SimpleText = props => {
+  const {
+    element,
+    attributes,
+    children
+  } = props;
+  const classes = SimpleTextStyle();
+  const editor = useSlateStatic();
+  const selected = useSelected();
+  const path = ReactEditor.findPath(editor, element);
+  // const parentPath = Path.parent(path);
+  // const parentNode = Node.get(editor, parentPath);
+  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
+  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
+  return /*#__PURE__*/_jsxs(Box, {
+    ...element.attr,
+    ...attributes,
+    className: `simple-text`,
+    sx: classes.root,
+    children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
+      className: "placeholder-simple-text",
+      children: ["Type ", /*#__PURE__*/_jsx("span", {
+        className: "bg-pad-sl",
+        children: "/"
+      }), " for browse elements"]
+    }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
+      className: "placeholder-simple-text",
+      children: "Write Something..."
+    }) : null]
+  });
+};
+export default SimpleText;

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

@@ -0,0 +1,66 @@
+const TableStyles = () => ({
+  tableToolBar: {
+    position: "absolute",
+    top: "-34px",
+    left: 0,
+    backgroundColor: "#FFF",
+    border: "1px solid rgba(37, 99, 235, 0.32)",
+    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+    borderRadius: "0px",
+    width: "32px",
+    height: "32px",
+    overflow: "hidden",
+    transition: "all 0.3s",
+    "& button": {
+      "& svg": {
+        width: "16px",
+        height: "16px"
+      }
+    },
+    "&.active": {
+      width: "auto",
+      "& .toggle": {
+        rotate: "180deg"
+      }
+    },
+    "& .toolbtn": {
+      "& svg": {
+        stroke: "rgb(100, 116, 139)"
+      }
+    }
+  },
+  table: {
+    "& td": {
+      padding: "8px 8px",
+      border: "1px solid #E0E0E0",
+      "&.selection": {
+        "& *::selection": {
+          background: "transparent"
+        }
+      }
+    },
+    "& .selection-area-tc": {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      background: "rgba(149, 218, 255, .3)",
+      pointerEvents: "none"
+    }
+  },
+  cellResizer: {
+    position: "absolute",
+    cursor: "col-resize",
+    right: "-2px",
+    top: 0,
+    background: "transparent",
+    width: "4px",
+    borderRadius: "0px",
+    zIndex: 1,
+    "&:hover": {
+      background: "#ccc"
+    }
+  }
+});
+export default TableStyles;

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

@@ -1,18 +1,21 @@
 import React, { useState } from "react";
 import { Transforms } from "slate";
 import { useSelected, useSlateStatic } from "slate-react";
-import { IconButton } from "@mui/material";
+import { Box, IconButton, Tooltip, Table as TableComp, TableBody } 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 ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
 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 "./table.css";
+import TableStyles from "./Styles";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TABLE_MENUS = [{
@@ -75,10 +78,12 @@ const Table = props => {
     children,
     customProps
   } = props;
+  const classes = TableStyles();
   const {
     readOnly
   } = customProps;
   const [openSetttings, setOpenSettings] = useState(false);
+  const [exandTools, setExpandTools] = useState(false);
   const {
     bgColor,
     borderColor
@@ -117,27 +122,38 @@ const Table = props => {
         return;
     }
   };
+  const handleExpand = () => {
+    setExpandTools(!exandTools);
+  };
   const ToolBar = () => {
-    return selected ? /*#__PURE__*/_jsx("div", {
+    return selected ? /*#__PURE__*/_jsxs(Box, {
+      component: "div",
       contentEditable: false,
-      className: "tableToolBar",
-      style: {
-        position: "absolute",
-        top: "-40px",
-        left: 0,
-        backgroundColor: "#CCC"
-      },
-      children: TABLE_MENUS.map(({
+      className: `tableToolBar ${exandTools ? "active" : ""}`,
+      sx: classes.tableToolBar,
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Show Tools",
+        arrow: true,
+        onClick: handleExpand,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          className: "toolbtn toggle",
+          children: /*#__PURE__*/_jsx(MoreVertIcon, {})
+        })
+      }), TABLE_MENUS.map(({
         Icon,
         text,
         action
       }) => {
-        return /*#__PURE__*/_jsx(IconButton, {
+        return /*#__PURE__*/_jsx(Tooltip, {
           title: text,
-          onClick: handleAction(action),
-          children: /*#__PURE__*/_jsx(Icon, {})
+          arrow: true,
+          children: /*#__PURE__*/_jsx(IconButton, {
+            className: "toolbtn",
+            onClick: handleAction(action),
+            children: /*#__PURE__*/_jsx(Icon, {})
+          })
         }, text);
-      })
+      })]
     }) : null;
   };
   const onSettings = () => {
@@ -163,13 +179,14 @@ const Table = props => {
       maxWidth: "100%",
       position: "relative"
     },
-    children: [/*#__PURE__*/_jsx("table", {
+    children: [/*#__PURE__*/_jsx(TableComp, {
+      sx: classes.table,
       style: {
         backgroundColor: bgColor,
         border: `1px solid ${borderColor}`,
         width: "auto"
       },
-      children: /*#__PURE__*/_jsx("tbody", {
+      children: /*#__PURE__*/_jsx(TableBody, {
         ...attributes,
         children: children
       })