@flozy/editor 1.5.6 → 1.5.7

Sign up to get free protection for your applications and to get access to all the features.
@@ -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",
@@ -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,
@@ -8,7 +8,7 @@ const usePopupStyle = () => ({
8
8
  width: "350px",
9
9
  maxheight: "300px",
10
10
  overflow: "auto",
11
- marginBottom: "12px",
11
+ // marginBottom: "12px",
12
12
  "& .textSettingHeader": {
13
13
  borderBottom: "1px solid #DCE4EC",
14
14
  padding: "8px 0px 5px",
@@ -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 rect = domRange.getBoundingClientRect();
32
- if (event === "end") {
33
- setAnchorEl({
34
- clientWidth: rect.width,
35
- clientHeight: rect.height,
36
- getBoundingClientRect: () => rect
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: "right-end",
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
- }), /*#__PURE__*/_jsx(TextFormat, {
88
- editor: editor,
89
- classes: classes
90
- })]
99
+ }), toolTextFormat]
91
100
  })
92
101
  })
93
102
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "1.5.6",
3
+ "version": "1.5.7",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"