@flozy/editor 3.7.6 → 3.7.8

Sign up to get free protection for your applications and to get access to all the features.
@@ -37,6 +37,7 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
37
37
  const [value, setValue] = useState(convertedContent);
38
38
  const [loadedValue] = useState(value);
39
39
  const [deboundedValue] = useDebounce(value, 500);
40
+ const [isExternalUpdate, setIsExternalUpdate] = useState(false);
40
41
  const editor = useMemo(() => {
41
42
  return withCommon(createEditor(), {
42
43
  needLayout
@@ -47,32 +48,60 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
47
48
  emojiClick: emoji => {
48
49
  if (editor) {
49
50
  insertEmoji(editor, emoji?.native, editor.selection);
51
+ if (editor.selection) {
52
+ const path = editor.selection.anchor.path;
53
+ const offset = editor.selection.anchor.offset + emoji?.native.length;
54
+ const position = {
55
+ anchor: {
56
+ path: [0],
57
+ offset: 0
58
+ },
59
+ focus: {
60
+ path: [0],
61
+ offset: 0
62
+ }
63
+ };
64
+ // Create a new selection
65
+ Transforms.select(editor, position);
66
+ }
50
67
  ReactEditor.focus(editor);
51
68
  }
52
69
  },
53
- // Focus enable
54
- enableFocus: () => {
55
- if (editor) {
56
- ReactEditor.focus(editor);
57
- }
70
+ setContent: newContent => {
71
+ setIsExternalUpdate(true);
72
+ setValue(newContent);
73
+ ReactEditor.focus(editor);
58
74
  },
59
- clearAll() {
75
+ // Focus enable
76
+ // enableFocus: () => {
77
+ // if (editor) {
78
+ // const position = {
79
+ // anchor: { path: [0], offset: 0 },
80
+ // focus: { path: [0], offset: 0 },
81
+ // };
82
+ // Transforms.select(editor, position);
83
+ // ReactEditor.focus(editor);
84
+ // }
85
+ // },
86
+
87
+ clearAll: () => {
60
88
  if (!editor) return;
61
- editor.children = [{
89
+ while (editor.children.length > 0) {
90
+ Transforms.removeNodes(editor, {
91
+ at: [0]
92
+ });
93
+ }
94
+ Transforms.insertNodes(editor, {
62
95
  type: 'paragraph',
63
96
  children: [{
64
97
  text: ''
65
98
  }]
66
- }];
67
- Transforms.select(editor, {
68
- path: [0, 0],
69
- offset: 0
70
99
  });
71
100
  ReactEditor.focus(editor);
72
- setValue(editor.children);
73
101
  }
74
102
  }));
75
103
  useEffect(() => {
104
+ setIsExternalUpdate(true);
76
105
  setValue(draftToSlate({
77
106
  data: content
78
107
  }));
@@ -139,9 +168,14 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
139
168
  });
140
169
  };
141
170
  const handleEditorChange = newValue => {
142
- setValue(newValue);
143
- if (!isInteracted) {
144
- setIsInteracted(true);
171
+ if (isExternalUpdate) {
172
+ setIsExternalUpdate(false);
173
+ return;
174
+ } else {
175
+ setValue(newValue);
176
+ if (!isInteracted) {
177
+ setIsInteracted(true);
178
+ }
145
179
  }
146
180
  };
147
181
  const Element = props => {
@@ -178,15 +212,23 @@ const ChatEditor = /*#__PURE__*/forwardRef((props, ref) => {
178
212
  event,
179
213
  editor
180
214
  });
181
- } else if (event.key === "Enter" && !event.shiftKey) {
182
- const {
183
- value: strVal,
184
- ...restVal
185
- } = getOnSaveData(value);
186
- onsubmit(false, {
187
- strVal,
188
- restVal
189
- });
215
+ } else if (event.key === "Enter") {
216
+ const isEmpty = value.length === 1 && value[0].type === 'paragraph' && value[0].children.length === 1 && value[0].children[0].text === '';
217
+ if (isEmpty) {
218
+ event.preventDefault();
219
+ return;
220
+ }
221
+ if (!event.shiftKey) {
222
+ const {
223
+ value: strVal,
224
+ ...restVal
225
+ } = getOnSaveData(value);
226
+ onsubmit(false, {
227
+ strVal,
228
+ restVal
229
+ });
230
+ event.preventDefault();
231
+ }
190
232
  }
191
233
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
192
234
  const handleClose = () => {};
@@ -220,13 +220,15 @@ const EditorButton = props => {
220
220
  style: {
221
221
  paddingLeft: "4px",
222
222
  paddingRight: "4px"
223
- }
223
+ },
224
+ props: customProps
224
225
  }), label || "My Button", BtnIcon && iconPosition === "end" && /*#__PURE__*/_jsx(MUIIcon, {
225
226
  iconName: buttonIcon,
226
227
  style: {
227
228
  paddingLeft: "4px",
228
229
  paddingRight: "4px"
229
- }
230
+ },
231
+ props: customProps
230
232
  })]
231
233
  }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
232
234
  className: "workflow-icon-btn",
@@ -89,7 +89,8 @@ const ChipText = props => {
89
89
  display: "inline-block",
90
90
  verticalAlign: "middle"
91
91
  },
92
- onClick: handleStyle
92
+ onClick: handleStyle,
93
+ props: customProps
93
94
  }), /*#__PURE__*/_jsx("div", {
94
95
  contentEditable: false,
95
96
  style: {
@@ -119,6 +119,7 @@ const ImageFrame = props => {
119
119
  zIndex: 100
120
120
  },
121
121
  placement: "top",
122
+ disablePortal: true,
122
123
  children: /*#__PURE__*/_jsxs(Box, {
123
124
  sx: classes?.sliderContainer,
124
125
  children: [/*#__PURE__*/_jsx(ContinuousSlider, {
@@ -1,9 +1,14 @@
1
1
  import React, { useEffect, useState } from "react";
2
2
  import { Box } from "@mui/material";
3
3
  import { jsx as _jsx } from "react/jsx-runtime";
4
- const iconLoader = async iconName => {
4
+ const iconLoader = async (iconName, ...props) => {
5
5
  try {
6
- const iconResponse = await fetch(`${process.env.ICON_API}/icon/${iconName}`);
6
+ const [{
7
+ props: {
8
+ ICON_API
9
+ }
10
+ }] = props;
11
+ const iconResponse = await fetch(`${ICON_API}/icon/${iconName}`);
7
12
  const icon = await iconResponse.text();
8
13
  return icon;
9
14
  } catch (error) {
@@ -19,7 +24,7 @@ const DynamicIcon = ({
19
24
  const [icon, setIcon] = useState("");
20
25
  useEffect(() => {
21
26
  let mounted = true;
22
- iconLoader(iconName).then(iconHTML => {
27
+ iconLoader(iconName, props).then(iconHTML => {
23
28
  if (mounted) {
24
29
  setIcon(iconHTML);
25
30
  }
@@ -9,7 +9,8 @@ const Icons = props => {
9
9
  const {
10
10
  value,
11
11
  data,
12
- onChange
12
+ onChange,
13
+ customProps
13
14
  } = props;
14
15
  const {
15
16
  key
@@ -74,7 +75,8 @@ const Icons = props => {
74
75
  children: /*#__PURE__*/_jsx(IconButton, {
75
76
  onClick: onRemoveIcon,
76
77
  children: /*#__PURE__*/_jsx(MUIIcon, {
77
- iconName: value
78
+ iconName: value,
79
+ props: customProps
78
80
  })
79
81
  })
80
82
  }) : ""
@@ -96,7 +98,8 @@ const Icons = props => {
96
98
  children: /*#__PURE__*/_jsx(IconButton, {
97
99
  onClick: onSelectIcon(m),
98
100
  children: /*#__PURE__*/_jsx(MUIIcon, {
99
- iconName: m
101
+ iconName: m,
102
+ props: customProps
100
103
  })
101
104
  })
102
105
  }, `mui_ico_${m}`);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@flozy/editor",
3
- "version": "3.7.6",
3
+ "version": "3.7.8",
4
4
  "description": "An Editor for flozy app brain",
5
5
  "files": [
6
6
  "dist"