@flozy/editor 1.7.1 → 1.7.3

package/dist/Editor/CommonEditor.js

@@ -2,7 +2,6 @@
 import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
 import { createEditor, Transforms } from "slate";
 import { Slate, Editable, ReactEditor } from "slate-react";
-import { DndContext, DragOverlay } from "@dnd-kit/core";
 import { useDebounce } from "use-debounce";
 import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
 import CodeToText from "./Elements/CodeToText/CodeToText";
@@ -13,9 +12,9 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
 import { mentionsEvent, commands, indentation, escapeEvent } from "./utils/events";
 import withCommon from "./hooks/withCommon";
 import DialogWrapper from "./DialogWrapper";
-import { serialize } from "./utils/serializer";
+import { serializeToText } from "./utils/serializeToText";
 import { getPageSettings } from "./utils/pageSettings";
-import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
+import { getThumbnailImage } from "./helper";
 import PopupTool from "./Toolbar/PopupTool";
 import "./font.css";
 import "./Editor.css";
@@ -25,8 +24,9 @@ import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
 import { EditorProvider } from "./hooks/useMouseMove";
 import TopBanner from "./Elements/TopBanner/TopBanner";
 import editorStyles from "./Styles/EditorStyles";
+import DragHandle from "./common/DnD/DragHandle";
+import DragAndDrop from "./common/DnD";
 import "animate.css";
-import Section from "./Elements/Section";
 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"];
@@ -135,12 +135,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
     }
   }, [deboundedValue]);
   const getOnSaveData = val => {
-    const text = serialize(val);
+    const text = serializeToText(val);
     const title = val?.find(f => f.type === "title");
     return {
       value: JSON.stringify(val),
       text: text,
-      title: serialize(title?.children) || "Untitled"
+      title: serializeToText(title?.children) || "Untitled"
     };
   };
   const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -299,61 +299,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
       });
     }
   }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
-  const handleDragStart = e => {
-    try {
-      const {
-        active: {
-          data: {
-            current: {
-              element
-            }
-          }
-        }
-      } = e;
-      const dragEle = ReactEditor.toDOMNode(editor, element);
-      const {
-        width,
-        height
-      } = dragEle.getBoundingClientRect();
-      setDrag({
-        style: {
-          width,
-          height
-        },
-        dom: dragEle.outerHTML
-      });
-    } catch (err) {
-      console.log(err);
-    }
-  };
-  const handleDragEnd = e => {
-    try {
-      const {
-        active: {
-          data: {
-            current: {
-              element,
-              onDragEnd
-            }
-          }
-        },
-        over: {
-          data: {
-            current: {
-              onDrop
-            }
-          }
-        }
-      } = e;
-      onDrop(JSON.stringify(element));
-      setTimeout(() => {
-        onDragEnd();
-      }, 100);
-      setDrag(null);
-    } catch (err) {
-      console.log(err);
-    }
-  };
   const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
   const dotBg = needDotsBG ? {
     background: "white",
@@ -389,11 +334,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
           editor: editor,
           initialValue: value,
           onChange: handleEditorChange,
-          children: [/*#__PURE__*/_jsxs(DndContext, {
-            collisionDetection: customCollisionDetectionAlgorithm,
-            onDragStart: handleDragStart,
-            onDragEnd: handleDragEnd,
-            children: [/*#__PURE__*/_jsx(Overlay, {
+          children: [/*#__PURE__*/_jsx(DragAndDrop, {
+            children: /*#__PURE__*/_jsx(Overlay, {
               children: /*#__PURE__*/_jsx(Box, {
                 className: `${hasTopBanner() ? "has-topbanner" : ""}`,
                 sx: classes.slateWrapper,
@@ -448,19 +390,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
                   }) : null]
                 })
               })
-            }), /*#__PURE__*/_jsx(DragOverlay, {
-              className: "drag-overlay",
-              style: {
-                ...(drag?.style || {})
-              },
-              children: drag ? /*#__PURE__*/_jsx(Item, {
-                children: /*#__PURE__*/_jsx("div", {
-                  dangerouslySetInnerHTML: {
-                    __html: drag?.dom
-                  }
-                })
-              }) : null
-            })]
+            })
           }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
             ...htmlAction,
             handleCodeToText: handleCodeToText

package/dist/Editor/Editor.css

@@ -136,9 +136,14 @@ blockquote {
   z-index: 1000;
 }
 
+.element-toolbar a {
+  margin-right: 4px;
+}
+
 .grid-container-toolbar button,
 .grid-item-toolbar button,
-.element-toolbar button {
+.element-toolbar button,
+.element-toolbar a {
   border-radius: 10px;
   border: 1px solid rgba(37, 99, 235, 0.32);
   background: #fff;
@@ -148,6 +153,7 @@ blockquote {
   padding: 6px;
 }
 .element-toolbar button svg,
+.element-toolbar a svg,
 .grid-container-toolbar button svg,
 .grid-item-toolbar button svg {
   width: 16px;
@@ -156,7 +162,8 @@ blockquote {
 
 .grid-container-toolbar button:hover,
 .grid-item-toolbar button:hover,
-.element-toolbar button:hover {
+.element-toolbar button:hover,
+.element-toolbar a:hover {
   background-color: #ffffff;
   color: #2684ff;
   border: 1px solid #2684ff;
@@ -413,6 +420,13 @@ blockquote {
   width: auto !important;
 }
 
+.MuiButton-root.primaryBtn.disabled,
+.MuiButton-root.secondaryBtn.disabled {
+  background: #eee !important;
+  color: #ccc !important;
+  border: 1px solid #ccc !important;
+}
+
 .MuiButton-root.secondaryBtn {
   background: #ffffff;
   border: 1px solid #2563eb !important;
@@ -478,7 +492,7 @@ blockquote {
   }
 
   .embed {
-    justify-content: center; 
+    justify-content: center;
   }
 
   .embed img {
@@ -822,7 +836,10 @@ blockquote {
   font-weight: 400;
   width: 200px;
   cursor: pointer;
-  color:#464646;
+  color: #464646;
+  background-color: #fff;
+  padding: 4px 6px;
+  border-radius: 12px;
   span {
     text-transform: capitalize;
   }
@@ -859,38 +876,110 @@ blockquote {
 
 /* HTML: <div class="loader"></div> */
 .img-loader-wrapper {
-  width:28px;
+  width: 28px;
   aspect-ratio: 1;
   border-radius: 50%;
-  background: #F10C49;
+  background: #f10c49;
   animation: l9 2s infinite;
 }
 @keyframes l9 {
-  0%   {box-shadow: 
-          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  12.5%   {box-shadow: 
-          0 0 #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,16px 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  25%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,16px 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  37.5% {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(16px*0.707) calc(16px*0.707) #E3AAD6,
-          0 16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  50%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 16px #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-  62.5% {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, calc(-16px*0.707) calc(16px*0.707) #E3AAD6,-16px 0 #F4DD51, 0 0 #E3AAD6}
-  75%   {box-shadow: 
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,-16px 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
-  87.5% {box-shadow: 
-          0 -16px #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, calc(-16px*0.707) calc(-16px*0.707) #E3AAD6}
-  100% {box-shadow: 
-          0 -16px #F4DD51, calc(16px*0.707) calc(-16px*0.707) #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6,
-          0 0 #F4DD51, 0 0 #E3AAD6,0 0 #F4DD51, 0 0 #E3AAD6}
-}
+  0% {
+    box-shadow:
+      0 -16px #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  12.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      16px 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  25% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      16px 0 #f4dd51,
+      calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  37.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 16px #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  50% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 16px #f4dd51,
+      calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  62.5% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(-16px * 0.707) calc(16px * 0.707) #e3aad6,
+      -16px 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+  75% {
+    box-shadow:
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      -16px 0 #f4dd51,
+      calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
+  }
+  87.5% {
+    box-shadow:
+      0 -16px #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      calc(-16px * 0.707) calc(-16px * 0.707) #e3aad6;
+  }
+  100% {
+    box-shadow:
+      0 -16px #f4dd51,
+      calc(16px * 0.707) calc(-16px * 0.707) #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6,
+      0 0 #f4dd51,
+      0 0 #e3aad6;
+  }
+}

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

@@ -8,6 +8,7 @@ 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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditorButton = props => {
@@ -47,6 +48,7 @@ const EditorButton = props => {
     linkType,
     redirectOnURLResult
   } = buttonLink || {};
+  const isTrigger = linkType === "actionTrigger";
   const {
     topLeft,
     topRight,
@@ -62,7 +64,7 @@ const EditorButton = props => {
   const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
   const onClick = async e => {
     if (readOnly) {
-      if (linkType === "actionTrigger") {
+      if (isTrigger) {
         if (metadata?.buttonLink?.handler) {
           metadata.buttonLink.handler("click");
         } else if (redirectOnURLResult) {
@@ -162,7 +164,6 @@ const EditorButton = props => {
         sx: {
           background: bgColor || "rgb(30, 75, 122)",
           borderBlockStyle: "solid",
-          // ...borderStyleColor,
           borderColor: borderColor || "transparent",
           borderWidth: borderWidth || "1px",
           borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
@@ -199,7 +200,10 @@ const EditorButton = props => {
             paddingLeft: "4px",
             paddingRight: "4px"
           }
-        }), /*#__PURE__*/_jsx(Toolbar, {})]
+        }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
+          className: "workflow-icon-btn",
+          children: /*#__PURE__*/_jsx(WorkflowIcon, {})
+        }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
       })
     }), /*#__PURE__*/_jsx("div", {
       contentEditable: false,

package/dist/Editor/Elements/Carousel/Carousel.js

@@ -51,14 +51,14 @@ const Carousel = props => {
     }
   }, [edit]);
   const onAddSlide = () => {
-    const insertPath = [path[0], children.length];
-    if (insertPath[0] !== undefined) {
-      insertPath[insertPath.length - 1] = element.children.length;
+    try {
       Transforms.insertNodes(editor, [{
         ...carouselItem()
       }], {
-        at: insertPath
+        at: [...path, children.length]
       });
+    } catch (err) {
+      console.log(err);
     }
   };
   const onEdit = () => {

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

@@ -148,6 +148,7 @@ const Image = ({
     },
     ...element.attr,
     "data-path": path.join(","),
+    contentEditable: false,
     children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
       element: element,
       onSave: onSave,
@@ -188,7 +189,10 @@ const Image = ({
         className: "resize-br visible-on-hover",
         children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
       })]
-    }), children]
+    }), /*#__PURE__*/_jsx("span", {
+      contentEditable: false,
+      children: children
+    })]
   });
 };
 export default Image;

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

@@ -4,8 +4,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
 import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
 import BackupIcon from "@mui/icons-material/Backup";
-import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
-import SendTimeExtensionIcon from '@mui/icons-material/SendTimeExtension';
+import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
 import FormPopup from "./FormPopup";
 import ButtonPopup from "../Button/ButtonPopup";
 import { formField } from "../../utils/formfield";
@@ -222,8 +221,9 @@ const Form = props => {
         title: "Workflow",
         arrow: true,
         children: /*#__PURE__*/_jsx(IconButton, {
+          className: "svg-big-btn",
           onClick: onWorkflow,
-          children: /*#__PURE__*/_jsx(SendTimeExtensionIcon, {})
+          children: /*#__PURE__*/_jsx(WorkflowIcon, {})
         })
       })]
     });

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField } from "@mui/material";
 import FormStyles from "./Styles";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+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";
@@ -61,26 +61,26 @@ const FormWorkflow = props => {
             value: schedule,
             defaultValue: 1,
             children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              value: 'immediately',
+              value: "immediately",
               label: "Immediately",
               onChange: () => {
-                setSchedule('immediately');
+                setSchedule("immediately");
               },
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
             }), /*#__PURE__*/_jsx(FormControlLabel, {
-              value: 'after',
+              value: "after",
               label: "After",
               onChange: () => {
-                setSchedule('after');
+                setSchedule("after");
               },
               control: /*#__PURE__*/_jsx(Radio, {
                 size: "small"
               })
             })]
           })
-        }), schedule === 'after' && /*#__PURE__*/_jsx(Grid, {
+        }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
           item: true,
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
@@ -113,19 +113,19 @@ const FormWorkflow = props => {
                   sx: classes.select,
                   IconComponent: KeyboardArrowDownIcon,
                   style: {
-                    minWidth: '160px'
+                    minWidth: "160px"
                   },
                   children: [/*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: 'min',
+                    value: "min",
                     children: "Minutes"
                   }), /*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: 'hr',
+                    value: "hr",
                     children: "Hours"
                   }), /*#__PURE__*/_jsx(MenuItem, {
                     sx: classes.selectList,
-                    value: 'day',
+                    value: "day",
                     children: "Day"
                   })]
                 })
@@ -149,11 +149,11 @@ const FormWorkflow = props => {
         maxRows: 5,
         sx: {
           "& fieldset": {
-            border: '1px solid #6F6F6F33',
+            border: "1px solid #6F6F6F33",
             borderRadius: "8px"
           },
           "& textarea": {
-            fontSize: '16px',
+            fontSize: "16px",
             fontWeight: 500
           },
           "& textarea:focus-visible": {

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

@@ -13,7 +13,8 @@ const FormStyles = () => ({
       border: "none",
       width: "100%",
       maxWidth: "100%",
-      outline: "none"
+      outline: "none",
+      padding: "12px"
     },
     "& textarea:focus-visible": {
       outline: "none",

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

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import FormStyles from "./Styles";
 import FormWorkflow from "./FormWorkflow";
 
 //Constants
-import { minutes, hours, days } from './constant';
+import { minutes, hours, days } from "./constant";
 import ListWorkflow from "./ListWorkflow";
 import { PlusIcon } from "../../../common/iconslist";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,12 +23,12 @@ const Workflow = props => {
   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 [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 [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 [flowEdited, setFlowEdited] = useState({
     isEdited: false,
     listIndex: null
@@ -44,16 +44,16 @@ const Workflow = props => {
   };
   const onFormBack = () => {
     setFormData(false);
-    setBodyData('');
-    setSubject('');
-    setSchedule('immediately');
+    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,
+      schedule_every: schedule === "after" ? scheduleEvery : 0,
+      schedule_on: schedule === "after" ? scheduleOn : 0,
       subject_data: subject,
       body_data: bodyData
     };
@@ -67,9 +67,9 @@ const Workflow = props => {
     };
     onSave(saveData);
     setFormData(false);
-    setBodyData('');
-    setSubject('');
-    setSchedule('immediately');
+    setBodyData("");
+    setSubject("");
+    setSchedule("immediately");
     setFlowEdited({
       isEdited: false,
       listIndex: null
@@ -117,26 +117,25 @@ const Workflow = props => {
     children: [/*#__PURE__*/_jsxs(DialogTitle, {
       sx: classes.popupTitle,
       style: {
-        padding: formData ? '16px 12px' : '16px 24px',
+        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, {
+      }), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
         variant: "outlined",
         sx: {
-          textTransform: 'none',
-          background: '#EBF1F9',
-          padding: '7px 15px'
+          textTransform: "none",
+          background: "#EBF1F9",
+          padding: "7px 15px"
         },
         onClick: handleAddFormWorkflow,
         size: "small",
         startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
-        children: " New Email"
+        children: [" ", "New Email"]
       })]
     }), /*#__PURE__*/_jsxs(DialogContent, {
-      dividers: true,
       children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
         workflow: workflowList,
         handleEditFormWorkflow: handleEditFormWorkflow,
@@ -161,15 +160,14 @@ const Workflow = props => {
     }), /*#__PURE__*/_jsxs(DialogActions, {
       sx: classes.dialogFooter,
       children: [/*#__PURE__*/_jsx(Button, {
-        color: "primary",
+        className: "secondaryBtn",
         sx: classes.closeBtn,
-        variant: "outlined",
         onClick: closeWorkflow,
         size: "small",
         children: "Close"
       }), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
+        className: "primaryBtn",
         sx: classes.saveBtn,
-        variant: "contained",
         onClick: saveFormWorkflow,
         size: "small",
         children: "Save"

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

@@ -150,6 +150,9 @@ const GridItem = props => {
     children: [!readOnly && /*#__PURE__*/_jsxs("div", {
       className: `element-selector ${selected ? "selected" : ""}`,
       contentEditable: false,
+      style: {
+        zIndex: 1000
+      },
       children: [/*#__PURE__*/_jsx("div", {
         className: "element-selector-dots tl",
         children: " "