@flozy/editor 1.7.4 → 1.7.6

package/dist/Editor/Elements/Embed/Video.js

@@ -1,14 +1,15 @@
 import React, { useState, useEffect } from "react";
-import { useSelected, useFocused, useSlateStatic, ReactEditor } from "slate-react";
+import { useSlateStatic, ReactEditor } from "slate-react";
 import { Node, Transforms } from "slate";
+import { IconButton, Tooltip, Box } from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
 import AspectRatioIcon from "@mui/icons-material/AspectRatio";
 import Icon from "../../common/Icon";
 import useResize from "../../utils/customHooks/useResize";
-import { IconButton, Tooltip } from "@mui/material";
-import DeleteIcon from "@mui/icons-material/Delete";
 import EmbedPopup from "./EmbedPopup";
 import { GridSettingsIcon } from "../../common/iconslist";
 import { gradientBorder } from "../../utils/helper";
+import { getEmbedURL } from "../../helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Video = ({
@@ -18,18 +19,16 @@ const Video = ({
   customProps
 }) => {
   const {
-    url,
     alt,
     alignment,
     bannerSpacing,
     borderRadius,
     borderWidth,
     borderColor,
-    borderStyle
+    borderStyle,
+    url
   } = element;
   const editor = useSlateStatic();
-  const selected = useSelected();
-  const focused = useFocused();
   const [openSetttings, setOpenSettings] = useState(false);
   const [parentDOM, setParentDOM] = useState(null);
   const {
@@ -116,13 +115,53 @@ const Video = ({
   };
   const totalMinus = parseInt(left || 0) + parseInt(right || 0);
   const width = resizing ? `${size.width}px` : `${size.widthInPercent || 100}%`;
+  const embedURL = getEmbedURL(element);
+  const VideoContent = () => {
+    return resizing ? /*#__PURE__*/_jsx("div", {
+      style: {
+        width: "100%",
+        height: "100%",
+        border: "2px dashed black",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "videoPlayer"
+      })
+    }) : /*#__PURE__*/_jsx("iframe", {
+      className: "embedd-iframe",
+      style: {
+        border: "none",
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        left: "0px",
+        ...(gradientBorder(borderColor) || {}),
+        borderWidth: borderWidth || "1px",
+        borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
+        borderStyle: borderStyle || "solid"
+      },
+      src: embedURL,
+      title: alt
+    });
+  };
+  const VideoPlaceholder = () => {
+    return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
+      component: "button",
+      className: "element-empty-btn",
+      onClick: onSettings,
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: "video"
+      }), "Embed Video or Other"]
+    }) : /*#__PURE__*/_jsx(VideoContent, {});
+  };
   return /*#__PURE__*/_jsxs("div", {
     ...attributes,
     className: "embed has-hover video",
     style: {
       display: "flex",
       width: `calc(100% - ${totalMinus}px)`,
-      boxShadow: selected && focused && "0 0 3px 3px lightgray",
       justifyContent: horizantal,
       alignContent: vertical
     },
@@ -139,39 +178,9 @@ const Video = ({
       style: {
         position: "relative",
         width: `${width}`,
-        height: `${size.height}px`
+        height: url ? `${size.height}px` : "auto"
       },
-      children: [!readOnly && /*#__PURE__*/_jsx(ToolBar, {}),
-      // The iframe reloads on each re-render and hence it stutters and the document doesn't detect mouse-up event leading to unwanted behaviour
-      // So during resize replace the iframe with a simple div
-      resizing ? /*#__PURE__*/_jsx("div", {
-        style: {
-          width: "100%",
-          height: "100%",
-          border: "2px dashed black",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "videoPlayer"
-        })
-      }) : /*#__PURE__*/_jsx("iframe", {
-        className: "embedd-iframe",
-        style: {
-          border: "none",
-          position: "absolute",
-          width: "100%",
-          height: "100%",
-          left: "0px",
-          ...(gradientBorder(borderColor) || {}),
-          borderWidth: borderWidth || "1px",
-          borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
-          borderStyle: borderStyle || "solid"
-        },
-        src: url,
-        title: alt
-      }), !readOnly ? /*#__PURE__*/_jsx(IconButton, {
+      children: [!readOnly && url && /*#__PURE__*/_jsx(ToolBar, {}), /*#__PURE__*/_jsx(VideoPlaceholder, {}), !readOnly && url ? /*#__PURE__*/_jsx(IconButton, {
         onPointerDown: onMouseDown,
         style: {
           background: "#FFF"

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

@@ -1,10 +1,11 @@
-import React from "react";
-import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField } from "@mui/material";
+import React, { useState } from "react";
+import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField, Button, Menu } from "@mui/material";
 import FormStyles from "./Styles";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import UserInputs from "./UserInputs";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 const FormWorkflow = props => {
   const {
     schedule,
@@ -23,6 +24,9 @@ const FormWorkflow = props => {
     handleInputReset
   } = props;
   const classes = FormStyles();
+  const [anchorEl, setAnchorEl] = useState(null);
+  const variables = element?.children;
+  const type = 1;
   const handleBodyField = event => {
     setBodyData(event.target.value);
   };
@@ -35,6 +39,14 @@ const FormWorkflow = props => {
   const onSubjectChange = event => {
     setSubject(event.target.value);
   };
+  const handleVariables = event => {
+    event.stopPropagation();
+    setAnchorEl(event.currentTarget);
+  };
+  const handleClose = event => {
+    event.stopPropagation();
+    setAnchorEl(null);
+  };
   return /*#__PURE__*/_jsxs(Grid, {
     container: true,
     children: [/*#__PURE__*/_jsxs(Grid, {
@@ -154,13 +166,47 @@ const FormWorkflow = props => {
           },
           "& textarea": {
             fontSize: "16px",
-            fontWeight: 500
+            fontWeight: 500,
+            width: "410px"
           },
           "& textarea:focus-visible": {
             outline: "none",
             borderRadius: "none",
             border: "none"
+          },
+          "& .MuiOutlinedInput-root": {
+            padding: "8px 10px"
           }
+        },
+        InputProps: {
+          endAdornment: /*#__PURE__*/_jsxs(_Fragment, {
+            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__*/_jsxs(Grid, {

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

@@ -2,8 +2,8 @@ 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,
@@ -27,110 +27,127 @@ const ListWorkflow = props => {
       xs: 12,
       children: /*#__PURE__*/_jsxs(Grid, {
         container: true,
-        sx: classes.flowListCard,
-        alignItems: "center",
-        justifyContent: "space-between",
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
-          xs: 11,
+          sx: classes.emailIndexCard,
+          children: /*#__PURE__*/_jsxs(Typography, {
+            sx: {
+              fontSize: "12px",
+              fontWeight: 600
+            },
+            children: ["Email ", index + 1]
+          })
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
-            gap: 1,
+            sx: classes.flowListCard,
+            alignItems: "center",
+            justifyContent: "space-between",
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
-              xs: 12,
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                alignItems: "center",
-                children: [/*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    sx: classes.listHeading,
-                    children: "Subject:"
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    sx: classes.listSubHeading,
-                    style: {
-                      paddingLeft: '24px'
-                    },
-                    children: flow.subject_data
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                alignItems: "center",
-                children: [/*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    sx: classes.listHeading,
-                    children: "Body:"
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  item: true,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    sx: classes.listSubHeading,
-                    style: {
-                      paddingLeft: '40px'
-                    },
-                    children: flow.body_data
-                  })
-                })]
-              })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
+              xs: 11,
               children: /*#__PURE__*/_jsxs(Grid, {
                 container: true,
-                alignItems: "center",
+                gap: 1,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   item: true,
-                  children: /*#__PURE__*/_jsx(Typography, {
-                    sx: classes.listHeading,
-                    children: "Scheduled:"
-                  })
-                }), /*#__PURE__*/_jsx(Grid, {
-                  item: true,
+                  xs: 12,
                   children: /*#__PURE__*/_jsxs(Grid, {
                     container: true,
+                    alignItems: "center",
                     children: [/*#__PURE__*/_jsx(Grid, {
+                      item: true,
+                      children: /*#__PURE__*/_jsx(Typography, {
+                        sx: classes.listHeading,
+                        children: "Subject:"
+                      })
+                    }), /*#__PURE__*/_jsx(Grid, {
                       item: true,
                       children: /*#__PURE__*/_jsx(Typography, {
                         sx: classes.listSubHeading,
                         style: {
-                          paddingLeft: '5px'
+                          paddingLeft: '24px'
                         },
-                        children: flow.schedule_type
+                        children: flow.subject_data
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
+                  children: /*#__PURE__*/_jsxs(Grid, {
+                    container: true,
+                    alignItems: "center",
+                    children: [/*#__PURE__*/_jsx(Grid, {
+                      item: true,
+                      children: /*#__PURE__*/_jsx(Typography, {
+                        sx: classes.listHeading,
+                        children: "Body:"
                       })
-                    }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
+                    }), /*#__PURE__*/_jsx(Grid, {
                       item: true,
-                      children: /*#__PURE__*/_jsxs(Typography, {
+                      children: /*#__PURE__*/_jsx(Typography, {
                         sx: classes.listSubHeading,
                         style: {
-                          paddingLeft: '5px'
+                          paddingLeft: '40px'
                         },
-                        children: [flow.schedule_on, flow.schedule_every]
+                        children: flow.body_data
+                      })
+                    })]
+                  })
+                }), /*#__PURE__*/_jsx(Grid, {
+                  item: true,
+                  xs: 12,
+                  children: /*#__PURE__*/_jsxs(Grid, {
+                    container: true,
+                    alignItems: "center",
+                    children: [/*#__PURE__*/_jsx(Grid, {
+                      item: true,
+                      children: /*#__PURE__*/_jsx(Typography, {
+                        sx: classes.listHeading,
+                        children: "Scheduled:"
+                      })
+                    }), /*#__PURE__*/_jsx(Grid, {
+                      item: true,
+                      children: /*#__PURE__*/_jsxs(Grid, {
+                        container: true,
+                        children: [/*#__PURE__*/_jsx(Grid, {
+                          item: true,
+                          children: /*#__PURE__*/_jsx(Typography, {
+                            sx: classes.listSubHeading,
+                            style: {
+                              paddingLeft: '5px'
+                            },
+                            children: flow.schedule_type
+                          })
+                        }), flow.schedule_type === 'after' && /*#__PURE__*/_jsx(Grid, {
+                          item: true,
+                          children: /*#__PURE__*/_jsxs(Typography, {
+                            sx: classes.listSubHeading,
+                            style: {
+                              paddingLeft: '5px'
+                            },
+                            children: [flow.schedule_on, flow.schedule_every]
+                          })
+                        })]
                       })
                     })]
                   })
                 })]
               })
+            }), /*#__PURE__*/_jsx(Grid, {
+              item: true,
+              xs: 1,
+              children: /*#__PURE__*/_jsx(MoreOptions, {
+                classes: classes,
+                menus: optionsList,
+                selectedFlow: index,
+                onMenuClick: onMenuClick
+              })
             })]
           })
-        }), /*#__PURE__*/_jsx(Grid, {
-          item: true,
-          xs: 1,
-          children: /*#__PURE__*/_jsx(MoreOptions, {
-            classes: classes,
-            menus: optionsList,
-            selectedFlow: index,
-            onMenuClick: onMenuClick
-          })
         })]
       })
     }, `workflow_list_${index}`))

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

@@ -1,6 +1,5 @@
 import React, { useState } from "react";
 import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
-import { MoreHorizontal } from "../../../common/iconslist";
 import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

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

@@ -11,10 +11,11 @@ const FormStyles = () => ({
   bodyTextArea: {
     "& textarea": {
       border: "none",
-      width: "100%",
-      maxWidth: "100%",
+      width: "95%",
+      maxWidth: "95%",
       outline: "none",
-      padding: "12px"
+      padding: "12px",
+      resize: "none"
     },
     "& textarea:focus-visible": {
       outline: "none",
@@ -149,7 +150,7 @@ const FormStyles = () => ({
     borderRadius: "10px"
   },
   toolBar: {
-    padding: "5px"
+    padding: "8px 10px 5px 5px"
   },
   colorButtons: {
     "& .buttonsWrpr": {
@@ -204,12 +205,25 @@ const FormStyles = () => ({
   },
   dialogFooter: {
     "&.MuiDialogActions-root": {
-      padding: "8px 24px"
+      padding: "12px 24px"
+    },
+    "& .secondaryBtn": {
+      marginRight: "0px !important"
+    },
+    "& .primaryBtn": {
+      marginLeft: "15px !important"
     }
   },
   toolButtons: {
     width: "36px",
     height: "36px"
+  },
+  emailIndexCard: {
+    borderRadius: "5px 5px 0 0",
+    background: "#2563EB",
+    color: "#fff",
+    padding: "8px",
+    marginLeft: "8px"
   }
 });
 export default FormStyles;

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

@@ -2,7 +2,7 @@ import { Button, Divider, Grid, IconButton, Menu, MenuItem, TextareaAutosize, To
 import React, { useState } from "react";
 import FormStyles from "./Styles";
 import Icon from "../../../common/Icon";
-import { PlusIcon, RestRight } from "../../../common/iconslist";
+import { RestRight } from "../../../common/iconslist";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
@@ -156,10 +156,8 @@ const UserInputs = props => {
               item: true,
               children: [/*#__PURE__*/_jsx(Button, {
                 sx: classes.variableBtn,
-                variant: "outlined",
-                size: "small",
                 onClick: handleVariables,
-                startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
+                endIcon: /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
                 children: "Variables"
               }), /*#__PURE__*/_jsx(Menu, {
                 id: "basic-menu",