@flozy/editor 8.0.9 → 9.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Editor/Editor.css +2 -2
- package/dist/Editor/Elements/DataView/Layouts/Options/styles.js +1 -1
- package/dist/Editor/Toolbar/PopupTool/index.js +6 -21
- package/dist/Editor/common/ImageSelector/Options/Upload.js +1 -1
- package/dist/Editor/common/ImageSelector/UploadStyles.js +10 -10
- package/dist/Editor/common/RnD/ElementSettings/styles.js +0 -1
- package/dist/Editor/hooks/useDrag.js +17 -11
- package/dist/Editor/hooks/useEditorScroll.js +0 -1
- package/package.json +2 -2
package/dist/Editor/Editor.css
CHANGED
@@ -14,6 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
14
|
const PopupTool = props => {
|
15
15
|
const {
|
16
16
|
theme,
|
17
|
+
setIsTextSelected,
|
17
18
|
customProps,
|
18
19
|
editorWrapper
|
19
20
|
} = props;
|
@@ -34,14 +35,9 @@ const PopupTool = props => {
|
|
34
35
|
const {
|
35
36
|
selectedElement
|
36
37
|
} = useEditorContext();
|
37
|
-
console.log("Editor debug ====>", event, open, anchorEl, selection);
|
38
38
|
const updateAnchorEl = useCallback(() => {
|
39
39
|
try {
|
40
|
-
const {
|
41
|
-
selection
|
42
|
-
} = editor;
|
43
40
|
const isHavingSelection = selection && !Range.isCollapsed(selection);
|
44
|
-
console.log("Editor isHavingSelection", isHavingSelection, selection);
|
45
41
|
if (isHavingSelection) {
|
46
42
|
const domRange = ReactEditor.toDOMRange(editor, editor.selection);
|
47
43
|
const editorContainer = document.querySelector("#slate-wrapper-scroll-container")?.getBoundingClientRect();
|
@@ -51,7 +47,6 @@ const PopupTool = props => {
|
|
51
47
|
rect.y = -500; // hide the popper
|
52
48
|
}
|
53
49
|
|
54
|
-
console.log("Editor setAnchorEl", rect, domRange, editorContainer);
|
55
50
|
setAnchorEl({
|
56
51
|
clientWidth: rect.width,
|
57
52
|
clientHeight: rect.height,
|
@@ -61,7 +56,7 @@ const PopupTool = props => {
|
|
61
56
|
} catch (err) {
|
62
57
|
console.log(err);
|
63
58
|
}
|
64
|
-
}, [
|
59
|
+
}, [selection]);
|
65
60
|
useEditorScroll(editorWrapper, updateAnchorEl);
|
66
61
|
useEffect(() => {
|
67
62
|
const userStoppedSelection = size?.device === "xs" ? true : event === "end"; // for mobile, when user starts the selection, we are gonna show the popup tool
|
@@ -76,44 +71,34 @@ const PopupTool = props => {
|
|
76
71
|
if (!isCarouselEdit) {
|
77
72
|
setOpen(true);
|
78
73
|
setPopupType("textFormat");
|
79
|
-
|
74
|
+
setIsTextSelected(true);
|
80
75
|
}
|
81
76
|
} else if (!anchorEl) {
|
82
77
|
setOpen(false);
|
83
78
|
setPopupType("");
|
84
|
-
|
79
|
+
setIsTextSelected(false);
|
85
80
|
}
|
86
81
|
}, [event, anchorEl]);
|
87
82
|
useEffect(() => {
|
88
|
-
console.log("Editor useEffect", selection);
|
89
83
|
if (!selection || Range.isCollapsed(selection) || Editor.string(editor, selection) === "") {
|
90
84
|
setAnchorEl(null);
|
91
85
|
} else {
|
92
|
-
console.log("Editor updateAnchorEl", selection);
|
93
86
|
updateAnchorEl();
|
94
87
|
hideSlateSelection(); // removes slate selection background, when there is no selection
|
95
88
|
}
|
96
|
-
}, [
|
89
|
+
}, [selection]);
|
97
90
|
useEffect(() => {
|
98
|
-
|
99
|
-
path,
|
100
|
-
enable
|
101
|
-
} = selectedElement || {};
|
102
|
-
const isFreeGridElement = path && path.split("|").length > 2;
|
103
|
-
if (enable === 1 && isFreeGridElement) {
|
104
|
-
console.log("Editor useEffect isFreeGridElement", selectedElement);
|
91
|
+
if (selectedElement?.enable === 1) {
|
105
92
|
setAnchorEl(null);
|
106
93
|
}
|
107
94
|
}, [selection, selectedElement?.path, selectedElement?.enable]);
|
108
95
|
const handleClose = () => {
|
109
|
-
console.log("Editor closing");
|
110
96
|
// setAnchorEl(null);
|
111
97
|
setOpen(false);
|
112
98
|
setPopupType("");
|
113
99
|
};
|
114
100
|
return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
115
101
|
onClickAway: e => {
|
116
|
-
console.log("ClickAwayListener", e.target, document.body, e.target !== document.body);
|
117
102
|
// close the mini toolbar, if user clicks outside the editor (in Flozy app.)
|
118
103
|
if (e.target !== document.body) {
|
119
104
|
// e.target returns body, if the user clicks material ui select popup inside the tool bar, on that time, we don't need to close
|
@@ -5,9 +5,9 @@ const UploadStyles = theme => ({
|
|
5
5
|
borderRadius: "11px",
|
6
6
|
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
|
7
7
|
background: theme?.palette?.editor?.uploadFileBg,
|
8
|
-
height:
|
9
|
-
minHeight:
|
10
|
-
height:
|
8
|
+
height: '100%',
|
9
|
+
minHeight: '150px',
|
10
|
+
height: 'inherit'
|
11
11
|
},
|
12
12
|
uploadField: {
|
13
13
|
width: "100%",
|
@@ -19,21 +19,21 @@ const UploadStyles = theme => ({
|
|
19
19
|
backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
|
20
20
|
borderRadius: "9px",
|
21
21
|
border: "1px dashed #2563EB",
|
22
|
-
minHeight:
|
22
|
+
minHeight: '150px'
|
23
23
|
},
|
24
24
|
uploadIcon: {
|
25
25
|
display: "grid !important",
|
26
26
|
"& svg": {
|
27
|
-
display:
|
28
|
-
width:
|
27
|
+
display: 'flex',
|
28
|
+
width: '100%',
|
29
29
|
"& path": {
|
30
30
|
stroke: "#2563EB"
|
31
31
|
}
|
32
32
|
},
|
33
|
-
|
34
|
-
display:
|
35
|
-
width:
|
36
|
-
marginTop:
|
33
|
+
'& span': {
|
34
|
+
display: 'flex',
|
35
|
+
width: '100%',
|
36
|
+
marginTop: '5px'
|
37
37
|
}
|
38
38
|
}
|
39
39
|
});
|
@@ -58,7 +58,6 @@ const useElementSettingsStyle = theme => ({
|
|
58
58
|
maxHeight: "500px",
|
59
59
|
overflowX: "hidden",
|
60
60
|
overflowY: "auto",
|
61
|
-
paddingLeft: "4px",
|
62
61
|
background: theme?.palette?.editor?.background,
|
63
62
|
paddingLeft: "4px",
|
64
63
|
"& .MuiTypography-root, .MuiInputBase-root, input": {
|
@@ -1,20 +1,26 @@
|
|
1
|
-
import {
|
1
|
+
import { useEffect, useState } from "react";
|
2
2
|
const useDrag = () => {
|
3
3
|
const [event, setEvent] = useState("");
|
4
|
-
const onMouseDown = useCallback(() => {
|
5
|
-
setEvent("start");
|
6
|
-
}, []);
|
7
|
-
const onMouseUp = useCallback(() => {
|
8
|
-
setEvent("end");
|
9
|
-
}, []);
|
10
4
|
useEffect(() => {
|
11
|
-
|
12
|
-
document.addEventListener("pointerup", onMouseUp);
|
5
|
+
addListener();
|
13
6
|
return () => {
|
14
|
-
|
15
|
-
document.removeEventListener("pointerup", onMouseUp);
|
7
|
+
removeListener();
|
16
8
|
};
|
17
9
|
}, []);
|
10
|
+
const onMouseDown = () => {
|
11
|
+
setEvent("start");
|
12
|
+
};
|
13
|
+
const onMouseUp = () => {
|
14
|
+
setEvent("end");
|
15
|
+
};
|
16
|
+
const addListener = () => {
|
17
|
+
document.addEventListener("pointerdown", onMouseDown);
|
18
|
+
document.addEventListener("pointerup", onMouseUp);
|
19
|
+
};
|
20
|
+
const removeListener = () => {
|
21
|
+
document.removeEventListener("pointerdown", onMouseDown);
|
22
|
+
document.removeEventListener("pointerup", onMouseUp);
|
23
|
+
};
|
18
24
|
return [event];
|
19
25
|
};
|
20
26
|
export default useDrag;
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@flozy/editor",
|
3
|
-
"version": "
|
3
|
+
"version": "9.0.1",
|
4
4
|
"description": "An Editor for flozy app brain",
|
5
5
|
"files": [
|
6
6
|
"dist"
|
@@ -61,7 +61,7 @@
|
|
61
61
|
"scripts": {
|
62
62
|
"prepare": "husky install .husky",
|
63
63
|
"analyze": "source-map-explorer build/static/js/*.js",
|
64
|
-
"lint": "./node_modules/.
|
64
|
+
"lint": "./node_modules/.bin/eslint --ignore-path .gitignore .",
|
65
65
|
"start": "craco start",
|
66
66
|
"build": "NODE_OPTIONS='--max_old_space_size=4096' craco build",
|
67
67
|
"test": "craco test --passWithNoTests",
|