@flozy/editor 4.5.8 → 4.6.0

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

@@ -20,6 +20,9 @@ const useFreeGridStyles = ({
         marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
         "&.active-drag": {
           pointerEvents: "none",
+          "& *": {
+            pointerEvents: "none"
+          },
           zIndex: "9999 !important"
         },
         "&.inactive-drag": {
@@ -160,6 +163,51 @@ const useFreeGridStyles = ({
             }
           }
         },
+        "& .fgi_type_signature": {
+          height: "100%",
+          "& .signature-container": {
+            height: "100%",
+            "& .signature-btn-container": {
+              height: "100%",
+              display: "flex",
+              flexDirection: "column",
+              "& .sign-placeholder": {
+                display: "flex",
+                // remove hidden sign placeholder
+                width: "100%",
+                background: theme?.palette?.editor?.background,
+                flexGrow: 1
+              },
+              "& button": {
+                margin: "6px 0px"
+              }
+            }
+          }
+        },
+        "& .fgi_type_sign": {
+          width: "100%",
+          height: "100%",
+          "& .signature-signed-wrapper": {
+            width: "100%",
+            height: "100%",
+            "& .signature-signed-span": {
+              width: "100%",
+              height: "100%",
+              "& .signed-btn": {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                "& img": {
+                  width: "100% !important",
+                  maxWidth: "none !important",
+                  height: "70% !important",
+                  flexGrow: 1
+                }
+              }
+            }
+          }
+        },
         "& .fgi_type_box": {
           display: "grid",
           width: "100%",
@@ -169,9 +217,26 @@ const useFreeGridStyles = ({
           "& .freegrid-item": {
             marginLeft: "0px"
             // pointerEvents: "none",
+          },
+
+          "&.rnd-dragOver": {
+            outline: "2px solid #116dff",
+            "&:before": {
+              content: '"Attach to Box"',
+              position: "absolute",
+              top: "-36px",
+              left: 0,
+              right: 0,
+              margin: "0px auto",
+              width: "fit-content",
+              background: "#116dff",
+              padding: "8px 12px",
+              color: "#FFF",
+              fontSize: "14px",
+              borderRadius: "7px"
+            }
           }
         },
-
         "& .fgi_type_form": {
           "& .form-field": {
             "& input": {
@@ -252,6 +317,22 @@ const useFreeGridStyles = ({
         [theme.breakpoints.between("xs", "md")]: {
           marginLeft: `calc((100% - 320px) * 0.5)`
         }
+      },
+      "&.rnd-dragOver": {
+        "&:before": {
+          content: '"Attact to this Section"',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          margin: "0px auto",
+          width: "fit-content",
+          background: "#116dff",
+          padding: "8px 12px",
+          color: "#FFF",
+          fontSize: "14px",
+          borderRadius: "7px"
+        }
       }
     }
   },

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, InputAdornment, Box } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -11,6 +11,7 @@ import { useEditorContext } from "../../hooks/useMouseMove";
 import { validationMethods } from "../Form/FormElements/validations";
 import { CalenderDownIconSignature, CalenderIconSignature } from "../../common/iconListV2";
 import ColorPickerButton from "../../common/ColorPickerButton";
+import { SignaturePlaceholderIcon } from "../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -24,7 +25,8 @@ const SignaturePopup = props => {
     onSave,
     onClear,
     customProps,
-    className
+    className,
+    onlyPopup
   } = props;
   const {
     readOnly,
@@ -52,6 +54,9 @@ const SignaturePopup = props => {
   };
   const handleClose = () => {
     setOpen(false);
+    if (props.handleClose) {
+      props.handleClose();
+    }
   };
   const handleSave = async () => {
     await customProps?.services("workFlowAction", {
@@ -125,16 +130,28 @@ const SignaturePopup = props => {
     isEmpty = signedData?.signature === "" && signedData?.signedText === "" || signedData?.signedBy === "" || signedData?.signedByEmail === "";
   }
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx("div", {
+    children: [onlyPopup ? null : /*#__PURE__*/_jsxs("div", {
       className: `signature-btn-container`,
-      children: /*#__PURE__*/_jsx(Button, {
-        contentEditable: false,
+      contentEditable: false,
+      children: [/*#__PURE__*/_jsxs(Box, {
+        className: "sign-placeholder",
+        children: [/*#__PURE__*/_jsx(SignaturePlaceholderIcon, {}), /*#__PURE__*/_jsx(Typography, {
+          variant: "body2",
+          style: {
+            color: "#A2B0B9"
+          },
+          children: "Your sign will be placed here"
+        })]
+      }), /*#__PURE__*/_jsx(Button, {
         onClick: handleOpen,
+        style: {
+          width: "fit-content"
+        },
         children: "Sign Here"
-      })
+      })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
-      open: open,
+      open: onlyPopup || open,
       onClose: handleClose,
       fullWidth: true,
       PaperProps: {

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

@@ -47,7 +47,7 @@ const Signed = props => {
         src: signature,
         alt: "signature",
         style: {
-          width: "200px",
+          maxWidth: "200px",
           height: "auto",
           marginBottom: "4px"
         }

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";
 import { createElement as _createElement } from "react";
 const SimpleText = props => {
@@ -47,20 +48,18 @@ const SimpleText = props => {
     sx: classes.root,
     key: `para_${path.join("|")}`
   }, children, openAI ? null : /*#__PURE__*/_jsx("span", {
-    className: "placeholder-simple-text",
     contentEditable: false,
-    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs("span", {
-      className: "placeholder-simple-text-default",
-      contentEditable: false,
-      children: ["Type", " ", /*#__PURE__*/_jsx("span", {
+    className: "placeholder-simple-text",
+    children: isEmptyEditor ? editorPlaceholder || "Write Something..." : showPlaceHolder ? opacity && selected ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: ["Type ", /*#__PURE__*/_jsx("span", {
+        contentEditable: false,
         style: {
-          backgroundColor: "#F2F6FA",
+          backgroundColor: '#F2F6FA',
           padding: "0px 2px",
           borderRadius: "2px"
         },
-        contentEditable: false,
         children: "/"
-      }), " ", "to browse elements"]
+      }), " to browse elements"]
     }) : "" : ""
   }));
 };

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

@@ -23,7 +23,7 @@ const TableRow = props => {
   return /*#__PURE__*/_jsx("tr", {
     ...attributes,
     style: {
-      background: bgColor,
+      backgroundColor: bgColor,
       border: rowBorderColor ? `1px solid ${rowBorderColor}` : ""
     },
     children: children

package/dist/Editor/Styles/EditorStyles.js

@@ -215,7 +215,7 @@ const editorStyles = ({
     },
     "& .content-editable.empty": {
       "&:after": {
-        color: placeHolderColor
+        color: theme?.palette?.type === "dark" ? "#99A5B6" : placeHolderColor
       }
     },
     "& .checkbox-edit": {
@@ -286,7 +286,7 @@ const editorStyles = ({
       }
     },
     "& ::selection": {
-      color: "black",
+      color: "inherit",
       background: "#EAEBFE"
     }
   },

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

@@ -123,8 +123,7 @@ const MiniToolbar = props => {
         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,

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

@@ -1,22 +1,28 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{ padding: 0, background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+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,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      padding: 0,
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const ButtonTemplateCard = props => {
   const {
     classes,
@@ -28,19 +34,19 @@ const ButtonTemplateCard = props => {
     xs: 3,
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
-      children: /*#__PURE__*/_jsx(Box, {
+      children: /*#__PURE__*/_jsxs(Box, {
         sx: classes.buttonCardMediaWrpr,
-        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
-          })
-        })
+        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
+        })]
       })
     })
   }, `template_${m.id}`);

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

@@ -1,22 +1,27 @@
 import React from "react";
-import { Box, Card, CardMedia, Grid } from "@mui/material";
-
-// const Select = (props) => {
-//     const { classes, data, onSelectTemplate } = props;
-//     return (
-//         <Box
-//             className="template-card-action"
-//             component={"div"}
-//             sx={classes.templateCardBtnGrp}
-//             style={{background: "transparent"}}
-//         >
-//             <Button className="blueBtn" onClick={onSelectTemplate(data)}>
-//                 Select
-//             </Button>
-//         </Box>
-//     );
-// };
+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,
+    data,
+    onSelectTemplate
+  } = props;
+  return /*#__PURE__*/_jsx(Box, {
+    className: "template-card-action",
+    component: "div",
+    sx: classes.templateCardBtnGrp,
+    style: {
+      background: "transparent"
+    },
+    children: /*#__PURE__*/_jsx(Button, {
+      className: "blueBtn",
+      onClick: onSelectTemplate(data),
+      children: "Select"
+    })
+  });
+};
 const FullViewCard = props => {
   const {
     classes,
@@ -30,19 +35,19 @@ const FullViewCard = props => {
     children: /*#__PURE__*/_jsx(Card, {
       sx: classes.paperOverrides,
       className: "paperOverrides",
-      children: /*#__PURE__*/_jsx(Box, {
-        sx: classes.fullViewCardMediaWrpr,
-        onClick: onSelectTemplate(m),
-        children: /*#__PURE__*/_jsx("div", {
-          className: "img-wrapper",
-          children: /*#__PURE__*/_jsx(CardMedia, {
-            component: "div",
-            image: m?.thumbnail,
-            alt: m?.title,
-            sx: classes.fullViewCardMedia,
-            className: height
-          })
-        })
+      children: /*#__PURE__*/_jsxs(Box, {
+        sx: classes.buttonCardMediaWrpr,
+        children: [/*#__PURE__*/_jsx(CardMedia, {
+          component: "div",
+          image: m?.thumbnail,
+          alt: m?.title,
+          sx: classes.fullViewCardMedia,
+          className: height
+        }), /*#__PURE__*/_jsx(Select, {
+          classes: classes,
+          onSelectTemplate: onSelectTemplate,
+          data: m
+        })]
       })
     })
   }, `template_${m.id}`);

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

@@ -13,7 +13,7 @@ import PopperHeader from "../PopperHeader";
 import MiniColorPicker from "./MiniColorPicker";
 import SelectAlignment from "./SelectAlignment";
 import SelectFontSize from "./SelectFontSize";
-// import InfinityAITool from "./InfinityAITool";
+import InfinityAITool from "./InfinityAITool";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_COLOR = {
@@ -27,8 +27,8 @@ const MiniTextFormat = props => {
   const {
     classes,
     editor,
-    closeMainPopup
-    // customProps
+    closeMainPopup,
+    customProps
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
@@ -50,7 +50,7 @@ const MiniTextFormat = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs("div", {
         className: "toolWrapper",
-        children: [/*#__PURE__*/_jsx(SelectTypography, {
+        children: [customProps?.hideTools?.includes("infinityAI") ? null : /*#__PURE__*/_jsx(InfinityAITool, {}), /*#__PURE__*/_jsx(SelectTypography, {
           classes: classes,
           editor: editor,
           closeMainPopup: closeMainPopup

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

@@ -3,9 +3,10 @@ const usePopupStyle = theme => ({
     boxShadow: "1px 2px 15px 0px #2563EB40",
     zIndex: 1300,
     marginBottom: "12px !important",
-    border: "1px solid #D8DDE1",
     borderRadius: "6px",
+    border: "1px solid #D8DDE1",
     maxWidth: "100%",
+    // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
       "& .papper-wrpr": {
@@ -481,10 +482,9 @@ const usePopupStyle = theme => ({
     }
   },
   fullViewCardMedia: {
-    margin: "5px 0px",
     width: "100%",
     backgroundPosition: "left top",
-    backgroundSize: "100%, auto",
+    backgroundSize: "100% auto",
     zIndex: 1,
     position: "relative",
     "&.fullscreen": {
@@ -499,10 +499,9 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMedia: {
-    margin: "5px 0px",
     width: "100%",
-    height: "40px",
-    backgroundPosition: "center",
+    height: "48px",
+    backgroundPosition: "left top",
     backgroundSize: "contain",
     zIndex: 1,
     position: "relative",
@@ -511,25 +510,26 @@ const usePopupStyle = theme => ({
     }
   },
   buttonCardMediaWrpr: {
-    padding: "5px",
     position: "relative",
     margin: "8px",
-    height: "50px",
-    "& .img-wrapper": {
-      "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        // height: "100%",
-        margin: "0px"
-        // "& .template-card-action": {
-        //   display: "flex",
-        // },
+    marginBottom: "0px",
+    "&:hover": {
+      "& .template-card-action": {
+        display: "flex"
       }
+    },
+    "& .img-loader-wrapper": {
+      position: "absolute",
+      width: "12px",
+      height: "12px",
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+      zIndex: 0
     }
   },
-
   paperOverrides: {
     "&.MuiPaper-root": {
       background: "transparent",
@@ -587,13 +587,12 @@ const usePopupStyle = theme => ({
   },
   customSelectPopoverWrapper: {
     "& .MuiPopover-paper": {
+      maxHeight: "140px",
       // minWidth: "130px",
       border: "1px solid #E4E8EB",
-      maxHeight: "140px",
       background: `${theme?.palette?.editor?.background} !important`,
-      // overflowY: "hidden",
-      padding: "6px 12px 6px 0px",
       overflowY: "scroll",
+      padding: "6px 12px 6px 0px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -643,21 +642,6 @@ const usePopupStyle = theme => ({
     "& fieldset": {
       border: "none !important"
     }
-  },
-  fullViewCardMediaWrpr: {
-    padding: "5px",
-    position: "relative",
-    margin: "8px",
-    height: "140px",
-    "& .img-wrapper": {
-      "&:hover": {
-        padding: "0px 2px 0px 2px",
-        backgroundColor: "#E9F3FE",
-        border: "1px solid #2563EB40",
-        borderRadius: "5px",
-        margin: "0px"
-      }
-    }
   }
 });
 export default usePopupStyle;

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

@@ -27,7 +27,6 @@ const TextFormat = props => {
     onClose,
     closeMainPopup
   } = props;
-  console.log("PROPS:", props);
   const [anchorEl, setAnchorEl] = useState(null);
   const [type, setType] = useState(null);
   const open = Boolean(anchorEl);

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

@@ -80,16 +80,16 @@ const PopupTool = props => {
       updateAnchorEl();
     }
   }, [selection]);
-  const handleClose = () => {
-    setAnchorEl(null);
-    setOpen(false);
-    setPopupType("");
-  };
   useEffect(() => {
     if (selectedElement?.enable === 1) {
       setAnchorEl(null);
     }
   }, [selection, selectedElement?.path, selectedElement?.enable]);
+  const handleClose = () => {
+    setAnchorEl(null);
+    setOpen(false);
+    setPopupType("");
+  };
   return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
     onClickAway: e => {
       // close the mini toolbar, if user clicks outside the editor (in Flozy app.)

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -1,7 +1,7 @@
 import { useEffect } from "react";
 import WebFont from "webfontloader";
 import { useEditorContext } from "../../hooks/useMouseMove";
-const defaultFonts = ['PoppinsRegular', 'PoppinsBold', 'Helvetica', 'Georgia', 'Times New Roman', 'Monaco', 'Courier New', 'Qwitcher Grypen', 'EB Garamond', 'Anton', 'DM Serif Text', 'Libre Baskerville', 'Montserrat', 'Open Sans', 'Public Sans', 'Raleway', 'Space Mono', 'Bulgarian Garamond', 'Impact', 'Redacted Script', 'Great Vibes', 'Zeyada', 'Allura', 'Pinyon Script', 'Herr Von Muellerhoff', 'Dawning of a New Day', 'Coming Soon', 'Dancing Script', 'Engagement', 'Gaegu', 'Ingrid Darling', 'Kite One', 'La Belle Aurore', 'Mea Culpa', 'Meddon', 'Merriweather', 'The Girl Next Door'];
+const defaultFonts = ["PoppinsRegular", "PoppinsBold", "Helvetica", "Georgia", "Times New Roman", "Monaco", "Courier New", "Qwitcher Grypen", "EB Garamond", "Anton", "DM Serif Text", "Libre Baskerville", "Montserrat", "Open Sans", "Public Sans", "Raleway", "Space Mono", "Bulgarian Garamond", "Impact", "Redacted Script", "Great Vibes", "Zeyada", "Allura", "Pinyon Script", "Herr Von Muellerhoff", "Dawning of a New Day", "Coming Soon", "Dancing Script", "Engagement", "Gaegu", "Ingrid Darling", "Kite One", "La Belle Aurore", "Mea Culpa", "Meddon", "Merriweather", "The Girl Next Door"];
 const FontLoader = props => {
   const {
     otherProps,
@@ -15,7 +15,7 @@ const FontLoader = props => {
     let retryCount = 0;
     function loadNextBatch() {
       if (currentIndex >= families?.length) {
-        console.log('All fonts have been loaded');
+        console.log("All fonts have been loaded");
         return;
       }
       const batch = families?.slice(currentIndex, currentIndex + batchSize);
@@ -68,13 +68,13 @@ const FontLoader = props => {
       });
     } else {
       function correctFontArray(fontString) {
-        let fontsArray = fontString.split(',');
+        let fontsArray = fontString.split(",");
         let cleanedFontsArray = [...new Set(fontsArray.map(font => font.trim()))];
         return cleanedFontsArray;
       }
       function sanitizeFontFamily(fontFamily) {
         const correctedFonts = correctFontArray(fontFamily);
-        return correctedFonts.join(', ');
+        return correctedFonts.join(", ");
       }
       const elements = Array.from(document?.querySelectorAll("*"));
       const fontSet = new Set();
@@ -83,8 +83,8 @@ const FontLoader = props => {
         fontSet.add(sanitizeFontFamily(computedStyles?.fontFamily));
       });
       let families = Array.from(fontSet);
-      families = correctFontArray(families.join(', '));
-      families = families.map(font => font.replace(/\"/g, ''));
+      families = correctFontArray(families.join(", "));
+      families = families.map(font => font.replace(/\"/g, ""));
       loadFontsInBatches(families);
     }
   }, []);

package/dist/Editor/common/Icon.js

@@ -224,7 +224,6 @@ const iconList = {
       fill: "#64748B"
     }
   }),
-  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   freegrid: /*#__PURE__*/_jsx(CiGrid32, {
     size: 20,
     style: {
@@ -234,6 +233,7 @@ const iconList = {
   text: /*#__PURE__*/_jsx(Text, {
     stroke: "#64748B"
   }),
+  calenderNewIcon: /*#__PURE__*/_jsx(CalendlyIcon, {}),
   textArea: /*#__PURE__*/_jsx(TextAreaIcon, {}),
   phone: /*#__PURE__*/_jsx(Phone, {}),
   briefCase: /*#__PURE__*/_jsx(BriefCase, {}),