@flozy/editor 4.2.9 → 4.3.1
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Editor/CommonEditor.js +4 -2
- package/dist/Editor/Elements/AI/PopoverAIInput.js +10 -4
- package/dist/Editor/Elements/AI/Styles.js +4 -2
- package/dist/Editor/Elements/AI/VoiceToText/index.js +7 -1
- package/dist/Editor/Elements/AI/VoiceToText/style.js +12 -4
- package/dist/Editor/Elements/Embed/Image.js +12 -10
- package/dist/Editor/Elements/FreeGrid/FreeGrid.js +4 -1
- package/dist/Editor/Elements/FreeGrid/FreeGridItem.js +3 -3
- package/dist/Editor/Elements/FreeGrid/styles.js +9 -4
- package/dist/Editor/Elements/Variables/VariableButton.js +7 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +29 -26
- package/dist/Editor/assets/svg/AIIcons.js +4 -0
- package/dist/Editor/common/RnD/DragInfo/index.js +3 -6
- package/dist/Editor/common/RnD/DragOver/index.js +2 -1
- package/dist/Editor/common/RnD/Utils/gridDropItem.js +13 -4
- package/dist/Editor/common/RnD/Utils/index.js +1 -1
- package/dist/Editor/common/RnD/index.js +58 -73
- package/dist/Editor/hooks/useEditorScroll.js +24 -0
- package/dist/Editor/hooks/useMouseMove.js +36 -22
- package/package.json +1 -1
@@ -544,7 +544,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
544
544
|
customProps: customProps,
|
545
545
|
theme: theme
|
546
546
|
}) : null, /*#__PURE__*/_jsx(PopoverAIInput, {
|
547
|
-
otherProps: otherProps || {}
|
547
|
+
otherProps: otherProps || {},
|
548
|
+
editorWrapper: editorWrapper
|
548
549
|
}), footer && (fullScreen || readOnly) && /*#__PURE__*/_jsx(Typography, {
|
549
550
|
sx: {
|
550
551
|
color: "rgb(100, 116, 139)",
|
@@ -562,7 +563,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
562
563
|
onDrawerOpen: onDrawerOpen,
|
563
564
|
theme: theme,
|
564
565
|
setIsTextSelected: setIsTextSelected,
|
565
|
-
customProps: customProps
|
566
|
+
customProps: customProps,
|
567
|
+
editorWrapper: editorWrapper
|
566
568
|
}) : null, !readOnly && showViewport ? /*#__PURE__*/_jsx(SwitchViewport, {
|
567
569
|
breakpoint: breakpoint,
|
568
570
|
onChange: b => onSwitchBreakpoint(b)
|
@@ -9,6 +9,7 @@ import { MODES } from "./helper";
|
|
9
9
|
import { getSelectedText } from "../../utils/helper";
|
10
10
|
import { VoiceToText } from "./VoiceToText";
|
11
11
|
import deserialize from "../../helper/deserialize";
|
12
|
+
import useEditorScroll from "../../hooks/useEditorScroll";
|
12
13
|
import { jsx as _jsx } from "react/jsx-runtime";
|
13
14
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
14
15
|
const getInputWidth = selectedElement => {
|
@@ -154,7 +155,10 @@ const updateAnchorEl = (setAnchorEl, editor, openAI, selectedElement) => {
|
|
154
155
|
}
|
155
156
|
};
|
156
157
|
function PopoverAIInput({
|
157
|
-
otherProps
|
158
|
+
otherProps,
|
159
|
+
editorWrapper = {
|
160
|
+
current: null
|
161
|
+
}
|
158
162
|
}) {
|
159
163
|
const {
|
160
164
|
services
|
@@ -171,6 +175,10 @@ function PopoverAIInput({
|
|
171
175
|
const [selectedOption, setSelectedOption] = useState();
|
172
176
|
const classes = Styles();
|
173
177
|
const editor = useSlate();
|
178
|
+
const updateAnchor = () => {
|
179
|
+
updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
|
180
|
+
};
|
181
|
+
useEditorScroll(editorWrapper, updateAnchor);
|
174
182
|
const onClickOutside = () => {
|
175
183
|
setAnchorEl(null);
|
176
184
|
setOpenAI("");
|
@@ -181,9 +189,7 @@ function PopoverAIInput({
|
|
181
189
|
ReactEditor.focus(editor);
|
182
190
|
Transforms.deselect(editor);
|
183
191
|
};
|
184
|
-
useEffect(
|
185
|
-
updateAnchorEl(setAnchorEl, editor, openAI, selectedElement);
|
186
|
-
}, [openAI, editor.selection]);
|
192
|
+
useEffect(updateAnchor, [openAI, editor.selection]);
|
187
193
|
useEffect(() => {
|
188
194
|
if (openAI) {
|
189
195
|
scrollToAIInput(editor);
|
@@ -1,6 +1,7 @@
|
|
1
1
|
const Styles = theme => ({
|
2
2
|
aiContainer: {
|
3
3
|
background: "#FCFAFF",
|
4
|
+
background: theme?.palette?.editor?.aiInputBackground,
|
4
5
|
border: "1px solid #8360FD",
|
5
6
|
borderRadius: "6px",
|
6
7
|
boxShadow: "0px 4px 10px 0px #00000029"
|
@@ -12,7 +13,7 @@ const Styles = theme => ({
|
|
12
13
|
padding: "0px 4px 0px 12px",
|
13
14
|
minHeight: "36px",
|
14
15
|
position: "relative",
|
15
|
-
background:
|
16
|
+
background: theme?.palette?.editor?.aiInputBackground,
|
16
17
|
borderRadius: "5px",
|
17
18
|
"& .icon-container": {
|
18
19
|
display: "flex",
|
@@ -29,7 +30,7 @@ const Styles = theme => ({
|
|
29
30
|
background: "transparent",
|
30
31
|
resize: "none",
|
31
32
|
alignSelf: "center",
|
32
|
-
color:
|
33
|
+
color: theme?.palette?.editor?.textColor,
|
33
34
|
fontSize: "14px !important",
|
34
35
|
fontFamily: '"Inter", sans-serif',
|
35
36
|
"&:focus-visible": {
|
@@ -81,6 +82,7 @@ const Styles = theme => ({
|
|
81
82
|
},
|
82
83
|
sendBtnDisabled: {
|
83
84
|
background: "#C0C9D6",
|
85
|
+
opacity: "0.5",
|
84
86
|
"&:hover": {
|
85
87
|
background: "#C0C9D6"
|
86
88
|
}
|
@@ -4,6 +4,7 @@ import STTStyles from "./style";
|
|
4
4
|
import { Grid, IconButton, Box } from "@mui/material";
|
5
5
|
import { AudioWave } from "./AudioWave";
|
6
6
|
import { CloseGreyCircle, PauseRecordingIcon, TickBlueCircle } from "../../../assets/svg/AIIcons";
|
7
|
+
import { useEditorContext } from "../../../hooks/useMouseMove";
|
7
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
8
9
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
9
10
|
function STT(props) {
|
@@ -15,7 +16,10 @@ function STT(props) {
|
|
15
16
|
const {
|
16
17
|
services
|
17
18
|
} = otherProps;
|
18
|
-
const
|
19
|
+
const {
|
20
|
+
theme
|
21
|
+
} = useEditorContext();
|
22
|
+
const classes = STTStyles(theme);
|
19
23
|
const [mediaRecorder, setMediaRecorder] = useState(null);
|
20
24
|
const [audioChunks, setAudioChunks] = useState([]);
|
21
25
|
const [chunkIndex, setChunkIndex] = useState(0);
|
@@ -127,6 +131,7 @@ function STT(props) {
|
|
127
131
|
children: [/*#__PURE__*/_jsx(Box, {
|
128
132
|
children: /*#__PURE__*/_jsx(IconButton, {
|
129
133
|
onClick: closeRecording,
|
134
|
+
className: "ai-icon",
|
130
135
|
children: /*#__PURE__*/_jsx(CloseGreyCircle, {})
|
131
136
|
})
|
132
137
|
}), /*#__PURE__*/_jsx(Box, {
|
@@ -137,6 +142,7 @@ function STT(props) {
|
|
137
142
|
}), /*#__PURE__*/_jsx(Box, {
|
138
143
|
children: showPause ? /*#__PURE__*/_jsx(IconButton, {
|
139
144
|
onClick: stopRecording,
|
145
|
+
className: "ai-icon",
|
140
146
|
children: /*#__PURE__*/_jsx(PauseRecordingIcon, {})
|
141
147
|
}) : /*#__PURE__*/_jsx(IconButton, {
|
142
148
|
onClick: sendToInfiniti,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
const styles =
|
1
|
+
const styles = theme => ({
|
2
2
|
SttContainer: {
|
3
3
|
display: "flex",
|
4
4
|
width: "100%",
|
@@ -12,17 +12,25 @@ const styles = () => ({
|
|
12
12
|
borderColor: "#2563EB"
|
13
13
|
},
|
14
14
|
"&& .MuiOutlinedInput-root": {
|
15
|
-
background:
|
15
|
+
background: theme?.palette?.editor?.aiInputBackground
|
16
16
|
}
|
17
17
|
},
|
18
18
|
AudioVizualizerContainer: {
|
19
19
|
width: "100%",
|
20
20
|
display: "flex",
|
21
|
-
background:
|
21
|
+
background: theme?.palette?.editor?.aiInputBackground,
|
22
22
|
borderRadius: "8px",
|
23
23
|
border: "1px solid #2563EB",
|
24
24
|
alignItems: "center",
|
25
|
-
flexWrap: "wrap"
|
25
|
+
flexWrap: "wrap",
|
26
|
+
"& .ai-icon": {
|
27
|
+
"& circle": {
|
28
|
+
fill: theme?.palette?.editor?.aiInputBackground
|
29
|
+
},
|
30
|
+
"& rect": {
|
31
|
+
fill: theme?.palette?.editor?.aiInputBackground
|
32
|
+
}
|
33
|
+
}
|
26
34
|
},
|
27
35
|
AudioVizualizerContent: {
|
28
36
|
display: "flex",
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useState, memo } from "react";
|
2
2
|
import { useSlateStatic, ReactEditor } from "slate-react";
|
3
3
|
import { Node, Transforms, Editor } from "slate";
|
4
4
|
import AspectRatioIcon from "@mui/icons-material/AspectRatio";
|
@@ -62,9 +62,9 @@ const ImageContent = props => {
|
|
62
62
|
setOpenSettings,
|
63
63
|
handleImageClick,
|
64
64
|
onTouchEnd,
|
65
|
-
path
|
65
|
+
path,
|
66
|
+
theme
|
66
67
|
} = props;
|
67
|
-
const theme = useTheme();
|
68
68
|
return !url && !readOnly ? /*#__PURE__*/_jsxs(Box, {
|
69
69
|
component: "button",
|
70
70
|
className: "element-empty-btn",
|
@@ -97,12 +97,13 @@ const ImageContent = props => {
|
|
97
97
|
draggable: false
|
98
98
|
});
|
99
99
|
};
|
100
|
-
const Image =
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
100
|
+
const Image = props => {
|
101
|
+
const {
|
102
|
+
attributes,
|
103
|
+
element,
|
104
|
+
children,
|
105
|
+
customProps
|
106
|
+
} = props;
|
106
107
|
const theme = useTheme();
|
107
108
|
const {
|
108
109
|
url,
|
@@ -281,7 +282,8 @@ const Image = ({
|
|
281
282
|
setOpenSettings: setOpenSettings,
|
282
283
|
handleImageClick: handleImageClick,
|
283
284
|
onTouchEnd: onTouchEnd,
|
284
|
-
path: path
|
285
|
+
path: path,
|
286
|
+
theme: theme
|
285
287
|
}), url && frames[frame] ? /*#__PURE__*/_jsx(Box, {
|
286
288
|
component: "div",
|
287
289
|
className: "image-frame",
|
@@ -388,7 +388,10 @@ const FreeGrid = props => {
|
|
388
388
|
}, theme);
|
389
389
|
return /*#__PURE__*/_jsx(RnD, {
|
390
390
|
id: `freegrid_container_${path.join("|")}_${updated_at}_${breakpoint}`,
|
391
|
-
className: `
|
391
|
+
className: `
|
392
|
+
freegrid-section breakpoint-${breakpoint}
|
393
|
+
freegrid-section_${path.join("_")}
|
394
|
+
`,
|
392
395
|
editor: editor,
|
393
396
|
path: path,
|
394
397
|
disableDragging: true,
|
@@ -253,20 +253,20 @@ const FreeGridItem = props => {
|
|
253
253
|
component: "div",
|
254
254
|
...attributes,
|
255
255
|
className: `fgi_type_${childType}`,
|
256
|
-
children: [children, /*#__PURE__*/_jsx(Workflow, {
|
256
|
+
children: [children, popup === "workflow" ? /*#__PURE__*/_jsx(Workflow, {
|
257
257
|
openWorkflow: popup === "workflow",
|
258
258
|
element: element,
|
259
259
|
customWorkflowElement: element?.children?.[0] || null,
|
260
260
|
closeWorkflow: onClose,
|
261
261
|
onSave: onWorkflowSave
|
262
|
-
}), /*#__PURE__*/_jsx(EmbedScriptPopup, {
|
262
|
+
}) : null, popup === "embedScript" ? /*#__PURE__*/_jsx(EmbedScriptPopup, {
|
263
263
|
open: popup === "embedScript",
|
264
264
|
customProps: customProps,
|
265
265
|
editor: editor,
|
266
266
|
onClose: onClose,
|
267
267
|
updatePath: [...path, 0],
|
268
268
|
parentPath: [...path]
|
269
|
-
})]
|
269
|
+
}) : null]
|
270
270
|
})
|
271
271
|
});
|
272
272
|
};
|
@@ -11,15 +11,20 @@ const useFreeGridStyles = ({
|
|
11
11
|
padding: "0px",
|
12
12
|
height: "100%",
|
13
13
|
position: "static",
|
14
|
-
|
14
|
+
// for drag item visibility beyond section
|
15
|
+
// overflow: "hidden",
|
15
16
|
"& .freegrid-item, & .freegrid-box-item": {
|
16
17
|
gridArea: "var(--gridArea)",
|
17
18
|
left: "var(--left)",
|
18
19
|
marginTop: "var(--marginTop)",
|
19
20
|
marginLeft: `calc((100% - ${MAX_DEVICE_WIDTH}px) * 0.5)`,
|
20
|
-
|
21
|
-
|
22
|
-
|
21
|
+
"&.active-drag": {
|
22
|
+
pointerEvents: "none",
|
23
|
+
zIndex: "9999 !important"
|
24
|
+
},
|
25
|
+
"&.inactive-drag": {
|
26
|
+
zIndex: "var(--zIndex) !important"
|
27
|
+
},
|
23
28
|
"& .editor-blocker": {
|
24
29
|
position: "absolute",
|
25
30
|
left: 0,
|
@@ -26,7 +26,13 @@ const VariableButton = props => {
|
|
26
26
|
onChange: updateVariable,
|
27
27
|
IconComponent: () => /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {}),
|
28
28
|
MenuProps: {
|
29
|
-
sx: classes.variableMenuItem
|
29
|
+
sx: classes.variableMenuItem,
|
30
|
+
PaperProps: {
|
31
|
+
style: {
|
32
|
+
maxHeight: 300,
|
33
|
+
overflowY: "auto"
|
34
|
+
}
|
35
|
+
}
|
30
36
|
},
|
31
37
|
children: [/*#__PURE__*/_jsx(MenuItem, {
|
32
38
|
value: "",
|
@@ -8,12 +8,14 @@ import useWindowResize from "../../hooks/useWindowResize";
|
|
8
8
|
import MiniTextFormat from "./MiniTextFormat";
|
9
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
10
|
import usePopupStyles from "../PopupTool/PopupToolStyle";
|
11
|
+
import useEditorScroll from "../../hooks/useEditorScroll";
|
11
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
13
|
const PopupTool = props => {
|
13
14
|
const {
|
14
15
|
theme,
|
15
16
|
setIsTextSelected,
|
16
|
-
customProps
|
17
|
+
customProps,
|
18
|
+
editorWrapper
|
17
19
|
} = props;
|
18
20
|
const classes = usePopupStyles(theme);
|
19
21
|
const {
|
@@ -33,6 +35,27 @@ const PopupTool = props => {
|
|
33
35
|
const {
|
34
36
|
selectedElement
|
35
37
|
} = useEditorContext();
|
38
|
+
const updateAnchorEl = () => {
|
39
|
+
try {
|
40
|
+
const domSelection = window.getSelection();
|
41
|
+
const domRange = domSelection?.getRangeAt(0);
|
42
|
+
const {
|
43
|
+
startOffset,
|
44
|
+
endOffset
|
45
|
+
} = domRange || {};
|
46
|
+
if (startOffset !== endOffset) {
|
47
|
+
const rect = domRange.getBoundingClientRect();
|
48
|
+
setAnchorEl({
|
49
|
+
clientWidth: rect.width,
|
50
|
+
clientHeight: rect.height,
|
51
|
+
getBoundingClientRect: () => rect
|
52
|
+
});
|
53
|
+
}
|
54
|
+
} catch (err) {
|
55
|
+
console.log(err);
|
56
|
+
}
|
57
|
+
};
|
58
|
+
useEditorScroll(editorWrapper, updateAnchorEl);
|
36
59
|
useEffect(() => {
|
37
60
|
const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
|
38
61
|
|
@@ -57,36 +80,16 @@ const PopupTool = props => {
|
|
57
80
|
updateAnchorEl();
|
58
81
|
}
|
59
82
|
}, [selection]);
|
60
|
-
useEffect(() => {
|
61
|
-
if (selectedElement?.enable === 1) {
|
62
|
-
setAnchorEl(null);
|
63
|
-
}
|
64
|
-
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
65
|
-
const updateAnchorEl = () => {
|
66
|
-
try {
|
67
|
-
const domSelection = window.getSelection();
|
68
|
-
const domRange = domSelection?.getRangeAt(0);
|
69
|
-
const {
|
70
|
-
startOffset,
|
71
|
-
endOffset
|
72
|
-
} = domRange || {};
|
73
|
-
if (startOffset !== endOffset) {
|
74
|
-
const rect = domRange.getBoundingClientRect();
|
75
|
-
setAnchorEl({
|
76
|
-
clientWidth: rect.width,
|
77
|
-
clientHeight: rect.height,
|
78
|
-
getBoundingClientRect: () => rect
|
79
|
-
});
|
80
|
-
}
|
81
|
-
} catch (err) {
|
82
|
-
console.log(err);
|
83
|
-
}
|
84
|
-
};
|
85
83
|
const handleClose = () => {
|
86
84
|
setAnchorEl(null);
|
87
85
|
setOpen(false);
|
88
86
|
setPopupType("");
|
89
87
|
};
|
88
|
+
useEffect(() => {
|
89
|
+
if (selectedElement?.enable === 1) {
|
90
|
+
setAnchorEl(null);
|
91
|
+
}
|
92
|
+
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
90
93
|
return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
91
94
|
onClickAway: e => {
|
92
95
|
// close the mini toolbar, if user clicks outside the editor (in Flozy app.)
|
@@ -503,6 +503,10 @@ export const CloseGreyCircle = () => /*#__PURE__*/_jsxs("svg", {
|
|
503
503
|
viewBox: "0 0 30 30",
|
504
504
|
fill: "none",
|
505
505
|
xmlns: "http://www.w3.org/2000/svg",
|
506
|
+
style: {
|
507
|
+
border: "1.3px solid #2563EB",
|
508
|
+
borderRadius: "50%"
|
509
|
+
},
|
506
510
|
children: [/*#__PURE__*/_jsx("rect", {
|
507
511
|
width: "30",
|
508
512
|
height: "30",
|
@@ -9,14 +9,11 @@ const DragInfo = props => {
|
|
9
9
|
dragging,
|
10
10
|
anchorEl
|
11
11
|
} = props;
|
12
|
-
const {
|
13
|
-
position
|
14
|
-
} = dragging;
|
15
12
|
const {
|
16
13
|
diffX
|
17
|
-
} =
|
14
|
+
} = dragging || {};
|
18
15
|
const classes = useDragInfoStyle();
|
19
|
-
const x = parseInt(
|
16
|
+
const x = parseInt(dragging?.x - window.innerWidth / 2 + 490 - diffX);
|
20
17
|
return open ? /*#__PURE__*/_jsx(Popper, {
|
21
18
|
open: open,
|
22
19
|
anchorEl: anchorEl,
|
@@ -24,7 +21,7 @@ const DragInfo = props => {
|
|
24
21
|
sx: classes.root,
|
25
22
|
children: /*#__PURE__*/_jsxs(Paper, {
|
26
23
|
className: "papper-root",
|
27
|
-
children: ["x: ", x, ", y: ",
|
24
|
+
children: ["x: ", x, ", y: ", dragging?.y]
|
28
25
|
})
|
29
26
|
}) : null;
|
30
27
|
};
|
@@ -16,7 +16,8 @@ const DragOver = props => {
|
|
16
16
|
const [anchorEl, setAnchorEl] = useState(null);
|
17
17
|
const open = Boolean(anchorEl);
|
18
18
|
const isSectionHover = status && type === "parent";
|
19
|
-
const isContainerHover = hover_on
|
19
|
+
const isContainerHover = hover_on === path && type === "parent-container";
|
20
|
+
console.log(isSectionHover, isContainerHover);
|
20
21
|
useEffect(() => {
|
21
22
|
if (ref?.current) {
|
22
23
|
const getBoundingClientRect = () => ref?.current?.getBoundingClientRect();
|
@@ -77,7 +77,12 @@ const reRenderChildNodes = (editor, path) => {
|
|
77
77
|
};
|
78
78
|
function isContainerElement(editor, moveTopath, props) {
|
79
79
|
try {
|
80
|
-
const
|
80
|
+
const {
|
81
|
+
path,
|
82
|
+
parentPath,
|
83
|
+
dragOver
|
84
|
+
} = props;
|
85
|
+
const dragItemPath = path;
|
81
86
|
const dragItem = Node.get(editor, dragItemPath);
|
82
87
|
let parentNode = null;
|
83
88
|
// if freegrid item
|
@@ -86,16 +91,20 @@ function isContainerElement(editor, moveTopath, props) {
|
|
86
91
|
parentNode = Node.get(editor, Path.parent(dragItemPath));
|
87
92
|
}
|
88
93
|
const moveToNode = Node.get(editor, moveTopath);
|
89
|
-
console.log(parentNode, moveToNode);
|
90
94
|
if (moveToNode.type === "freegridBox") {
|
91
95
|
if (parentNode.type === "freegridBox") {
|
92
|
-
|
96
|
+
// same box
|
97
|
+
if (parentPath === dragOver) {
|
98
|
+
return props.calX;
|
99
|
+
} else {
|
100
|
+
// for different box
|
101
|
+
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX - moveToNode.left);
|
102
|
+
}
|
93
103
|
} else {
|
94
104
|
return props.calX - moveToNode?.left;
|
95
105
|
}
|
96
106
|
} else if (moveToNode.type === "freegrid") {
|
97
107
|
if (parentNode.type === "freegridBox") {
|
98
|
-
console.log(props.x);
|
99
108
|
return parseInt(props.x - window.innerWidth / 2 + MARGIN_OF[props.breakpoint] - props.diffX);
|
100
109
|
} else {
|
101
110
|
return props.calX;
|
@@ -2,7 +2,7 @@ import { Transforms, Node } from "slate";
|
|
2
2
|
import { ReactEditor } from "slate-react";
|
3
3
|
import { getNearestItem } from "./calculateDropItem";
|
4
4
|
const GUIDE_LINE_THRESHOLD = 5;
|
5
|
-
const GUIDE_LINE_OVERLAP_THRESHOLD =
|
5
|
+
const GUIDE_LINE_OVERLAP_THRESHOLD = 5;
|
6
6
|
const handleMoveNode = (editor, path, newPath, {
|
7
7
|
isEmpty
|
8
8
|
}) => {
|
@@ -7,7 +7,7 @@ import Handles from "./TransformHandles";
|
|
7
7
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
8
8
|
import ElementOptions from "./ElementOptions";
|
9
9
|
import ElementSettings from "./ElementSettings";
|
10
|
-
import { getClosestDraggable, getParentSectionPath
|
10
|
+
import { getClosestDraggable, getParentSectionPath } from "./Utils";
|
11
11
|
import DragInfo from "./DragInfo";
|
12
12
|
import GuideLines from "./GuideLines";
|
13
13
|
import ShadowElement from "./ShadowElement";
|
@@ -23,7 +23,6 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
23
23
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
24
24
|
const ITEM_TYPES = ["child", "parent-container"];
|
25
25
|
const EDIT_MODES = ["text", "form", "table"];
|
26
|
-
let hover_on = new Set();
|
27
26
|
const RnD = props => {
|
28
27
|
const rndRef = useRef(null);
|
29
28
|
const {
|
@@ -60,7 +59,7 @@ const RnD = props => {
|
|
60
59
|
isSelectedElement,
|
61
60
|
setSelectedElement,
|
62
61
|
dragging,
|
63
|
-
|
62
|
+
updateDragging,
|
64
63
|
contextMenu,
|
65
64
|
setContextMenu,
|
66
65
|
theme
|
@@ -80,15 +79,19 @@ const RnD = props => {
|
|
80
79
|
const {
|
81
80
|
active,
|
82
81
|
id,
|
83
|
-
|
84
|
-
|
85
|
-
dragOver,
|
86
|
-
parentPath
|
82
|
+
parentPath,
|
83
|
+
dragOver
|
87
84
|
} = dragging;
|
88
85
|
const dragInfoOpen = id === str_path;
|
89
86
|
const dragOverStatus = dragOver === str_path && parentPath !== str_path;
|
90
87
|
const [absPosition, setAbsPosition] = useState({});
|
91
88
|
const openContextMenu = contextMenu?.path === str_path;
|
89
|
+
const [position, setPosition] = useState({
|
90
|
+
x: 0,
|
91
|
+
y: 0
|
92
|
+
});
|
93
|
+
const pathIsDragging = dragOver === str_path && dragging?.isDragging;
|
94
|
+
const parentSectionPath = str_path?.split("|").slice(0, 2).join("_");
|
92
95
|
useEffect(() => {
|
93
96
|
if (ITEM_TYPES.includes(type)) {
|
94
97
|
if (enable === 1) {
|
@@ -99,25 +102,6 @@ const RnD = props => {
|
|
99
102
|
}
|
100
103
|
}
|
101
104
|
}, [enable]);
|
102
|
-
useEffect(() => {
|
103
|
-
if (position?.x !== undefined && position?.y !== undefined && active && (type === "parent" || type === "parent-container")) {
|
104
|
-
const dragOverSt = isDragOver(rndRef?.current?.getBoundingClientRect(), {
|
105
|
-
x: position.x,
|
106
|
-
y: position.y
|
107
|
-
});
|
108
|
-
if (dragOverSt) {
|
109
|
-
if (!dragInfoOpen) {
|
110
|
-
hover_on.add(str_path);
|
111
|
-
}
|
112
|
-
setDragging({
|
113
|
-
...dragging,
|
114
|
-
dragOver: str_path
|
115
|
-
});
|
116
|
-
} else {
|
117
|
-
hover_on.delete(str_path);
|
118
|
-
}
|
119
|
-
}
|
120
|
-
}, [active, position?.x, position?.y]);
|
121
105
|
const getCurrentEle = () => {
|
122
106
|
return positionRef.current?.resizableElement?.current;
|
123
107
|
};
|
@@ -280,11 +264,12 @@ const RnD = props => {
|
|
280
264
|
updatePosition();
|
281
265
|
if (updated_at) {
|
282
266
|
// disable dragging
|
283
|
-
|
267
|
+
updateDragging({
|
284
268
|
active: false,
|
285
269
|
id: null,
|
286
|
-
isDragging: false
|
287
|
-
|
270
|
+
isDragging: false,
|
271
|
+
dragOver: null
|
272
|
+
}, null);
|
288
273
|
}
|
289
274
|
};
|
290
275
|
const onDragStart = e => {
|
@@ -297,16 +282,19 @@ const RnD = props => {
|
|
297
282
|
height
|
298
283
|
} = e?.target?.getBoundingClientRect();
|
299
284
|
const ref = positionRef.current?.resizableElement?.current;
|
300
|
-
|
285
|
+
const updatedPosition = {
|
286
|
+
x: e.clientX,
|
287
|
+
y: e.clientY,
|
288
|
+
strXY: `${e.clientX},${e.clientY}`,
|
289
|
+
diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
|
290
|
+
diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
|
291
|
+
};
|
292
|
+
updateDragging({
|
301
293
|
...dragging,
|
302
294
|
active: true,
|
303
295
|
id: str_path,
|
304
296
|
position: {
|
305
|
-
|
306
|
-
y: e.clientY,
|
307
|
-
strXY: `${e.clientX},${e.clientY}`,
|
308
|
-
diffX: parseInt(Math.abs(Math.floor(left - e.clientX))),
|
309
|
-
diffY: parseInt(Math.abs(Math.floor(top - e.clientY)))
|
297
|
+
...updatedPosition
|
310
298
|
},
|
311
299
|
dimension: {
|
312
300
|
width,
|
@@ -317,18 +305,21 @@ const RnD = props => {
|
|
317
305
|
ref
|
318
306
|
}, ".freegrid-container-parent")
|
319
307
|
});
|
308
|
+
setPosition({
|
309
|
+
...updatedPosition
|
310
|
+
});
|
320
311
|
}
|
321
312
|
};
|
322
313
|
const onDrag = (e, d) => {
|
323
314
|
e.preventDefault();
|
324
|
-
const lines = getClosestDraggable(e.clientX, e.clientY,
|
315
|
+
const lines = getClosestDraggable(e.clientX, e.clientY, `.freegrid-section_${parentSectionPath} .freegrid-container .freegrid-item.inactive-drag`.replace(/\|/g, "\\|"), ".freegrid-item.active-drag:not(.exclude-virtual)");
|
316
|
+
console.log(lines);
|
325
317
|
setAbsPosition({
|
326
318
|
...absPosition,
|
327
319
|
"--zIndex": 2000
|
328
320
|
});
|
329
|
-
|
321
|
+
updateDragging({
|
330
322
|
isDragging: true,
|
331
|
-
...dragging,
|
332
323
|
position: {
|
333
324
|
...dragging.position,
|
334
325
|
x: e.clientX,
|
@@ -336,34 +327,28 @@ const RnD = props => {
|
|
336
327
|
},
|
337
328
|
lines: lines
|
338
329
|
});
|
339
|
-
|
340
|
-
|
341
|
-
|
342
|
-
|
343
|
-
|
344
|
-
hover_on.forEach(str => {
|
345
|
-
if (str.length > maxLength) {
|
346
|
-
maxLength = str.length;
|
347
|
-
maxLengthString = str;
|
348
|
-
}
|
330
|
+
setPosition({
|
331
|
+
...dragging.position,
|
332
|
+
x: e.clientX,
|
333
|
+
y: e.clientY,
|
334
|
+
lines: lines
|
349
335
|
});
|
350
|
-
return maxLengthString;
|
351
336
|
};
|
352
337
|
const onDragStop = (e, d) => {
|
353
338
|
e.preventDefault();
|
354
339
|
e.stopPropagation();
|
355
|
-
if (dragging?.isDragging && position
|
340
|
+
if (dragging?.isDragging && dragging?.position?.strXY) {
|
356
341
|
d.x = e.x;
|
357
342
|
d.y = e.y;
|
358
343
|
d.offsetX = e.offsetX;
|
359
344
|
d.offsetY = e.offsetY;
|
360
|
-
d.dragOver =
|
345
|
+
d.dragOver = dragOver;
|
361
346
|
d.parentPath = parentPath;
|
362
347
|
d.diffX = position?.diffX;
|
363
348
|
d.diffY = position?.diffY;
|
364
349
|
d.calX = itemData?.left + d.lastX;
|
365
350
|
// avoid x, y value replace issue
|
366
|
-
const [x, y] = position
|
351
|
+
const [x, y] = dragging?.position?.strXY.split(",");
|
367
352
|
d.startPosition = {
|
368
353
|
...position,
|
369
354
|
x: parseInt(x),
|
@@ -379,7 +364,9 @@ const RnD = props => {
|
|
379
364
|
...absPosition
|
380
365
|
};
|
381
366
|
delete ud["--zIndex"];
|
382
|
-
|
367
|
+
updateDragging({
|
368
|
+
dragOver: ""
|
369
|
+
}, null);
|
383
370
|
setAbsPosition({
|
384
371
|
...ud
|
385
372
|
});
|
@@ -391,17 +378,6 @@ const RnD = props => {
|
|
391
378
|
width: delta?.width + d.width,
|
392
379
|
height: delta?.height + d.height
|
393
380
|
};
|
394
|
-
// calculate the text height
|
395
|
-
// const nodeList =
|
396
|
-
// positionRef?.current?.resizableElement?.current?.childNodes || [];
|
397
|
-
// const textElement = Array.from(nodeList).filter((node) =>
|
398
|
-
// node.classList.contains("fgi_type_text")
|
399
|
-
// );
|
400
|
-
// if (textElement[0] && type === "child") {
|
401
|
-
// const textRect = textElement[0]?.getBoundingClientRect();
|
402
|
-
// updatedSize.height = textRect.height;
|
403
|
-
// positionRef.current.updateSize({ ...updatedSize });
|
404
|
-
// }
|
405
381
|
onChange({
|
406
382
|
...updatedSize
|
407
383
|
});
|
@@ -439,6 +415,14 @@ const RnD = props => {
|
|
439
415
|
});
|
440
416
|
}
|
441
417
|
};
|
418
|
+
const onMouseOver = e => {
|
419
|
+
e.stopPropagation();
|
420
|
+
if (type !== "child") {
|
421
|
+
updateDragging({
|
422
|
+
dragOver: str_path
|
423
|
+
}, str_path);
|
424
|
+
}
|
425
|
+
};
|
442
426
|
const getEventProps = () => {
|
443
427
|
if (!readOnly) {
|
444
428
|
return {
|
@@ -450,7 +434,8 @@ const RnD = props => {
|
|
450
434
|
onDragStop: onDragStop,
|
451
435
|
onResizeStop: onResizeStop,
|
452
436
|
onClick: onClick,
|
453
|
-
onContextMenu: handleContextMenu
|
437
|
+
onContextMenu: handleContextMenu,
|
438
|
+
onMouseOver: onMouseOver
|
454
439
|
};
|
455
440
|
} else {
|
456
441
|
return {};
|
@@ -473,7 +458,7 @@ const RnD = props => {
|
|
473
458
|
caretColor: enable === 2 ? "auto" : "transparent",
|
474
459
|
userSelect: enable === 2 || readOnly ? "auto" : "none",
|
475
460
|
...style,
|
476
|
-
zIndex: enable === 1 ? 1 : "inherit",
|
461
|
+
// zIndex: enable === 1 ? 1 : "inherit",
|
477
462
|
left: "var(--left)",
|
478
463
|
...absPosition
|
479
464
|
},
|
@@ -507,14 +492,14 @@ const RnD = props => {
|
|
507
492
|
className: "editor-blocker",
|
508
493
|
"data-path": path,
|
509
494
|
contentEditable: false
|
510
|
-
}) : null, /*#__PURE__*/_jsx(DragOver, {
|
495
|
+
}) : null, pathIsDragging ? /*#__PURE__*/_jsx(DragOver, {
|
511
496
|
status: dragOverStatus,
|
512
|
-
hover_on:
|
497
|
+
hover_on: dragOver,
|
513
498
|
path: str_path,
|
514
499
|
parentPath: parentPath,
|
515
500
|
type: type,
|
516
501
|
childType: childType
|
517
|
-
})]
|
502
|
+
}) : null]
|
518
503
|
}, eId), !active && rndRef?.current && open ? /*#__PURE__*/_jsx(ElementOptions, {
|
519
504
|
id: `opt_ref_${str_path}`,
|
520
505
|
open: open,
|
@@ -539,12 +524,12 @@ const RnD = props => {
|
|
539
524
|
...settingsProps,
|
540
525
|
elementProps: elementProps,
|
541
526
|
theme: theme
|
542
|
-
}), /*#__PURE__*/_jsx(DragInfo, {
|
527
|
+
}), dragInfoOpen ? /*#__PURE__*/_jsx(DragInfo, {
|
543
528
|
anchorEl: rndRef?.current,
|
544
529
|
open: dragInfoOpen,
|
545
|
-
dragging:
|
546
|
-
}), /*#__PURE__*/_jsx(GuideLines, {
|
547
|
-
lines: lines
|
530
|
+
dragging: position
|
531
|
+
}) : null, /*#__PURE__*/_jsx(GuideLines, {
|
532
|
+
lines: position?.lines || []
|
548
533
|
}), !readOnly && type === "parent" ? /*#__PURE__*/_jsx(BoundaryLine, {}) : null, /*#__PURE__*/_jsx(ShadowElement, {
|
549
534
|
type: type,
|
550
535
|
enable: enable,
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { useEffect } from "react";
|
2
|
+
function useEditorScroll(editorWrapper = {
|
3
|
+
current: null
|
4
|
+
}, callback) {
|
5
|
+
useEffect(() => {
|
6
|
+
const handleScroll = () => {
|
7
|
+
if (editorWrapper.current) {
|
8
|
+
callback();
|
9
|
+
}
|
10
|
+
};
|
11
|
+
const currentEditorWrapper = editorWrapper.current;
|
12
|
+
if (currentEditorWrapper) {
|
13
|
+
currentEditorWrapper.addEventListener("scroll", handleScroll);
|
14
|
+
}
|
15
|
+
|
16
|
+
// Cleanup the event listener on component unmount
|
17
|
+
return () => {
|
18
|
+
if (currentEditorWrapper) {
|
19
|
+
currentEditorWrapper.removeEventListener("scroll", handleScroll);
|
20
|
+
}
|
21
|
+
};
|
22
|
+
}, [editorWrapper.current]);
|
23
|
+
}
|
24
|
+
export default useEditorScroll;
|
@@ -27,7 +27,7 @@ export const EditorProvider = ({
|
|
27
27
|
const [selectedPath, setSelectedPath] = useState(null);
|
28
28
|
const [selectedElement, setSelectedElement] = useState({});
|
29
29
|
const [dragging, setDragging] = useState({});
|
30
|
-
const [event] = useMouseMove(dragging);
|
30
|
+
const [event] = useMouseMove(window.dragging);
|
31
31
|
const path = event?.target?.getAttribute("data-path");
|
32
32
|
const [popupType, setPopupType] = useState(""); // opened popup name in the editor will be stored
|
33
33
|
const [openAI, setOpenAI] = useState("");
|
@@ -65,28 +65,42 @@ export const EditorProvider = ({
|
|
65
65
|
};
|
66
66
|
}
|
67
67
|
}, [path, editor?.selection]);
|
68
|
+
const updateDragging = d => {
|
69
|
+
if (d) {
|
70
|
+
// console.log("Updating dragOver", d);
|
71
|
+
setDragging(prevState => {
|
72
|
+
return {
|
73
|
+
...prevState,
|
74
|
+
...d
|
75
|
+
};
|
76
|
+
});
|
77
|
+
}
|
78
|
+
};
|
79
|
+
const otherValues = useMemo(() => ({
|
80
|
+
...(value || {}),
|
81
|
+
onDrop: onDrop,
|
82
|
+
drop,
|
83
|
+
theme: theme,
|
84
|
+
selectedPath: selectedPath,
|
85
|
+
setSelectedPath: setSelectedPath,
|
86
|
+
selectedElement: selectedElement,
|
87
|
+
setSelectedElement: setSelectedElement,
|
88
|
+
isSelectedElement: isSelectedElement,
|
89
|
+
dragging: {
|
90
|
+
...dragging
|
91
|
+
} || {},
|
92
|
+
popupType,
|
93
|
+
setPopupType,
|
94
|
+
setContextMenu,
|
95
|
+
contextMenu,
|
96
|
+
openAI,
|
97
|
+
setOpenAI,
|
98
|
+
updateDragging,
|
99
|
+
fontFamilies,
|
100
|
+
setFontFamilies
|
101
|
+
}), [path, editor?.selection, selectedPath, selectedElement, dragging.active, dragging.isDragging, dragging.dragOver, contextMenu, openAI, popupType, drop, fontFamilies]);
|
68
102
|
return /*#__PURE__*/_jsx(EditorContext.Provider, {
|
69
|
-
value:
|
70
|
-
...(value || {}),
|
71
|
-
onDrop: onDrop,
|
72
|
-
drop,
|
73
|
-
theme: theme,
|
74
|
-
selectedPath: selectedPath,
|
75
|
-
setSelectedPath: setSelectedPath,
|
76
|
-
selectedElement: selectedElement,
|
77
|
-
setSelectedElement: setSelectedElement,
|
78
|
-
isSelectedElement: isSelectedElement,
|
79
|
-
setDragging: setDragging,
|
80
|
-
dragging: dragging,
|
81
|
-
popupType,
|
82
|
-
setPopupType,
|
83
|
-
setContextMenu,
|
84
|
-
contextMenu,
|
85
|
-
openAI,
|
86
|
-
setOpenAI,
|
87
|
-
fontFamilies,
|
88
|
-
setFontFamilies
|
89
|
-
},
|
103
|
+
value: otherValues,
|
90
104
|
children: children
|
91
105
|
});
|
92
106
|
};
|