@flozy/editor 1.7.0 → 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,12 +149,17 @@ 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": {
+            outline: "none",
+            borderRadius: "none",
+            border: "none"
           }
         }
       })]

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

@@ -3,8 +3,8 @@ 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 { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 function MoreOptions(props) {
   const {
     classes,
@@ -27,15 +27,12 @@ function MoreOptions(props) {
     children: [/*#__PURE__*/_jsx(Tooltip, {
       arrow: true,
       title: "More Options",
-      children: /*#__PURE__*/_jsxs(IconButton, {
+      children: /*#__PURE__*/_jsx(IconButton, {
         sx: classes.moreOption,
         onClick: handleClick,
-        children: [/*#__PURE__*/_jsx(Icon, {
+        children: /*#__PURE__*/_jsx(Icon, {
           icon: "moreHorizantal"
-        }), /*#__PURE__*/_jsx(MoreHorizontal, {
-          width: "24px",
-          height: "24px"
-        })]
+        })
       })
     }), /*#__PURE__*/_jsx(Menu, {
       id: "basic-menu",

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

@@ -1,147 +1,155 @@
 const FormStyles = () => ({
   addButton: {
-    display: 'flex',
-    justifyContent: 'flex-end'
+    display: "flex",
+    justifyContent: "flex-end"
   },
   infoText: {
-    fontSize: '12px',
-    fontWeight: '400',
-    color: '#94A3B8'
+    fontSize: "12px",
+    fontWeight: "400",
+    color: "#94A3B8"
   },
   bodyTextArea: {
-    '& textarea': {
-      border: 'none',
-      width: '96%',
-      maxWidth: '96%',
-      outline: 'none'
+    "& textarea": {
+      border: "none",
+      width: "100%",
+      maxWidth: "100%",
+      outline: "none",
+      padding: "12px"
     },
-    '& textarea: focus-visible': {
-      outline: 'none',
-      border: 'none'
+    "& textarea:focus-visible": {
+      outline: "none",
+      border: "none"
     }
   },
   formHeadings: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 500,
-    paddingBottom: '10px',
-    paddingTop: '10px'
+    paddingBottom: "10px",
+    paddingTop: "10px"
   },
   flowListCard: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px"
   },
   listHeading: {
-    fontSize: '14px',
+    fontSize: "14px",
     fontWeight: 700
   },
   listSubHeading: {
-    fontSize: '12px',
+    fontSize: "12px",
     fontWeight: 500,
-    color: '#64748B',
-    maxWidth: '380px',
-    textTransform: 'capitalize',
+    color: "#64748B",
+    maxWidth: "380px",
+    textTransform: "capitalize",
     whiteSpace: "nowrap",
-    overflow: 'hidden',
-    textOverflow: 'ellipsis'
+    overflow: "hidden",
+    textOverflow: "ellipsis"
   },
   addBtnTypo: {
-    color: '#94A3B8',
+    color: "#94A3B8",
     fontWeight: 500,
-    fontSize: '12px'
+    fontSize: "12px"
   },
   emptyList: {
-    justifyContent: 'center',
-    display: 'flex',
-    border: '1px solid #6F6F6F33',
-    borderRadius: '8px',
-    padding: '10px',
-    color: '#94A3B8'
+    justifyContent: "center",
+    display: "flex",
+    border: "1px solid #6F6F6F33",
+    borderRadius: "8px",
+    padding: "10px",
+    color: "#94A3B8"
   },
   popupTitle: {
     fontWeight: 600,
-    fontSize: '16px',
-    display: 'flex',
-    alignItems: 'center'
+    fontSize: "16px",
+    display: "flex",
+    alignItems: "center"
   },
   subHeadings: {
     fontWeight: 500,
-    fontSize: '14px'
+    fontSize: "14px"
   },
   radioBtn: {
-    '& .MuiFormControlLabel-label': {
-      fontSize: '14px',
-      color: '#64748B'
+    "& .MuiFormControlLabel-label": {
+      fontSize: "14px",
+      color: "#64748B"
     }
   },
   dialogTitle: {
-    '& MuiDialogTitle-root': {
-      padding: '16px 12px'
+    "& MuiDialogTitle-root": {
+      padding: "16px 12px"
     }
   },
   closeBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '&:hover': {
-      border: '1px solid #64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   variableBtn: {
-    background: '#F4F6F9',
-    color: '#64748B',
-    fontSize: '14px',
+    background: "#F4F6F9",
+    color: "#64748B",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 22px',
-    textTransform: 'none',
-    border: '1px solid #D8DDE1',
-    '& svg': {
-      '& path': {
-        stroke: '#64748B'
+    padding: "4px 22px",
+    textTransform: "none",
+    border: "1px solid #D8DDE1",
+    "& svg": {
+      "& path": {
+        stroke: "#64748B"
       }
     },
-    '&:hover': {
-      border: '1px solid #64748B'
+    "&:hover": {
+      border: "1px solid #64748B"
     }
   },
   saveBtn: {
-    background: '#2563EB',
-    fontSize: '14px',
+    background: "#2563EB",
+    fontSize: "14px",
     fontWeight: 500,
-    padding: '4px 24px',
-    textTransform: 'none'
+    padding: "4px 24px",
+    textTransform: "none",
+    "& .MuiButton-containedSizeSmall": {
+      borderRadius: "5px"
+    },
+    "& .MuiButton-containedPrimary": {
+      background: "#2563EB",
+      borderRadius: "5px"
+    }
   },
   select: {
-    minWidth: '110px',
-    '& .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    minWidth: "110px",
+    "& .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '&:hover .MuiOutlinedInput-notchedOutline': {
-      borderRadius: '8px',
-      border: '1px solid #6F6F6F33',
-      boxShadow: '0px 4px 16px 0px #0000000D'
+    "&:hover .MuiOutlinedInput-notchedOutline": {
+      borderRadius: "8px",
+      border: "1px solid #6F6F6F33",
+      boxShadow: "0px 4px 16px 0px #0000000D"
     },
-    '& .MuiSelect-select': {
-      color: '#94A3B8',
-      fontSize: '14px'
+    "& .MuiSelect-select": {
+      color: "#94A3B8",
+      fontSize: "14px"
     }
   },
   selectList: {
-    color: '#94A3B8',
-    fontSize: '14px'
+    color: "#94A3B8",
+    fontSize: "14px"
   },
   toolbarContainer: {
-    border: '1px solid #6F6F6F33',
-    borderRadius: '10px'
+    border: "1px solid #6F6F6F33",
+    borderRadius: "10px"
   },
   toolBar: {
-    padding: '5px'
+    padding: "5px"
   },
   colorButtons: {
     "& .buttonsWrpr": {
@@ -191,17 +199,17 @@ const FormStyles = () => ({
     }
   },
   moreOption: {
-    background: '#F4F4F4',
-    borderRadius: '8px'
+    background: "#F4F4F4",
+    borderRadius: "8px"
   },
   dialogFooter: {
-    '&.MuiDialogActions-root': {
-      padding: '8px 24px'
+    "&.MuiDialogActions-root": {
+      padding: "8px 24px"
     }
   },
   toolButtons: {
-    width: '36px',
-    height: '36px'
+    width: "36px",
+    height: "36px"
   }
 });
 export default FormStyles;