@flozy/editor 1.7.0 → 1.7.2
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +9 -79
- package/dist/Editor/Editor.css +11 -0
- package/dist/Editor/Elements/Button/EditorButton.js +7 -3
- package/dist/Editor/Elements/Carousel/Carousel.js +4 -4
- package/dist/Editor/Elements/Embed/Image.js +5 -1
- package/dist/Editor/Elements/Form/Form.js +3 -3
- package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +17 -12
- package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +4 -7
- package/dist/Editor/Elements/Form/Workflow/Styles.js +97 -89
- package/dist/Editor/Elements/Form/Workflow/UserInputs.js +10 -15
- package/dist/Editor/Elements/Form/Workflow/index.js +23 -24
- package/dist/Editor/Elements/Grid/Grid.js +9 -1
- package/dist/Editor/Elements/Grid/GridItem.js +3 -0
- package/dist/Editor/Elements/Signature/SignaturePopup.js +8 -3
- package/dist/Editor/Elements/SimpleText.js +9 -4
- package/dist/Editor/MiniEditor.js +118 -0
- package/dist/Editor/Styles/EditorStyles.js +20 -0
- package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
- package/dist/Editor/common/DnD/DragHandle.js +99 -0
- package/dist/Editor/common/DnD/Draggable.js +41 -0
- package/dist/Editor/common/DnD/Droppable.js +28 -0
- package/dist/Editor/common/DnD/index.js +48 -0
- package/dist/Editor/common/StyleBuilder/sectionStyle.js +8 -0
- package/dist/Editor/common/iconslist.js +17 -1
- package/dist/Editor/hooks/useMouseMove.js +9 -1
- package/dist/Editor/utils/helper.js +1 -0
- package/dist/Editor/utils/pageSettings.js +2 -2
- package/dist/Editor/utils/serializeToHTML.js +5 -0
- package/dist/Editor/utils/{serializer.js → serializeToText.js} +3 -3
- package/dist/index.js +2 -0
- package/package.json +1 -1
- package/dist/Editor/Elements/Section.js +0 -42
@@ -3,7 +3,7 @@ import React, { useState } from "react";
|
|
3
3
|
import FormStyles from "./Styles";
|
4
4
|
import Icon from "../../../common/Icon";
|
5
5
|
import { PlusIcon, RestRight } from "../../../common/iconslist";
|
6
|
-
import KeyboardArrowDownIcon from
|
6
|
+
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
7
7
|
import { AllColors } from "../../Color Picker/ColorButtons";
|
8
8
|
import PopupToolStyle from "../../../Toolbar/PopupTool/PopupToolStyle";
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -20,7 +20,7 @@ const UserInputs = props => {
|
|
20
20
|
const variables = element?.children;
|
21
21
|
const classes = FormStyles();
|
22
22
|
const popupClasses = PopupToolStyle();
|
23
|
-
const [activeColor, setActiveColor] = useState([
|
23
|
+
const [activeColor, setActiveColor] = useState(["#000000"]);
|
24
24
|
//state
|
25
25
|
const [anchorEl, setAnchorEl] = useState(null);
|
26
26
|
const [colorAnchorEl, setColorAnchorEl] = useState(null);
|
@@ -115,7 +115,7 @@ const UserInputs = props => {
|
|
115
115
|
title: "Current Color",
|
116
116
|
children: /*#__PURE__*/_jsx(IconButton, {
|
117
117
|
style: {
|
118
|
-
borderRadius:
|
118
|
+
borderRadius: "50px",
|
119
119
|
background: activeColor
|
120
120
|
}
|
121
121
|
})
|
@@ -140,6 +140,7 @@ const UserInputs = props => {
|
|
140
140
|
item: true,
|
141
141
|
children: /*#__PURE__*/_jsxs(Grid, {
|
142
142
|
container: true,
|
143
|
+
alignItems: "center",
|
143
144
|
children: [/*#__PURE__*/_jsx(Grid, {
|
144
145
|
item: true,
|
145
146
|
children: /*#__PURE__*/_jsx(Tooltip, {
|
@@ -166,12 +167,12 @@ const UserInputs = props => {
|
|
166
167
|
anchorEl: anchorEl,
|
167
168
|
onClose: handleClose,
|
168
169
|
anchorOrigin: {
|
169
|
-
vertical:
|
170
|
-
horizontal:
|
170
|
+
vertical: "bottom",
|
171
|
+
horizontal: "right"
|
171
172
|
},
|
172
173
|
transformOrigin: {
|
173
|
-
vertical:
|
174
|
-
horizontal:
|
174
|
+
vertical: "top",
|
175
|
+
horizontal: "right"
|
175
176
|
},
|
176
177
|
children: variables?.map((m, i) => /*#__PURE__*/_jsx(MenuItem, {
|
177
178
|
sx: {
|
@@ -188,18 +189,12 @@ const UserInputs = props => {
|
|
188
189
|
}), /*#__PURE__*/_jsx(Grid, {
|
189
190
|
item: true,
|
190
191
|
xs: 12,
|
192
|
+
sx: classes.bodyTextArea,
|
191
193
|
children: type === 2 && /*#__PURE__*/_jsx(TextareaAutosize, {
|
192
194
|
margin: "none",
|
193
195
|
minRows: 6,
|
194
196
|
value: subject,
|
195
|
-
onChange: handleField
|
196
|
-
className: classes.bodyTextArea,
|
197
|
-
style: {
|
198
|
-
border: 'none',
|
199
|
-
width: "96%",
|
200
|
-
padding: '10px',
|
201
|
-
outline: "none"
|
202
|
-
}
|
197
|
+
onChange: handleField
|
203
198
|
})
|
204
199
|
})]
|
205
200
|
});
|
@@ -1,11 +1,11 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
2
|
import { Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton } from "@mui/material";
|
3
|
-
import ArrowBackIcon from
|
3
|
+
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
|
4
4
|
import FormStyles from "./Styles";
|
5
5
|
import FormWorkflow from "./FormWorkflow";
|
6
6
|
|
7
7
|
//Constants
|
8
|
-
import { minutes, hours, days } from
|
8
|
+
import { minutes, hours, days } from "./constant";
|
9
9
|
import ListWorkflow from "./ListWorkflow";
|
10
10
|
import { PlusIcon } from "../../../common/iconslist";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
@@ -23,12 +23,12 @@ const Workflow = props => {
|
|
23
23
|
const classes = FormStyles();
|
24
24
|
const [workflowList, setWorkflowList] = useState([]);
|
25
25
|
const [formData, setFormData] = useState(false);
|
26
|
-
const [schedule, setSchedule] = useState(
|
27
|
-
const [scheduleEvery, setScheduleEvery] = useState(
|
28
|
-
const currentInstant = scheduleEvery ===
|
26
|
+
const [schedule, setSchedule] = useState("immediately");
|
27
|
+
const [scheduleEvery, setScheduleEvery] = useState("min");
|
28
|
+
const currentInstant = scheduleEvery === "min" ? minutes : scheduleEvery === "hr" ? hours : scheduleEvery === "day" ? days : [];
|
29
29
|
const [scheduleOn, setScheduleOn] = useState(currentInstant[0]);
|
30
|
-
const [subject, setSubject] = useState(
|
31
|
-
const [bodyData, setBodyData] = useState(
|
30
|
+
const [subject, setSubject] = useState("Welcome to Flozy!");
|
31
|
+
const [bodyData, setBodyData] = useState("Hey %field_name% \n\nThanks for attending the event called %Event Name% at %Event Time% on %Event Time%.");
|
32
32
|
const [flowEdited, setFlowEdited] = useState({
|
33
33
|
isEdited: false,
|
34
34
|
listIndex: null
|
@@ -44,16 +44,16 @@ const Workflow = props => {
|
|
44
44
|
};
|
45
45
|
const onFormBack = () => {
|
46
46
|
setFormData(false);
|
47
|
-
setBodyData(
|
48
|
-
setSubject(
|
49
|
-
setSchedule(
|
47
|
+
setBodyData("");
|
48
|
+
setSubject("");
|
49
|
+
setSchedule("immediately");
|
50
50
|
};
|
51
51
|
const saveFormWorkflow = () => {
|
52
52
|
let workflowData = [...workflowList];
|
53
53
|
let data = {
|
54
54
|
schedule_type: schedule,
|
55
|
-
schedule_every: schedule ===
|
56
|
-
schedule_on: schedule ===
|
55
|
+
schedule_every: schedule === "after" ? scheduleEvery : 0,
|
56
|
+
schedule_on: schedule === "after" ? scheduleOn : 0,
|
57
57
|
subject_data: subject,
|
58
58
|
body_data: bodyData
|
59
59
|
};
|
@@ -67,9 +67,9 @@ const Workflow = props => {
|
|
67
67
|
};
|
68
68
|
onSave(saveData);
|
69
69
|
setFormData(false);
|
70
|
-
setBodyData(
|
71
|
-
setSubject(
|
72
|
-
setSchedule(
|
70
|
+
setBodyData("");
|
71
|
+
setSubject("");
|
72
|
+
setSchedule("immediately");
|
73
73
|
setFlowEdited({
|
74
74
|
isEdited: false,
|
75
75
|
listIndex: null
|
@@ -117,25 +117,25 @@ const Workflow = props => {
|
|
117
117
|
children: [/*#__PURE__*/_jsxs(DialogTitle, {
|
118
118
|
sx: classes.popupTitle,
|
119
119
|
style: {
|
120
|
-
padding: formData ?
|
120
|
+
padding: formData ? "16px 12px" : "16px 24px",
|
121
121
|
justifyContent: !formData ? "space-between" : ""
|
122
122
|
},
|
123
123
|
children: [formData && /*#__PURE__*/_jsx(IconButton, {
|
124
124
|
onClick: onFormBack,
|
125
125
|
children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
|
126
|
-
}), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/
|
126
|
+
}), "Follow-Up Email", !formData && workflowList?.length > 0 && /*#__PURE__*/_jsxs(Button, {
|
127
127
|
variant: "outlined",
|
128
128
|
sx: {
|
129
|
-
textTransform:
|
130
|
-
background:
|
129
|
+
textTransform: "none",
|
130
|
+
background: "#EBF1F9",
|
131
|
+
padding: "7px 15px"
|
131
132
|
},
|
132
133
|
onClick: handleAddFormWorkflow,
|
133
134
|
size: "small",
|
134
135
|
startIcon: /*#__PURE__*/_jsx(PlusIcon, {}),
|
135
|
-
children: " New Email"
|
136
|
+
children: [" ", "New Email"]
|
136
137
|
})]
|
137
138
|
}), /*#__PURE__*/_jsxs(DialogContent, {
|
138
|
-
dividers: true,
|
139
139
|
children: [!formData && workflowList?.length > 0 && /*#__PURE__*/_jsx(ListWorkflow, {
|
140
140
|
workflow: workflowList,
|
141
141
|
handleEditFormWorkflow: handleEditFormWorkflow,
|
@@ -160,15 +160,14 @@ const Workflow = props => {
|
|
160
160
|
}), /*#__PURE__*/_jsxs(DialogActions, {
|
161
161
|
sx: classes.dialogFooter,
|
162
162
|
children: [/*#__PURE__*/_jsx(Button, {
|
163
|
-
|
163
|
+
className: "secondaryBtn",
|
164
164
|
sx: classes.closeBtn,
|
165
|
-
variant: "outlined",
|
166
165
|
onClick: closeWorkflow,
|
167
166
|
size: "small",
|
168
167
|
children: "Close"
|
169
168
|
}), (formData || workflowList?.length === 0) && /*#__PURE__*/_jsx(Button, {
|
169
|
+
className: "primaryBtn",
|
170
170
|
sx: classes.saveBtn,
|
171
|
-
variant: "contained",
|
172
171
|
onClick: saveFormWorkflow,
|
173
172
|
size: "small",
|
174
173
|
children: "Save"
|
@@ -46,6 +46,7 @@ const Grid = props => {
|
|
46
46
|
sectionBgColor,
|
47
47
|
sectionBackgroundImage,
|
48
48
|
sectionBannerSpacing,
|
49
|
+
sectionBorderRadius,
|
49
50
|
gridSize
|
50
51
|
} = element;
|
51
52
|
const {
|
@@ -71,6 +72,12 @@ const Grid = props => {
|
|
71
72
|
bottomLeft,
|
72
73
|
bottomRight
|
73
74
|
} = borderRadius || {};
|
75
|
+
const {
|
76
|
+
topLeft: ssTopLeft,
|
77
|
+
topRight: ssTopRight,
|
78
|
+
bottomLeft: ssBottomLeft,
|
79
|
+
bottomRight: ssBottomRight
|
80
|
+
} = sectionBorderRadius || {};
|
74
81
|
const editor = useSlateStatic();
|
75
82
|
const path = ReactEditor.findPath(editor, element);
|
76
83
|
const {
|
@@ -289,7 +296,8 @@ const Grid = props => {
|
|
289
296
|
paddingLeft: `${ssleft}px`,
|
290
297
|
paddingRight: `${ssright}px`,
|
291
298
|
paddingTop: `${sstop}px`,
|
292
|
-
paddingBottom: `${ssbottom}px
|
299
|
+
paddingBottom: `${ssbottom}px`,
|
300
|
+
borderRadius: `${ssTopLeft}px ${ssTopRight}px ${ssBottomLeft}px ${ssBottomRight}px`
|
293
301
|
},
|
294
302
|
"data-path": path.join(","),
|
295
303
|
children: /*#__PURE__*/_jsxs(GridContainer, {
|
@@ -150,6 +150,9 @@ const GridItem = props => {
|
|
150
150
|
children: [!readOnly && /*#__PURE__*/_jsxs("div", {
|
151
151
|
className: `element-selector ${selected ? "selected" : ""}`,
|
152
152
|
contentEditable: false,
|
153
|
+
style: {
|
154
|
+
zIndex: 1000
|
155
|
+
},
|
153
156
|
children: [/*#__PURE__*/_jsx("div", {
|
154
157
|
className: "element-selector-dots tl",
|
155
158
|
children: " "
|
@@ -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:
|
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
|
});
|
@@ -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;
|