@flozy/editor 5.4.0 → 5.4.1

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

@@ -45,36 +45,29 @@ const GridItemToolbar = props => {
     onAddColumn,
     columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsx(Popper, {
+  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
     anchorEl: columnRef?.current,
     open: true,
     placement: "top-end",
     sx: classes.popTools,
     className: "gi-tool-pp",
-    disablePortal: true,
-    contentEditable: false,
-    children: /*#__PURE__*/_jsxs(Box, {
-      className: "ico-grp-ss",
-      children: [/*#__PURE__*/_jsx(Tooltip, {
-        title: "Column Settings",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onSettings,
-          sx: classes.groupIcons,
-          children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
-        })
-      }), /*#__PURE__*/_jsx(Tooltip, {
-        title: "Add Column",
-        arrow: true,
-        children: /*#__PURE__*/_jsx(IconButton, {
-          size: "small",
-          onClick: onAddColumn,
-          sx: classes.groupIcons2,
-          children: /*#__PURE__*/_jsx(AddIcon, {})
-        })
-      })]
-    })
+    children: [/*#__PURE__*/_jsx(Tooltip, {
+      title: "Column Settings",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onSettings,
+        children: /*#__PURE__*/_jsx(GridSettingsIcon, {})
+      })
+    }), /*#__PURE__*/_jsx(Tooltip, {
+      title: "Add Column",
+      arrow: true,
+      children: /*#__PURE__*/_jsx(IconButton, {
+        size: "small",
+        onClick: onAddColumn,
+        children: /*#__PURE__*/_jsx(AddIcon, {})
+      })
+    })]
   }) : null;
 };
 const GridItem = props => {
@@ -300,26 +293,24 @@ const GridItem = props => {
     },
     "data-path": path.join(","),
     "data-info": "handle-outside-editor-click",
-    children: [!readOnly && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `element-selector ${selected ? "selected" : ""}`,
-        contentEditable: false,
-        style: {
-          zIndex: 1000
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots tl",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots tr",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots bl",
-          children: " "
-        }), /*#__PURE__*/_jsx("div", {
-          className: "element-selector-dots br",
-          children: " "
-        })]
+    children: [!readOnly && /*#__PURE__*/_jsxs("div", {
+      className: `element-selector ${selected ? "selected" : ""}`,
+      contentEditable: false,
+      style: {
+        zIndex: 1000
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots tr",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots bl",
+        children: " "
+      }), /*#__PURE__*/_jsx("div", {
+        className: "element-selector-dots br",
+        children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
         classes: classes,
         selected: selected,
@@ -360,14 +351,12 @@ const GridItem = props => {
       onMouseDown: onMouseDown,
       height: "auto"
     }) : null, /*#__PURE__*/_jsxs(Dialog, {
-      sx: classes.dialog,
       open: Boolean(alert),
       onClose: handleClose,
       children: [/*#__PURE__*/_jsx(DialogContent, {
         children: alert
       }), /*#__PURE__*/_jsx(DialogActions, {
         children: /*#__PURE__*/_jsx(Button, {
-          variant: "contained",
           onClick: handleClose,
           children: "Close"
         })

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

@@ -106,56 +106,6 @@ const GridStyles = (theme, appTheme) => ({
         }
       }
     }
-  },
-  dialog: {
-    "& .MuiPaper-root": {
-      background: appTheme?.palette?.editor?.background,
-      color: appTheme?.palette?.editor?.textColor
-    }
-  },
-  groupIcons: {
-    background: appTheme?.palette?.editor?.aiInputBackground,
-    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '5px !important',
-    borderRadius: '50% !important',
-    '& svg': {
-      width: '18px',
-      height: '18px',
-      '& path': {
-        stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
-      }
-    },
-    '&:hover': {
-      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
-      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
-      '& svg': {
-        '& path': {
-          stroke: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
-        }
-      }
-    }
-  },
-  groupIcons2: {
-    background: appTheme?.palette?.editor?.aiInputBackground,
-    border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
-    padding: '5px !important',
-    borderRadius: '50% !important',
-    '& svg': {
-      width: '18px',
-      height: '18px',
-      '& path': {
-        fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
-      }
-    },
-    '&:hover': {
-      background: `${appTheme?.palette?.editor?.aiInputBackground} !important`,
-      border: `1px solid ${appTheme?.palette?.editor?.buttonBorder1} !important`,
-      '& svg': {
-        '& path': {
-          fill: `${appTheme?.palette?.editor?.closeButtonSvgStroke} !important`
-        }
-      }
-    }
   }
 });
 export default GridStyles;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -64,7 +64,7 @@ const LinkButton = props => {
       title: "Link",
       arrow: true,
       children: /*#__PURE__*/_jsx(IconButton, {
-        className: `${showInput ? "clicked btnActive" : ""} ${isActive ? "btnActive" : ""}`,
+        className: `${showInput ? "clicked" : ""} ${isActive ? "btnActive" : ""}`,
         format: "link",
         onClick: toggleLink,
         children: /*#__PURE__*/_jsx(Icon, {

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

@@ -39,8 +39,7 @@ const CheckList = ({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        ...(style || {}),
-        lineHeight: 1.43
+        ...(style || {})
       },
       children: [/*#__PURE__*/_jsxs("div", {
         contentEditable: false,

package/dist/Editor/Elements/Search/SearchAttachment.js

@@ -49,7 +49,6 @@ const SearchAttachment = props => {
         background: theme?.palette?.containers?.slashBrainCardBg,
         cursor: 'pointer',
         margin: '4px 0px',
-        lineHeight: 1.43,
         "&.MuiPaper-root.MuiPaper-rounded": {
           borderRadius: "7px !important",
           paddingTop: '0px !important'

package/dist/Editor/Elements/Search/SearchButton.js

@@ -91,7 +91,6 @@ const SearchButton = /*#__PURE__*/forwardRef((props, ref) => {
   const handleClose = () => {
     clearBrainText(editor);
     setAnchorEl(null);
-    setSearch("");
   };
   const handleClick = data => {
     insertBrain(editor, data, target || editor.selection);

package/dist/Editor/Elements/Signature/Signature.css

@@ -57,7 +57,7 @@
     cursor: pointer;
 }
   .upload-wrapper-ui {
-    border: 1.5px dashed #2563EB !important;
+    border: 1px dashed #92B1F5 !important;
     /* box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.17) !important; */
     border-radius: 7px;
     display: flex;

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

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { signedTextFonts } from "../../../utils/font";
 import { Grid, Button, TextField, InputAdornment, IconButton, Typography } from "@mui/material";
-import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
+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 => {
@@ -73,7 +73,7 @@ const TypeSignature = props => {
                 position: "end",
                 children: /*#__PURE__*/_jsx(IconButton, {
                   onClick: () => setName(""),
-                  children: /*#__PURE__*/_jsx(ClearRoundedIcon, {})
+                  children: /*#__PURE__*/_jsx(ClearIcon, {})
                 })
               })
             }

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
@@ -147,7 +147,7 @@ const SignaturePopup = props => {
         style: {
           width: "fit-content"
         },
-        children: "Sign here"
+        children: "Sign Here"
       })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
@@ -158,7 +158,7 @@ const SignaturePopup = props => {
         sx: {
           borderRadius: "8px",
           boxShadow: "0px 4px 10px 0px #00000029",
-          maxWidth: "530px"
+          maxWidth: "560px"
         }
       },
       sx: classes.signaturePopup,
@@ -200,7 +200,7 @@ const SignaturePopup = props => {
                     children: /*#__PURE__*/_jsx(IconButton, {
                       onClick: handleClose,
                       className: "close-popupbtn",
-                      children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
+                      children: /*#__PURE__*/_jsx(CloseIcon, {})
                     })
                   })]
                 })
@@ -294,7 +294,7 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "49px"
+                    minWidth: "46px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -316,7 +316,25 @@ const SignaturePopup = props => {
                     defaultValue: defaultName || "",
                     size: "small",
                     onChange: onChange,
-                    sx: classes.signaturePopUpNameField
+                    sx: {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
+                          border: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor',
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      "& .MuiInputBase-input::placeholder": {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -420,7 +438,7 @@ const SignaturePopup = props => {
                 xs: 12,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "49px"
+                    minWidth: "46px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -441,7 +459,25 @@ const SignaturePopup = props => {
                     placeholder: "Enter Email",
                     size: "small",
                     onChange: onChange,
-                    sx: classes.signaturePopUpNameField,
+                    sx: {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
+                          border: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor',
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      "& .MuiInputBase-input::placeholder": {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    },
                     defaultValue: defaultEmail || ""
                   })
                 })]
@@ -471,8 +507,7 @@ const SignaturePopup = props => {
                     classes: classes,
                     value: brush.color,
                     onSave: onBrushColor,
-                    recentColors: [],
-                    hideGradient: true
+                    recentColors: []
                   }), /*#__PURE__*/_jsx("span", {
                     style: {
                       marginLeft: "10px",
@@ -492,16 +527,16 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: `${brush.size === m ? "activeBrush" : ""} brushIcon`,
+                      className: brush.size === m ? "activeBrush" : "",
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
-                          width: 17 + m,
-                          height: 17 + m
+                          width: 20 + m,
+                          height: 20 + m
                         },
                         children: /*#__PURE__*/_jsx(PencilIcon, {
                           style: {
-                            width: 17 + m,
-                            height: 17 + m
+                            width: 20 + m,
+                            height: 20 + m
                           }
                         })
                       })
@@ -512,11 +547,11 @@ const SignaturePopup = props => {
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
-                className: `secondaryBtn actionBtn deleteBtn deleteButtonSignature`,
+                className: "secondaryBtn actionBtn deleteBtn",
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,7 +5,6 @@ import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,14 +32,8 @@ const SimpleText = props => {
   const {
     pageColor
   } = pageSt?.pageProps || {};
-  const {
-    activeBreakPoint
-  } = useEditorContext();
-  const lineHeight = element?.children[0]?.lineHeight;
-  const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
-    lineHeight: lineH
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Elements/SimpleText/style.js

@@ -1,27 +1,10 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor,
-  lineHeight
+  pageColor
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
-    lineHeight: lineHeight,
-    "&.dataView": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
-    "&.signature": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
-    "&.grid": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
     "& .placeholder-simple-text": {
       color: "#94A3B8",
       background: "transparent",
@@ -35,8 +18,6 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: "inline-flex",
-      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

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

@@ -1,91 +1,88 @@
-const TableStyles = theme => {
-  const {
-    background,
-    closeButtonSvgStroke,
-    activeColor,
-    signaturePopUpTabButtonSelectedBg,
-    signaturePopUpTabButtonSelectedSvg,
-    aiInputBackground,
-    buttonBorder1
-  } = theme?.palette?.editor || {};
-  return {
-    tableToolBar: {
-      position: "absolute",
-      top: "-24px",
-      left: 0,
-      transition: "all 0.3s",
-      "& button": {
-        backgroundColor: aiInputBackground,
-        border: `1px solid ${buttonBorder1}`,
-        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-        borderRadius: "50%",
-        padding: "4px",
-        margin: "2px",
-        "&:hover": {
-          backgroundColor: background
-        },
-        "& svg": {
-          width: "18px",
-          height: "18px",
-          "& path": {
-            stroke: closeButtonSvgStroke
-          }
-        },
-        "&.selected": {
-          outline: `1.5px solid ${activeColor || "#2563EB"}`,
-          background: signaturePopUpTabButtonSelectedBg,
-          border: "none",
-          "& svg": {
-            "& path": {
-              stroke: signaturePopUpTabButtonSelectedSvg
-            }
-          }
-        }
-      },
-      "&.active": {
-        width: "auto",
-        "& .toggle": {
-          rotate: "180deg"
-        }
-      },
-      "& .toolbtn": {
-        "& svg": {
-          stroke: "rgb(100, 116, 139)"
-        }
+const TableStyles = themeType => ({
+  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"
       }
     },
-    table: {
-      "& td": {
-        padding: "8px 8px"
-      },
-      "& .selection-area-tc": {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        left: 0,
-        outline: "1px solid #2563EB",
-        pointerEvents: "none"
-      },
-      "& .hide-drag-btn-wrapper": {
-        "& .row-drag-btn": {
-          display: "none"
+    "& .toolbtn": {
+      "& svg": {
+        stroke: "rgb(100, 116, 139)"
+      }
+    }
+  },
+  table: {
+    "& td": {
+      padding: "8px 8px",
+      border: "1px solid #E0E0E0",
+      "&.selection": {
+        "& *::selection": {
+          background: "transparent"
         }
       }
     },
-    cellResizer: {
+    "& .selection-area-tc": {
       position: "absolute",
-      cursor: "col-resize",
-      right: "-2px",
+      width: "100%",
+      height: "100%",
       top: 0,
-      background: "transparent",
-      width: "3px",
-      borderRadius: "0px",
-      zIndex: 1,
-      "&:hover": {
-        background: "#2563EB"
-      }
+      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"
+    }
+  },
+  deleteCellsPopUp: {
+    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
+    borderRadius: "7px !important",
+    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
+    zIndex: 100,
+    minWidth: "186px !important"
+  },
+  menuItemPopUp: {
+    padding: "5px 7px !important",
+    margin: "6px !important",
+    borderRadius: 1,
+    userSelect: "none",
+    color: themeType === "dark" ? "#2563EB" : "#0F172A",
+    "&:hover": {
+      // backgroundColor: "rgba(0, 123, 255, 0.1)",
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+    },
+    "&.Mui-selected": {
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
+      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
     }
-  };
-};
+  }
+});
 export default TableStyles;