@flozy/editor 5.1.5 → 5.1.7

package/dist/Editor/Elements/Form/Form.js

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Transforms } from "slate";
+import { Node } from "slate";
 import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress, Box, Typography, useTheme } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -48,7 +49,15 @@ const Form = props => {
     textSize,
     fontFamily,
     textAlign,
-    alignment
+    alignment,
+    fieldFontFamily,
+    fieldFontWeight,
+    fieldTextSize,
+    fieldTextColor,
+    fieldBgColor,
+    fieldBorderColor,
+    fieldBorderWidth,
+    fieldBorderStyle
   } = element;
   const btnR = buttonProps?.borderRadius || {};
   const btnSpacing = buttonProps?.bannerSpacing || {};
@@ -190,6 +199,24 @@ const Form = props => {
     }, {
       at: path
     });
+    // adding form field style to the current form node 
+    const currentNode = Node.get(editor, path);
+    if (currentNode) {
+      currentNode.children.forEach((item, index) => {
+        Transforms.setNodes(editor, {
+          bgColor: data?.fieldBgColor ? data?.fieldBgColor : "rgba(255, 255, 255, 1)",
+          borderColor: data?.fieldBorderColor ? data?.fieldBorderColor : "#ccc",
+          borderStyle: data?.fieldBorderStyle ? data?.fieldBorderStyle : "",
+          borderWidth: data?.fieldBorderWidth ? data?.fieldBorderWidth : "",
+          textColor: data?.fieldTextColor ? data?.fieldTextColor : "",
+          fontFamily: data?.fieldFontFamily ? data?.fieldFontFamily : "",
+          textSize: data?.fieldTextSize ? data?.fieldTextSize : "",
+          fontWeight: data?.fieldFontWeight ? data?.fieldFontWeight : ""
+        }, {
+          at: [...path, index]
+        });
+      });
+    }
     onClose();
   };
   const onClose = () => {
@@ -198,7 +225,16 @@ const Form = props => {
   const onAddFormField = () => {
     try {
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily,
+          fontWeight: fieldFontWeight,
+          textSize: fieldTextSize,
+          textColor: fieldTextColor,
+          bgColor: fieldBgColor,
+          borderColor: fieldBorderColor,
+          borderWidth: fieldBorderWidth,
+          borderStyle: fieldBorderStyle
+        })
       }, {
         at: [...path, children.length]
       });

package/dist/Editor/Elements/Form/FormElements/FormCheckbox.js

@@ -16,6 +16,9 @@ const FormCheckbox = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormCheckbox = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormDate.js

@@ -16,6 +16,9 @@ const FormDate = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormDate = props => {
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
         background: bgColor || "transparent",
-        paddingRight: '85px !important'
+        paddingRight: '85px !important',
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormEmail.js

@@ -16,6 +16,9 @@ const FormEmail = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -47,7 +50,10 @@ const FormEmail = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormNumbers.js

@@ -16,6 +16,9 @@ const FormNumbers = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -63,7 +66,10 @@ const FormNumbers = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormRadioButton.js

@@ -16,6 +16,9 @@ const FormRadioButton = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -46,7 +49,10 @@ const FormRadioButton = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontSize: textSize || "inherit",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormText.js

@@ -16,6 +16,9 @@ const FormText = props => {
     textColor,
     bgColor,
     lockSpacing,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,10 @@ const FormText = props => {
         },
         borderStyle: borderStyle || "solid",
         color: textColor || "#000",
-        background: bgColor || "transparent"
+        background: bgColor || "transparent",
+        fontSize: textSize || "inherit",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormElements/FormTextArea.js

@@ -15,6 +15,9 @@ const FormTextArea = props => {
     borderColor,
     textColor,
     bgColor,
+    textSize,
+    fontFamily,
+    fontWeight,
     ...rest
   } = fieldProps;
   const onChange = e => {
@@ -45,7 +48,9 @@ const FormTextArea = props => {
         borderStyle: borderStyle || "solid",
         color: `${textColor || "#000"} !important`,
         background: `${bgColor || "transparent"} !important`,
-        fontSize: '14px'
+        fontSize: textSize || "14px",
+        fontFamily: fontFamily || "PoppinsRegular",
+        fontWeight: `${fontWeight} !important` || "400 !important"
       }
     })
   });

package/dist/Editor/Elements/Form/FormPopup.js

@@ -1,7 +1,8 @@
 import React from "react";
 import StyleBuilder from "../../common/StyleBuilder";
-import formStyle from "../../common/StyleBuilder/formStyle";
+import { formStyle } from "../../common/StyleBuilder/formStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FormPopup = props => {
   const {
     element,
@@ -9,14 +10,16 @@ const FormPopup = props => {
     onClose,
     customProps
   } = props;
-  return /*#__PURE__*/_jsx(StyleBuilder, {
-    title: "Form",
-    type: "formStyle",
-    element: element,
-    onSave: onSave,
-    onClose: onClose,
-    renderTabs: formStyle,
-    customProps: customProps
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(StyleBuilder, {
+      title: "Form",
+      type: "formStyle",
+      element: element,
+      onSave: onSave,
+      onClose: onClose,
+      renderTabs: formStyle,
+      customProps: customProps
+    })
   });
 };
 export default FormPopup;

package/dist/Editor/Elements/FreeGrid/FreeGrid.js

@@ -276,7 +276,7 @@ const FreeGrid = props => {
           ...insertFreeGridItem("table", {
             ...DEFAULT_TABLE_NODE()
           }, {
-            height: 130,
+            height: 150,
             width: 400
           })
         }], {

package/dist/Editor/Elements/FreeGrid/FreeGridItem.js

@@ -144,8 +144,27 @@ const FreeGridItem = props => {
   };
   const onAddFormField = () => {
     try {
+      const {
+        fieldFontFamily,
+        fieldFontWeight,
+        fieldTextSize,
+        fieldTextColor,
+        fieldBgColor,
+        fieldBorderColor,
+        fieldBorderWidth,
+        fieldBorderStyle
+      } = element?.children[0];
       Transforms.insertNodes(editor, {
-        ...formField()
+        ...formField({
+          fontFamily: fieldFontFamily ? fieldFontFamily : "",
+          fontWeight: fieldFontWeight ? fieldFontWeight : "",
+          textSize: fieldTextSize ? fieldTextSize : "",
+          textColor: fieldTextColor ? fieldTextColor : "",
+          bgColor: fieldBgColor ? fieldBgColor : "",
+          borderColor: fieldBorderColor ? fieldBorderColor : "",
+          borderWidth: fieldBorderWidth ? fieldBorderWidth : "",
+          borderStyle: fieldBorderStyle ? fieldBorderStyle : ""
+        })
       }, {
         at: [...path, 0, 0]
       });

package/dist/Editor/Elements/FreeGrid/breakpointConstants.js

@@ -47,22 +47,22 @@ export function wrapThemeBreakpoints(sxProp, prop, theme) {
     const formatedSxProp = Object.keys(sxProp).reduce((a, b) => {
       switch (b) {
         case "md":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["md"] || sxProp["lg"]
           };
           break;
         case "sm":
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["sm"] || sxProp["lg"]
           };
           break;
         case "xs":
-          a[theme.breakpoints.between("xs", "md")] = {
+          a[theme?.breakpoints?.between("xs", "md")] = {
             [prop]: sxProp["xs"] || sxProp["lg"]
           };
           break;
         default:
-          a[theme.breakpoints.up("lg")] = {
+          a[theme?.breakpoints?.up("lg")] = {
             [prop]: sxProp["lg"]
           };
       }

package/dist/Editor/Elements/FreeGrid/styles.js

@@ -318,7 +318,7 @@ const useFreeGridStyles = ({
         "& .element-toolbar": {
           display: "none"
         },
-        [theme.breakpoints.between("xs", "md")]: {
+        [theme?.breakpoints?.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
       },

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

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { Button, Dialog, DialogContent, DialogTitle, Grid, Tooltip, Box } from "@mui/material";
 import { insertGrid, insertPlainGrid } from "../../utils/grid";
-import { GridIcon } from "../../common/iconslist";
 import ToolbarIcon from "../../common/ToolbarIcon";
 import GridStyles from "./Styles";
+import { GridElement } 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";
@@ -46,7 +46,7 @@ const GridButton = props => {
     children: [/*#__PURE__*/_jsx(ToolbarIcon, {
       title: "Column",
       onClick: onButtonClick,
-      icon: /*#__PURE__*/_jsx(GridIcon, {}),
+      icon: /*#__PURE__*/_jsx(GridElement, {}),
       icoBtnType: icoBtnType
     }), /*#__PURE__*/_jsxs(Dialog, {
       open: open,

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

@@ -51,6 +51,7 @@ const GridItemToolbar = props => {
     placement: "top-end",
     sx: classes.popTools,
     className: "gi-tool-pp",
+    disablePortal: true,
     children: [/*#__PURE__*/_jsx(Tooltip, {
       title: "Column Settings",
       arrow: true,
@@ -293,24 +294,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,

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/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";
@@ -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, {})
                     })
                   })]
                 })
@@ -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, {
@@ -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",
@@ -530,13 +495,13 @@ const SignaturePopup = props => {
                       className: brush.size === m ? "activeBrush" : "",
                       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

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

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

@@ -1,10 +1,22 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor
+  pageColor,
+  lineHeight
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
+    lineHeight: lineHeight,
+    "&.signature": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
+    "&.dataView, &.signature": {
+      "& .placeholder-simple-text": {
+        opacity: 0
+      }
+    },
     "& .placeholder-simple-text": {
       color: "#94A3B8",
       background: "transparent",