@flozy/editor 1.5.9 → 1.6.1

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

@@ -19,6 +19,9 @@ const SignaturePopup = props => {
     customProps,
     className
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
@@ -77,7 +80,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 +190,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 +211,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 +224,7 @@ const SignaturePopup = props => {
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 5,
+                xs: 6,
                 style: {
                   display: "flex",
                   alignItems: "center"
@@ -231,6 +238,8 @@ const SignaturePopup = props => {
                     children: "Date:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
                   children: /*#__PURE__*/_jsx(DatePicker, {
                     showIcon: true,
                     id: "signedOn",
@@ -244,6 +253,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 +329,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
       })

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

@@ -1,34 +1,33 @@
 import React, { useState, useEffect } from "react";
 import { Editor, Element } from "slate";
-import { IconButton } from "@mui/material";
-import AspectRatioIcon from "@mui/icons-material/AspectRatio";
-import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
+import { Box } from "@mui/material";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import useTableResize from "../../utils/customHooks/useTableResize";
 import { TableUtil } from "../../utils/table";
+import TableStyles from "./Styles";
 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 Resizer = ({
-  onMouseDown
+  classes,
+  onMouseDown,
+  height
 }) => {
   return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(IconButton, {
+    children: /*#__PURE__*/_jsx(Box, {
+      component: "div",
       className: "cell-resizer",
       contentEditable: false,
       onPointerDown: onMouseDown,
+      sx: classes.cellResizer,
       style: {
-        position: "absolute",
-        right: "-8px",
-        top: 0,
-        background: "none",
-        width: "15px",
-        height: "100%"
-      },
-      children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
+        height: `${height}px`
+      }
     })
   });
 };
 const TableCell = props => {
+  const classes = TableStyles();
   const {
     element,
     attributes,
@@ -40,17 +39,18 @@ const TableCell = props => {
   } = customProps;
   const {
     bgColor,
-    borderColor
+    borderColor,
+    entireBgColor
   } = element;
   const [parentDOM, setParentDOM] = useState(null);
   const editor = useSlateStatic();
-  const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
   const isHeader = path.length >= 2 ? path[path.length - 2] === 0 : false;
   const [size, onMouseDown, resizing, onLoad] = useTableResize({
     parentDOM,
     size: element?.size
   });
+  const [tableSize, setTableSize] = useState({});
   const table = new TableUtil(editor);
   const tableProps = table.getTableProps();
   const [tableNode] = Editor.nodes(editor, {
@@ -63,16 +63,40 @@ const TableCell = props => {
   });
   const [parentProps] = tableNode || [{}];
   const [rowProps] = rowNode || [{}];
+  const tableDOM = table.getDOMNode(path, true);
+  const isCellSelected = table.isCellSelected(editor.selection);
+  const hasSelected = (isCellSelected || [])?.findIndex(f => f.join(",") === path.join(",")) > -1;
   useEffect(() => {
-    if (editor && element) {
+    if (tableDOM) {
+      const {
+        width,
+        height
+      } = tableDOM.getBoundingClientRect();
+      const {
+        width: parentWidth
+      } = tableDOM?.parentNode?.parentNode?.getBoundingClientRect();
+      const {
+        styleProps
+      } = tableProps || {};
+      const columns = styleProps ? styleProps["table.columns"] : 2;
+      setTableSize({
+        width,
+        height,
+        parentWidth,
+        cellWidth: parentWidth / columns
+      });
+    }
+  }, [tableDOM]);
+  useEffect(() => {
+    if (editor && element && tableSize) {
       const dom = ReactEditor.toDOMNode(editor, element);
       setParentDOM(dom);
       onLoad(element?.size || {
-        width: 100,
+        width: tableSize?.cellWidth,
         height: 100
       });
     }
-  }, []);
+  }, [tableSize]);
   useEffect(() => {
     if (!resizing && tableProps) {
       table.updateTableStyle({
@@ -81,20 +105,26 @@ const TableCell = props => {
     }
   }, [resizing]);
   const sizeProps = isHeader ? {
-    width: size?.width || 100
+    width: size?.width || tableSize?.cellWidth
   } : {};
+  const cellBorderColor = borderColor || rowProps?.borderColor || parentProps?.borderColor;
   return /*#__PURE__*/_jsxs("td", {
     ...element.attr,
     ...attributes,
-    className: "editor-table-cell",
+    className: `editor-table-cell ${hasSelected ? "selection" : ""}`,
     style: {
       position: "relative",
-      backgroundColor: bgColor,
-      border: `3px solid ${borderColor || rowProps?.borderColor || parentProps?.borderColor}`,
+      backgroundColor: bgColor || entireBgColor,
+      border: `3px solid ${cellBorderColor}`,
       ...(sizeProps || {})
     },
-    children: [children, selected && isHeader && !readOnly ? /*#__PURE__*/_jsx(Resizer, {
-      onMouseDown: onMouseDown
+    children: [children, isHeader && !readOnly && tableSize?.height ? /*#__PURE__*/_jsx(Resizer, {
+      classes: classes,
+      onMouseDown: onMouseDown,
+      height: tableSize?.height
+    }) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
+      className: "selection-area-tc",
+      contentEditable: false
     }) : null]
   });
 };

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

@@ -1,16 +1,16 @@
 import React, { useRef, useState } from "react";
-import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography, Tooltip } from "@mui/material";
+import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
 import Icon from "../../common/Icon";
 import { Transforms } from "slate";
 import { TableUtil } from "../../utils/table.js";
 import "./TableSelector.css";
 import CloseIcon from "@mui/icons-material/Close";
-// import commonStyle from "../../commonStyle";
-// import styled from "@emotion/styled";
+import ToolbarIcon from "../../common/ToolbarIcon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const TableSelector = ({
-  editor
+  editor,
+  icoBtnType
 }) => {
   const tableOptionsRef = useRef();
   const [selection, setSelection] = useState();
@@ -41,18 +41,16 @@ const TableSelector = ({
   return /*#__PURE__*/_jsxs("div", {
     ref: tableOptionsRef,
     className: "popup-wrapper1 ",
-    children: [/*#__PURE__*/_jsx(Tooltip, {
+    children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Table",
-      arrow: true,
-      children: /*#__PURE__*/_jsx(IconButton, {
-        style: {
-          border: showOptions ? "1px solid lightgray" : "none"
-        },
-        onClick: handleButtonClick,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "table"
-        })
-      })
+      style: {
+        border: showOptions ? "1px solid lightgray" : "none"
+      },
+      onClick: handleButtonClick,
+      icon: /*#__PURE__*/_jsx(Icon, {
+        icon: "table"
+      }),
+      icoBtnType: icoBtnType
     }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
       open: showOptions,
       className: `dialogComp tablePopup`,

package/dist/Editor/Elements/Table/table.css

@@ -1,13 +1,3 @@
 .editor-table-cell {
   /* min-width: 100px; */
-}
-
-.editor-table-cell .cell-resizer {
-  width: 10px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-  visibility: visible;
-  background-color: aqua;
 }

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

@@ -0,0 +1,33 @@
+const TopBannerStyles = () => ({
+  root: {
+    "&:hover": {
+      "& .tb-toolbar": {
+        display: "block"
+      }
+    }
+  },
+  toolbar: {
+    position: "absolute",
+    width: "auto",
+    bottom: "8px",
+    left: 0,
+    right: 0,
+    margin: "auto",
+    display: "none",
+    "& button": {
+      background: "#FFF",
+      border: "1px solid #ccc",
+      borderRadius: "6px",
+      color: "#373232",
+      marginRight: "8px",
+      padding: "4px 8px",
+      textTransform: "capitalize",
+      fontSize: "14px",
+      "&:hover": {
+        background: "#ccc",
+        color: "#373232"
+      }
+    }
+  }
+});
+export default TopBannerStyles;

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -0,0 +1,106 @@
+import React, { useState } from "react";
+import { Box, Button } from "@mui/material";
+import { updateTopBanner, removeTopBanner } from "../../utils/topBanner";
+import ImageSelector from "../../common/ImageSelector/ImageSelector";
+import TopBannerStyles from "./Styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TopBannerToolbar = props => {
+  const {
+    classes,
+    customProps,
+    editor
+  } = props;
+  const [open, setOpen] = useState(false);
+  const handleClick = type => () => {
+    switch (type) {
+      case "change":
+        setOpen(true);
+        break;
+      case "remove":
+        removeTopBanner(editor);
+        break;
+      default:
+        return;
+    }
+  };
+  const onSelectImage = img => {
+    updateTopBanner(editor, {
+      url: img
+    });
+    handleClose();
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Box, {
+      component: "div",
+      className: "tb-toolbar",
+      sx: classes.toolbar,
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClick("change"),
+        children: "Change Image"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleClick("remove"),
+        children: "Remove"
+      })]
+    }), /*#__PURE__*/_jsx(ImageSelector, {
+      open: open,
+      onClose: handleClose,
+      customProps: customProps,
+      onSelectImage: onSelectImage
+    })]
+  });
+};
+const TopBanner = props => {
+  const {
+    attributes,
+    element,
+    children,
+    customProps
+  } = props;
+  const {
+    readOnly
+  } = customProps;
+  const {
+    url
+  } = element;
+  const classes = TopBannerStyles();
+  return /*#__PURE__*/_jsxs(Box, {
+    component: "div",
+    ...attributes,
+    style: {
+      position: "relative",
+      height: "320px",
+      textAlign: "center"
+    },
+    contentEditable: false,
+    sx: classes.root,
+    children: [/*#__PURE__*/_jsx("img", {
+      src: url,
+      alt: "Top Banner",
+      style: {
+        width: "90%",
+        height: "320px",
+        objectFit: "cover",
+        borderRadius: "12px",
+        margin: "0px 0px"
+      }
+    }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {
+      ...props,
+      classes: classes
+    }) : null, /*#__PURE__*/_jsx("span", {
+      style: {
+        display: "none"
+      },
+      children: children
+    })]
+  });
+};
+TopBanner.defaultProps = {
+  attributes: {},
+  children: []
+};
+export default TopBanner;