@flozy/editor 1.7.1 → 1.7.2

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

@@ -413,6 +413,14 @@ 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;
@@ -823,6 +831,9 @@ blockquote {
   width: 200px;
   cursor: pointer;
   color:#464646;
+  background-color: #FFF;
+  padding: 4px 6px;
+  border-radius: 12px;
   span {
     text-transform: capitalize;
   }

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: " "

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -26,7 +26,9 @@ const SignaturePopup = props => {
   const [open, setOpen] = useState(false);
   const [tab, setTab] = useState(0);
   const SeletectedTab = SignatureOptions[tab];
-  const [signedData, setSignedData] = useState({});
+  const [signedData, setSignedData] = useState({
+    signedOn: new Date()
+  });
   const [brush, setBrush] = useState({
     size: 1,
     color: "#000000"
@@ -250,12 +252,14 @@ const SignaturePopup = props => {
                   children: /*#__PURE__*/_jsx(DatePicker, {
                     showIcon: true,
                     id: "signedOn",
+                    name: "signedOn",
                     selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
+                    value: signedData?.signedOn || "",
                     dateFormat: "MM/dd/yyyy",
                     onChange: date => {
                       setSignedData({
                         ...signedData,
-                        signedOn: new Date(date).toISOString().split("T")[0]
+                        signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
                       });
                     }
                   })
@@ -342,7 +346,8 @@ const SignaturePopup = props => {
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: "primaryBtn",
+                className: `primaryBtn ${!signedData?.signature ? "disabled" : ""}`,
+                disabled: !signedData?.signature,
                 children: "Save"
               })]
             })]

package/dist/Editor/Elements/SimpleText.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
-import { Node } from "slate";
+import { Node, Editor } from "slate";
 import { Box } from "@mui/material";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,8 @@ const SimpleText = props => {
     customProps
   } = props;
   const {
-    readOnly
+    readOnly,
+    editorPlaceholder
   } = customProps;
   const classes = SimpleTextStyle();
   const editor = useSlateStatic();
@@ -55,20 +56,24 @@ const SimpleText = props => {
   const path = ReactEditor.findPath(editor, element);
   const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
   const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
+  const isMoreText = (editor.selection ? Editor.string(editor, editor.selection) : "")?.trim()?.length === 0;
   return /*#__PURE__*/_jsxs(Box, {
     ...element.attr,
     ...attributes,
     className: `simple-text`,
     sx: classes.root,
-    children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
+    children: [children, isMoreText && selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
       className: "placeholder-simple-text",
       children: ["Type ", /*#__PURE__*/_jsx("span", {
         className: "bg-pad-sl",
         children: "/"
       }), " for browse elements"]
-    }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
+    }) : null, isMoreText && emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
       className: "placeholder-simple-text",
       children: "Write Something..."
+    }) : null, editorPlaceholder && !selected ? /*#__PURE__*/_jsx("span", {
+      className: "placeholder-simple-text",
+      children: editorPlaceholder
     }) : null]
   });
 };

package/dist/Editor/MiniEditor.js

@@ -0,0 +1,118 @@
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { createEditor } from 'slate';
+import { Slate, Editable, withReact } from "slate-react";
+import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
+import { commands, mentionsEvent } from "./utils/events";
+import useMentions from "./hooks/useMentions";
+import Shorthands from "./common/Shorthands";
+// import withCommon from "./hooks/withCommon";
+import { jsx as _jsx } from "react/jsx-runtime";
+const initialValue = [{
+  type: 'paragraph',
+  children: [{
+    text: ''
+  }]
+}];
+const MiniEditor = props => {
+  const {
+    id,
+    // content,
+    // onSave,
+    // editor: collaborativeEditor,
+    readOnly,
+    miniEditorPlaceholder,
+    otherProps
+  } = props;
+  const {
+    CHARACTERS = []
+    // needLayout = true,
+  } = otherProps || {};
+  const mentionsRef = useRef();
+  const [editor] = useState(() => withReact(createEditor()));
+
+  // const editor = useMemo(() => {
+  //     if (collaborativeEditor) return collaborativeEditor;
+  //     return withCommon(createEditor(), { needLayout });
+  // }, [collaborativeEditor]);
+
+  const isReadOnly = readOnly === "readonly";
+  const customProps = {
+    ...(otherProps || {}),
+    readOnly: isReadOnly,
+    editorPlaceholder: miniEditorPlaceholder,
+    page_id: id
+  };
+  const [mentions, setMentions] = useMentions({
+    editor,
+    selection: editor?.selection
+  });
+  const {
+    search,
+    target,
+    index,
+    type
+  } = mentions;
+  console.log("🚀 ~ MiniEditor ~ mentions:", mentions);
+  const chars = type ? Shorthands[type]({
+    ...mentions,
+    CHARACTERS
+  }) : [];
+  const Leaf = ({
+    attributes,
+    children,
+    leaf
+  }) => {
+    children = getMarked(leaf, children);
+    return /*#__PURE__*/_jsx("span", {
+      ...attributes,
+      children: children
+    });
+  };
+  const Element = props => {
+    return getBlock(props);
+  };
+  const renderLeaf = useCallback(props => {
+    return /*#__PURE__*/_jsx(Leaf, {
+      ...props,
+      customProps: customProps
+    });
+  }, []);
+  const onKeyDown = useCallback(event => {
+    const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
+    const isCtrlKey = event.ctrlKey || isMetaKey;
+    if (target && chars.length > 0 && !isCtrlKey) {
+      mentionsEvent({
+        event,
+        mentions,
+        setMentions,
+        chars,
+        target,
+        editor,
+        type,
+        mentionsRef
+      });
+    } else if (isCtrlKey) {
+      commands({
+        event,
+        editor
+      });
+    }
+  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
+  const renderElement = useCallback(props => {
+    return /*#__PURE__*/_jsx(Element, {
+      ...props,
+      customProps: customProps
+    });
+  }, []);
+  return /*#__PURE__*/_jsx(Slate, {
+    editor: editor,
+    initialValue: initialValue,
+    children: /*#__PURE__*/_jsx(Editable, {
+      renderElement: renderElement,
+      renderLeaf: renderLeaf,
+      onKeyDown: onKeyDown
+    })
+  });
+};
+MiniEditor.displayName = "MiniEditor";
+export default MiniEditor;

package/dist/Editor/Styles/EditorStyles.js

@@ -62,6 +62,26 @@ const editorStyles = ({
     },
     "& .accordion-summary-collapse-btn": {
       padding: "4px"
+    },
+    "& .workflow-icon-btn": {
+      pointerEvents: "none",
+      position: "absolute",
+      right: "-9px",
+      top: "-9px",
+      border: "2px solid #f3b814",
+      padding: "0px",
+      background: "#FFF",
+      "& svg": {
+        width: "18px",
+        height: "18px"
+      }
+    },
+    "& .svg-big-btn": {
+      padding: "2px !important",
+      "& svg": {
+        width: "24px !important",
+        height: "24px !important"
+      }
     }
   }
 });

package/dist/Editor/Toolbar/PopupTool/TextFormat.js

@@ -50,7 +50,7 @@ const TextFormat = props => {
   };
   const handlePageWidth = width => () => {
     updatePageSettings(editor, {
-      ...pageProps,
+      ...(pageProps || {}),
       pageWidth: width
     });
   };

package/dist/Editor/common/DnD/DragHandle.js

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import { ReactEditor, useSlateStatic } from "slate-react";
+import { Box } from "@mui/material";
+import Draggable from "./Draggable";
+import Droppable from "./Droppable";
+import { useEditorContext } from "../../hooks/useMouseMove";
+import { Transforms } from "slate";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const DRAGGABLE_TYPES = ["paragraph"];
+const DragHandleStyle = () => ({
+  root: {
+    position: "relative",
+    paddingLeft: "20px",
+    "&:hover": {
+      "& > .dh-para:first-child": {
+        opacity: 1
+      }
+    },
+    "&.dragging": {
+      backgroundColor: "#def4ff"
+    }
+  },
+  dragHandle: {
+    opacity: 0,
+    content: '" "',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    borderRadius: "4px",
+    padding: "0px",
+    width: "18px",
+    background: "transparent",
+    border: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "grab",
+    "& svg": {
+      fill: "#ccc",
+      width: "20px"
+    },
+    "&:hover": {
+      opacity: 1,
+      background: "#eee"
+    },
+    "&.active": {
+      opacity: 1,
+      cursor: "grabbing"
+    }
+  },
+  dropArea: {
+    height: "2px"
+  }
+});
+const DragHandle = props => {
+  const classes = DragHandleStyle();
+  const editor = useSlateStatic();
+  const [dragging, setDragging] = useState(false);
+  const {
+    attributes,
+    element,
+    children
+  } = props;
+  const path = ReactEditor.findPath(editor, element);
+  const canDraggable = DRAGGABLE_TYPES.indexOf(element?.type) > -1;
+  const {
+    drop
+  } = useEditorContext();
+  const id = `${element.type}_${[...path].join("|")}`;
+  const {
+    moved
+  } = element;
+  useEffect(() => {
+    if (moved) {
+      Transforms.removeNodes(editor, {
+        at: path
+      });
+    }
+  }, [moved]);
+  const handleOnDrag = isDragging => {
+    setDragging(isDragging);
+  };
+  return canDraggable ? /*#__PURE__*/_jsxs(Box, {
+    ...attributes,
+    component: "div",
+    className: `${dragging ? "dragging" : ""}`,
+    sx: classes.root,
+    children: [/*#__PURE__*/_jsx(Droppable, {
+      id: id,
+      classes: classes
+    }), children, /*#__PURE__*/_jsx(Draggable, {
+      id: id,
+      classes: classes,
+      onDrag: handleOnDrag
+    })]
+  }, `${id}_${drop}`) : children;
+};
+export default DragHandle;

package/dist/Editor/common/DnD/Draggable.js

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { useDraggable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Draggable = props => {
+  const {
+    id,
+    classes,
+    onDrag
+  } = props;
+  const {
+    attributes: dragAttributes,
+    listeners,
+    setNodeRef,
+    isDragging,
+    transform
+  } = useDraggable({
+    id: id
+  });
+  useEffect(() => {
+    if (onDrag) {
+      onDrag(isDragging);
+    }
+  }, [isDragging]);
+  const dragStyle = transform ? {
+    transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
+  } : undefined;
+  return /*#__PURE__*/_jsx(Box, {
+    ref: setNodeRef,
+    ...listeners,
+    ...dragAttributes,
+    component: "button",
+    className: `dh-para ${isDragging ? "active" : ""}`,
+    contentEditable: false,
+    style: dragStyle,
+    sx: classes.dragHandle,
+    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+  });
+};
+export default Draggable;

package/dist/Editor/common/DnD/Droppable.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { useDroppable } from "@dnd-kit/core";
+import { Box } from "@mui/material";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Droppable = props => {
+  const {
+    id,
+    classes
+  } = props;
+  const {
+    isOver,
+    setNodeRef
+  } = useDroppable({
+    id: id
+  });
+  const dropStyle = {
+    backgroundColor: isOver ? "green" : undefined
+  };
+  return /*#__PURE__*/_jsx(Box, {
+    ref: setNodeRef,
+    component: "div",
+    className: `droppable-para`,
+    contentEditable: false,
+    style: dropStyle,
+    sx: classes.dropArea
+  });
+};
+export default Droppable;

package/dist/Editor/common/DnD/index.js

@@ -0,0 +1,48 @@
+import React from "react";
+import { Transforms, Node } from "slate";
+import { useSlateStatic } from "slate-react";
+import { DndContext } from "@dnd-kit/core";
+import { customCollisionDetectionAlgorithm } from "../../helper";
+import { jsx as _jsx } from "react/jsx-runtime";
+const DragAndDrop = ({
+  children
+}) => {
+  const editor = useSlateStatic();
+  const handleDragStart = e => {
+    try {
+      // console.log(e);
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  const handleDragEnd = e => {
+    try {
+      const {
+        active,
+        over
+      } = e;
+      const fromPath = active.id.split("_")[1].split("|");
+      const toPath = over.id.split("_")[1].split("|");
+      const toCloneNode = JSON.stringify(Node.get(editor, fromPath));
+      // set moved node delete
+      Transforms.setNodes(editor, {
+        moved: true
+      }, {
+        at: [...fromPath]
+      });
+      // clone node in the moved path
+      Transforms.insertNodes(editor, JSON.parse(toCloneNode), {
+        at: [...toPath]
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  };
+  return /*#__PURE__*/_jsx(DndContext, {
+    collisionDetection: customCollisionDetectionAlgorithm,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    children: children
+  });
+};
+export default DragAndDrop;

package/dist/Editor/common/iconslist.js

@@ -1529,4 +1529,20 @@ export const UploadImage = () => /*#__PURE__*/_jsx("svg", {
     fill: "#64748B",
     stroke: "#64748B"
   })
-});
+});
+export const WorkflowIcon = () => {
+  return /*#__PURE__*/_jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "#000000",
+    width: "800px",
+    height: "800px",
+    viewBox: "0 0 32 32",
+    version: "1.1",
+    children: [/*#__PURE__*/_jsx("title", {
+      children: "lightning-bolt"
+    }), /*#__PURE__*/_jsx("path", {
+      d: "M23.5 13.187h-7.5v-12.187l-7.5 17.813h7.5v12.187l7.5-17.813z",
+      fill: "#f3b814"
+    })]
+  });
+};

package/dist/Editor/hooks/useMouseMove.js

@@ -6,7 +6,11 @@ export const EditorProvider = ({
 }) => {
   const [event] = useMouseMove();
   const [previous, setPrevious] = useState("");
+  const [drop, setDrop] = useState(0);
   const path = event?.target?.getAttribute("data-path");
+  const onDrop = () => {
+    setDrop(drop + 1);
+  };
   const value = useMemo(() => {
     if (path) {
       setPrevious(path);
@@ -20,7 +24,11 @@ export const EditorProvider = ({
     }
   }, [path]);
   return /*#__PURE__*/_jsx(EditorContext.Provider, {
-    value: value,
+    value: {
+      ...(value || {}),
+      onDrop: onDrop,
+      drop
+    },
     children: children
   });
 };

package/dist/Editor/utils/helper.js

@@ -1,4 +1,5 @@
 export const formatDate = (date, format = "MM/DD/YYYY") => {
+  if (!date) return "";
   var d = new Date(date),
     month = "" + (d.getMonth() + 1),
     day = "" + d.getDate(),

package/dist/Editor/utils/pageSettings.js

@@ -35,8 +35,8 @@ export const insertPageSettings = (editor, pageProps = {}) => {
   Transforms.insertNodes(editor, [{
     type: "page-settings",
     pageProps: {
-      ...pageProps,
-      pageWidth: "fixed"
+      pageWidth: "fixed",
+      ...pageProps
     },
     children: [{
       text: ""

package/dist/Editor/utils/serializeToHTML.js

@@ -0,0 +1,5 @@
+import { Node } from "slate";
+const serializeToHTML = nodes => {
+  return nodes.map(n => Node.string(n)).join("\n");
+};
+export default serializeToHTML;

package/dist/Editor/utils/{serializer.js → serializeToText.js}

@@ -1,4 +1,4 @@
-export const serialize = node => {
+export const serializeToText = node => {
   try {
     if (!node?.type && node?.text) {
       return node?.text;
@@ -6,8 +6,8 @@ export const serialize = node => {
     let n = Array.isArray(node) ? node : node?.children;
     n = n && Array.isArray(n) ? n : n ? [n] : [];
     let block = n.map(m => {
-      return serialize(m);
-    }).join(' ');
+      return serializeToText(m);
+    }).join(" ");
     return block;
   } catch (err) {
     console.log(err);

package/dist/index.js

@@ -1,4 +1,6 @@
 import Collaborative from "./Editor/CollaborativeEditor";
 import CommonEditor from "./Editor/CommonEditor";
+import Mini from "./Editor/MiniEditor";
 export const Editor = CommonEditor;
+export const MiniEditor = Mini;
 export const CollaborativeEditor = Collaborative;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flozy/editor",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "An Editor for flozy app brain",
   "files": [
     "dist"

package/dist/Editor/Elements/Section.js

@@ -1,42 +0,0 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { ReactEditor, useSlateStatic } from "slate-react";
-import { jsx as _jsx } from "react/jsx-runtime";
-const SectionStyle = () => ({
-  root: {
-    position: "relative",
-    padding: "0px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    width: "100%",
-    "&.root-1": {
-      "& .section-inner-ed.root-1": {
-        width: "80%",
-        maxWidth: "1440px"
-      }
-    }
-  }
-});
-const Section = props => {
-  const {
-    element
-  } = props;
-  const editor = useSlateStatic();
-  const path = ReactEditor.findPath(editor, element);
-  console.log(path);
-  const classes = SectionStyle();
-  const {
-    children
-  } = props;
-  return /*#__PURE__*/_jsx(Box, {
-    component: "div",
-    className: `root-${path.length}`,
-    sx: classes.root,
-    children: /*#__PURE__*/_jsx("div", {
-      className: `section-inner-ed root-${path.length}`,
-      children: children
-    })
-  });
-};
-export default Section;