@flozy/editor 5.5.8 → 5.6.0

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

@@ -45,29 +45,36 @@ const GridItemToolbar = props => {
     onAddColumn,
     columnRef
   } = props;
-  return selected && !showTool ? /*#__PURE__*/_jsxs(Popper, {
+  return selected && !showTool ? /*#__PURE__*/_jsx(Popper, {
     anchorEl: columnRef?.current,
     open: true,
     placement: "top-end",
     sx: classes.popTools,
     className: "gi-tool-pp",
-    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, {})
-      })
-    })]
+    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, {})
+        })
+      })]
+    })
   }) : null;
 };
 const GridItem = props => {
@@ -293,24 +300,26 @@ const GridItem = props => {
     },
     "data-path": path.join(","),
     "data-info": "handle-outside-editor-click",
-    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: " "
+    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: " "
+        })]
       }), /*#__PURE__*/_jsx(GridItemToolbar, {
         classes: classes,
         selected: selected,
@@ -351,12 +360,14 @@ 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,6 +106,56 @@ 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" : ""} ${isActive ? "btnActive" : ""}`,
+        className: `${showInput ? "clicked btnActive" : ""} ${isActive ? "btnActive" : ""}`,
         format: "link",
         onClick: toggleLink,
         children: /*#__PURE__*/_jsx(Icon, {

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

@@ -91,6 +91,7 @@ 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: 1px dashed #92B1F5 !important;
+    border: 1.5px dashed #2563EB !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 ClearIcon from "@mui/icons-material/Clear";
+import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
 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(ClearIcon, {})
+                  children: /*#__PURE__*/_jsx(ClearRoundedIcon, {})
                 })
               })
             }

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 CloseIcon from "@mui/icons-material/Close";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 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: "560px"
+          maxWidth: "530px"
         }
       },
       sx: classes.signaturePopup,
@@ -200,7 +200,7 @@ const SignaturePopup = props => {
                     children: /*#__PURE__*/_jsx(IconButton, {
                       onClick: handleClose,
                       className: "close-popupbtn",
-                      children: /*#__PURE__*/_jsx(CloseIcon, {})
+                      children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
                     })
                   })]
                 })
@@ -294,7 +294,7 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -316,25 +316,7 @@ const SignaturePopup = props => {
                     defaultValue: defaultName || "",
                     size: "small",
                     onChange: onChange,
-                    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"
-                      }
-                    }
+                    sx: classes.signaturePopUpNameField
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -438,7 +420,7 @@ const SignaturePopup = props => {
                 xs: 12,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "46px"
+                    minWidth: "49px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -459,25 +441,7 @@ const SignaturePopup = props => {
                     placeholder: "Enter Email",
                     size: "small",
                     onChange: onChange,
-                    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"
-                      }
-                    },
+                    sx: classes.signaturePopUpNameField,
                     defaultValue: defaultEmail || ""
                   })
                 })]
@@ -507,7 +471,8 @@ const SignaturePopup = props => {
                     classes: classes,
                     value: brush.color,
                     onSave: onBrushColor,
-                    recentColors: []
+                    recentColors: [],
+                    hideGradient: true
                   }), /*#__PURE__*/_jsx("span", {
                     style: {
                       marginLeft: "10px",
@@ -527,16 +492,16 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: brush.size === m ? "activeBrush" : "",
+                      className: `${brush.size === m ? "activeBrush" : ""} brushIcon`,
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
-                          width: 20 + m,
-                          height: 20 + m
+                          width: 17 + m,
+                          height: 17 + m
                         },
                         children: /*#__PURE__*/_jsx(PencilIcon, {
                           style: {
-                            width: 20 + m,
-                            height: 20 + m
+                            width: 17 + m,
+                            height: 17 + m
                           }
                         })
                       })
@@ -547,11 +512,11 @@ const SignaturePopup = props => {
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
-                className: "secondaryBtn actionBtn deleteBtn",
+                className: `secondaryBtn actionBtn deleteBtn deleteButtonSignature`,
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

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

@@ -20,7 +20,8 @@ const SimpleText = props => {
     attributes,
     children,
     customProps,
-    isEmpty
+    isEmpty,
+    isChatEditor = false
   } = props;
   const {
     readOnly,
@@ -37,7 +38,7 @@ const SimpleText = props => {
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
+  const showPlaceHolder = !readOnly && path.length === 1 && isEmpty && !isChatEditor;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
   const opacity = !isTextSelected(editor?.selection);
   const nextType = element?.children[0]?.type;

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

@@ -5,6 +5,21 @@ const SimpleTextStyle = ({
   root: {
     position: "relative",
     padding: "0px",
+    "&.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",

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

@@ -0,0 +1,77 @@
+import { Button } from "@mui/material";
+import { useMemo, useState } from "react";
+import useTable from "../../hooks/useTable";
+import { jsx as _jsx } from "react/jsx-runtime";
+const showAddButton = (addType, tableNode, hoverPath) => {
+  const [row, col] = hoverPath && hoverPath?.length ? hoverPath.slice(-2) : [];
+  if (addType === "row") {
+    return tableNode?.rows - 1 === row;
+  } else {
+    return tableNode?.columns - 1 === col;
+  }
+};
+const ADD_COL_BTN_WIDTH = 20;
+function AddRowCol(props) {
+  const {
+    tableRef,
+    containerRef,
+    addType,
+    tableNode,
+    onAdd,
+    readOnly
+  } = props;
+  const {
+    hoverPath
+  } = useTable();
+  const [hoveringAddBtn, setHoveringAddBtn] = useState(false);
+  const {
+    tableResizing
+  } = useTable();
+  const {
+    clientHeight,
+    scrollWidth
+  } = tableRef?.current || {};
+  const {
+    clientWidth: containerWidth
+  } = containerRef?.current || {};
+  const buttonStyle = useMemo(() => {
+    if (addType === "row") {
+      const isScrollEnabled = scrollWidth > containerWidth;
+      const width = isScrollEnabled ? containerWidth - ADD_COL_BTN_WIDTH : scrollWidth;
+      return {
+        width
+      };
+    } else {
+      return {
+        height: "100%",
+        marginLeft: "3px"
+      };
+    }
+  }, [scrollWidth, clientHeight, containerWidth, tableResizing]);
+  const showAdd = showAddButton(addType, tableNode, hoverPath);
+  const onMouseEnter = () => setHoveringAddBtn(true);
+  const onMouseLeave = () => setHoveringAddBtn(false);
+  const showBtn = (showAdd || hoveringAddBtn) && !tableResizing && !readOnly;
+  return /*#__PURE__*/_jsx("div", {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    contentEditable: false,
+    children: /*#__PURE__*/_jsx(Button, {
+      sx: {
+        fontSize: "14px",
+        border: "1px dashed #8DA8E3",
+        color: "#2563EB !important",
+        padding: "0px 4px",
+        minWidth: "unset",
+        lineHeight: "18px",
+        fontWeight: "normal !important",
+        ...buttonStyle,
+        opacity: showBtn ? 1 : 0
+      },
+      disabled: !showBtn,
+      onClick: onAdd,
+      children: "+"
+    })
+  });
+}
+export default AddRowCol;

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

@@ -0,0 +1,142 @@
+import { Box, ClickAwayListener, Fade, IconButton, Paper, Popper } from "@mui/material";
+import DragStyles from "./DragStyles";
+import { DragIcon } from "../../common/iconListV2";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { useRef, useState } from "react";
+import { TableToolOnDrag } from "./TableTool";
+import Draggable from "./Draggable";
+import SwipeableDrawerComponent from "../../common/SwipeableDrawer";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function DragButton({
+  anchorEl,
+  placement,
+  dragType,
+  onDrag = () => {},
+  handleToolAction,
+  hideDelete,
+  className = "",
+  customProps,
+  dndProps,
+  resetSelection,
+  show
+}) {
+  const {
+    theme
+  } = useEditorContext();
+  const classes = DragStyles(theme);
+  const dragElement = useRef(null);
+  const [showTool, setShowTool] = useState(false);
+  const {
+    isMobile
+  } = customProps || {};
+  const onDragClick = () => {
+    onDrag();
+    setShowTool(true);
+  };
+  const onDragClose = () => {
+    setShowTool(false);
+    setTimeout(() => resetSelection(), 200);
+  };
+  const dragProps = {
+    ...dndProps,
+    id: dndProps?.id + dragType,
+    disabled: isMobile,
+    data: {
+      ...dndProps.data,
+      dragType
+    }
+  };
+  const handleAction = (value, option, dragType) => {
+    const omitValues = ["delete"];
+    if (!omitValues.includes(value)) {
+      setShowTool(false);
+    }
+    handleToolAction(value, option, dragType);
+  };
+  const commonToolProps = {
+    theme,
+    dragType,
+    hideDelete,
+    handleToolAction: (value, option, dragType) => {
+      handleAction(value, option, dragType);
+    }
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: show || showTool ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Popper, {
+        sx: classes.popper,
+        open: Boolean(anchorEl),
+        anchorEl: anchorEl,
+        placement: placement || "left",
+        transition: true,
+        contentEditable: false,
+        ref: dragElement,
+        modifiers: [{
+          name: "offset",
+          options: {
+            offset: [0, -12]
+          }
+        }, {
+          name: "flip",
+          enabled: false // Disable dynamic flipping
+        }],
+
+        disablePortal: dragType !== "row",
+        className: `${className}`,
+        children: ({
+          TransitionProps
+        }) => /*#__PURE__*/_jsx(Fade, {
+          ...TransitionProps,
+          timeout: 350,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(Draggable, {
+              ...dragProps,
+              children: /*#__PURE__*/_jsx(Paper, {
+                sx: dragType === "row" ? {
+                  transform: "rotate(90deg)"
+                } : {},
+                className: `${showTool ? "active" : ""}`,
+                style: {
+                  lineHeight: 0
+                },
+                children: /*#__PURE__*/_jsx(IconButton, {
+                  onClick: () => {
+                    onDragClick();
+                  },
+                  children: /*#__PURE__*/_jsx(DragIcon, {})
+                })
+              })
+            })
+          })
+        })
+      }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+        open: showTool,
+        onClose: onDragClose,
+        swipeableDrawer: true,
+        children: /*#__PURE__*/_jsx(Box, {
+          sx: classes.mobileToolDrawer,
+          children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+            ...commonToolProps
+          })
+        })
+      }) : /*#__PURE__*/_jsx(Popper, {
+        open: showTool,
+        anchorEl: dragElement?.current,
+        contentEditable: false,
+        sx: classes.toolPopper,
+        placement: dragType === "row" ? "bottom-start" : "right-start",
+        children: /*#__PURE__*/_jsx(ClickAwayListener, {
+          onClickAway: onDragClose,
+          children: /*#__PURE__*/_jsx("div", {
+            children: /*#__PURE__*/_jsx(TableToolOnDrag, {
+              ...commonToolProps
+            })
+          })
+        })
+      })]
+    }) : null
+  });
+}
+export default DragButton;