@flozy/editor 1.7.1 → 1.7.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (34) hide show
  1. package/dist/Editor/CommonEditor.js +9 -79
  2. package/dist/Editor/Editor.css +123 -34
  3. package/dist/Editor/Elements/Button/EditorButton.js +7 -3
  4. package/dist/Editor/Elements/Carousel/Carousel.js +4 -4
  5. package/dist/Editor/Elements/Embed/Image.js +5 -1
  6. package/dist/Editor/Elements/Form/Form.js +3 -3
  7. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +12 -12
  8. package/dist/Editor/Elements/Form/Workflow/Styles.js +2 -1
  9. package/dist/Editor/Elements/Form/Workflow/index.js +23 -25
  10. package/dist/Editor/Elements/Grid/GridItem.js +3 -0
  11. package/dist/Editor/Elements/Link/Link.js +39 -32
  12. package/dist/Editor/Elements/Link/LinkButton.js +62 -80
  13. package/dist/Editor/Elements/Signature/SignaturePopup.js +8 -3
  14. package/dist/Editor/Elements/SimpleText.js +9 -4
  15. package/dist/Editor/MiniEditor.js +118 -0
  16. package/dist/Editor/Styles/EditorStyles.js +20 -0
  17. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
  18. package/dist/Editor/common/DnD/DragHandle.js +99 -0
  19. package/dist/Editor/common/DnD/Draggable.js +41 -0
  20. package/dist/Editor/common/DnD/Droppable.js +28 -0
  21. package/dist/Editor/common/DnD/index.js +48 -0
  22. package/dist/Editor/common/ImageSelector/Options/AddLink.js +3 -0
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +4 -1
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +4 -1
  25. package/dist/Editor/common/iconslist.js +17 -1
  26. package/dist/Editor/hooks/useMouseMove.js +9 -1
  27. package/dist/Editor/utils/embed.js +1 -0
  28. package/dist/Editor/utils/helper.js +1 -0
  29. package/dist/Editor/utils/pageSettings.js +2 -2
  30. package/dist/Editor/utils/serializeToHTML.js +5 -0
  31. package/dist/Editor/utils/{serializer.js → serializeToText.js} +3 -3
  32. package/dist/index.js +2 -0
  33. package/package.json +1 -1
  34. package/dist/Editor/Elements/Section.js +0 -42
@@ -1,11 +1,12 @@
1
1
  import React from "react";
2
2
  import { useFocused, useSelected, useSlateStatic } from "slate-react";
3
+ import { IconButton, Tooltip } from "@mui/material";
4
+ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
5
+ import LinkOffIcon from "@mui/icons-material/LinkOff";
6
+ import { insertDefaultEmbed } from "../../utils/embed";
7
+ import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
3
8
  import { removeLink } from "../../utils/link";
4
- import unlink from "../../Toolbar/toolbarIcons/unlink.svg";
5
9
  import "./styles.css";
6
- import { GrDocumentUpload } from 'react-icons/gr';
7
- import { insertEmbed } from "../../utils/embed";
8
- import { getQueryStrings } from "../../utils/SlateUtilityFunctions";
9
10
  import { jsx as _jsx } from "react/jsx-runtime";
10
11
  import { jsxs as _jsxs } from "react/jsx-runtime";
11
12
  const Link = ({
@@ -17,22 +18,45 @@ const Link = ({
17
18
  const selected = useSelected();
18
19
  const focused = useFocused();
19
20
  let refUrl = element.href ? element.href : element.url;
20
- refUrl = refUrl ? refUrl.includes('http') ? refUrl : `//${refUrl}` : 'Link';
21
+ refUrl = refUrl ? refUrl.includes("http") ? refUrl : `//${refUrl}` : "Link";
21
22
  let embedUrl = refUrl;
22
23
 
23
24
  // const urlMatch = embedUrl.match(regex);
24
25
  // embedUrl = urlMatch && urlMatch.length > 0 ? urlMatch[0] : '';
25
- if (embedUrl.includes('youtube')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
26
- if (embedUrl.includes('youtu.be')) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
26
+ if (embedUrl.includes("youtube")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/\/watch\?v=/g, '/embed/')
27
+ if (embedUrl.includes("youtu.be")) embedUrl = getQueryStrings(embedUrl); //embedUrl.replace(/youtu.be\//, 'youtube.com/embed/')
27
28
  // Others
28
- if (embedUrl.includes('loom')) embedUrl = embedUrl.replace(/\/share\//, '/embed/');
29
- if (embedUrl.includes('vimeo')) embedUrl = embedUrl.replace(/\/vimeo.com\//, '/player.vimeo.com/video/');
30
- if (embedUrl.includes('dailymotion') && embedUrl.includes('video')) embedUrl = embedUrl.replace(/www.dailymotion.com\//, 'www.dailymotion.com/embed/');
31
- if (embedUrl.includes('dai.ly')) embedUrl = embedUrl.replace(/dai.ly\//, 'www.dailymotion.com/embed/video/');
29
+ if (embedUrl.includes("loom")) embedUrl = embedUrl.replace(/\/share\//, "/embed/");
30
+ if (embedUrl.includes("vimeo")) embedUrl = embedUrl.replace(/\/vimeo.com\//, "/player.vimeo.com/video/");
31
+ if (embedUrl.includes("dailymotion") && embedUrl.includes("video")) embedUrl = embedUrl.replace(/www.dailymotion.com\//, "www.dailymotion.com/embed/");
32
+ if (embedUrl.includes("dai.ly")) embedUrl = embedUrl.replace(/dai.ly\//, "www.dailymotion.com/embed/video/");
32
33
  const embedDoc = () => {
33
- insertEmbed(editor, {
34
- url: embedUrl
35
- }, 'embed');
34
+ insertDefaultEmbed(editor, "video", element.href);
35
+ };
36
+ const Toolbar = () => {
37
+ return selected && focused ? /*#__PURE__*/_jsxs("div", {
38
+ className: "element-toolbar hr",
39
+ contentEditable: false,
40
+ style: {
41
+ width: "150px",
42
+ top: "100%",
43
+ left: "0px"
44
+ },
45
+ children: [/*#__PURE__*/_jsx(Tooltip, {
46
+ title: "Open",
47
+ children: /*#__PURE__*/_jsx(IconButton, {
48
+ href: element.href,
49
+ target: element.target,
50
+ children: /*#__PURE__*/_jsx(OpenInNewIcon, {})
51
+ })
52
+ }), /*#__PURE__*/_jsx(Tooltip, {
53
+ title: "Remove",
54
+ children: /*#__PURE__*/_jsx(IconButton, {
55
+ onClick: () => removeLink(editor),
56
+ children: /*#__PURE__*/_jsx(LinkOffIcon, {})
57
+ })
58
+ })]
59
+ }) : null;
36
60
  };
37
61
  return /*#__PURE__*/_jsxs("div", {
38
62
  className: "link",
@@ -42,24 +66,7 @@ const Link = ({
42
66
  ...element.attr,
43
67
  target: element.target,
44
68
  children: children
45
- }), selected && focused && /*#__PURE__*/_jsxs("div", {
46
- className: "af-link-popup",
47
- contentEditable: false,
48
- children: [/*#__PURE__*/_jsx("a", {
49
- href: element.href,
50
- target: element.target,
51
- children: element.href
52
- }), /*#__PURE__*/_jsx("button", {
53
- onClick: () => embedDoc(editor),
54
- children: /*#__PURE__*/_jsx(GrDocumentUpload, {})
55
- }), /*#__PURE__*/_jsx("button", {
56
- onClick: () => removeLink(editor),
57
- children: /*#__PURE__*/_jsx("img", {
58
- src: unlink,
59
- alt: ""
60
- })
61
- })]
62
- })]
69
+ }), /*#__PURE__*/_jsx(Toolbar, {})]
63
70
  });
64
71
  };
65
72
  export default Link;
@@ -61,98 +61,80 @@ const LinkButton = props => {
61
61
  icon: "link"
62
62
  })
63
63
  })
64
- }), showInput && /*#__PURE__*/_jsx(Dialog, {
64
+ }), showInput && /*#__PURE__*/_jsxs(Dialog, {
65
+ fullWidth: true,
65
66
  open: true,
66
67
  className: `dialogComp`,
67
- children: /*#__PURE__*/_jsxs(Grid, {
68
- item: true,
69
- xs: 12,
70
- sx: {
71
- p: 3
72
- },
73
- children: [/*#__PURE__*/_jsx(DialogTitle, {
74
- sx: {
75
- p: 0,
76
- pb: 2
68
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
69
+ children: /*#__PURE__*/_jsxs("div", {
70
+ style: {
71
+ display: "flex",
72
+ justifyContent: "space-between"
77
73
  },
78
- children: /*#__PURE__*/_jsxs("div", {
74
+ children: [/*#__PURE__*/_jsx(Typography, {
75
+ variant: "h6",
76
+ className: "popupTitle",
77
+ color: "primary",
78
+ children: "LINK"
79
+ }), /*#__PURE__*/_jsx("div", {
79
80
  style: {
80
- display: "flex",
81
- justifyContent: "space-between"
81
+ display: "flex"
82
82
  },
83
- children: [/*#__PURE__*/_jsx(Typography, {
84
- variant: "h6",
85
- className: "popupTitle",
86
- color: "primary",
87
- children: "LINK"
88
- }), /*#__PURE__*/_jsx("div", {
89
- style: {
90
- display: "flex"
91
- },
92
- children: /*#__PURE__*/_jsx(IconButton, {
93
- onClick: handleClose,
94
- className: "close-popupbtn",
95
- children: /*#__PURE__*/_jsx(CloseIcon, {})
96
- })
97
- })]
83
+ children: /*#__PURE__*/_jsx(IconButton, {
84
+ onClick: handleClose,
85
+ className: "close-popupbtn",
86
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
87
+ })
88
+ })]
89
+ })
90
+ }), /*#__PURE__*/_jsxs(DialogContent, {
91
+ children: [/*#__PURE__*/_jsx(Grid, {
92
+ item: true,
93
+ xs: 12,
94
+ style: {
95
+ paddingTop: "12px"
96
+ },
97
+ children: /*#__PURE__*/_jsx(TextField, {
98
+ size: "small",
99
+ fullWidth: true,
100
+ value: url,
101
+ placeholder: "https://google.com",
102
+ onChange: handleInputChange
98
103
  })
99
- }), /*#__PURE__*/_jsx(DialogContent, {
104
+ }), /*#__PURE__*/_jsx(Grid, {
105
+ item: true,
106
+ xs: 12,
100
107
  sx: {
101
- p: 0
108
+ ml: 1
102
109
  },
103
- children: /*#__PURE__*/_jsxs(Grid, {
104
- container: true,
105
- spacing: 2,
106
- children: [/*#__PURE__*/_jsx(Grid, {
107
- item: true,
108
- xs: 12,
109
- children: /*#__PURE__*/_jsx(TextField, {
110
- size: "small",
111
- fullWidth: true,
112
- value: url,
113
- placeholder: "https://google.com",
110
+ children: /*#__PURE__*/_jsx(FormControl, {
111
+ children: /*#__PURE__*/_jsx(FormControlLabel, {
112
+ control: /*#__PURE__*/_jsx(Checkbox, {
113
+ checked: showInNewTab,
114
114
  onChange: handleInputChange
115
+ }),
116
+ label: /*#__PURE__*/_jsx(Typography, {
117
+ variant: "body1",
118
+ color: "primary",
119
+ sx: {
120
+ pl: 1
121
+ },
122
+ children: "Open in new tab"
115
123
  })
116
- }), /*#__PURE__*/_jsx(Grid, {
117
- item: true,
118
- xs: 12,
119
- sx: {
120
- ml: 1
121
- },
122
- children: /*#__PURE__*/_jsx(FormControl, {
123
- children: /*#__PURE__*/_jsx(FormControlLabel, {
124
- control: /*#__PURE__*/_jsx(Checkbox, {
125
- checked: showInNewTab,
126
- onChange: handleInputChange
127
- }),
128
- label: /*#__PURE__*/_jsx(Typography, {
129
- variant: "body1",
130
- color: "primary",
131
- sx: {
132
- pl: 1
133
- },
134
- children: "Open in new tab"
135
- })
136
- })
137
- })
138
- })]
124
+ })
139
125
  })
140
- }), /*#__PURE__*/_jsxs(DialogActions, {
141
- sx: {
142
- p: 0,
143
- pt: 2
144
- },
145
- children: [/*#__PURE__*/_jsx(Button, {
146
- onClick: handleClose,
147
- className: "secondaryBtn",
148
- children: "Cancel"
149
- }), /*#__PURE__*/_jsx(Button, {
150
- onClick: handleInsertLink,
151
- className: "primaryBtn",
152
- children: "Add"
153
- })]
154
126
  })]
155
- })
127
+ }), /*#__PURE__*/_jsxs(DialogActions, {
128
+ children: [/*#__PURE__*/_jsx(Button, {
129
+ onClick: handleClose,
130
+ className: "secondaryBtn",
131
+ children: "Cancel"
132
+ }), /*#__PURE__*/_jsx(Button, {
133
+ onClick: handleInsertLink,
134
+ className: "primaryBtn",
135
+ children: "Add"
136
+ })]
137
+ })]
156
138
  })]
157
139
  });
158
140
  };
@@ -26,7 +26,9 @@ const SignaturePopup = props => {
26
26
  const [open, setOpen] = useState(false);
27
27
  const [tab, setTab] = useState(0);
28
28
  const SeletectedTab = SignatureOptions[tab];
29
- const [signedData, setSignedData] = useState({});
29
+ const [signedData, setSignedData] = useState({
30
+ signedOn: new Date()
31
+ });
30
32
  const [brush, setBrush] = useState({
31
33
  size: 1,
32
34
  color: "#000000"
@@ -250,12 +252,14 @@ const SignaturePopup = props => {
250
252
  children: /*#__PURE__*/_jsx(DatePicker, {
251
253
  showIcon: true,
252
254
  id: "signedOn",
255
+ name: "signedOn",
253
256
  selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
257
+ value: signedData?.signedOn || "",
254
258
  dateFormat: "MM/dd/yyyy",
255
259
  onChange: date => {
256
260
  setSignedData({
257
261
  ...signedData,
258
- signedOn: new Date(date).toISOString().split("T")[0]
262
+ signedOn: date ? new Date(date).toISOString().split("T")[0] : ""
259
263
  });
260
264
  }
261
265
  })
@@ -342,7 +346,8 @@ const SignaturePopup = props => {
342
346
  children: "Delete"
343
347
  }) : null, /*#__PURE__*/_jsx(Button, {
344
348
  onClick: handleSave,
345
- className: "primaryBtn",
349
+ className: `primaryBtn ${!signedData?.signature ? "disabled" : ""}`,
350
+ disabled: !signedData?.signature,
346
351
  children: "Save"
347
352
  })]
348
353
  })]
@@ -1,6 +1,6 @@
1
1
  import React from "react";
2
2
  import { useSlateStatic, useSelected, ReactEditor } from "slate-react";
3
- import { Node } from "slate";
3
+ import { Node, Editor } from "slate";
4
4
  import { Box } from "@mui/material";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
6
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,8 @@ const SimpleText = props => {
47
47
  customProps
48
48
  } = props;
49
49
  const {
50
- readOnly
50
+ readOnly,
51
+ editorPlaceholder
51
52
  } = customProps;
52
53
  const classes = SimpleTextStyle();
53
54
  const editor = useSlateStatic();
@@ -55,20 +56,24 @@ const SimpleText = props => {
55
56
  const path = ReactEditor.findPath(editor, element);
56
57
  const noContent = Node.string(Node.get(editor, path)).length === 0 && path.length === 1;
57
58
  const emptyEditor = editor.children.length === 1 && path[0] === 0 && path.length === 1 && !selected;
59
+ const isMoreText = (editor.selection ? Editor.string(editor, editor.selection) : "")?.trim()?.length === 0;
58
60
  return /*#__PURE__*/_jsxs(Box, {
59
61
  ...element.attr,
60
62
  ...attributes,
61
63
  className: `simple-text`,
62
64
  sx: classes.root,
63
- children: [children, selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
65
+ children: [children, isMoreText && selected && noContent && !readOnly ? /*#__PURE__*/_jsxs("span", {
64
66
  className: "placeholder-simple-text",
65
67
  children: ["Type ", /*#__PURE__*/_jsx("span", {
66
68
  className: "bg-pad-sl",
67
69
  children: "/"
68
70
  }), " for browse elements"]
69
- }) : null, emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
71
+ }) : null, isMoreText && emptyEditor && !readOnly ? /*#__PURE__*/_jsx("span", {
70
72
  className: "placeholder-simple-text",
71
73
  children: "Write Something..."
74
+ }) : null, editorPlaceholder && !selected ? /*#__PURE__*/_jsx("span", {
75
+ className: "placeholder-simple-text",
76
+ children: editorPlaceholder
72
77
  }) : null]
73
78
  });
74
79
  };
@@ -0,0 +1,118 @@
1
+ import React, { useCallback, useMemo, useRef, useState } from "react";
2
+ import { createEditor } from 'slate';
3
+ import { Slate, Editable, withReact } from "slate-react";
4
+ import { getBlock, getMarked } from "./utils/SlateUtilityFunctions";
5
+ import { commands, mentionsEvent } from "./utils/events";
6
+ import useMentions from "./hooks/useMentions";
7
+ import Shorthands from "./common/Shorthands";
8
+ // import withCommon from "./hooks/withCommon";
9
+ import { jsx as _jsx } from "react/jsx-runtime";
10
+ const initialValue = [{
11
+ type: 'paragraph',
12
+ children: [{
13
+ text: ''
14
+ }]
15
+ }];
16
+ const MiniEditor = props => {
17
+ const {
18
+ id,
19
+ // content,
20
+ // onSave,
21
+ // editor: collaborativeEditor,
22
+ readOnly,
23
+ miniEditorPlaceholder,
24
+ otherProps
25
+ } = props;
26
+ const {
27
+ CHARACTERS = []
28
+ // needLayout = true,
29
+ } = otherProps || {};
30
+ const mentionsRef = useRef();
31
+ const [editor] = useState(() => withReact(createEditor()));
32
+
33
+ // const editor = useMemo(() => {
34
+ // if (collaborativeEditor) return collaborativeEditor;
35
+ // return withCommon(createEditor(), { needLayout });
36
+ // }, [collaborativeEditor]);
37
+
38
+ const isReadOnly = readOnly === "readonly";
39
+ const customProps = {
40
+ ...(otherProps || {}),
41
+ readOnly: isReadOnly,
42
+ editorPlaceholder: miniEditorPlaceholder,
43
+ page_id: id
44
+ };
45
+ const [mentions, setMentions] = useMentions({
46
+ editor,
47
+ selection: editor?.selection
48
+ });
49
+ const {
50
+ search,
51
+ target,
52
+ index,
53
+ type
54
+ } = mentions;
55
+ console.log("🚀 ~ MiniEditor ~ mentions:", mentions);
56
+ const chars = type ? Shorthands[type]({
57
+ ...mentions,
58
+ CHARACTERS
59
+ }) : [];
60
+ const Leaf = ({
61
+ attributes,
62
+ children,
63
+ leaf
64
+ }) => {
65
+ children = getMarked(leaf, children);
66
+ return /*#__PURE__*/_jsx("span", {
67
+ ...attributes,
68
+ children: children
69
+ });
70
+ };
71
+ const Element = props => {
72
+ return getBlock(props);
73
+ };
74
+ const renderLeaf = useCallback(props => {
75
+ return /*#__PURE__*/_jsx(Leaf, {
76
+ ...props,
77
+ customProps: customProps
78
+ });
79
+ }, []);
80
+ const onKeyDown = useCallback(event => {
81
+ const isMetaKey = event.metaKey && event.keyCode >= 65 && event.keyCode <= 90;
82
+ const isCtrlKey = event.ctrlKey || isMetaKey;
83
+ if (target && chars.length > 0 && !isCtrlKey) {
84
+ mentionsEvent({
85
+ event,
86
+ mentions,
87
+ setMentions,
88
+ chars,
89
+ target,
90
+ editor,
91
+ type,
92
+ mentionsRef
93
+ });
94
+ } else if (isCtrlKey) {
95
+ commands({
96
+ event,
97
+ editor
98
+ });
99
+ }
100
+ }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
101
+ const renderElement = useCallback(props => {
102
+ return /*#__PURE__*/_jsx(Element, {
103
+ ...props,
104
+ customProps: customProps
105
+ });
106
+ }, []);
107
+ return /*#__PURE__*/_jsx(Slate, {
108
+ editor: editor,
109
+ initialValue: initialValue,
110
+ children: /*#__PURE__*/_jsx(Editable, {
111
+ renderElement: renderElement,
112
+ renderLeaf: renderLeaf,
113
+ onKeyDown: onKeyDown
114
+ })
115
+ });
116
+ };
117
+ MiniEditor.displayName = "MiniEditor";
118
+ export default MiniEditor;
@@ -62,6 +62,26 @@ const editorStyles = ({
62
62
  },
63
63
  "& .accordion-summary-collapse-btn": {
64
64
  padding: "4px"
65
+ },
66
+ "& .workflow-icon-btn": {
67
+ pointerEvents: "none",
68
+ position: "absolute",
69
+ right: "-9px",
70
+ top: "-9px",
71
+ border: "2px solid #f3b814",
72
+ padding: "0px",
73
+ background: "#FFF",
74
+ "& svg": {
75
+ width: "18px",
76
+ height: "18px"
77
+ }
78
+ },
79
+ "& .svg-big-btn": {
80
+ padding: "2px !important",
81
+ "& svg": {
82
+ width: "24px !important",
83
+ height: "24px !important"
84
+ }
65
85
  }
66
86
  }
67
87
  });
@@ -50,7 +50,7 @@ const TextFormat = props => {
50
50
  };
51
51
  const handlePageWidth = width => () => {
52
52
  updatePageSettings(editor, {
53
- ...pageProps,
53
+ ...(pageProps || {}),
54
54
  pageWidth: width
55
55
  });
56
56
  };
@@ -0,0 +1,99 @@
1
+ import React, { useEffect, useState } from "react";
2
+ import { ReactEditor, useSlateStatic } from "slate-react";
3
+ import { Box } from "@mui/material";
4
+ import Draggable from "./Draggable";
5
+ import Droppable from "./Droppable";
6
+ import { useEditorContext } from "../../hooks/useMouseMove";
7
+ import { Transforms } from "slate";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+ const DRAGGABLE_TYPES = ["paragraph"];
11
+ const DragHandleStyle = () => ({
12
+ root: {
13
+ position: "relative",
14
+ paddingLeft: "20px",
15
+ "&:hover": {
16
+ "& > .dh-para:first-child": {
17
+ opacity: 1
18
+ }
19
+ },
20
+ "&.dragging": {
21
+ backgroundColor: "#def4ff"
22
+ }
23
+ },
24
+ dragHandle: {
25
+ opacity: 0,
26
+ content: '" "',
27
+ position: "absolute",
28
+ top: 0,
29
+ left: 0,
30
+ borderRadius: "4px",
31
+ padding: "0px",
32
+ width: "18px",
33
+ background: "transparent",
34
+ border: 0,
35
+ display: "flex",
36
+ alignItems: "center",
37
+ justifyContent: "center",
38
+ cursor: "grab",
39
+ "& svg": {
40
+ fill: "#ccc",
41
+ width: "20px"
42
+ },
43
+ "&:hover": {
44
+ opacity: 1,
45
+ background: "#eee"
46
+ },
47
+ "&.active": {
48
+ opacity: 1,
49
+ cursor: "grabbing"
50
+ }
51
+ },
52
+ dropArea: {
53
+ height: "2px"
54
+ }
55
+ });
56
+ const DragHandle = props => {
57
+ const classes = DragHandleStyle();
58
+ const editor = useSlateStatic();
59
+ const [dragging, setDragging] = useState(false);
60
+ const {
61
+ attributes,
62
+ element,
63
+ children
64
+ } = props;
65
+ const path = ReactEditor.findPath(editor, element);
66
+ const canDraggable = DRAGGABLE_TYPES.indexOf(element?.type) > -1;
67
+ const {
68
+ drop
69
+ } = useEditorContext();
70
+ const id = `${element.type}_${[...path].join("|")}`;
71
+ const {
72
+ moved
73
+ } = element;
74
+ useEffect(() => {
75
+ if (moved) {
76
+ Transforms.removeNodes(editor, {
77
+ at: path
78
+ });
79
+ }
80
+ }, [moved]);
81
+ const handleOnDrag = isDragging => {
82
+ setDragging(isDragging);
83
+ };
84
+ return canDraggable ? /*#__PURE__*/_jsxs(Box, {
85
+ ...attributes,
86
+ component: "div",
87
+ className: `${dragging ? "dragging" : ""}`,
88
+ sx: classes.root,
89
+ children: [/*#__PURE__*/_jsx(Droppable, {
90
+ id: id,
91
+ classes: classes
92
+ }), children, /*#__PURE__*/_jsx(Draggable, {
93
+ id: id,
94
+ classes: classes,
95
+ onDrag: handleOnDrag
96
+ })]
97
+ }, `${id}_${drop}`) : children;
98
+ };
99
+ export default DragHandle;
@@ -0,0 +1,41 @@
1
+ import React, { useEffect } from "react";
2
+ import { useDraggable } from "@dnd-kit/core";
3
+ import { Box } from "@mui/material";
4
+ import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ const Draggable = props => {
7
+ const {
8
+ id,
9
+ classes,
10
+ onDrag
11
+ } = props;
12
+ const {
13
+ attributes: dragAttributes,
14
+ listeners,
15
+ setNodeRef,
16
+ isDragging,
17
+ transform
18
+ } = useDraggable({
19
+ id: id
20
+ });
21
+ useEffect(() => {
22
+ if (onDrag) {
23
+ onDrag(isDragging);
24
+ }
25
+ }, [isDragging]);
26
+ const dragStyle = transform ? {
27
+ transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`
28
+ } : undefined;
29
+ return /*#__PURE__*/_jsx(Box, {
30
+ ref: setNodeRef,
31
+ ...listeners,
32
+ ...dragAttributes,
33
+ component: "button",
34
+ className: `dh-para ${isDragging ? "active" : ""}`,
35
+ contentEditable: false,
36
+ style: dragStyle,
37
+ sx: classes.dragHandle,
38
+ children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
39
+ });
40
+ };
41
+ export default Draggable;
@@ -0,0 +1,28 @@
1
+ import React from "react";
2
+ import { useDroppable } from "@dnd-kit/core";
3
+ import { Box } from "@mui/material";
4
+ import { jsx as _jsx } from "react/jsx-runtime";
5
+ const Droppable = props => {
6
+ const {
7
+ id,
8
+ classes
9
+ } = props;
10
+ const {
11
+ isOver,
12
+ setNodeRef
13
+ } = useDroppable({
14
+ id: id
15
+ });
16
+ const dropStyle = {
17
+ backgroundColor: isOver ? "green" : undefined
18
+ };
19
+ return /*#__PURE__*/_jsx(Box, {
20
+ ref: setNodeRef,
21
+ component: "div",
22
+ className: `droppable-para`,
23
+ contentEditable: false,
24
+ style: dropStyle,
25
+ sx: classes.dropArea
26
+ });
27
+ };
28
+ export default Droppable;