@flozy/editor 4.6.2 → 4.6.3

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.)
@@ -111,8 +111,20 @@ const PopupTool = props => {
       open: open,
       anchorEl: anchorEl,
       transition: true,
-      placement: "auto-end",
       sx: classes.popupWrapper,
+      placement: "bottom-start" // or "top" depending on the preferred direction
+      ,
+      modifiers: [{
+        name: "preventOverflow",
+        options: {
+          boundary: editorWrapper?.current
+        }
+      }, {
+        name: "flip",
+        options: {
+          fallbackPlacements: ["top-start", "bottom-start"]
+        }
+      }],
       children: ({
         TransitionProps
       }) => /*#__PURE__*/_jsx(Fade, {

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/LinkSettings/index.js

@@ -41,9 +41,10 @@ export default function LinkSettings(props) {
     navType
   } = props;
   const {
-    isMobile
+    isMobile,
+    tagName
   } = customProps;
-  const navOptions = getNavOptions(customProps.hideTools);
+  const navOptions = getNavOptions(customProps.hideTools, tagName);
   const classes = LinkSettingsStyles(theme);
   const [nav, setNav] = useState(getNav(navType, navOptions));
   const [navValue, setNavValue] = useState(props?.navValue || "");
@@ -61,7 +62,6 @@ export default function LinkSettings(props) {
   };
   if (isMobile) {
     return /*#__PURE__*/_jsxs(SwipeableDrawer, {
-      open: true,
       onClose: handleClose,
       children: [/*#__PURE__*/_jsx(Typography, {
         variant: "subtitle1",

package/dist/Editor/common/LinkSettings/navOptions.js

@@ -1,4 +1,4 @@
-export const getNavOptions = (hideTools = []) => {
+export const getNavOptions = (hideTools = [], tagName = "") => {
   let navOptions = [{
     label: "None",
     value: ""
@@ -33,5 +33,8 @@ export const getNavOptions = (hideTools = []) => {
     placeholder: "phone"
   }];
   navOptions = navOptions.filter(n => !hideTools.includes(n.value));
+  if (tagName !== "Pages") {
+    navOptions = navOptions.filter(n => n.value !== "page");
+  }
   return navOptions;
 };

package/dist/Editor/common/RnD/DragOver/index.js

@@ -17,7 +17,6 @@ const DragOver = props => {
   const open = Boolean(anchorEl);
   const isSectionHover = status && type === "parent";
   const isContainerHover = hover_on === path && type === "parent-container";
-  console.log(isSectionHover, isContainerHover);
   useEffect(() => {
     if (ref?.current) {
       const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();

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",
@@ -26,7 +27,7 @@ const Actions = {
     Icon: null,
     title: "Add Section"
   },
-  addElement: {
+  addElementInSection: {
     type: "addElement",
     Button: IconButton,
     Icon: AddIcon,
@@ -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/ElementOptions/styles.js

@@ -42,6 +42,11 @@ const useElementOptionsStyle = ({
         "& .strokePath": {
           stroke: "#2563EB"
         }
+      },
+      "& .SignatureIcon": {
+        "& path": {
+          fill: theme?.palette?.editor?.textColor
+        }
       }
     }
   }

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/Settings/DividerSettings.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { Box } from "@mui/material";
+import { StyleContent } from "../../../StyleBuilder";
+import dividerStyle from "../../../StyleBuilder/dividerStyles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DividerSettings = props => {
+  const {
+    editor,
+    path,
+    customProps
+  } = props;
+  const item_path = path?.split("|").map(m => parseInt(m));
+  const element_path = [...item_path, 0];
+  const element = Node.get(editor, element_path);
+  const onChange = data => {
+    console.log("🚀 ~ onChange ~ data:", data);
+    console.log("🚀 ~ onChange ~ element:", element);
+    const updated_props = {
+      ...element,
+      ...data,
+      field_type: data?.element
+    };
+    delete updated_props.children;
+    Transforms.setNodes(editor, {
+      ...updated_props
+    }, {
+      at: element_path
+    });
+  };
+  const handleClose = () => {
+    console.log("close");
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    component: "div",
+    className: "item-w",
+    children: dividerStyle?.map((m, i) => {
+      return /*#__PURE__*/_jsx(StyleContent, {
+        renderTabs: dividerStyle,
+        value: m.value,
+        element: element,
+        onChange: onChange,
+        customProps: customProps,
+        handleClose: handleClose
+      }, `tab_${m.value}_$${i}`);
+    })
+  });
+};
+export default DividerSettings;

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

@@ -7,6 +7,7 @@ import AppHeaderSettings from "./AppHeaderSettings";
 import FormSettings from "./FormSettings";
 import TableSettings from "./TableSettings";
 import CodeSettings from "./CodeSettings";
+import DividerSettings from "./DividerSettings";
 const SettingsComponents = {
   text: TextSettings,
   button: ButtonSettings,
@@ -16,6 +17,7 @@ const SettingsComponents = {
   appHeader: AppHeaderSettings,
   form: FormSettings,
   table: TableSettings,
-  embedScript: CodeSettings
+  embedScript: CodeSettings,
+  divider: DividerSettings
 };
 export default SettingsComponents;

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

@@ -7,7 +7,8 @@ export const settingsLabel = {
   appHeader: "App Header Settings",
   form: "Form Settings",
   table: "Table Settings",
-  embedScript: "Code Settings"
+  embedScript: "Code Settings",
+  divider: 'Divider Settings'
 };
 export const ItemTypes = {
   text: "Text",
@@ -18,5 +19,7 @@ export const ItemTypes = {
   appHeader: "App Header",
   form: "Form",
   table: "Table",
-  embedScript: "Code"
+  embedScript: "Code",
+  signature: "Signature",
+  divider: 'Divider'
 };

package/dist/Editor/common/RnD/RnDCopy.js

@@ -12,6 +12,8 @@ const RnDCopy = props => {
   useEffect(() => {
     if (selectedElement?.path) {
       window.selectedRnDElement = selectedElement;
+    } else {
+      window.selectedRnDElement = {};
     }
   }, [selectedElement?.path, selectedElement?.enable]);
   return !readOnly ? /*#__PURE__*/_jsx(Box, {

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();

package/dist/Editor/common/RnD/VirtualElement/index.js

@@ -89,7 +89,7 @@ const VirtualElement = props => {
     const sectionProps = {
       path: curPath,
       props: {
-        height: rect.height
+        height: rect?.height
       }
     };
     const itemsData = [];