@flozy/editor 2.1.0 → 2.1.1

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

@@ -1,204 +1,45 @@
-import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, Tooltip } from "@mui/material";
-import React, { useState } from "react";
+import { Grid } from "@mui/material";
+import React, { useRef } from "react";
 import FormStyles from "./Styles";
-import Icon from "../../../common/Icon";
-import { RestRight } from "../../../common/iconslist";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { AllColors } from "../../Color Picker/ColorButtons";
-import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
 import { useEditorContext } from "../../../hooks/useMouseMove";
+import { MiniEditor } from "../../../..";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const UserInputs = props => {
   const {
     element,
     type,
     subject,
     handleField,
-    handleSelectedVariables,
-    handleInputReset
+    onSave
   } = props;
+  const editorRef = useRef();
   const variables = element?.children;
   const {
     theme
   } = useEditorContext();
   const classes = FormStyles(theme);
-  const popupClasses = PopupToolStyle(theme);
-  const [activeColor, setActiveColor] = useState(["#000000"]);
-  //state
-  const [anchorEl, setAnchorEl] = useState(null);
-  const [colorAnchorEl, setColorAnchorEl] = useState(null);
-  const colorPopover = Boolean(colorAnchorEl);
-  const handleVariables = event => {
-    event.stopPropagation();
-    setAnchorEl(event.currentTarget);
-  };
-  const handleColorPicker = event => {
-    event.stopPropagation();
-    setColorAnchorEl(event.currentTarget);
-  };
-  const handleClose = event => {
-    event.stopPropagation();
-    setAnchorEl(null);
-  };
-  const handleColorClose = event => {
-    event.stopPropagation();
-    setColorAnchorEl(null);
-  };
-  const handleTextColor = color => () => {
-    setActiveColor(color);
-    setColorAnchorEl(null);
-  };
-  return /*#__PURE__*/_jsxs(Grid, {
+  return /*#__PURE__*/_jsx(Grid, {
     container: true,
     sx: classes.toolbarContainer,
-    children: [/*#__PURE__*/_jsxs(Grid, {
-      item: true,
-      xs: 12,
-      children: [/*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        sx: classes.toolBar,
-        justifyContent: "space-between",
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            gap: 1,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Bold",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  sx: classes.toolButtons,
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "bold"
-                  })
-                })
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Underline",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  sx: classes.toolButtons,
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "underline"
-                  })
-                })
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Italic",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  sx: classes.toolButtons,
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "italic"
-                  })
-                })
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Link",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  sx: classes.toolButtons,
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: "link"
-                  })
-                })
-              })
-            }), /*#__PURE__*/_jsxs(Grid, {
-              item: true,
-              children: [/*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Current Color",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  style: {
-                    borderRadius: "50px",
-                    background: activeColor
-                  }
-                })
-              }), /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Color Picker",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  onClick: handleColorPicker,
-                  children: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {})
-                })
-              }), /*#__PURE__*/_jsx(AllColors, {
-                classes: popupClasses,
-                open: colorPopover,
-                activeColor: activeColor,
-                anchorEl: colorAnchorEl,
-                onClose: handleColorClose,
-                onSelect: handleTextColor
-              })]
-            })]
-          })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            alignItems: "center",
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              children: /*#__PURE__*/_jsx(Tooltip, {
-                arrow: true,
-                title: "Reset",
-                children: /*#__PURE__*/_jsx(IconButton, {
-                  onClick: handleInputReset(type),
-                  sx: classes.toolButtons,
-                  children: /*#__PURE__*/_jsx(RestRight, {})
-                })
-              })
-            }), /*#__PURE__*/_jsxs(Grid, {
-              item: true,
-              children: [/*#__PURE__*/_jsx(Button, {
-                sx: classes.variableBtn,
-                onClick: handleVariables,
-                endIcon: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
-                children: "Variables"
-              }), /*#__PURE__*/_jsx(Menu, {
-                id: "basic-menu",
-                open: Boolean(anchorEl),
-                anchorEl: anchorEl,
-                onClose: handleClose,
-                anchorOrigin: {
-                  vertical: "bottom",
-                  horizontal: "right"
-                },
-                transformOrigin: {
-                  vertical: "top",
-                  horizontal: "right"
-                },
-                children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
-                  sx: {
-                    color: "#64748B"
-                  },
-                  onClick: handleSelectedVariables(m, type),
-                  children: m.name
-                }, `menu_${i}_${m.name}`))
-              })]
-            })]
-          })
-        })]
-      }), /*#__PURE__*/_jsx(Divider, {})]
-    }), /*#__PURE__*/_jsx(Grid, {
+    children: /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
       sx: classes.bodyTextArea,
-      children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
-        margin: "none",
-        minRows: 6,
-        value: subject,
-        onChange: handleField
+      children: type === 2 && /*#__PURE__*/_jsx(MiniEditor, {
+        editorRef: editorRef,
+        classes: classes,
+        className: 'editorWorkflow',
+        handleEditorChange: handleField,
+        id: 1,
+        content: subject,
+        onSave: onSave,
+        miniEditorPlaceholder: `Hey {{ field_name }} \n\nThanks for attending the event called {{ Event Name }} at {{ Event Time }} on {{ Event Time }}.`,
+        otherProps: {
+          variableOptions: variables,
+          fontStyleOptions: ['underline']
+        }
       })
-    })]
+    })
   });
 };
 export default UserInputs;

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

@@ -32,7 +32,12 @@ const Workflow = props => {
   const currentInstant = scheduleEvery === "minutes" ? minutes : scheduleEvery === "hours" ? hours : scheduleEvery === "days" ? days : [];
   const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
   const [subject, setSubject] = useState("Welcome to Flozy!");
-  const [bodyData, setBodyData] = useState("Hey %field_name% \n\nThanks for attending the event called %Event Name% at %Event Time% on %Event Time%.");
+  const [bodyData, setBodyData] = useState([{
+    type: "paragraph",
+    children: [{
+      text: "Write Something"
+    }]
+  }]);
   const [flowEdited, setFlowEdited] = useState({
     isEdited: false,
     listIndex: null
@@ -48,18 +53,27 @@ const Workflow = props => {
   };
   const onFormBack = () => {
     setFormData(false);
-    setBodyData("");
+    setBodyData([{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }]);
     setSubject("");
     setSchedule("immediately");
   };
   const saveFormWorkflow = () => {
     let workflowData = [...workflowList];
+    let subjectHtml = document.getElementsByTagName('textarea')[0].innerHTML;
+    let bodyHtml = document.getElementsByClassName('editorWorkflow')[0].innerHTML;
     let data = {
       schedule_type: schedule,
       schedule_every: schedule === "after" ? scheduleEvery : 0,
       schedule_on: schedule === "after" ? scheduleOn : 0,
       subject_data: subject,
-      body_data: bodyData
+      body_data: bodyData,
+      subject_html: subjectHtml,
+      body_html: bodyHtml
     };
     if (flowEdited.isEdited) {
       workflowData[flowEdited.listIndex] = data;
@@ -71,7 +85,12 @@ const Workflow = props => {
     };
     onSave(saveData);
     setFormData(false);
-    setBodyData("");
+    setBodyData([{
+      type: "paragraph",
+      children: [{
+        text: ""
+      }]
+    }]);
     setSubject("");
     setSchedule("immediately");
     setFlowEdited({
@@ -100,10 +119,10 @@ const Workflow = props => {
   };
   const handleSelectedVariables = (data, type) => () => {
     if (type === 1) {
-      let newString = subject.concat(` %${data.name}%`);
+      let newString = subject.concat(` {{${data.name}}}`);
       setSubject(newString);
     } else if (type === 2) {
-      let newString = bodyData.concat(` %${data.name}%`);
+      let newString = bodyData.concat(` {{${data.name}}}`);
       setBodyData(newString);
     }
   };

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

@@ -13,6 +13,7 @@ import SectionPopup from "./SectionPopup";
 import { gridItem } from "../../utils/gridItem";
 import { useEditorContext, useEditorSelection } from "../../hooks/useMouseMove";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import useWindowResize from "../../hooks/useWindowResize";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -58,6 +59,7 @@ const Grid = props => {
   } = useEditorContext();
   const selected = hoverPath === path.join(",");
   const [showTool] = useEditorSelection(editor);
+  const [size] = useWindowResize();
   const onAddGridItem = () => {
     const currentPath = editor.selection?.anchor?.path;
     const ancestorsPath = Path.ancestors(currentPath, {
@@ -254,6 +256,12 @@ const Grid = props => {
   const bgImage = backgroundImage && backgroundImage !== "none" ? {
     backgroundImage: `url(${backgroundImage})`
   } : {};
+  const {
+    topLeft,
+    topRight,
+    bottomLeft,
+    bottomRight
+  } = getBreakPointsValue(borderRadius, size?.device) || {};
   return /*#__PURE__*/_jsxs(GridContainer, {
     container: true,
     className: `grid-container ${grid} has-hover element-root`,
@@ -269,9 +277,7 @@ const Grid = props => {
       ...bgImage,
       borderColor: borderColor || "transparent",
       borderWidth: borderWidth || "1px",
-      borderRadius: {
-        ...getBreakPointsValue(borderRadius || {}, null, "overrideBorderRadius", true)
-      },
+      borderRadius: `${topLeft}px ${topRight}px ${bottomRight}px ${bottomLeft}px`,
       borderStyle: borderStyle || "solid",
       height: "auto"
     },

package/dist/Editor/Elements/{SimpleText.js → SimpleText/index.js}

@@ -1,50 +1,12 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
 import { Box } from "@mui/material";
-import { getPageSettings } from "../utils/pageSettings";
-import { invertColor } from "../helper";
-import { isTextSelected } from "../utils/helper";
-import { useEditorContext } from "../hooks/useMouseMove";
+import { getPageSettings } from "../../utils/pageSettings";
+import { isTextSelected } from "../../utils/helper";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import SimpleTextStyle from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const SimpleTextStyle = ({
-  pageColor
-}) => ({
-  root: {
-    position: "relative",
-    padding: "0px",
-    "& .placeholder-simple-text": {
-      color: invertColor(pageColor),
-      background: "transparent",
-      position: "absolute",
-      zIndex: -1,
-      left: "0px",
-      top: "0px",
-      bottom: 0,
-      margin: "auto",
-      pointerEvents: "none",
-      height: "18px",
-      overflow: "hidden",
-      fontSize: "14px",
-      "& .bg-pad-sl": {
-        padding: "2px 4px 2px 4px",
-        background: "transparent",
-        color: invertColor(pageColor)
-      }
-    }
-  },
-  section: {
-    display: "flex",
-    width: "100%",
-    backgroundSize: "cover",
-    justifyContent: "center",
-    alignItems: "center",
-    "& .simple-text": {
-      width: "80%",
-      maxWidth: "1440px"
-    }
-  }
-});
 const SimpleText = props => {
   const {
     theme
@@ -68,7 +30,7 @@ const SimpleText = props => {
     pageColor
   } = pageSt?.pageProps || {};
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || '#FFFFFF'
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Elements/SimpleText/style.js

@@ -0,0 +1,40 @@
+import { invertColor } from "../../helper";
+const SimpleTextStyle = ({
+  pageColor
+}) => ({
+  root: {
+    position: "relative",
+    padding: "0px",
+    "& .placeholder-simple-text": {
+      color: invertColor(pageColor),
+      background: "transparent",
+      position: "absolute",
+      zIndex: -1,
+      left: "0px",
+      top: "0px",
+      bottom: 0,
+      margin: "auto",
+      pointerEvents: "none",
+      height: "18px",
+      overflow: "hidden",
+      fontSize: "14px",
+      "& .bg-pad-sl": {
+        padding: "2px 4px 2px 4px",
+        background: "transparent",
+        color: invertColor(pageColor)
+      }
+    }
+  },
+  section: {
+    display: "flex",
+    width: "100%",
+    backgroundSize: "cover",
+    justifyContent: "center",
+    alignItems: "center",
+    "& .simple-text": {
+      width: "80%",
+      maxWidth: "1440px"
+    }
+  }
+});
+export default SimpleTextStyle;

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

@@ -124,7 +124,7 @@ const TableCell = props => {
     children: [children, isHeader && !readOnly && tableSize?.height && !showTool ? /*#__PURE__*/_jsx(Resizer, {
       classes: classes,
       onMouseDown: onMouseDown,
-      height: tableSize?.height
+      height: tableDOM.getBoundingClientRect()?.height
     }) : null, hasSelected ? /*#__PURE__*/_jsx("div", {
       className: "selection-area-tc",
       contentEditable: false

package/dist/Editor/Elements/Variables/Style.js

@@ -3,10 +3,35 @@ const VariableStyles = () => ({
     color: "#2563EB",
     background: "#EEEEEE"
   },
-  variableSelectBtn: {
-    height: "31px",
-    borderRadius: "10px",
-    marginLeft: "8px"
+  // variableSelectBtn: {
+  //   height: "31px",
+  //   borderRadius: "10px",
+  //   marginLeft: "8px"
+  // }
+  variableBtn: {
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
+    fontWeight: 500,
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    height: "36px",
+    paddingLeft: '8px',
+    paddingRight: '18px',
+    "& svg": {
+      width: '20px',
+      height: '20px',
+      "& path": {
+        stroke: "#64748B"
+      }
+    },
+    "&:hover": {
+      border: "1px solid #64748B"
+    },
+    '& .MuiSelect-select.MuiInputBase-input.MuiOutlinedInput-input': {
+      paddingRight: '5px'
+    }
   }
 });
 export default VariableStyles;

package/dist/Editor/Elements/Variables/VariableButton.js

@@ -3,6 +3,7 @@ import { useSlateStatic } from "slate-react";
 import { MenuItem, Select } from "@mui/material";
 import { insertVariables } from "../../utils/variables";
 import VariableStyles from "./Style";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const VariableButton = props => {
@@ -21,13 +22,12 @@ const VariableButton = props => {
     id: "variable-selection-mini",
     displayEmpty: true,
     value: '',
-    sx: classes.variableSelectBtn,
+    sx: classes.variableBtn,
     onChange: updateVariable,
+    IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
     children: [/*#__PURE__*/_jsx(MenuItem, {
       value: "",
-      children: /*#__PURE__*/_jsx("em", {
-        children: "Variables"
-      })
+      children: "Variables"
     }), (options || []).map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
       value: item.key,
       children: item.label

package/dist/Editor/Styles/EditorStyles.js

@@ -226,6 +226,17 @@ const editorStyles = ({
           fillOpacity: 0
         }
       }
+    },
+    "&.hideScroll": {
+      "&::-webkit-scrollbar-track": {
+        background: "none !important"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: "none !important"
+      },
+      "&::-webkit-scrollbar-thumb:hover": {
+        background: "none !important"
+      }
     }
   },
   fullScreenWrapper: {

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

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { useSlateStatic } from "slate-react";
-import { Box, Tooltip } from "@mui/material";
+import { Box, Divider, Grid, Tooltip } from "@mui/material";
 import { toolbarGroups } from "../toolbarGroups";
 import { MarkButton } from "../FormatTools";
 import LinkButton from "../../Elements/Link/LinkButton";
@@ -17,13 +17,14 @@ const BasicToolbar = props => {
   // props
   const {
     otherProps: {
-      variableOptions
+      variableOptions,
+      fontStyleOptions
     }
   } = props;
 
   // state
   const [activeColor, setActiveColor] = useState("#000000");
-  const fontStyle = allTools.filter(f => f.basic);
+  const fontStyle = allTools.filter(f => f.basic || fontStyleOptions?.includes(f.format));
   const link = allTools.find(f => f.format?.indexOf("link") >= 0);
   const handleTextColor = color => {
     setActiveColor(color);
@@ -35,32 +36,60 @@ const BasicToolbar = props => {
   return /*#__PURE__*/_jsxs(Box, {
     component: 'div',
     className: "basic-toolbar",
-    children: [fontStyle?.map((m, i) => {
-      return /*#__PURE__*/_jsx(MarkButton, {
-        editor: editor,
-        ...m
-      }, `pptool_mark_${i}_${m.id}`);
-    }), /*#__PURE__*/_jsx(LinkButton, {
-      active: isBlockActive(editor, link.format),
-      editor: editor
-    }, link.id), /*#__PURE__*/_jsx(Tooltip, {
-      title: "Font Color",
-      children: /*#__PURE__*/_jsx(ColorPickerButton, {
-        value: activeColor || "#0000",
-        onSave: color => {
-          handleTextColor(color);
-        },
-        defaultColors: colors
-      })
-    }), variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
-      placeholder: "Variables",
-      options: variableOptions
-    })]
+    children: [/*#__PURE__*/_jsxs(Grid, {
+      container: true,
+      sx: {
+        padding: '10px'
+      },
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      children: [/*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          alignItems: 'center',
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: fontStyle?.map((m, i) => {
+              return /*#__PURE__*/_jsx(MarkButton, {
+                editor: editor,
+                ...m
+              }, `pptool_mark_${i}_${m.id}`);
+            })
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(LinkButton, {
+              active: isBlockActive(editor, link.format),
+              editor: editor
+            }, link.id)
+          }), /*#__PURE__*/_jsx(Grid, {
+            item: true,
+            children: /*#__PURE__*/_jsx(Tooltip, {
+              title: "Font Color",
+              children: /*#__PURE__*/_jsx(ColorPickerButton, {
+                value: activeColor || "#0000",
+                onSave: color => {
+                  handleTextColor(color);
+                },
+                defaultColors: colors
+              })
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        children: variableOptions && variableOptions.length > 0 && /*#__PURE__*/_jsx(VariableButton, {
+          placeholder: "Variables",
+          options: variableOptions
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Divider, {})]
   });
 };
 BasicToolbar.defaultProps = {
   otherProps: {
-    variableOptions: []
+    variableOptions: [],
+    fontStyleOptions: []
   }
 };
 export default BasicToolbar;