@flozy/editor 1.5.6 → 1.5.8
Sign up to get free protection for your applications and to get access to all the features.
@@ -4,7 +4,7 @@ import { useSelected, useSlateStatic, ReactEditor } from "slate-react";
|
|
4
4
|
import { gridItem } from "../../utils/gridItem";
|
5
5
|
import GridPopup from "./GridPopup";
|
6
6
|
import { IconButton, Tooltip } from "@mui/material";
|
7
|
-
import CompressIcon from "@mui/icons-material/Compress";
|
7
|
+
// import CompressIcon from "@mui/icons-material/Compress";
|
8
8
|
import { insertGrid } from "../../utils/grid";
|
9
9
|
import useDragAndDrop from "../../common/useDragAndDrop";
|
10
10
|
import useResize from "../../utils/customHooks/useResize";
|
@@ -58,6 +58,7 @@ const Grid = props => {
|
|
58
58
|
} = elSize || {};
|
59
59
|
const editor = useSlateStatic();
|
60
60
|
const selected = useSelected();
|
61
|
+
// const [selected, setSelected] = useState(false);
|
61
62
|
const path = ReactEditor.findPath(editor, element);
|
62
63
|
const [parentDOM, setParentDOM] = useState(null);
|
63
64
|
|
@@ -185,6 +186,17 @@ const Grid = props => {
|
|
185
186
|
onDragEnd,
|
186
187
|
onDrop
|
187
188
|
});
|
189
|
+
|
190
|
+
// const onMouseOver = (e) => {
|
191
|
+
// e.stopPropagation();
|
192
|
+
// setSelected(true);
|
193
|
+
// };
|
194
|
+
|
195
|
+
// const onMouseLeave = (e) => {
|
196
|
+
// e.stopPropagation();
|
197
|
+
// setSelected(false);
|
198
|
+
// };
|
199
|
+
|
188
200
|
const GridToolBar = () => {
|
189
201
|
return selected ? /*#__PURE__*/_jsxs("div", {
|
190
202
|
className: "grid-container-toolbar",
|
@@ -231,7 +243,10 @@ const Grid = props => {
|
|
231
243
|
borderWidth: borderWidth || "1px",
|
232
244
|
borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
|
233
245
|
borderStyle: borderStyle || "solid"
|
234
|
-
}
|
246
|
+
}
|
247
|
+
// onMouseOver={onMouseOver}
|
248
|
+
// onMouseLeave={onMouseLeave}
|
249
|
+
,
|
235
250
|
children: [fgColor && /*#__PURE__*/_jsx("div", {
|
236
251
|
style: {
|
237
252
|
position: "absolute",
|
@@ -242,7 +257,7 @@ const Grid = props => {
|
|
242
257
|
backgroundRepeat: "no-repeat",
|
243
258
|
backgroundSize: "cover"
|
244
259
|
}
|
245
|
-
}),
|
260
|
+
}), !readOnly && /*#__PURE__*/_jsxs("div", {
|
246
261
|
className: `element-selector ${selected ? "selected" : ""}`,
|
247
262
|
contentEditable: false,
|
248
263
|
children: [/*#__PURE__*/_jsx("div", {
|
@@ -279,24 +294,6 @@ const Grid = props => {
|
|
279
294
|
height: resizing ? `${size?.height}px` : elHeight ? `${elHeight}px` : "fit-content"
|
280
295
|
},
|
281
296
|
children: children
|
282
|
-
}), selected && !readOnly && /*#__PURE__*/_jsx(IconButton, {
|
283
|
-
onPointerDown: onMouseDown,
|
284
|
-
style: {
|
285
|
-
opacity: 1,
|
286
|
-
background: "#FFF",
|
287
|
-
position: "absolute",
|
288
|
-
left: 0,
|
289
|
-
right: 0,
|
290
|
-
bottom: "-28px",
|
291
|
-
margin: "auto",
|
292
|
-
color: "#FFF",
|
293
|
-
backgroundColor: "#2684ff",
|
294
|
-
width: "42px",
|
295
|
-
height: "42px",
|
296
|
-
zIndex: 1000
|
297
|
-
},
|
298
|
-
className: "",
|
299
|
-
children: /*#__PURE__*/_jsx(CompressIcon, {})
|
300
297
|
})]
|
301
298
|
});
|
302
299
|
};
|
@@ -50,7 +50,8 @@ const GridItem = props => {
|
|
50
50
|
bottomRight
|
51
51
|
} = borderRadius || {};
|
52
52
|
const editor = useSlateStatic();
|
53
|
-
const selected = useSelected();
|
53
|
+
// const selected = useSelected();
|
54
|
+
const [selected, setSelected] = useState(false);
|
54
55
|
const itemWidth = (grid || 6) / 12 * 100;
|
55
56
|
const path = ReactEditor.findPath(editor, element);
|
56
57
|
const GridItemToolbar = () => {
|
@@ -97,6 +98,18 @@ const GridItem = props => {
|
|
97
98
|
});
|
98
99
|
}
|
99
100
|
};
|
101
|
+
const onMouseOver = e => {
|
102
|
+
if (!readOnly) {
|
103
|
+
e.stopPropagation();
|
104
|
+
setSelected(true);
|
105
|
+
}
|
106
|
+
};
|
107
|
+
const onMouseLeave = e => {
|
108
|
+
if (!readOnly) {
|
109
|
+
e.stopPropagation();
|
110
|
+
setSelected(false);
|
111
|
+
}
|
112
|
+
};
|
100
113
|
return /*#__PURE__*/_jsxs(Box, {
|
101
114
|
component: "div",
|
102
115
|
className: `grid-item xs-${grid} element-root gi-top-wrpr`,
|
@@ -116,6 +129,8 @@ const GridItem = props => {
|
|
116
129
|
background: `${bgColorHover || bgColor || "transparent"}`
|
117
130
|
}
|
118
131
|
},
|
132
|
+
onMouseOver: onMouseOver,
|
133
|
+
onMouseLeave: onMouseLeave,
|
119
134
|
children: [!readOnly && /*#__PURE__*/_jsxs("div", {
|
120
135
|
className: `element-selector ${selected ? "selected" : ""}`,
|
121
136
|
contentEditable: false,
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
1
|
+
import React, { useEffect, useMemo, useState } from "react";
|
2
2
|
import { Popper, Fade, Paper, IconButton,
|
3
3
|
// Drawer,
|
4
4
|
Grid, Typography } from "@mui/material";
|
@@ -28,26 +28,38 @@ const PopupTool = props => {
|
|
28
28
|
} else {
|
29
29
|
const domSelection = window.getSelection();
|
30
30
|
const domRange = domSelection.getRangeAt(0);
|
31
|
-
const
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
31
|
+
const {
|
32
|
+
startOffset,
|
33
|
+
endOffset
|
34
|
+
} = domRange || {};
|
35
|
+
if (startOffset !== endOffset) {
|
36
|
+
const rect = domRange.getBoundingClientRect();
|
37
|
+
if (event === "end" && !open && anchorEl === null) {
|
38
|
+
setAnchorEl({
|
39
|
+
clientWidth: rect.width,
|
40
|
+
clientHeight: rect.height,
|
41
|
+
getBoundingClientRect: () => rect
|
42
|
+
});
|
43
|
+
}
|
38
44
|
}
|
39
45
|
}
|
40
46
|
}, [selection, event]);
|
41
47
|
const handleClose = () => {
|
42
48
|
setAnchorEl(null);
|
43
49
|
};
|
50
|
+
const toolTextFormat = useMemo(() => {
|
51
|
+
return /*#__PURE__*/_jsx(TextFormat, {
|
52
|
+
editor: editor,
|
53
|
+
classes: classes
|
54
|
+
});
|
55
|
+
}, [open]);
|
44
56
|
return /*#__PURE__*/_jsx(Popper, {
|
45
57
|
id: id,
|
46
58
|
open: open,
|
47
59
|
disablePortal: false,
|
48
60
|
anchorEl: anchorEl,
|
49
61
|
transition: true,
|
50
|
-
placement: "
|
62
|
+
placement: "auto-end",
|
51
63
|
onMouseDown: e => e.preventDefault(),
|
52
64
|
sx: classes.popupWrapper,
|
53
65
|
className: "tools-drawer",
|
@@ -84,10 +96,7 @@ const PopupTool = props => {
|
|
84
96
|
children: /*#__PURE__*/_jsx(CloseIcon, {})
|
85
97
|
})
|
86
98
|
})]
|
87
|
-
}),
|
88
|
-
editor: editor,
|
89
|
-
classes: classes
|
90
|
-
})]
|
99
|
+
}), toolTextFormat]
|
91
100
|
})
|
92
101
|
})
|
93
102
|
});
|