@flozy/editor 1.7.0 → 1.7.2

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

@@ -3,7 +3,7 @@ import React, { useState } from "react";
 import FormStyles from "./Styles";
 import Icon from "../../../common/Icon";
 import { PlusIcon, RestRight } from "../../../common/iconslist";
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { AllColors } from "../../Color Picker/ColorButtons";
 import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -20,7 +20,7 @@ const UserInputs = props => {
   const variables = element?.children;
   const classes = FormStyles();
   const popupClasses = PopupToolStyle();
-  const [activeColor, setActiveColor] = useState(['#000000']);
+  const [activeColor, setActiveColor] = useState(["#000000"]);
   //state
   const [anchorEl, setAnchorEl] = useState(null);
   const [colorAnchorEl, setColorAnchorEl] = useState(null);
@@ -115,7 +115,7 @@ const UserInputs = props => {
                 title: "Current Color",
                 children: /*#__PURE__*/_jsx(IconButton, {
                   style: {
-                    borderRadius: '50px',
+                    borderRadius: "50px",
                     background: activeColor
                   }
                 })
@@ -140,6 +140,7 @@ const UserInputs = props => {
           item: true,
           children: /*#__PURE__*/_jsxs(Grid, {
             container: true,
+            alignItems: "center",
             children: [/*#__PURE__*/_jsx(Grid, {
               item: true,
               children: /*#__PURE__*/_jsx(Tooltip, {
@@ -166,12 +167,12 @@ const UserInputs = props => {
                 anchorEl: anchorEl,
                 onClose: handleClose,
                 anchorOrigin: {
-                  vertical: 'bottom',
-                  horizontal: 'right'
+                  vertical: "bottom",
+                  horizontal: "right"
                 },
                 transformOrigin: {
-                  vertical: 'top',
-                  horizontal: 'right'
+                  vertical: "top",
+                  horizontal: "right"
                 },
                 children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
                   sx: {
@@ -188,18 +189,12 @@ const UserInputs = props => {
     }), /*#__PURE__*/_jsx(Grid, {
       item: true,
       xs: 12,
+      sx: classes.bodyTextArea,
       children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
         margin: "none",
         minRows: 6,
         value: subject,
-        onChange: handleField,
-        className: classes.bodyTextArea,
-        style: {
-          border: 'none',
-          width: "96%",
-          padding: '10px',
-          outline: "none"
-        }
+        onChange: handleField
       })
     })]
   });

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,25 +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'
+          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,
@@ -160,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/Grid.js

@@ -46,6 +46,7 @@ const Grid = props => {
     sectionBgColor,
     sectionBackgroundImage,
     sectionBannerSpacing,
+    sectionBorderRadius,
     gridSize
   } = element;
   const {
@@ -71,6 +72,12 @@ const Grid = props => {
     bottomLeft,
     bottomRight
   } = borderRadius || {};
+  const {
+    topLeft: ssTopLeft,
+    topRight: ssTopRight,
+    bottomLeft: ssBottomLeft,
+    bottomRight: ssBottomRight
+  } = sectionBorderRadius || {};
   const editor = useSlateStatic();
   const path = ReactEditor.findPath(editor, element);
   const {
@@ -289,7 +296,8 @@ const Grid = props => {
       paddingLeft: `${ssleft}px`,
       paddingRight: `${ssright}px`,
       paddingTop: `${sstop}px`,
-      paddingBottom: `${ssbottom}px`
+      paddingBottom: `${ssbottom}px`,
+      borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
     },
     "data-path": path.join(","),
     children: /*#__PURE__*/_jsxs(GridContainer, {

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;