@flozy/editor 1.7.1 → 1.7.3

package/dist/Editor/Elements/Link/Link.js

@@ -1,11 +1,12 @@
 import React from "react";
 import { useFocused, useSelected, useSlateStatic } from "slate-react";
+import { IconButton, Tooltip } from "@mui/material";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import LinkOffIcon from "@mui/icons-material/LinkOff";
+import { insertDefaultEmbed } from "../../utils/embed";
+import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 import { removeLink } from "../../utils/link";
-import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
 import "./styles.css";
-import { GrDocumentUpload } from 'react-icons/gr';
-import { insertEmbed } from "../../utils/embed";
-import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const Link = ({
@@ -17,22 +18,45 @@ const Link = ({
   const selected = useSelected();
   const focused = useFocused();
   let refUrl = element.href ? element.href : element.url;
-  refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
+  refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
   let embedUrl = refUrl;
 
   // const urlMatch = embedUrl.match(regex);
   // embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
-  if (embedUrl.includes('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
-  if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
+  if (embedUrl.includes("youtube")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
+  if (embedUrl.includes("youtu.be")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
   // Others
-  if (embedUrl.includes('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
-  if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
-  if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
-  if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
+  if (embedUrl.includes("loom")) embedUrl = embedUrl.replace(/\/share\//, "/embed/");
+  if (embedUrl.includes("vimeo")) embedUrl = embedUrl.replace(/\/vimeo.com\//, "/player.vimeo.com/video/");
+  if (embedUrl.includes("dailymotion") && embedUrl.includes("video")) embedUrl = embedUrl.replace(/www.dailymotion.com\//, "www.dailymotion.com/embed/");
+  if (embedUrl.includes("dai.ly")) embedUrl = embedUrl.replace(/dai.ly\//, "www.dailymotion.com/embed/video/");
   const embedDoc = () => {
-    insertEmbed(editor, {
-      url: embedUrl
-    }, 'embed');
+    insertDefaultEmbed(editor, "video", element.href);
+  };
+  const Toolbar = () => {
+    return selected && focused ? /*#__PURE__*/_jsxs("div", {
+      className: "element-toolbar hr",
+      contentEditable: false,
+      style: {
+        width: "150px",
+        top: "100%",
+        left: "0px"
+      },
+      children: [/*#__PURE__*/_jsx(Tooltip, {
+        title: "Open",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          href: element.href,
+          target: element.target,
+          children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
+        })
+      }), /*#__PURE__*/_jsx(Tooltip, {
+        title: "Remove",
+        children: /*#__PURE__*/_jsx(IconButton, {
+          onClick: () => removeLink(editor),
+          children: /*#__PURE__*/_jsx(LinkOffIcon, {})
+        })
+      })]
+    }) : null;
   };
   return /*#__PURE__*/_jsxs("div", {
     className: "link",
@@ -42,24 +66,7 @@ const Link = ({
       ...element.attr,
       target: element.target,
       children: children
-    }), selected && focused && /*#__PURE__*/_jsxs("div", {
-      className: "af-link-popup",
-      contentEditable: false,
-      children: [/*#__PURE__*/_jsx("a", {
-        href: element.href,
-        target: element.target,
-        children: element.href
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: () => embedDoc(editor),
-        children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
-      }), /*#__PURE__*/_jsx("button", {
-        onClick: () => removeLink(editor),
-        children: /*#__PURE__*/_jsx("img", {
-          src: unlink,
-          alt: ""
-        })
-      })]
-    })]
+    }), /*#__PURE__*/_jsx(Toolbar, {})]
   });
 };
 export default Link;

package/dist/Editor/Elements/Link/LinkButton.js

@@ -61,98 +61,80 @@ const LinkButton = props => {
           icon: "link"
         })
       })
-    }), showInput && /*#__PURE__*/_jsx(Dialog, {
+    }), showInput && /*#__PURE__*/_jsxs(Dialog, {
+      fullWidth: true,
       open: true,
       className: `dialogComp`,
-      children: /*#__PURE__*/_jsxs(Grid, {
-        item: true,
-        xs: 12,
-        sx: {
-          p: 3
-        },
-        children: [/*#__PURE__*/_jsx(DialogTitle, {
-          sx: {
-            p: 0,
-            pb: 2
+      children: [/*#__PURE__*/_jsx(DialogTitle, {
+        children: /*#__PURE__*/_jsxs("div", {
+          style: {
+            display: "flex",
+            justifyContent: "space-between"
           },
-          children: /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx(Typography, {
+            variant: "h6",
+            className: "popupTitle",
+            color: "primary",
+            children: "LINK"
+          }), /*#__PURE__*/_jsx("div", {
             style: {
-              display: "flex",
-              justifyContent: "space-between"
+              display: "flex"
             },
-            children: [/*#__PURE__*/_jsx(Typography, {
-              variant: "h6",
-              className: "popupTitle",
-              color: "primary",
-              children: "LINK"
-            }), /*#__PURE__*/_jsx("div", {
-              style: {
-                display: "flex"
-              },
-              children: /*#__PURE__*/_jsx(IconButton, {
-                onClick: handleClose,
-                className: "close-popupbtn",
-                children: /*#__PURE__*/_jsx(CloseIcon, {})
-              })
-            })]
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onClick: handleClose,
+              className: "close-popupbtn",
+              children: /*#__PURE__*/_jsx(CloseIcon, {})
+            })
+          })]
+        })
+      }), /*#__PURE__*/_jsxs(DialogContent, {
+        children: [/*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
+          style: {
+            paddingTop: "12px"
+          },
+          children: /*#__PURE__*/_jsx(TextField, {
+            size: "small",
+            fullWidth: true,
+            value: url,
+            placeholder: "https://google.com",
+            onChange: handleInputChange
           })
-        }), /*#__PURE__*/_jsx(DialogContent, {
+        }), /*#__PURE__*/_jsx(Grid, {
+          item: true,
+          xs: 12,
           sx: {
-            p: 0
+            ml: 1
           },
-          children: /*#__PURE__*/_jsxs(Grid, {
-            container: true,
-            spacing: 2,
-            children: [/*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              children: /*#__PURE__*/_jsx(TextField, {
-                size: "small",
-                fullWidth: true,
-                value: url,
-                placeholder: "https://google.com",
+          children: /*#__PURE__*/_jsx(FormControl, {
+            children: /*#__PURE__*/_jsx(FormControlLabel, {
+              control: /*#__PURE__*/_jsx(Checkbox, {
+                checked: showInNewTab,
                 onChange: handleInputChange
+              }),
+              label: /*#__PURE__*/_jsx(Typography, {
+                variant: "body1",
+                color: "primary",
+                sx: {
+                  pl: 1
+                },
+                children: "Open in new tab"
               })
-            }), /*#__PURE__*/_jsx(Grid, {
-              item: true,
-              xs: 12,
-              sx: {
-                ml: 1
-              },
-              children: /*#__PURE__*/_jsx(FormControl, {
-                children: /*#__PURE__*/_jsx(FormControlLabel, {
-                  control: /*#__PURE__*/_jsx(Checkbox, {
-                    checked: showInNewTab,
-                    onChange: handleInputChange
-                  }),
-                  label: /*#__PURE__*/_jsx(Typography, {
-                    variant: "body1",
-                    color: "primary",
-                    sx: {
-                      pl: 1
-                    },
-                    children: "Open in new tab"
-                  })
-                })
-              })
-            })]
+            })
           })
-        }), /*#__PURE__*/_jsxs(DialogActions, {
-          sx: {
-            p: 0,
-            pt: 2
-          },
-          children: [/*#__PURE__*/_jsx(Button, {
-            onClick: handleClose,
-            className: "secondaryBtn",
-            children: "Cancel"
-          }), /*#__PURE__*/_jsx(Button, {
-            onClick: handleInsertLink,
-            className: "primaryBtn",
-            children: "Add"
-          })]
         })]
-      })
+      }), /*#__PURE__*/_jsxs(DialogActions, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          onClick: handleClose,
+          className: "secondaryBtn",
+          children: "Cancel"
+        }), /*#__PURE__*/_jsx(Button, {
+          onClick: handleInsertLink,
+          className: "primaryBtn",
+          children: "Add"
+        })]
+      })]
     })]
   });
 };

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;