@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(_Fragment, {
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, {
@@ -10,7 +10,7 @@ const usePopupStyles = theme => ({
10
10
  papper: {
11
11
  boxShadow: "none",
12
12
  width: "300px",
13
- height: "auto",
13
+ maxHeight: "300px",
14
14
  overflow: "auto",
15
15
  padding: "8px",
16
16
  margin: "0px",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.7.4",
3
+ "version": "3.7.6",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"