@flozy/editor 4.0.3 → 4.0.5

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -9,6 +9,7 @@ import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../..
 import useCommonStyle from "../../commonStyle";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import { validationMethods } from "../Form/FormElements/validations";
+import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -32,12 +33,14 @@ const SignaturePopup = props => {
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
+  const defaultName = metadata?.signatureDetails?.name;
+  const defaultEmail = metadata?.signatureDetails?.email;
   const [signedData, setSignedData] = useState({
     signedOn: new Date(),
     signature: "",
     signedText: "",
-    signedBy: "",
-    signedByEmail: ""
+    signedBy: defaultName || "",
+    signedByEmail: defaultEmail || ""
   });
   const [brush, setBrush] = useState({
     size: 1,
@@ -133,7 +136,15 @@ const SignaturePopup = props => {
       open: open,
       onClose: handleClose,
       fullWidth: true,
-      sx: classes.signaturePopup,
+      PaperProps: {
+        sx: {
+          borderRadius: '8px',
+          boxShadow: "0px 4px 10px 0px #00000029",
+          overflowY: tab === 0 ? "hidden" : "auto",
+          maxWidth: "560px",
+          ...classes.signaturePopup
+        }
+      },
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         children: /*#__PURE__*/_jsxs(Grid, {
@@ -154,9 +165,13 @@ const SignaturePopup = props => {
                 item: true,
                 children: /*#__PURE__*/_jsx(Typography, {
                   variant: "h6",
-                  className: "popupTitle",
+                  className: `${classes.popupTitle2}`,
                   color: "primary",
-                  children: "SIGNATURE"
+                  sx: {
+                    fontWeight: 600,
+                    color: "#000000"
+                  },
+                  children: "Signature"
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -196,24 +211,39 @@ const SignaturePopup = props => {
                 children: [/*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(DrawSignature, {
+                      fill: tab === 0 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Draw Signature"
                     })]
                   })
                 }), /*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(TypeSignature, {
+                      fill: tab === 1 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Type Signature"
                     })]
                   })
                 }), /*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(UploadSignature, {
+                      fill: tab === 2 ? "#2563EB" : "#A2B0B9"
+                    }), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
+                      style: {
+                        textTransform: "none"
+                      },
                       children: "Upload Signature"
                     })]
                   })
@@ -244,7 +274,9 @@ const SignaturePopup = props => {
                 xs: 6,
                 style: {
                   display: "flex",
-                  alignItems: "center"
+                  alignItems: "center",
+                  fontSize: "14px",
+                  fontFamily: '"Inter", sans-serif"'
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
@@ -252,6 +284,11 @@ const SignaturePopup = props => {
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Name:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
@@ -262,8 +299,28 @@ const SignaturePopup = props => {
                     id: "signedBy",
                     name: "signedBy",
                     placeholder: "Enter Name",
+                    defaultValue: defaultName || "",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '10px',
+                        '& fieldset': {
+                          borderColor: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor', 
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      '& .MuiInputBase-input::placeholder': {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -277,8 +334,14 @@ const SignaturePopup = props => {
                   style: {
                     marginRight: "8px"
                   },
+                  xs: 2,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedOn",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Date:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
@@ -288,45 +351,121 @@ const SignaturePopup = props => {
                   },
                   xs: 12,
                   children: /*#__PURE__*/_jsx(DatePicker, {
-                    showIcon: true,
-                    id: "signedOn",
-                    name: "signedOn",
-                    selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
-                    value: signedData?.signedOn || "",
-                    dateFormat: "MM/dd/yyyy",
+                    selected: signedData.signedOn,
                     onChange: date => {
                       setSignedData({
                         ...signedData,
-                        signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
+                        signedOn: date
                       });
-                    }
+                    },
+                    dateFormat: "yyyy/MM/dd",
+                    customInput: /*#__PURE__*/_jsx(TextField, {
+                      fullWidth: true,
+                      name: "signedOn",
+                      placeholder: "Select Date",
+                      size: "small",
+                      InputProps: {
+                        startAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                          position: "start",
+                          sx: {
+                            padding: 0,
+                            // Remove padding around the InputAdornment
+                            margin: 0 // Remove any margins
+                          },
+                          children: /*#__PURE__*/_jsx(IconButton, {
+                            children: /*#__PURE__*/_jsx(CalenderIconSignature, {})
+                          })
+                        }),
+                        endAdornment: /*#__PURE__*/_jsx(InputAdornment, {
+                          position: "end",
+                          children: /*#__PURE__*/_jsx(IconButton, {
+                            children: /*#__PURE__*/_jsx(CalenderDownIconSignature, {})
+                          })
+                        }),
+                        sx: {
+                          "& .MuiOutlinedInput-notchedOutline": {
+                            borderColor: "transparent" // Remove the internal border
+                          },
+
+                          "& .MuiInputBase-input": {
+                            border: "none",
+                            // Ensure no border inside the input field
+                            padding: "4px 0",
+                            // Adjust padding for consistency
+                            boxShadow: "none !important",
+                            color: "#778599 !important"
+                          }
+                        }
+                      },
+                      sx: {
+                        "& .MuiOutlinedInput-root": {
+                          borderRadius: "10px",
+                          backgroundColor: "#fff",
+                          padding: "0px !important",
+                          "&:hover fieldset": {
+                            borderColor: "#D8DDE1" // Keeps the border on hover only around the outer field
+                          },
+
+                          "& fieldset": {
+                            borderColor: "#D8DDE1" // Keeps the outer border light
+                          }
+                        }
+                      }
+                    })
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
                 item: true,
-                xs: 6,
+                xs: 12,
                 style: {
                   display: "flex",
                   alignItems: "center"
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
-                    marginRight: "8px"
+                    marginRight: "6px"
                   },
+                  xs: 1,
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
+                    style: {
+                      fontFamily: '"Inter", sans-serif',
+                      fontWeight: 500,
+                      fontSize: "14px"
+                    },
                     children: "Email:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
+                  container: true,
                   item: true,
-                  xs: 12,
+                  xs: 11,
                   children: /*#__PURE__*/_jsx(TextField, {
                     fullWidth: true,
                     id: "signedByEmail",
                     name: "signedByEmail",
                     placeholder: "Enter Email",
                     size: "small",
-                    onChange: onChange
+                    onChange: onChange,
+                    sx: {
+                      '& .MuiOutlinedInput-root': {
+                        borderRadius: '10px',
+                        '& fieldset': {
+                          borderColor: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor', 
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      '& .MuiInputBase-input::placeholder': {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    },
+                    defaultValue: defaultEmail || ""
                   })
                 })]
               })]
@@ -343,14 +482,30 @@ const SignaturePopup = props => {
               children: [/*#__PURE__*/_jsx(Grid, {
                 item: true,
                 sx: {
-                  mr: 4
+                  mr: 3
                 },
-                children: /*#__PURE__*/_jsx("input", {
-                  type: "color",
-                  className: "brushcolorpic signColorPicker",
-                  onChange: onBrushColor,
-                  size: "4",
-                  value: brush?.color
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  alignItems: "center",
+                  sx: {
+                    display: 'flex'
+                  },
+                  children: [/*#__PURE__*/_jsx("input", {
+                    type: "color",
+                    className: "brushcolorpic signColorPicker",
+                    onChange: onBrushColor,
+                    size: "4",
+                    value: brush?.color
+                  }), /*#__PURE__*/_jsx("span", {
+                    style: {
+                      marginLeft: "10px",
+                      fontFamily: '"Inter", sans-serif',
+                      fontSize: "14px",
+                      fontWeight: 500,
+                      color: "#333"
+                    },
+                    children: brush.color
+                  })]
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -381,7 +536,7 @@ const SignaturePopup = props => {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
                 className: "secondaryBtn",
-                children: "Delete"
+                children: "Clear"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
                 className: `primaryBtn ${isEmpty ? "disabled" : ""}`,

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

@@ -6,7 +6,9 @@ import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 const SimpleText = props => {
   const {
     theme,
@@ -38,15 +40,25 @@ const SimpleText = props => {
   const showPlaceHolder = !readOnly && path.length === 1 && isEmpty;
   const isEmptyEditor = !readOnly && isEmpty && editor.children.length === 1 && !selected;
   const opacity = !isTextSelected(editor?.selection);
-  return /*#__PURE__*/_jsxs(Box, {
+  const nextType = element?.children[0]?.type;
+  return /*#__PURE__*/_createElement(Box, {
     ...element.attr,
     ...attributes,
-    className: `simple-text`,
+    className: `simple-text ${nextType}`,
     sx: classes.root,
-    children: [children, openAI ? null : /*#__PURE__*/_jsx("span", {
-      className: "placeholder-simple-text",
-      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
-    })]
-  });
+    key: `para_${path.join("|")}`
+  }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
+    className: "placeholder-simple-text",
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: ["Type ", /*#__PURE__*/_jsx("span", {
+        style: {
+          backgroundColor: '#F2F6FA',
+          padding: "0px 2px",
+          borderRadius: "2px"
+        },
+        children: "/"
+      }), " to browse elements"]
+    }) : "" : ""
+  }));
 };
 export default SimpleText;

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

@@ -6,7 +6,7 @@ const SimpleTextStyle = ({
     position: "relative",
     padding: "0px",
     "& .placeholder-simple-text": {
-      color: invertColor(pageColor),
+      color: "#94A3B8",
       background: "transparent",
       position: "absolute",
       zIndex: -1,
@@ -23,6 +23,49 @@ const SimpleTextStyle = ({
         background: "transparent",
         color: invertColor(pageColor)
       }
+    },
+    "& .freegrid-section": {
+      "&.enable-1:before": {
+        content: "' '",
+        pointerEvents: "none",
+        position: "absolute",
+        left: "2px",
+        top: "2px",
+        width: "calc(100% - 4px)",
+        height: "calc(100% - 4px)",
+        outline: "2px solid #2563EB",
+        zIndex: 1
+      },
+      "&:hover, &.enable-1": {
+        "& .freegrid-section-infos": {
+          pointerEvents: "none",
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          zIndex: 1,
+          ":before": {
+            position: "absolute",
+            content: "attr(placeholder)",
+            left: "0px",
+            top: "0px",
+            width: "auto",
+            height: "auto",
+            backgroundColor: "#8360FD",
+            padding: "4px 6px",
+            fontSize: "12px",
+            fontWeight: "500",
+            color: "#FFF",
+            lineHeight: "12px"
+          }
+        }
+      },
+      "& .bottom-handle": {
+        "&.parent": {
+          bottom: "2px !important",
+          zIndex: 1
+        }
+      }
     }
   },
   section: {

package/dist/Editor/ErrorBoundary.js

@@ -0,0 +1,30 @@
+import React, { Component } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hasError: false
+    };
+  }
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return {
+      hasError: true
+    };
+  }
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.error("Error caught in Error Boundary: ", error, errorInfo);
+  }
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return /*#__PURE__*/_jsx("h1", {
+        children: "Something went wrong."
+      });
+    }
+    return this.props.children;
+  }
+}
+export default ErrorBoundary;

package/dist/Editor/Styles/EditorStyles.js

@@ -29,6 +29,33 @@ const editorStyles = ({
       "& .MuiOutlinedInput-input": {
         color: theme?.palette?.editor?.textColor || "black"
       }
+    },
+    "&.stimulate-xs": {
+      "& .scrollable-content": {
+        width: "320px"
+      },
+      ":before": {
+        content: '" "',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "calc(50% - 162px)",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundColor: "#FFF",
+        zIndex: 10
+      },
+      ":after": {
+        content: '" "',
+        position: "absolute",
+        top: 0,
+        right: 0,
+        width: "calc(50% - 160px)",
+        height: "100%",
+        pointerEvents: "none",
+        backgroundColor: "#FFF",
+        zIndex: 10
+      }
     }
   },
   slateWrapper: {
@@ -243,6 +270,7 @@ const editorStyles = ({
       }
     },
     "&.hideScroll": {
+      overflowAnchor: "none",
       "&::-webkit-scrollbar-track": {
         background: "none !important"
       },

package/dist/Editor/Toolbar/FormatTools/Dropdown.js

@@ -28,7 +28,7 @@ const Dropdown = ({
       width: width || "100%",
       height: "36px",
       borderRadius: "10px",
-      fontSize: "14px"
+      fontSize: "12px"
     },
     MenuProps: {
       PaperProps: {

package/dist/Editor/Toolbar/FormatTools/TextSize.js

@@ -93,9 +93,9 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
-          textAlign: "center",
+          // textAlign: "center",
           height: "19px",
-          fontSize: "14px"
+          fontSize: "12px"
         }
       },
       fullWidth: fullWidth,

package/dist/Editor/Toolbar/Mini/MiniToolbar.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { useSlate } from "slate-react";
 import { Box, Dialog, IconButton, Paper, Popper, Tooltip } from "@mui/material";
 import MENU_OPTIONS from "./Options/Options";
@@ -18,6 +18,11 @@ const POPUP_TYPES = {
   addElement: AddElements,
   addTemplate: AddTemplates
 };
+const POPUP_OFFSETS = {
+  textFormat: [80, 5],
+  addElement: [60, 5],
+  addTemplate: [20, 5]
+};
 const FULLSCREEN_POPUP = {
   addTemplate: true
 };
@@ -44,6 +49,7 @@ const MiniToolbar = props => {
   const {
     hideTools
   } = customProps;
+  const boxRef = useRef(null); // Add ref to get the Box element
   const UPDATED_MENU_OPTIONS = MENU_OPTIONS.filter(f => (hideTools || [])?.indexOf(f.type) === -1);
   const {
     popupType
@@ -82,20 +88,35 @@ const MiniToolbar = props => {
   };
   const closePopper = data => {
     setData(data);
-    setToolTip("false");
+    setToolTip(false);
+  };
+
+  // Calculate center of Box for Popper/Modal positioning
+  const getBoxCenter = () => {
+    if (boxRef.current) {
+      const rect = boxRef.current.getBoundingClientRect();
+      return {
+        top: rect.top + rect.height / 2,
+        left: rect.left + rect.width / 2
+      };
+    }
+    return {
+      top: 0,
+      left: 0
+    };
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Box, {
       component: "div",
       className: "mini-tool-wrpr-ei",
       sx: classes.root,
+      ref: boxRef,
       children: UPDATED_MENU_OPTIONS.map(({
         type,
         label,
         icon: Icon
       }) => {
-        const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false; // for textFormat type
-
+        const isDisabled = popupType === type || type === 'undo' ? !canUndo : type === 'redo' ? !canRedo : false;
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
@@ -123,11 +144,18 @@ const MiniToolbar = props => {
     }), /*#__PURE__*/_jsx(DialogComp, {
       open: open,
       onClose: onClose,
-      anchorEl: anchorEl,
+      anchorEl: anchorEl || getBoxCenter() // Positioning at center of Box
+      ,
       placement: "top",
       sx: popupStyles.popupWrapper,
       className: `tools-drawer ${fullScreen ? "fullscreen" : ""}`,
       fullScreen: fullScreen,
+      modifiers: [{
+        name: "offset",
+        options: {
+          offset: POPUP_OFFSETS[popper] || [0, 10] // Add some space between anchor and popper
+        }
+      }],
       children: PopupComponent ? /*#__PURE__*/_jsxs(Paper, {
         className: "papper-wrpr",
         style: {

package/dist/Editor/Toolbar/PopupTool/ButtonTemplatesCard.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { Box, Button, Card, CardMedia, Grid } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const Select = props => {
   const {
     classes,
@@ -34,19 +33,19 @@ const ButtonTemplateCard = props => {
     xs: 3,
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
-      children: /*#__PURE__*/_jsxs(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         sx: classes.buttonCardMediaWrpr,
-        children: [/*#__PURE__*/_jsx(CardMedia, {
-          className: `template-card-media`,
-          component: "div",
-          image: m?.thumbnail,
-          alt: m?.title,
-          sx: classes.buttonCardMedia
-        }), /*#__PURE__*/_jsx(Select, {
-          classes: classes,
-          onSelectTemplate: onSelectTemplate,
-          data: m
-        })]
+        onClick: onSelectTemplate(m),
+        children: /*#__PURE__*/_jsx("div", {
+          className: "img-wrapper",
+          children: /*#__PURE__*/_jsx(CardMedia, {
+            className: `template-card-media`,
+            component: "div",
+            image: m?.thumbnail,
+            alt: m?.title,
+            sx: classes.buttonCardMedia
+          })
+        })
       })
     })
   }, `template_${m.id}`);