@flozy/editor 4.0.2 → 4.0.3

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, InputAdornment } from "@mui/material";
+import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -9,7 +9,6 @@ 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";
@@ -33,14 +32,12 @@ 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: defaultName || "",
-    signedByEmail: defaultEmail || ""
+    signedBy: "",
+    signedByEmail: ""
   });
   const [brush, setBrush] = useState({
     size: 1,
@@ -136,15 +133,7 @@ const SignaturePopup = props => {
       open: open,
       onClose: handleClose,
       fullWidth: true,
-      PaperProps: {
-        sx: {
-          borderRadius: '8px',
-          boxShadow: "0px 4px 10px 0px #00000029",
-          overflowY: tab === 0 ? "hidden" : "auto",
-          maxWidth: "560px",
-          ...classes.signaturePopup
-        }
-      },
+      sx: classes.signaturePopup,
       children: /*#__PURE__*/_jsx(Grid, {
         container: true,
         children: /*#__PURE__*/_jsxs(Grid, {
@@ -165,13 +154,9 @@ const SignaturePopup = props => {
                 item: true,
                 children: /*#__PURE__*/_jsx(Typography, {
                   variant: "h6",
-                  className: `${classes.popupTitle2}`,
+                  className: "popupTitle",
                   color: "primary",
-                  sx: {
-                    fontWeight: 600,
-                    color: "#000000"
-                  },
-                  children: "Signature"
+                  children: "SIGNATURE"
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -211,39 +196,24 @@ const SignaturePopup = props => {
                 children: [/*#__PURE__*/_jsx(Tab, {
                   label: /*#__PURE__*/_jsxs(Grid, {
                     className: "dflex alignCenter",
-                    children: [/*#__PURE__*/_jsx(DrawSignature, {
-                      fill: tab === 0 ? "#2563EB" : "#A2B0B9"
-                    }), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__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, {
-                      fill: tab === 1 ? "#2563EB" : "#A2B0B9"
-                    }), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__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, {
-                      fill: tab === 2 ? "#2563EB" : "#A2B0B9"
-                    }), /*#__PURE__*/_jsx("span", {
+                    children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
                       className: "ml-1",
-                      style: {
-                        textTransform: "none"
-                      },
                       children: "Upload Signature"
                     })]
                   })
@@ -274,9 +244,7 @@ const SignaturePopup = props => {
                 xs: 6,
                 style: {
                   display: "flex",
-                  alignItems: "center",
-                  fontSize: "14px",
-                  fontFamily: '"Inter", sans-serif"'
+                  alignItems: "center"
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   style: {
@@ -284,11 +252,6 @@ const SignaturePopup = props => {
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
-                    style: {
-                      fontFamily: '"Inter", sans-serif',
-                      fontWeight: 500,
-                      fontSize: "14px"
-                    },
                     children: "Name:"
                   })
                 }), /*#__PURE__*/_jsx(Grid, {
@@ -299,28 +262,8 @@ const SignaturePopup = props => {
                     id: "signedBy",
                     name: "signedBy",
                     placeholder: "Enter Name",
-                    defaultValue: defaultName || "",
                     size: "small",
-                    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"
-                      }
-                    }
+                    onChange: onChange
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -334,14 +277,8 @@ 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, {
@@ -351,72 +288,23 @@ const SignaturePopup = props => {
                   },
                   xs: 12,
                   children: /*#__PURE__*/_jsx(DatePicker, {
-                    selected: signedData.signedOn,
+                    showIcon: true,
+                    id: "signedOn",
+                    name: "signedOn",
+                    selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
+                    value: signedData?.signedOn || "",
+                    dateFormat: "MM/dd/yyyy",
                     onChange: date => {
                       setSignedData({
                         ...signedData,
-                        signedOn: date
+                        signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
                       });
-                    },
-                    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: 12,
+                xs: 6,
                 style: {
                   display: "flex",
                   alignItems: "center"
@@ -425,47 +313,20 @@ const SignaturePopup = props => {
                   style: {
                     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: 11,
+                  xs: 12,
                   children: /*#__PURE__*/_jsx(TextField, {
                     fullWidth: true,
                     id: "signedByEmail",
                     name: "signedByEmail",
                     placeholder: "Enter Email",
                     size: "small",
-                    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 || ""
+                    onChange: onChange
                   })
                 })]
               })]
@@ -482,30 +343,14 @@ const SignaturePopup = props => {
               children: [/*#__PURE__*/_jsx(Grid, {
                 item: true,
                 sx: {
-                  mr: 3
+                  mr: 4
                 },
-                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
-                  })]
+                children: /*#__PURE__*/_jsx("input", {
+                  type: "color",
+                  className: "brushcolorpic signColorPicker",
+                  onChange: onBrushColor,
+                  size: "4",
+                  value: brush?.color
                 })
               }), /*#__PURE__*/_jsx(Grid, {
                 item: true,
@@ -536,7 +381,7 @@ const SignaturePopup = props => {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
                 className: "secondaryBtn",
-                children: "Clear"
+                children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
                 className: `primaryBtn ${isEmpty ? "disabled" : ""}`,

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

@@ -6,7 +6,6 @@ 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 {
@@ -46,16 +45,7 @@ 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 ? /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["Type ", /*#__PURE__*/_jsx("span", {
-          style: {
-            backgroundColor: '#F2F6FA',
-            padding: "0px 2px",
-            borderRadius: "2px"
-          },
-          children: "/"
-        }), " to browse elements"]
-      }) : "" : ""
+      children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? "Type / to browse elements" : "" : ""
     })]
   });
 };

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

@@ -6,7 +6,7 @@ const SimpleTextStyle = ({
     position: "relative",
     padding: "0px",
     "& .placeholder-simple-text": {
-      color: "#94A3B8",
+      color: invertColor(pageColor),
       background: "transparent",
       position: "absolute",
       zIndex: -1,

package/dist/Editor/MiniEditor.js

@@ -23,8 +23,7 @@ const MiniEditor = props => {
     miniEditorPlaceholder,
     className,
     otherProps,
-    onSave,
-    theme
+    onSave
   } = props;
   const {
     CHARACTERS = []
@@ -133,7 +132,6 @@ const MiniEditor = props => {
     editor: editor,
     initialValue: content,
     onChange: onChange,
-    theme: theme,
     children: [/*#__PURE__*/_jsx(BasicToolbar, {
       ...props
     }), /*#__PURE__*/_jsx(Editable, {

package/dist/Editor/Toolbar/Basic/index.js

@@ -25,8 +25,7 @@ const BasicToolbar = props => {
       hideTextColor = false,
       hideResetIcon = true,
       onResetClick = () => {}
-    },
-    theme
+    }
   } = props;
   // state
   const [activeColor, setActiveColor] = useState("#000000");
@@ -66,8 +65,7 @@ const BasicToolbar = props => {
             item: true,
             children: /*#__PURE__*/_jsx(LinkButton, {
               active: isBlockActive(editor, link.format),
-              editor: editor,
-              theme: theme
+              editor: editor
             }, link.id)
           }), !hideTextColor && /*#__PURE__*/_jsx(Grid, {
             item: true,

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

@@ -1,32 +1,8 @@
 import React from "react";
 import { Select, MenuItem } from "@mui/material";
-import { addMarkData, activeMark, getSelectedElementStyle } from "../../utils/SlateUtilityFunctions.js";
+import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
 import { fontFamilyMap } from "../../utils/font";
-import { toolbarGroups } from "../toolbarGroups.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const allTools = toolbarGroups.flat();
-const fontWeight = allTools.find(f => f.format === "fontWeight");
-const getValue = (editor, format) => {
-  switch (format) {
-    case "fontFamily":
-      {
-        const style = getSelectedElementStyle("font-family", editor);
-        const val = Object.entries(fontFamilyMap).find(([key, value]) => value === style)?.[0];
-        return val || fontFamilyMap.PoppinsRegular;
-      }
-    case "fontWeight":
-      {
-        const {
-          options
-        } = fontWeight || {};
-        const fontWeightStyle = getSelectedElementStyle("font-weight", editor);
-        const selected = options?.find(o => o.value === fontWeightStyle || o.numVal === fontWeightStyle);
-        return selected?.value;
-      }
-    default:
-      return activeMark(editor, format);
-  }
-};
 const Dropdown = ({
   classes,
   editor,
@@ -34,7 +10,7 @@ const Dropdown = ({
   options,
   width
 }) => {
-  const value = getValue(editor, format);
+  const value = activeMark(editor, format);
   const changeMarkData = (event, format) => {
     event.preventDefault();
     const value = event.target.value;
@@ -52,7 +28,7 @@ const Dropdown = ({
       width: width || "100%",
       height: "36px",
       borderRadius: "10px",
-      fontSize: "12px"
+      fontSize: "14px"
     },
     MenuProps: {
       PaperProps: {

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

@@ -1,7 +1,7 @@
 import React from "react";
 import Icon from "../../common/Icon";
 import Button from "../../common/Button";
-import { toggleMark, isMarkBtnActive } from "../../utils/SlateUtilityFunctions.js";
+import { toggleMark, isMarkActive } from "../../utils/SlateUtilityFunctions.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const MarkButton = ({
   editor,
@@ -9,7 +9,7 @@ const MarkButton = ({
   title
 }) => {
   return /*#__PURE__*/_jsx(Button, {
-    active: isMarkBtnActive(editor, format),
+    active: isMarkActive(editor, format),
     format: format,
     onMouseDown: e => {
       e.preventDefault();

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

@@ -1,8 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { TextField, IconButton } from "@mui/material";
-import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
+import { addMarkData, activeMark, isBlockActive } from "../../utils/SlateUtilityFunctions.js";
+import { headingMap, sizeMap } from "../../utils/font.js";
 import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.js";
-import { getBreakPointsValue, getTextSizeVal } from "../../helper/theme.js";
+import { getBreakPointsValue } from "../../helper/theme.js";
 import useWindowResize from "../../hooks/useWindowResize.js";
 import { BREAKPOINTS_DEVICES } from "../../helper/theme.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,8 +17,7 @@ const TextSize = ({
 }) => {
   const [size] = useWindowResize();
   const val = activeMark(editor, format);
-  const noFontSize = val === "normal" || typeof val === "object" && !Object.keys(val)?.length;
-  const value = noFontSize ? getTextSizeVal(editor) : getBreakPointsValue(val, size?.device);
+  const value = getBreakPointsValue(val, size?.device);
   const [fontSize, setFontSize] = useState();
   const timerRef = useRef();
   useEffect(() => {
@@ -55,7 +55,13 @@ const TextSize = ({
   };
   const getSizeVal = () => {
     try {
-      return parseInt(value);
+      let size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
+      Object.entries(headingMap).forEach(([format, value]) => {
+        if (isBlockActive(editor, format) && isNaN(parseInt(size))) {
+          size = value;
+        }
+      });
+      return parseInt(size);
     } catch (err) {
       return "";
     }
@@ -87,9 +93,9 @@ const TextSize = ({
       inputProps: {
         style: {
           width: fullWidth ? "100%" : "30px",
-          // textAlign: "center",
+          textAlign: "center",
           height: "19px",
-          fontSize: "12px"
+          fontSize: "14px"
         }
       },
       fullWidth: fullWidth,

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, 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,11 +18,6 @@ const POPUP_TYPES = {
   addElement: AddElements,
   addTemplate: AddTemplates
 };
-const POPUP_OFFSETS = {
-  textFormat: [80, 5],
-  addElement: [60, 5],
-  addTemplate: [20, 5]
-};
 const FULLSCREEN_POPUP = {
   addTemplate: true
 };
@@ -49,7 +44,6 @@ 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
@@ -88,42 +82,26 @@ const MiniToolbar = props => {
   };
   const closePopper = data => {
     setData(data);
-    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
-    };
+    setToolTip("false");
   };
   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; // for textFormat type
 
         return /*#__PURE__*/_jsx(Tooltip, {
           arrow: true,
           title: label,
           disableHoverListener: toolTip,
           children: /*#__PURE__*/_jsx(IconButton, {
-            className: `${type === popper ? "active" : ""} ${type === "undo" && !canUndo || type === "redo" && !canRedo ? "disabled" : ""}`,
+            className: `${type === popper ? "active" : ""} ${type === 'undo' && !canUndo || type === 'redo' && !canRedo ? "disabled" : ""}`,
             onClick: handleClick(type),
             disabled: isDisabled,
             children: type === "page-settings" ? /*#__PURE__*/_jsx(PageSettingsButton, {
@@ -145,18 +123,11 @@ const MiniToolbar = props => {
     }), /*#__PURE__*/_jsx(DialogComp, {
       open: open,
       onClose: onClose,
-      anchorEl: anchorEl || getBoxCenter() // Positioning at center of Box
-      ,
+      anchorEl: anchorEl,
       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: {