@flozy/editor 1.6.5 → 1.6.7

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

@@ -0,0 +1,179 @@
+import React, { useEffect, useState } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import FormStyles from "./Styles";
+import FormWorkflow from "./FormWorkflow";
+
+//Constants
+import { minutes, hours, days } from './constant';
+import ListWorkflow from "./ListWorkflow";
+import { PlusIcon } from "../../../common/iconslist";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const Workflow = props => {
+  const {
+    openWorkflow,
+    element,
+    closeWorkflow,
+    onSave
+  } = props;
+  const {
+    workflow
+  } = element;
+  const classes = FormStyles();
+  const [workflowList, setWorkflowList] = useState([]);
+  const [formData, setFormData] = useState(false);
+  const [schedule, setSchedule] = useState('immediately');
+  const [scheduleEvery, setScheduleEvery] = useState('min');
+  const currentInstant = scheduleEvery === 'min' ? minutes : scheduleEvery === 'hr' ? hours : scheduleEvery === 'day' ? days : [];
+  const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
+  const [subject, setSubject] = useState('');
+  const [bodyData, setBodyData] = useState('');
+  const [flowEdited, setFlowEdited] = useState({
+    isEdited: false,
+    listIndex: null
+  });
+  useEffect(() => {
+    setWorkflowList(workflow || []);
+  }, [workflow]);
+  useEffect(() => {
+    setScheduleOn(currentInstant[0]);
+  }, [currentInstant]);
+  const handleAddFormWorkflow = () => {
+    setFormData(true);
+  };
+  const onFormBack = () => {
+    setFormData(false);
+    setBodyData('');
+    setSubject('');
+    setSchedule('immediately');
+  };
+  const saveFormWorkflow = () => {
+    let workflowData = [...workflowList];
+    let data = {
+      schedule_type: schedule,
+      schedule_every: schedule === 'after' ? scheduleEvery : 0,
+      schedule_on: schedule === 'after' ? scheduleOn : 0,
+      subject_data: subject,
+      body_data: bodyData
+    };
+    if (flowEdited.isEdited) {
+      workflowData[flowEdited.listIndex] = data;
+    } else {
+      workflowData.push(data);
+    }
+    let saveData = {
+      workflow: workflowData
+    };
+    onSave(saveData);
+    setFormData(false);
+    setBodyData('');
+    setSubject('');
+    setSchedule('immediately');
+    setFlowEdited({
+      isEdited: false,
+      listIndex: null
+    });
+  };
+  const handleEditFormWorkflow = index => {
+    const result = workflowList.find((flow, indx) => indx === index);
+    setBodyData(result.body_data);
+    setSubject(result.subject_data);
+    setSchedule(result.schedule_type);
+    setFormData(true);
+    setFlowEdited({
+      isEdited: true,
+      listIndex: index
+    });
+  };
+  const handleDeleteFormWorkflow = index => {
+    const result = workflowList.filter((flow, indx) => indx !== index);
+    let saveData = {
+      workflow: result
+    };
+    onSave(saveData);
+    setWorkflowList(result);
+  };
+  const handleSelectedVariables = (data, type) => () => {
+    if (type === 1) {
+      let newString = subject.concat(` %${data.name}%`);
+      setSubject(newString);
+    } else if (type === 2) {
+      let newString = bodyData.concat(` %${data.name}%`);
+      setBodyData(newString);
+    }
+  };
+  const handleInputReset = type => () => {
+    if (type === 1) {
+      setSubject("");
+    } else if (type === 2) {
+      setBodyData("");
+    }
+  };
+  return /*#__PURE__*/_jsxs(Dialog, {
+    open: openWorkflow,
+    onClose: closeWorkflow,
+    fullWidth: true,
+    children: [/*#__PURE__*/_jsxs(DialogTitle, {
+      sx: classes.popupTitle,
+      style: {
+        padding: formData ? '16px 12px' : '16px 24px',
+        justifyContent: !formData ? "space-between" : ""
+      },
+      children: [formData && /*#__PURE__*/_jsx(IconButton, {
+        onClick: onFormBack,
+        children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+      }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(Button, {
+        variant: "outlined",
+        sx: {
+          textTransform: 'none',
+          background: '#EBF1F9'
+        },
+        onClick: handleAddFormWorkflow,
+        size: "small",
+        startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
+        children: " New Email"
+      })]
+    }), /*#__PURE__*/_jsxs(DialogContent, {
+      dividers: true,
+      children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
+        workflow: workflowList,
+        handleEditFormWorkflow: handleEditFormWorkflow,
+        handleDeleteFormWorkflow: handleDeleteFormWorkflow
+      }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
+        subject: subject,
+        schedule: schedule,
+        bodyData: bodyData,
+        element: element,
+        currentInstant: currentInstant,
+        scheduleEvery: scheduleEvery,
+        scheduleOn: scheduleOn,
+        onFormBack: onFormBack,
+        setSubject: setSubject,
+        setBodyData: setBodyData,
+        setSchedule: setSchedule,
+        setScheduleEvery: setScheduleEvery,
+        setScheduleOn: setScheduleOn,
+        handleSelectedVariables: handleSelectedVariables,
+        handleInputReset: handleInputReset
+      })]
+    }), /*#__PURE__*/_jsxs(DialogActions, {
+      sx: classes.dialogFooter,
+      children: [/*#__PURE__*/_jsx(Button, {
+        color: "primary",
+        sx: classes.closeBtn,
+        variant: "outlined",
+        onClick: closeWorkflow,
+        size: "small",
+        children: "Close"
+      }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
+        sx: classes.saveBtn,
+        variant: "contained",
+        onClick: saveFormWorkflow,
+        size: "small",
+        children: "Save"
+      })]
+    })]
+  });
+};
+export default Workflow;

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

@@ -32,7 +32,8 @@ const GridItem = props => {
     margin,
     bgColorHover,
     borderColorHover,
-    textColor
+    textColor,
+    animation
   } = element;
   const {
     left,
@@ -126,6 +127,10 @@ const GridItem = props => {
       display: "flex",
       flexDirection: flexDirection || "column",
       background: bgColor || "transparent",
+      borderColor: borderColor || "transparent",
+      borderWidth: borderWidth || "1px",
+      borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+      borderStyle: borderStyle || "solid",
       alignItems: horizantal,
       justifyContent: vertical,
       width: `${itemWidth}%`,
@@ -159,7 +164,7 @@ const GridItem = props => {
         children: " "
       }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
     }), /*#__PURE__*/_jsx(Box, {
-      className: "gi-inner-cw",
+      className: `gi-inner-cw ${animation || ""}`,
       component: "div",
       "data-path": path.join(","),
       sx: {
@@ -171,10 +176,7 @@ const GridItem = props => {
         paddingBottom: `${bottom}px`,
         justifyContent: vertical,
         height: gridHeight || "100%",
-        borderColor: borderColor || "transparent",
-        borderWidth: borderWidth || "1px",
-        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-        borderStyle: borderStyle || "solid",
+        width: "100%",
         color: textColor || "#000",
         "&:hover": {
           borderColor: borderColorHover || borderColor || "transparent"

package/dist/Editor/Elements/InlineIcon/InlineIcon.js

@@ -13,8 +13,7 @@ const InlineIcon = props => {
     textColor,
     bannerSpacing,
     borderRadius,
-    borderColor,
-    icon
+    borderColor
   } = element;
   const {
     left,

package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js

@@ -14,7 +14,7 @@ const DrawSignature = props => {
   } = props;
   const [uploading, setUploading] = useState(false);
   const onSigned = async () => {
-    const strImage = canvasRef.toDataURL();
+    const strImage = canvasRef.getTrimmedCanvas().toDataURL();
     setUploading(true);
     const result = await services("uploadFile", {
       image: strImage

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

@@ -37,8 +37,9 @@ const Signed = props => {
         src: signature,
         alt: "signature",
         style: {
-          width: "150px",
-          height: "auto"
+          width: "200px",
+          height: "auto",
+          marginBottom: "4px"
         }
       });
     } else if (signedText) {
@@ -65,12 +66,22 @@ const Signed = props => {
       }) : null, /*#__PURE__*/_jsxs("button", {
         className: "signed-btn",
         onClick: onSelect,
+        style: {
+          background: "transparent",
+          border: "none",
+          textAlign: "left"
+        },
         children: [renderSign(), /*#__PURE__*/_jsx("div", {
           style: {
             fontWeight: "bold"
           },
           children: signedBy || ""
         }), /*#__PURE__*/_jsx("div", {
+          style: {
+            fontSize: "10px",
+            color: "#ccc",
+            marginTop: "4px"
+          },
           children: formatDate(signedOn, "MM/DD/YYYY")
         })]
       })]

package/dist/Editor/Elements/SimpleText.js

@@ -32,14 +32,16 @@ const SimpleText = props => {
   const {
     element,
     attributes,
-    children
+    children,
+    customProps
   } = props;
+  const {
+    readOnly
+  } = customProps;
   const classes = SimpleTextStyle();
   const editor = useSlateStatic();
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);
-  // const parentPath = Path.parent(path);
-  // const parentNode = Node.get(editor, parentPath);
   const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
   const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
   return /*#__PURE__*/_jsxs(Box, {
@@ -47,13 +49,13 @@ const SimpleText = props => {
     ...attributes,
     className: `simple-text`,
     sx: classes.root,
-    children: [children, selected && noContent ? /*#__PURE__*/_jsxs("span", {
+    children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
       className: "placeholder-simple-text",
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         className: "bg-pad-sl",
         children: "/"
       }), " for browse elements"]
-    }) : null, emptyEditor ? /*#__PURE__*/_jsx("span", {
+    }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
       children: "Write Something..."
     }) : null]

package/dist/Editor/Elements/TopBanner/TopBanner.js

@@ -82,10 +82,10 @@ const TopBanner = props => {
       src: url,
       alt: "Top Banner",
       style: {
-        width: "90%",
+        width: "100%",
         height: "320px",
         objectFit: "cover",
-        borderRadius: "12px",
+        borderRadius: "0px",
         margin: "0px 0px"
       }
     }), !readOnly ? /*#__PURE__*/_jsx(TopBannerToolbar, {

package/dist/Editor/Elements/TopBanner/TopBannerButton.js

@@ -14,7 +14,6 @@ const TopBannerButton = props => {
   } = props;
   const [open, setOpen] = useState(false);
   const onSelectImage = url => {
-    console.log(url);
     if (url) {
       insertTopBanner(editor, {
         url

package/dist/Editor/Styles/EditorStyles.js

@@ -3,23 +3,34 @@ const editorStyles = ({
 }) => ({
   root: {
     display: "flex",
-    flexDirection: "column",
     position: "relative",
-    padding: "0 8px"
+    padding: "0px",
+    alignItems: "center",
+    justifyContent: "center"
   },
   slateWrapper: {
+    paddingTop: "0px",
     height: `${window.innerHeight - padHeight}px`,
-    overflow: "auto",
+    width: "100%",
+    overflowY: "auto",
+    overflowX: "hidden",
     display: "flex",
     flexDirection: "column",
+    alignItems: "center",
+    "& .max-content": {
+      width: "100%",
+      display: "flex",
+      flex: 1,
+      flexDirection: "column",
+      paddingBottom: "18px"
+    },
     "& .scroll-area": {
       display: "flex",
       justifyContent: "center",
-      // minHeight: "100vh",
       flex: 1
     },
     "& .editor-wrapper": {
-      maxWidth: "90%",
+      maxWidth: "1440px",
       height: "100%",
       backgroundColor: "#FFF",
       overflow: "visible"

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

@@ -5,16 +5,18 @@ const miniToolbarStyles = () => ({
     justifyContent: "center",
     alignItems: "center",
     position: "absolute",
-    bottom: "-12px",
+    bottom: "-15px",
     left: 0,
     right: 0,
     margin: "auto",
     border: "1px solid #D8DDE1",
     borderRadius: "22px",
-    width: "200px",
+    width: "fit-content",
     height: "37px",
     zIndex: 1000,
     background: "#FFF",
+    boxShadow: "1px 2px 15px rgba(37, 99, 235, 0.25)",
+    padding: "0px 8px",
     "& button": {
       "& svg": {
         stroke: "#64748B"

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

@@ -205,8 +205,8 @@ const usePopupStyle = () => ({
           "&:before": {
             content: '" "',
             position: "absolute",
-            top: "-5px",
-            left: "-5px",
+            top: "-2px",
+            left: "-2px",
             width: "calc(100% + 4px)",
             height: "calc(100% + 4px)",
             border: "3px solid blue",

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button, ButtonGroup, Grid, Popover, Typography } from "@mui/material";
+import { Button, ButtonGroup, Grid, Typography } from "@mui/material";
 import WidthFullIcon from "@mui/icons-material/WidthFull";
 import WidthNormalIcon from "@mui/icons-material/WidthNormal";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
@@ -327,22 +327,12 @@ const TextFormat = props => {
         },
         children: "Full width"
       })]
-    }), /*#__PURE__*/_jsx(Popover, {
+    }), /*#__PURE__*/_jsx(AllColors, {
       open: open,
       anchorEl: anchorEl,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
       onClose: onClosePicker,
-      children: /*#__PURE__*/_jsx(AllColors, {
-        classes: classes,
-        onSelect: onSelectColor
-      })
+      classes: classes,
+      onSelect: onSelectColor
     })]
   });
 };

package/dist/Editor/Toolbar/Toolbar.js

@@ -167,7 +167,8 @@ export const RenderToolbarIcon = props => {
       case "app-header":
         return /*#__PURE__*/_jsx(AppHeaderButton, {
           editor: editor,
-          customProps: customProps
+          customProps: customProps,
+          icoBtnType: icoBtnType
         }, element.id);
       case "form":
         return /*#__PURE__*/_jsx(FormButton, {

package/dist/Editor/Toolbar/toolbarGroups.js

@@ -210,7 +210,8 @@ export const toolbarGroups = [[{
 }, {
   id: 37,
   format: "appHeader",
-  type: "app-header"
+  type: "app-header",
+  group: "elements"
 }, {
   id: 38,
   format: "form",

package/dist/Editor/common/Icon.js

@@ -7,7 +7,7 @@ import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutline
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
 import { IoIosImage, IoIosLink, IoMdArrowDroprightCircle, IoMdArrowDropdownCircle } from "react-icons/io";
-import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon } from "./iconslist";
+import { GridIcon, AccordionIcon, SignatureIcon, ButtonIcon, Carousal, FormIcon, BoldIcon, FontFamilyIcon, FontSizeIcon, ImageIcon, ItalicIcon, LinkIcon, StrikethroughIcon, TableIcon, UnderLineIcon, VideoIcon, CheckboxIcon, AppHeader, MoreHorizontal } from "./iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
 const iconList = {
   fontFamily: /*#__PURE__*/_jsx(FontFamilyIcon, {
@@ -77,7 +77,7 @@ const iconList = {
     fill: "#64748B"
   }),
   // link: <MdInsertLink size={20} />,
-  link: /*#__PURE__*/_jsx(IoIosLink, {
+  link: /*#__PURE__*/_jsx(LinkIcon, {
     size: 20
   }),
   // image: <MdImage size={20} />,
@@ -181,7 +181,9 @@ const iconList = {
   }),
   accordionArrowDown: /*#__PURE__*/_jsx(IoMdArrowDropdownCircle, {
     size: 20
-  })
+  }),
+  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
+  moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {})
 };
 const Icon = props => {
   const {

package/dist/Editor/common/ImageSelector/ImageSelector.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { Button, Grid, Tab, Tabs, Dialog, DialogContent, DialogActions, DialogTitle, Typography } from "@mui/material";
 import Upload from "./Options/Upload";
 import ChooseAssets from "./Options/ChooseAssets";

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,9 +3,10 @@ const usePopupStyles = () => ({
     position: "absolute",
     zIndex: 1000,
     background: "white",
-    borderRadius: "0px",
+    borderRadius: "10px",
     padding: "0px",
-    boxShadow: "0 4px 10px rgba(0,0,0,.2)"
+    boxShadow: "0 4px 10px rgba(0,0,0,.2)",
+    overflow: "hidden"
   },
   papper: {
     boxShadow: "none",
@@ -13,7 +14,8 @@ const usePopupStyles = () => ({
     height: "300px",
     overflow: "auto",
     padding: "8px",
-    margin: "0px"
+    margin: "0px",
+    borderRadius: "10px"
   },
   groupHeader: {
     padding: "10px 8px",
@@ -26,6 +28,7 @@ const usePopupStyles = () => ({
     padding: "4px",
     cursor: "pointer",
     background: "transparent",
+    borderRadius: "10px",
     "&.active": {
       background: "rgba(55, 53, 47, 0.08)"
     },

package/dist/Editor/common/StyleBuilder/gridItemStyle.js

@@ -28,6 +28,35 @@ const gridItemStyle = [{
     key: "borderColorHover",
     type: "color"
   }]
+}, {
+  tab: "Animation",
+  value: "animation",
+  fields: [{
+    label: "Choose Animation",
+    key: "animation",
+    type: "textOptions",
+    options: [{
+      text: "No Animation",
+      value: "No Animation"
+    }, {
+      text: "Fade In",
+      value: "animate__animated animate__fadeIn"
+    }, {
+      text: "Zoom In",
+      value: "animate__animated animate__zoomIn"
+    }, {
+      text: "Bounce In Left",
+      value: "animate__animated animate__bounceInLeft"
+    }],
+    renderOption: option => {
+      return /*#__PURE__*/_jsx("span", {
+        style: {
+          fontFamily: option.value
+        },
+        children: option.text
+      });
+    }
+  }]
 }, {
   tab: "Position",
   value: "position",

package/dist/Editor/common/iconslist.js

@@ -1451,4 +1451,70 @@ export const FileUploadIcon = () => {
       strokeLinejoin: "round"
     })]
   });
-};
+};
+export const RestRight = () => /*#__PURE__*/_jsxs("svg", {
+  width: "20",
+  height: "16",
+  viewBox: "0 0 22 23",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M13.6474 5.31C12.8499 5.07167 11.9699 4.91583 10.9983 4.91583C6.60745 4.91583 3.05078 8.4725 3.05078 12.8633C3.05078 17.2633 6.60745 20.82 10.9983 20.82C15.3891 20.82 18.9458 17.2633 18.9458 12.8725C18.9458 11.2408 18.4508 9.71917 17.6074 8.45417",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7859 5.53L12.1367 2.48666",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M14.7845 5.53L11.6953 7.785",
+    stroke: "#64748B",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});
+export const MoreHorizontal = ({
+  width = "22",
+  height = "22"
+}) => /*#__PURE__*/_jsxs("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: width,
+  height: height,
+  viewBox: "0 0 22 22",
+  fill: "none",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M4.58333 9.16797C3.575 9.16797 2.75 9.99297 2.75 11.0013C2.75 12.0096 3.575 12.8346 4.58333 12.8346C5.59167 12.8346 6.41667 12.0096 6.41667 11.0013C6.41667 9.99297 5.59167 9.16797 4.58333 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M17.4168 9.16797C16.4085 9.16797 15.5835 9.99297 15.5835 11.0013C15.5835 12.0096 16.4085 12.8346 17.4168 12.8346C18.4252 12.8346 19.2502 12.0096 19.2502 11.0013C19.2502 9.99297 18.4252 9.16797 17.4168 9.16797Z",
+    fill: "#64748B"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M10.9998 9.16797C9.9915 9.16797 9.1665 9.99297 9.1665 11.0013C9.1665 12.0096 9.9915 12.8346 10.9998 12.8346C12.0082 12.8346 12.8332 12.0096 12.8332 11.0013C12.8332 9.99297 12.0082 9.16797 10.9998 9.16797Z",
+    fill: "#64748B"
+  })]
+});
+export const PlusIcon = props => /*#__PURE__*/_jsxs("svg", {
+  width: "12",
+  height: "12",
+  viewBox: "0 0 12 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M6 1.33331V10.6666",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M1.33203 6H10.6654",
+    stroke: "#2563EB",
+    strokeWidth: "1.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })]
+});