@flozy/editor 2.1.0 → 2.1.1

package/dist/Editor/CommonEditor.js

@@ -2,7 +2,7 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
-import { useDebounce } from "use-debounce";
+import { useDebounce, useDebouncedCallback } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
 import { draftToSlate } from "./utils/draftToSlate";
@@ -30,6 +30,7 @@ import "animate.css";
 import decorators from "./utils/Decorators";
 import useElement from "./utils/customHooks/useElement";
 import { getTRBLBreakPoints } from "./helper/theme";
+import { handleInsertLastElement, outsideEditorClickLabel } from "./utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -93,6 +94,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     w: null,
     h: null
   });
+  const [isScrolling, setIsScrolling] = useState(false);
   const {
     needDotsBG,
     footer,
@@ -341,6 +343,13 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundSize: "40px 40px",
     backgroundPosition: "-19px -19px"
   } : {};
+  const handleScrollStop = useDebouncedCallback(() => {
+    setIsScrolling(false);
+  }, 200);
+  const handleScroll = () => {
+    setIsScrolling(true);
+    handleScrollStop();
+  };
   const hasTopBanner = () => {
     const tb = editor.children[0];
     return tb?.type === "topbanner" ? tb : null;
@@ -375,18 +384,24 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           children: [/*#__PURE__*/_jsx(DragAndDrop, {
             children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
-                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""}`,
+                className: `${hasTopBanner() ? "has-topbanner" : ""} ${!pageColor ? "no-color" : ""} ${isScrolling ? "" : "hideScroll"} scrollable-content`,
                 sx: classes.slateWrapper,
                 id: "slate-wrapper-scroll-container",
                 style: {
                   background: pageColor || "",
                   color: pageTextColor || ""
                 },
+                onClick: e => {
+                  handleInsertLastElement(e, editor);
+                },
+                onScroll: handleScroll,
                 children: /*#__PURE__*/_jsxs(Box, {
                   component: "div",
                   className: "max-content",
+                  "data-info": outsideEditorClickLabel,
                   children: [renderTopBanner(), /*#__PURE__*/_jsx("div", {
                     className: "scroll-area",
+                    "data-info": outsideEditorClickLabel,
                     children: /*#__PURE__*/_jsxs(Box, {
                       component: "div",
                       ref: editorWrapper,
@@ -404,6 +419,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                         minHeight: "87%",
                         maxWidth: pageMaxWidth ? `${parseInt(pageMaxWidth)}px !important` : "auto"
                       },
+                      "data-info": outsideEditorClickLabel,
                       children: [!readOnly ? /*#__PURE__*/_jsx(PopupTool, {
                         onDrawerOpen: onDrawerOpen,
                         theme: theme
@@ -437,6 +453,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                       paddingBottom: "12px"
                     },
                     align: "center",
+                    "data-info": outsideEditorClickLabel,
                     children: footer
                   })]
                 })

package/dist/Editor/Elements/Button/EditorButton.js

@@ -5,11 +5,11 @@ import { IconButton, Tooltip, Box } from "@mui/material";
 import * as fIcons from "@mui/icons-material";
 import SettingsIcon from "@mui/icons-material/Settings";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ButtonPopup from "./ButtonPopup";
 import { actionButtonRedirect } from "../../service/actionTrigger";
 import { WorkflowIcon } from "../../common/iconslist";
 import { getTRBLBreakPoints, getBreakPointsValue } from "../../helper/theme";
+import { windowVar } from "../../utils/helper";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -53,6 +53,7 @@ const EditorButton = props => {
   } = buttonLink || {};
   const isTrigger = linkType === "actionTrigger";
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
+  windowVar.lastButtonProps = element;
   const onClick = async e => {
     if (readOnly) {
       if (isTrigger) {

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

@@ -26,8 +26,12 @@ const FormWorkflow = props => {
   const [anchorEl, setAnchorEl] = useState(null);
   const variables = element?.children;
   const type = 1;
-  const handleBodyField = event => {
-    setBodyData(event.target.value);
+  const handleBodyField = data => {
+    // setBodyData(data);
+  };
+  const onSaveBodyField = data => {
+    let bodyData = typeof data === 'string' ? JSON.parse(data) : data;
+    setBodyData(bodyData);
   };
   const handleScheduleInstant = event => {
     setScheduleEvery(event.target.value);
@@ -67,11 +71,11 @@ const FormWorkflow = props => {
         children: [/*#__PURE__*/_jsx(Grid, {
           item: true,
           sx: classes.radioBtn,
-          children: /*#__PURE__*/_jsx(RadioGroup, {
+          children: /*#__PURE__*/_jsxs(RadioGroup, {
             name: "set timing",
             value: schedule,
             defaultValue: 1,
-            children: /*#__PURE__*/_jsx(FormControlLabel, {
+            children: [/*#__PURE__*/_jsx(FormControlLabel, {
               value: "immediately",
               label: "Immediately",
               onChange: () => {
@@ -80,7 +84,16 @@ const FormWorkflow = props => {
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
-            })
+            }), /*#__PURE__*/_jsx(FormControlLabel, {
+              value: "after",
+              label: "After",
+              onChange: () => {
+                setSchedule("after");
+              },
+              control: /*#__PURE__*/_jsx(Radio, {
+                size: "small"
+              })
+            })]
           })
         }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,
@@ -149,6 +162,7 @@ const FormWorkflow = props => {
         onChange: onSubjectChange,
         fullWidth: true,
         maxRows: 5,
+        className: "workflowSubject",
         sx: {
           "& fieldset": {
             border: "1px solid #6F6F6F33",
@@ -210,6 +224,7 @@ const FormWorkflow = props => {
         type: 2,
         subject: bodyData,
         handleField: handleBodyField,
+        onSave: onSaveBodyField,
         handleSelectedVariables: handleSelectedVariables,
         handleInputReset: handleInputReset
       })]

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

@@ -22,135 +22,138 @@ const ListWorkflow = props => {
   return /*#__PURE__*/_jsx(Grid, {
     container: true,
     gap: 2,
-    children: workflow?.map((flow, index) => /*#__PURE__*/_jsx(Grid, {
-      item: true,
-      xs: 12,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        container: true,
-        children: [/*#__PURE__*/_jsx(Grid, {
-          item: true,
-          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,
-            sx: classes.flowListCard,
-            alignItems: "center",
-            justifyContent: "space-between",
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 11,
-              children: /*#__PURE__*/_jsxs(Grid, {
-                container: true,
-                gap: 1,
-                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,
-                  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
-              })
-            })]
-          })
-        })]
-      })
-    }, `workflow_list_${index}`))
+    children: workflow?.map((flow, index) => {
+      const bodyData = flow?.body_data;
+      return /*#__PURE__*/_jsx(Grid, {
+        item: true,
+        xs: 12,
+        children: /*#__PURE__*/_jsxs(Grid, {
+          container: true,
+          children: [/*#__PURE__*/_jsx(Grid, {
+            item: true,
+            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,
+              sx: classes.flowListCard,
+              alignItems: "center",
+              justifyContent: "space-between",
+              children: [/*#__PURE__*/_jsx(Grid, {
+                item: true,
+                xs: 11,
+                children: /*#__PURE__*/_jsxs(Grid, {
+                  container: true,
+                  gap: 1,
+                  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: bodyData[0]?.children[0]?.text
+                        })
+                      })]
+                    })
+                  }), /*#__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
+                })
+              })]
+            })
+          })]
+        })
+      }, `workflow_list_${index}`);
+    })
   });
 };
 export default ListWorkflow;

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

@@ -9,17 +9,15 @@ const FormStyles = theme => ({
     color: "#94A3B8"
   },
   bodyTextArea: {
-    "& textarea": {
-      border: "none",
-      width: "95%",
-      maxWidth: "95%",
-      outline: "none",
-      padding: "12px",
-      resize: "none"
+    '& .mini-editor-cls': {
+      padding: '10px',
+      '&:focus-visible': {
+        outline: 'none',
+        border: 'none'
+      }
     },
-    "& textarea:focus-visible": {
-      outline: "none",
-      border: "none"
+    "& .editorWorkflow": {
+      minHeight: '130px'
     }
   },
   formHeadings: {
@@ -242,6 +240,9 @@ const FormStyles = theme => ({
       backgroundColor: theme?.palette?.editor?.background,
       color: theme?.palette?.editor?.textColor
     }
+  },
+  root: {
+    padding: '10px'
   }
 });
 export default FormStyles;