@flozy/editor 4.0.0 → 4.0.2

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";
@@ -135,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, {
@@ -156,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,
@@ -198,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"
                     })]
                   })
@@ -246,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: {
@@ -254,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, {
@@ -268,8 +303,22 @@ const SignaturePopup = props => {
                     size: "small",
                     onChange: onChange,
                     sx: {
-                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-                        borderColor: '#ccc'
+                      '& .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"
                       }
                     }
                   })
@@ -285,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, {
@@ -296,39 +351,94 @@ 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",
-                    minWidth: '44px'
+                    marginRight: "8px"
                   },
+                  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",
@@ -337,8 +447,22 @@ const SignaturePopup = props => {
                     size: "small",
                     onChange: onChange,
                     sx: {
-                      '& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline': {
-                        borderColor: '#ccc'
+                      '& .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 || ""
@@ -358,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,
@@ -396,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,6 +6,7 @@ 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";
 const SimpleText = props => {
   const {
@@ -45,7 +46,16 @@ const SimpleText = props => {
     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" : "" : ""
+      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"]
+      }) : "" : ""
     })]
   });
 };

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,

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

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

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

@@ -87,9 +87,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,13 +88,29 @@ 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,
@@ -123,11 +145,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/MiniTextFormat/CustomSelectTool.js

@@ -19,6 +19,9 @@ const CustomSelectTool = ({
         e.preventDefault();
         setAnchorEl(e.currentTarget);
       },
+      style: {
+        margin: "0px"
+      },
       children: [selected?.label || selected?.title, " ", /*#__PURE__*/_jsx(DownArrowIcon, {})]
     }), /*#__PURE__*/_jsx(Popover, {
       open: open,

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectSuperSubscript.js

@@ -0,0 +1,59 @@
+import { useMemo } from "react";
+import { activeMark, toggleMark } from "../../../utils/SlateUtilityFunctions";
+import CustomSelectTool from "./CustomSelectTool";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+function Label({
+  label,
+  type
+}) {
+  return /*#__PURE__*/_jsxs("span", {
+    children: [/*#__PURE__*/_jsx("strong", {
+      children: label
+    }), " ", type]
+  });
+}
+const superSubscriptOptions = [{
+  id: 9,
+  format: "superscript",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "X²",
+    type: "Superscript"
+  }),
+  label: "X²",
+  group: "superSubscript",
+  value: "superscript"
+}, {
+  id: 10,
+  format: "subscript",
+  type: "mark",
+  title: /*#__PURE__*/_jsx(Label, {
+    label: "X₂",
+    type: "Subscript"
+  }),
+  label: "X₂",
+  group: "superSubscript",
+  value: "subscript"
+}];
+function SelectSuperSubscript({
+  editor,
+  classes,
+  closeMainPopup
+}) {
+  const selectedMark = useMemo(() => {
+    return superSubscriptOptions.find(option => activeMark(editor, option.format));
+  }, [editor]);
+  const onChange = format => {
+    toggleMark(editor, format);
+    closeMainPopup();
+  };
+  return /*#__PURE__*/_jsx(CustomSelectTool, {
+    options: superSubscriptOptions,
+    editor: editor,
+    onChange: onChange,
+    value: selectedMark?.value || "superscript",
+    classes: classes
+  });
+}
+export default SelectSuperSubscript;

package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js

@@ -121,7 +121,8 @@ const MiniTextFormat = props => {
                 onClose: () => setAnchorEl(null)
               }), /*#__PURE__*/_jsx(TextFormat, {
                 editor: editor,
-                classes: classes
+                classes: classes,
+                closeMainPopup: closeMainPopup
               })]
             })
           })