@flozy/editor 4.4.8 → 4.4.9

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, {}),

package/dist/Editor/common/RnD/ElementOptions/Actions.js

@@ -12,7 +12,8 @@ import SaveIcon from "@mui/icons-material/Save";
 import LinkIcon from "./Icons/LinkIcon";
 import CodeIcon from "@mui/icons-material/Code";
 import FilterFramesIcon from "@mui/icons-material/FilterFrames";
-import { GridAddSectionIcon, WorkflowIcon } from "../../iconslist";
+import { GridAddSectionIcon, SignatureIcon, WorkflowIcon } from "../../iconslist";
+import Delete from "@mui/icons-material/Delete";
 const Actions = {
   ai: {
     type: "ai",
@@ -45,6 +46,18 @@ const Actions = {
     Icon: LinkIcon,
     title: "Link"
   },
+  signatureSettings: {
+    type: "signatureSettings",
+    Button: IconButton,
+    Icon: SignatureIcon,
+    title: "Signature"
+  },
+  removeSign: {
+    type: "removeSign",
+    Button: IconButton,
+    Icon: Delete,
+    title: "Remove Sign"
+  },
   more: {
     type: "more",
     Button: IconButton,

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js

@@ -12,7 +12,7 @@ const Settings = props => {
     childType,
     open,
     anchorEl,
-    placement,
+    // placement,
     onClose,
     editor,
     classes,

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js

@@ -0,0 +1,53 @@
+import SignaturePopup from "../../../../Elements/Signature/SignaturePopup";
+import { Path, Transforms } from "slate";
+import { formatDate } from "../../../../utils/helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const Signature = props => {
+  const {
+    onClose,
+    customProps,
+    editor,
+    path
+  } = props;
+  const pPath = path?.split("|")?.map(m => parseInt(m));
+  const element_path = [...pPath, 0];
+  const onSave = (data = {}) => {
+    onClear();
+    Transforms.insertNodes(editor, [{
+      type: "sign",
+      signature: null,
+      fontFamily: "",
+      signedBy: "",
+      signedOn: formatDate(new Date(), "MM/DD/YYYY"),
+      signedText: "",
+      children: [{
+        text: ""
+      }],
+      ...data
+    }], {
+      at: element_path
+    });
+    const parentPath = Path.parent(element_path);
+    Transforms.setNodes(editor, {
+      childType: "sign"
+    }, {
+      at: parentPath
+    });
+  };
+  const onClear = () => {
+    Transforms.removeNodes(editor, {
+      at: element_path
+    });
+  };
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(SignaturePopup, {
+      onSave: onSave,
+      onClear: onClear,
+      handleClose: onClose,
+      customProps: customProps,
+      onlyPopup: true
+    })
+  });
+};
+export default Signature;

package/dist/Editor/common/RnD/ElementSettings/OtherSettings/index.js

@@ -1,9 +1,39 @@
 import Settings from "./Settings";
 import Link from "./Link";
 import SavePopup from "./SaveAsTemplate";
+import Signature from "./Signature";
+import { Path, Transforms } from "slate";
 const OtherSettings = {
   link: Link,
   settings: Settings,
-  saveAsTemplate: SavePopup
+  saveAsTemplate: SavePopup,
+  signatureSettings: Signature
 };
-export default OtherSettings;
+export default OtherSettings;
+export const removeSign = (editor, path = []) => {
+  const pPath = path?.split("|")?.map(m => parseInt(m));
+  const element_path = [...pPath, 0];
+  Transforms.removeNodes(editor, {
+    at: element_path
+  }); // remove signature
+
+  Transforms.insertNodes(editor, [{
+    type: "signature",
+    children: [{
+      text: ""
+    }],
+    data: {
+      name: "",
+      email: "",
+      date: ""
+    }
+  }], {
+    at: element_path
+  });
+  const parentPath = Path.parent(element_path);
+  Transforms.setNodes(editor, {
+    childType: "signature"
+  }, {
+    at: parentPath
+  });
+};

package/dist/Editor/common/RnD/ElementSettings/settingsConstants.js

@@ -18,5 +18,6 @@ export const ItemTypes = {
   appHeader: "App Header",
   form: "Form",
   table: "Table",
-  embedScript: "Code"
+  embedScript: "Code",
+  signature: "Signature"
 };

package/dist/Editor/common/RnD/Utils/gridDropItem.js

@@ -123,8 +123,8 @@ export function onDropItem(props, parentClass) {
       dragOver,
       parentPath,
       path,
-      diffX,
-      x: cx,
+      // diffX,
+      // x: cx,
       breakpoint
       // calX,
     } = props;
@@ -134,7 +134,9 @@ export function onDropItem(props, parentClass) {
     let newPath = [];
     newPath = moveTo;
     const cCalx = isContainerElement(editor, moveTo, props);
-    const posX = parseInt(cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX);
+    // const posX = parseInt(
+    //   cx - window.innerWidth / 2 + MARGIN_OF[breakpoint] - diffX
+    // );
     const toSectionNode = Node.get(editor, newPath);
     const addToSectionDOM = ReactEditor.toDOMNode(editor, toSectionNode);
     const rect = addToSectionDOM.getBoundingClientRect();