@flozy/editor 10.0.1 → 10.0.3

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

@@ -2,20 +2,16 @@ import React from "react";
 import { Grid, Typography } from "@mui/material";
 import FormStyles from "./Styles";
 import MoreOptions from "./MoreOptions";
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 const ListWorkflow = props => {
   const {
     workflow,
     handleEditFormWorkflow,
-    handleDeleteFormWorkflow,
-    customProps
+    handleDeleteFormWorkflow
   } = props;
   const classes = FormStyles();
   const optionsList = ["Edit", "Delete"];
-  const {
-    translation
-  } = customProps;
   const onMenuClick = (selectedMenu, selectedFlow) => () => {
     if (selectedMenu === "Edit") {
       handleEditFormWorkflow(selectedFlow);
@@ -36,12 +32,12 @@ const ListWorkflow = props => {
           children: [/*#__PURE__*/_jsx(Grid, {
             item: true,
             sx: classes.emailIndexCard,
-            children: /*#__PURE__*/_jsx(Typography, {
+            children: /*#__PURE__*/_jsxs(Typography, {
               sx: {
                 fontSize: "12px",
                 fontWeight: 600
               },
-              children: `${translation("Email")} ${index + 1}`
+              children: ["Email ", index + 1]
             })
           }), /*#__PURE__*/_jsx(Grid, {
             item: true,
@@ -67,7 +63,7 @@ const ListWorkflow = props => {
                         item: true,
                         children: /*#__PURE__*/_jsx(Typography, {
                           sx: classes.listHeading,
-                          children: translation("subjectTextColon")
+                          children: "Subject:"
                         })
                       }), /*#__PURE__*/_jsx(Grid, {
                         item: true,
@@ -90,7 +86,7 @@ const ListWorkflow = props => {
                         item: true,
                         children: /*#__PURE__*/_jsx(Typography, {
                           sx: classes.listHeading,
-                          children: translation("bodyTextColon")
+                          children: "Body:"
                         })
                       }), /*#__PURE__*/_jsx(Grid, {
                         item: true,
@@ -113,7 +109,7 @@ const ListWorkflow = props => {
                         item: true,
                         children: /*#__PURE__*/_jsx(Typography, {
                           sx: classes.listHeading,
-                          children: translation("sheduleText")
+                          children: "Scheduled:"
                         })
                       }), /*#__PURE__*/_jsx(Grid, {
                         item: true,
@@ -150,8 +146,7 @@ const ListWorkflow = props => {
                   classes: classes,
                   menus: optionsList,
                   selectedFlow: index,
-                  onMenuClick: onMenuClick,
-                  translation: translation
+                  onMenuClick: onMenuClick
                 })
               })]
             })

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

@@ -9,8 +9,7 @@ function MoreOptions(props) {
     classes,
     menus,
     onMenuClick,
-    selectedFlow,
-    translation
+    selectedFlow
   } = props;
 
   //state
@@ -53,7 +52,7 @@ function MoreOptions(props) {
           paddingRight: "100px"
         },
         onClick: onMenuClick(m, selectedFlow),
-        children: translation(m)
+        children: m
       }, `menu_${i}_${m}`))
     })]
   });

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

@@ -9,20 +9,20 @@ const FormStyles = theme => ({
     color: "#94A3B8"
   },
   bodyTextArea: {
-    "& .mini-editor-cls": {
-      padding: "12px",
-      "&:focus-visible": {
-        outline: "none",
-        border: "none"
+    '& .mini-editor-cls': {
+      padding: '12px',
+      '&:focus-visible': {
+        outline: 'none',
+        border: 'none'
       }
     },
     "& .editorWorkflow": {
-      minHeight: "130px",
-      padding: "12px",
+      minHeight: '130px',
+      padding: '12px',
       paddingBottom: 0,
-      "&:focus-visible": {
-        outline: "none",
-        border: "none"
+      '&:focus-visible': {
+        outline: 'none',
+        border: 'none'
       }
     }
   },
@@ -105,7 +105,7 @@ const FormStyles = theme => ({
     padding: "4px 22px",
     textTransform: "none",
     border: "1px solid #D8DDE1",
-    minWidth: "126px",
+    minWidth: '126px',
     "& svg": {
       "& path": {
         stroke: "#64748B"
@@ -169,19 +169,17 @@ const FormStyles = theme => ({
     }
   },
   colorButtonSingle: {
-    border: "1.5px solid #DCE4EC !important",
     "&.active": {
-      // "&:before": {
-      //   content: '" "',
-      //   position: "absolute",
-      //   top: "-5px",
-      //   left: "-5px",
-      //   width: "calc(100% + 4px)",
-      //   height: "calc(100% + 4px)",
-      //   border: "3px solid blue",
-      //   borderRadius: "50%",
-      // },
-      outline: "2px solid #2563EB"
+      "&:before": {
+        content: '" "',
+        position: "absolute",
+        top: "-5px",
+        left: "-5px",
+        width: "calc(100% + 4px)",
+        height: "calc(100% + 4px)",
+        border: "3px solid blue",
+        borderRadius: "50%"
+      }
     }
   },
   colorButtonsInner: {
@@ -251,7 +249,7 @@ const FormStyles = theme => ({
     }
   },
   root: {
-    padding: "10px"
+    padding: '10px'
   }
 });
 export default FormStyles;

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

@@ -10,8 +10,7 @@ const UserInputs = props => {
     type,
     subject,
     handleField,
-    onSave,
-    translation
+    onSave
   } = props;
   const editorRef = useRef();
   const variables = element?.children;
@@ -40,8 +39,7 @@ const UserInputs = props => {
           fontStyleOptions: ['underline'],
           hideLink: true,
           hideTextColor: true
-        },
-        translation: translation
+        }
       })
     })
   });

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

@@ -17,12 +17,8 @@ const Workflow = props => {
     element: propElement,
     closeWorkflow,
     onSave,
-    customWorkflowElement = null,
-    customProps
+    customWorkflowElement = null
   } = props;
-  const {
-    translation
-  } = customProps;
   // replacing element for forms in DND
   const element = customWorkflowElement ? customWorkflowElement : propElement;
   const {
@@ -38,11 +34,11 @@ const Workflow = props => {
   const [scheduleEvery, setScheduleEvery] = useState("minutes");
   const currentInstant = scheduleEvery === "minutes" ? minutes : scheduleEvery === "hours" ? hours : scheduleEvery === "days" ? days : [];
   const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
-  const [subject, setSubject] = useState(translation("welcomFlozt"));
+  const [subject, setSubject] = useState("Welcome to Flozy!");
   const [bodyData, setBodyData] = useState([{
     type: "paragraph",
     children: [{
-      text: translation("writeSometing")
+      text: "Write Something"
     }]
   }]);
   const [flowEdited, setFlowEdited] = useState({
@@ -160,7 +156,7 @@ const Workflow = props => {
       children: [formData && /*#__PURE__*/_jsx(IconButton, {
         onClick: onFormBack,
         children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
-      }), translation("flowUpEmail"), !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
+      }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
         variant: "outlined",
         sx: {
           textTransform: "none",
@@ -170,14 +166,13 @@ const Workflow = props => {
         onClick: handleAddFormWorkflow,
         size: "small",
         startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
-        children: [" ", translation("newEmail")]
+        children: [" ", "New Email"]
       })]
     }), /*#__PURE__*/_jsxs(DialogContent, {
       children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
         workflow: workflowList,
         handleEditFormWorkflow: handleEditFormWorkflow,
-        handleDeleteFormWorkflow: handleDeleteFormWorkflow,
-        customProps: customProps
+        handleDeleteFormWorkflow: handleDeleteFormWorkflow
       }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(FormWorkflow, {
         subject: subject,
         schedule: schedule,
@@ -194,8 +189,7 @@ const Workflow = props => {
         setScheduleOn: setScheduleOn,
         handleSelectedVariables: handleSelectedVariables,
         handleInputReset: handleInputReset,
-        classes: classes,
-        customProps: customProps
+        classes: classes
       })]
     }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: classes.dialogFooter,
@@ -204,13 +198,13 @@ const Workflow = props => {
         sx: classes.closeBtn,
         onClick: closeWorkflow,
         size: "small",
-        children: translation("Close")
+        children: "Close"
       }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
         className: "primaryBtn",
         sx: classes.saveBtn,
         onClick: saveFormWorkflow,
         size: "small",
-        children: translation("Save")
+        children: "Save"
       })]
     })]
   });

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
+import React from "react";
 import { Path, Transforms, Node } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, useTheme } from "@mui/material";
@@ -27,22 +27,12 @@ const MAX_DEVICE_WIDTH = {
   lg: 980,
   xs: 320
 };
-
-// Create a Context
-export const FreeGridContext = /*#__PURE__*/createContext(null);
-export const useFreeGrid = () => {
-  return useContext(FreeGridContext);
-};
 const FreeGrid = props => {
-  const {
-    theme: appTheme
-  } = useEditorContext();
   const theme = useTheme();
   const breakpoint = useBreakpoints(theme);
   const classes = useFreeGridStyles({
     theme,
-    MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint],
-    appTheme
+    MAX_DEVICE_WIDTH: MAX_DEVICE_WIDTH[breakpoint]
   });
   const editor = useSlateStatic();
   const {
@@ -53,14 +43,12 @@ const FreeGrid = props => {
   } = props;
   const {
     sectionName,
-    sectionBorderRadius,
-    height_xs
+    sectionBorderRadius
   } = element;
   const {
     readOnly,
     customSX,
-    hideTools,
-    translation
+    hideTools
   } = customProps;
   const {
     updated_at,
@@ -75,15 +63,11 @@ const FreeGrid = props => {
   const {
     setSelectedElement
   } = useEditorContext();
-  const [autoAlign, setAutoAlign] = useState(false);
-  const count = useRef(2);
-  const childrenCountRef = useRef(element?.children?.length);
-  const [isInteracting, setIsInteracting] = useState(false);
   const onChange = data => {
     const append = breakpoint === "lg" ? "" : `_${breakpoint}`;
     const updateData = {
       ...data,
-      [`height${append}`]: data.height
+      [`height${append}`]: height + data.height
     };
     if (append !== "") {
       delete updateData.height;
@@ -145,10 +129,6 @@ const FreeGrid = props => {
             setSelectedElement
           });
           break;
-        case "forceAutoAlignment":
-          setAutoAlign(true);
-          setSelectedElement({});
-          break;
         case "deleteSection":
           if (Node.has(editor, cur_root_path)) {
             Transforms.removeNodes(editor, {
@@ -170,12 +150,9 @@ const FreeGrid = props => {
       console.log(err);
     }
   };
-  useEffect(() => {
-    childrenCountRef.current = element?.children?.length;
-  }, [element?.children?.length]);
   const handleAddElementClick = type => () => {
     const isEmpty = isEmptySection();
-    const insertAt = isEmpty ? [...path, 0] : [...path, childrenCountRef.current];
+    const insertAt = isEmpty ? [...path, 0] : [...path, element?.children?.length];
     switch (type) {
       case "addText":
         Transforms.insertNodes(editor, [{
@@ -210,6 +187,20 @@ const FreeGrid = props => {
               linkType: "webAddress"
             },
             iconPosition: "start",
+            bgColor: "#2563EB",
+            textColor: "#FFF",
+            borderRadius: {
+              topLeft: 30,
+              topRight: 30,
+              bottomLeft: 30,
+              bottomRight: 30
+            },
+            bannerSpacing: {
+              left: 12,
+              top: 12,
+              right: 12,
+              bottom: 12
+            },
             textAlign: "center",
             label: "Get Started"
           }],
@@ -382,19 +373,6 @@ const FreeGrid = props => {
         break;
       default:
     }
-    if (breakpoint === "lg") {
-      setSelectedElement({});
-
-      // auto align in mobile
-      Transforms.setNodes(editor, {
-        xs_updatedOn: null,
-        updated_at: new Date().getTime()
-      }, {
-        at: path
-      });
-    }
-    count.current = count.current + 1;
-
     // focus on newly added element
     focusOnNewItem(editor, insertAt, {
       setSelectedElement
@@ -466,145 +444,106 @@ const FreeGrid = props => {
     }
   }, theme);
   const sectionTypeOptions = (itemOptions?.section || []).filter(f => (hideTools || []).indexOf(f) === -1);
-
-  // const id = useMemo(() => {
-  //   let eleId = `freegrid_container_${path.join("|")}_${breakpoint}`;
-
-  //   if (autoAlign) {
-  //     eleId += `_${updated_at}`; // re-render component on force auto align
-  //   }
-
-  //   return eleId;
-  // }, [autoAlign, updated_at, breakpoint, path]);
-
-  return /*#__PURE__*/_jsx(FreeGridContext.Provider, {
-    value: {
-      isInteracting,
-      setIsInteracting
-    },
-    children: /*#__PURE__*/_jsx(RnD, {
-      id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
-      className: `
+  return /*#__PURE__*/_jsx(RnD, {
+    id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
+    className: `
         freegrid-section breakpoint-${breakpoint} 
         freegrid-section_${path.join("_")}
       `,
-      editor: editor,
-      path: path,
-      disableDragging: true,
-      style: {
-        position: "relative",
-        "--height": `${height}px`
-      },
-      dataSets: {
-        "data-height-xs": height_xs
-      },
-      defaultStyle: {
-        width: "100%",
-        height: height ? `${height}px` : "auto"
-      },
-      enableResizing: {
-        bottom: true,
-        top: false,
-        left: false,
-        right: false,
-        topLeft: false,
-        topRight: false,
-        bottomLeft: false,
-        bottomRight: false
-      },
-      actions: sectionTypeOptions,
-      type: "parent",
-      optionsProps: {
-        placement: "right",
-        sx: {
-          ...classes.sectionPopper,
-          ...(customSX?.sectionPopper || {})
+    editor: editor,
+    path: path,
+    disableDragging: true,
+    style: {
+      position: "relative",
+      "--height": `${height}px`
+    },
+    defaultStyle: {
+      width: "100%",
+      height: height ? `${height}px` : "auto"
+    },
+    enableResizing: {
+      bottom: true,
+      top: false,
+      left: false,
+      right: false,
+      topLeft: false,
+      topRight: false,
+      bottomLeft: false,
+      bottomRight: false
+    },
+    actions: sectionTypeOptions,
+    type: "parent",
+    optionsProps: {
+      placement: "right",
+      sx: {
+        ...classes.sectionPopper,
+        ...(customSX?.sectionPopper || {})
+      }
+    },
+    settingsProps: {
+      settings: "freeGrid",
+      customProps
+    },
+    onChange: onChange,
+    handleActionClick: handleActionClick,
+    actionsMap: {
+      addElement: {
+        Component: AddElement,
+        placement: "left",
+        title: "Add Element",
+        props: {
+          handleClick: handleAddElementClick,
+          hideTools: hideTools || []
         }
       },
-      settingsProps: {
-        settings: "freeGrid",
-        customProps
+      more: {
+        Component: More,
+        placement: "left",
+        title: "More Options",
+        props: {
+          handleClick: handleMoreClick
+        }
       },
-      onChange: onChange,
-      handleActionClick: handleActionClick,
-      actionsMap: {
-        addElement: {
-          Component: AddElement,
-          placement: "left",
-          title: "Add Element",
-          props: {
-            handleClick: handleAddElementClick,
-            hideTools: hideTools || [],
-            translation: {
-              translation
-            },
-            customProps: {
-              customProps
-            }
-          }
-        },
-        more: {
-          Component: More,
-          placement: "left",
-          title: "More Options",
-          props: {
-            handleClick: handleMoreClick,
-            breakpoint,
-            translation: {
-              translation
-            },
-            customProps: {
-              customProps
-            }
-          }
-        },
-        settings: {
-          Component: SectionSettings,
-          placement: "left",
-          title: "Section Settings",
-          props: {
-            editor,
-            path,
-            classes,
-            customProps,
-            translation
-          }
+      settings: {
+        Component: SectionSettings,
+        placement: "left",
+        title: "Section Settings",
+        props: {
+          editor,
+          path,
+          classes,
+          customProps
         }
+      }
+    },
+    readOnly: readOnly,
+    updated_at: updated_at,
+    breakpoint: breakpoint,
+    handleContextMenuClick: handleContextMenuClick,
+    children: /*#__PURE__*/_jsxs(Box, {
+      ...attributes,
+      id: sectionName,
+      "data-event": "rnd-click",
+      className: "freegrid-container freegrid-container-parent",
+      sx: {
+        ...classes.root,
+        ...freegridSX,
+        background: sectionBgColor || "rgba(255,255,255,1)",
+        backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
+        backgroundSize: "cover"
+      },
+      "data-path": path.join("|"),
+      "data-dragoverid": path.join("|"),
+      "data-dragovertype": "parent",
+      style: {
+        "--cols": `100%`,
+        "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
       },
-      readOnly: readOnly,
-      updated_at: updated_at,
-      breakpoint: breakpoint,
-      handleContextMenuClick: handleContextMenuClick,
-      sectionElement: element,
-      autoAlign: autoAlign,
-      setAutoAlign: setAutoAlign,
-      translation: translation,
-      customProps: customProps,
-      children: /*#__PURE__*/_jsxs(Box, {
-        ...attributes,
-        id: sectionName,
-        "data-event": "rnd-click",
-        className: "freegrid-container freegrid-container-parent",
-        sx: {
-          ...classes.root,
-          ...freegridSX,
-          background: sectionBgColor || "rgba(255,255,255,1)",
-          backgroundImage: sectionBackgroundImage ? `url('${sectionBackgroundImage}')` : "",
-          backgroundSize: "cover"
-        },
-        "data-path": path.join("|"),
-        "data-dragoverid": path.join("|"),
-        "data-dragovertype": "parent",
-        style: {
-          "--cols": `100%`,
-          "--rows": `repeat(${repeatTimes}, ${ROW_HEIGHT}px)`
-        },
-        children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
-          placeholder: `${translation("Section")} (${sectionName || "Welcome"})`,
-          className: "freegrid-section-infos",
-          contentEditable: false
-        }) : null]
-      })
+      children: [children, !readOnly ? /*#__PURE__*/_jsx("span", {
+        placeholder: `Section (${sectionName || "Welcome"})`,
+        className: "freegrid-section-infos",
+        contentEditable: false
+      }) : null]
     })
   });
 };