@flozy/editor 3.7.4 → 3.7.6
Sign up to get free protection for your applications and to get access to all the features.
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useCallback, useMemo, useRef, useState, useEffect, useImperativeHandle, forwardRef } from "react";
|
2
2
|
import { Editable, Slate, ReactEditor } from 'slate-react';
|
3
|
-
import { createEditor } from 'slate';
|
3
|
+
import { createEditor, Transforms } from 'slate';
|
4
4
|
import { useDebounce } from "use-debounce";
|
5
5
|
import withCommon from "./hooks/withCommon";
|
6
6
|
import { getBlock, getMarked } from "./utils/chatEditor/SlateUtilityFunctions";
|
@@ -26,7 +26,8 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
26
26
|
needLayout = false,
|
27
27
|
toolBar = true,
|
28
28
|
onSave,
|
29
|
-
onsubmit
|
29
|
+
onsubmit,
|
30
|
+
onBlur = () => {}
|
30
31
|
} = props;
|
31
32
|
const classes = usePopupStyle(theme);
|
32
33
|
const convertedContent = draftToSlate({
|
@@ -54,6 +55,21 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
54
55
|
if (editor) {
|
55
56
|
ReactEditor.focus(editor);
|
56
57
|
}
|
58
|
+
},
|
59
|
+
clearAll() {
|
60
|
+
if (!editor) return;
|
61
|
+
editor.children = [{
|
62
|
+
type: 'paragraph',
|
63
|
+
children: [{
|
64
|
+
text: ''
|
65
|
+
}]
|
66
|
+
}];
|
67
|
+
Transforms.select(editor, {
|
68
|
+
path: [0, 0],
|
69
|
+
offset: 0
|
70
|
+
});
|
71
|
+
ReactEditor.focus(editor);
|
72
|
+
setValue(editor.children);
|
57
73
|
}
|
58
74
|
}));
|
59
75
|
useEffect(() => {
|
@@ -174,6 +190,16 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
174
190
|
}
|
175
191
|
}, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
|
176
192
|
const handleClose = () => {};
|
193
|
+
const handleBlur = () => {
|
194
|
+
const {
|
195
|
+
value: strVal,
|
196
|
+
...restVal
|
197
|
+
} = getOnSaveData(value);
|
198
|
+
onBlur({
|
199
|
+
strVal,
|
200
|
+
restVal
|
201
|
+
});
|
202
|
+
};
|
177
203
|
return /*#__PURE__*/_jsx(EditorProvider, {
|
178
204
|
theme: theme,
|
179
205
|
editor: editor,
|
@@ -192,6 +218,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
|
|
192
218
|
placeholder: "Start typing ...",
|
193
219
|
spellCheck: true,
|
194
220
|
autoFocus: true,
|
221
|
+
onBlur: handleBlur,
|
195
222
|
onKeyDown: onKeyDown
|
196
223
|
}), !readOnly ? /*#__PURE__*/_jsx(MentionsPopup, {
|
197
224
|
ref: mentionsRef,
|
@@ -1,5 +1,5 @@
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
2
|
-
import { Popper, Fade, Paper } from "@mui/material";
|
2
|
+
import { Popper, Fade, Paper, ClickAwayListener } from "@mui/material";
|
3
3
|
import { Editor, Range } from "slate";
|
4
4
|
import { useSlate, useFocused } from "slate-react";
|
5
5
|
import useDrag from "../../hooks/useDrag";
|
@@ -9,7 +9,6 @@ import MiniTextFormat from "./MiniTextFormat";
|
|
9
9
|
import { useEditorContext } from "../../hooks/useMouseMove";
|
10
10
|
import usePopupStyles from "../PopupTool/PopupToolStyle";
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
12
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
13
12
|
const PopupTool = props => {
|
14
13
|
const {
|
15
14
|
theme,
|
@@ -32,11 +31,6 @@ const PopupTool = props => {
|
|
32
31
|
const id = open ? "popup-edit-tool" : "";
|
33
32
|
const table = new TableUtil(editor);
|
34
33
|
const [size] = useWindowResize();
|
35
|
-
useEffect(() => {
|
36
|
-
if (!inFocus) {
|
37
|
-
setAnchorEl(null);
|
38
|
-
}
|
39
|
-
}, [inFocus]);
|
40
34
|
useEffect(() => {
|
41
35
|
if (event === "end" && anchorEl && !open) {
|
42
36
|
// for table cell selection
|
@@ -84,7 +78,14 @@ const PopupTool = props => {
|
|
84
78
|
setOpen(false);
|
85
79
|
setPopupType("");
|
86
80
|
};
|
87
|
-
return open && !openAI ? /*#__PURE__*/_jsx(
|
81
|
+
return open && !openAI ? /*#__PURE__*/_jsx(ClickAwayListener, {
|
82
|
+
onClickAway: e => {
|
83
|
+
// close the mini toolbar, if user clicks outside the editor (in Flozy app.)
|
84
|
+
if (e.target !== document.body) {
|
85
|
+
// 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
|
86
|
+
handleClose();
|
87
|
+
}
|
88
|
+
},
|
88
89
|
children: size.device === "xs" ? /*#__PURE__*/_jsx("div", {
|
89
90
|
className: "mobileMiniTextWrapper",
|
90
91
|
children: /*#__PURE__*/_jsx(MiniTextFormat, {
|