@use-kona/editor 0.1.8-rc.4 → 0.1.8-rc.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/createEditor.js +26 -18
- package/dist/plugins/EmojiPlugin/Menu.js +3 -1
- package/dist/plugins/PlaceholderPlugin/PlaceholderPlugin.js +3 -2
- package/package.json +1 -1
- package/src/core/createEditor.ts +30 -18
- package/src/plugins/EmojiPlugin/Menu.tsx +1 -1
- package/src/plugins/PlaceholderPlugin/PlaceholderPlugin.tsx +2 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Editor, Path, Range, Transforms, createEditor } from "slate";
|
|
1
|
+
import { Editor, Path, Range, Text, Transforms, createEditor } from "slate";
|
|
2
2
|
import { withHistory } from "slate-history";
|
|
3
3
|
import { withReact } from "slate-react";
|
|
4
4
|
const createEditor_createEditor = (plugins)=>()=>{
|
|
@@ -136,28 +136,36 @@ const createEditor_createEditor = (plugins)=>()=>{
|
|
|
136
136
|
if (isSingleText) return void deleteFragment(options);
|
|
137
137
|
const nodes = Array.from(Editor.nodes(editorWithPlugins, {
|
|
138
138
|
at: selection,
|
|
139
|
-
match: (n)=>!Editor.isEditor(n) && Editor.isBlock(editorWithPlugins, n)
|
|
140
|
-
|
|
139
|
+
match: (n)=>!Editor.isEditor(n) && Editor.isBlock(editorWithPlugins, n),
|
|
140
|
+
reverse: true,
|
|
141
|
+
mode: 'highest',
|
|
142
|
+
voids: true
|
|
143
|
+
}));
|
|
141
144
|
for (const entry of nodes){
|
|
142
145
|
const [node, path] = entry;
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
146
|
+
if (Text.isText(node)) Transforms.removeNodes(editorWithPlugins, {
|
|
147
|
+
at: path
|
|
148
|
+
});
|
|
149
|
+
else {
|
|
150
|
+
const plugin = plugins.find((plugin)=>plugin.blocks?.find((b)=>b.type === node.type));
|
|
151
|
+
if (plugin) {
|
|
152
|
+
const match = plugin.blocks?.find((b)=>b.type === node.type);
|
|
153
|
+
const result = match?.onBeforeDelete ? await match.onBeforeDelete([
|
|
154
|
+
node
|
|
155
|
+
]) : true;
|
|
156
|
+
if (!result) return;
|
|
157
|
+
Transforms.removeNodes(editorWithPlugins, {
|
|
158
|
+
at: path,
|
|
159
|
+
match: (n)=>n.type === node.type
|
|
160
|
+
});
|
|
161
|
+
match?.onDelete?.([
|
|
162
|
+
node
|
|
163
|
+
]);
|
|
164
|
+
} else Transforms.removeNodes(editorWithPlugins, {
|
|
151
165
|
at: path,
|
|
152
166
|
match: (n)=>n.type === node.type
|
|
153
167
|
});
|
|
154
|
-
|
|
155
|
-
node
|
|
156
|
-
]);
|
|
157
|
-
} else Transforms.removeNodes(editorWithPlugins, {
|
|
158
|
-
at: path,
|
|
159
|
-
match: (n)=>n.type === node.type
|
|
160
|
-
});
|
|
168
|
+
}
|
|
161
169
|
}
|
|
162
170
|
if (nodes.length > 0) return;
|
|
163
171
|
deleteFragment(options);
|
|
@@ -10,7 +10,9 @@ const Menu = (props)=>{
|
|
|
10
10
|
const ref = useRef(null);
|
|
11
11
|
const [style, setStyle] = useState({});
|
|
12
12
|
useLayoutEffect(()=>{
|
|
13
|
-
if (!selection || !isFocused) return void setStyle(
|
|
13
|
+
if (!selection || !isFocused) return void setStyle({
|
|
14
|
+
opacity: 0
|
|
15
|
+
});
|
|
14
16
|
setTimeout(()=>{
|
|
15
17
|
const domSelection = window.getSelection();
|
|
16
18
|
const domRange = domSelection?.getRangeAt(0);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { Fragment, jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Editor, Node } from "slate";
|
|
3
3
|
import { useFocused, useReadOnly, useSelected } from "slate-react";
|
|
4
|
+
import { isEmpty as external_utils_js_isEmpty } from "../../utils.js";
|
|
4
5
|
import styles_module from "./styles.module.js";
|
|
5
6
|
class PlaceholderPlugin {
|
|
6
7
|
options;
|
|
@@ -18,7 +19,7 @@ class PlaceholderPlugin {
|
|
|
18
19
|
mode: 'lowest',
|
|
19
20
|
voids: true
|
|
20
21
|
});
|
|
21
|
-
|
|
22
|
+
Editor.above(editor, {
|
|
22
23
|
mode: 'lowest',
|
|
23
24
|
at: [
|
|
24
25
|
0,
|
|
@@ -28,7 +29,7 @@ class PlaceholderPlugin {
|
|
|
28
29
|
if (entity && this.options.ignoreNodes?.includes(entity[0].type)) return props.children;
|
|
29
30
|
const hasVoids = entity?.[0].children.some((n)=>Editor.isVoid(editor, n));
|
|
30
31
|
const isEmpty = (!entity || '' === Node.string(entity[0])) && !hasVoids && !Editor.isVoid(editor, entity?.[0]);
|
|
31
|
-
const isEditorEmpty =
|
|
32
|
+
const isEditorEmpty = external_utils_js_isEmpty(editor.children);
|
|
32
33
|
const isVisible = isEmpty && !isReadOnly && isSelected || isEditorEmpty;
|
|
33
34
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
34
35
|
children: /*#__PURE__*/ jsx("span", {
|
package/package.json
CHANGED
package/src/core/createEditor.ts
CHANGED
|
@@ -3,6 +3,7 @@ import {
|
|
|
3
3
|
Editor,
|
|
4
4
|
Path,
|
|
5
5
|
Range,
|
|
6
|
+
Text,
|
|
6
7
|
Transforms,
|
|
7
8
|
} from 'slate';
|
|
8
9
|
import { withHistory } from 'slate-history';
|
|
@@ -196,40 +197,51 @@ export const createEditor = (plugins: IPlugin[]) => () => {
|
|
|
196
197
|
deleteFragment(options);
|
|
197
198
|
return;
|
|
198
199
|
}
|
|
200
|
+
|
|
199
201
|
const nodes = Array.from(
|
|
200
202
|
Editor.nodes<CustomElement>(editorWithPlugins, {
|
|
201
203
|
at: selection,
|
|
202
204
|
match: (n) =>
|
|
203
205
|
!Editor.isEditor(n) &&
|
|
204
206
|
Editor.isBlock(editorWithPlugins, n as CustomElement),
|
|
207
|
+
reverse: true,
|
|
208
|
+
mode: 'highest',
|
|
209
|
+
voids: true,
|
|
205
210
|
}),
|
|
206
|
-
)
|
|
211
|
+
);
|
|
212
|
+
|
|
207
213
|
|
|
208
214
|
for (const entry of nodes) {
|
|
209
215
|
const [node, path] = entry;
|
|
210
216
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
const
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
if (
|
|
217
|
+
if (Text.isText(node)) {
|
|
218
|
+
Transforms.removeNodes(editorWithPlugins, {
|
|
219
|
+
at: path,
|
|
220
|
+
});
|
|
221
|
+
} else {
|
|
222
|
+
const plugin = plugins.find((plugin) =>
|
|
223
|
+
plugin.blocks?.find((b) => b.type === node.type),
|
|
224
|
+
);
|
|
225
|
+
if (plugin) {
|
|
226
|
+
const match = plugin.blocks?.find((b) => b.type === node.type);
|
|
227
|
+
const result = match?.onBeforeDelete
|
|
228
|
+
? await match.onBeforeDelete([node])
|
|
229
|
+
: true;
|
|
230
|
+
if (result) {
|
|
231
|
+
Transforms.removeNodes(editorWithPlugins, {
|
|
232
|
+
at: path,
|
|
233
|
+
match: (n) => (n as CustomElement).type === node.type,
|
|
234
|
+
});
|
|
235
|
+
match?.onDelete?.([node]);
|
|
236
|
+
} else {
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
} else {
|
|
220
240
|
Transforms.removeNodes(editorWithPlugins, {
|
|
221
241
|
at: path,
|
|
222
242
|
match: (n) => (n as CustomElement).type === node.type,
|
|
223
243
|
});
|
|
224
|
-
match?.onDelete?.([node]);
|
|
225
|
-
} else {
|
|
226
|
-
return;
|
|
227
244
|
}
|
|
228
|
-
} else {
|
|
229
|
-
Transforms.removeNodes(editorWithPlugins, {
|
|
230
|
-
at: path,
|
|
231
|
-
match: (n) => (n as CustomElement).type === node.type,
|
|
232
|
-
});
|
|
233
245
|
}
|
|
234
246
|
}
|
|
235
247
|
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
} from 'slate-react';
|
|
8
8
|
import type { CustomElement } from '../../../types';
|
|
9
9
|
import type { IPlugin } from '../../types';
|
|
10
|
+
import { isEmpty as isEditorEmptyFn } from '../../utils';
|
|
10
11
|
import styles from './styles.module.css';
|
|
11
12
|
|
|
12
13
|
type Options = {
|
|
@@ -49,9 +50,7 @@ export class PlaceholderPlugin implements IPlugin {
|
|
|
49
50
|
!hasVoids &&
|
|
50
51
|
!Editor.isVoid(editor, entity?.[0] as Element);
|
|
51
52
|
|
|
52
|
-
const isEditorEmpty =
|
|
53
|
-
!firstEntity ||
|
|
54
|
-
(Node.string(firstEntity[0]) === '' && editor.children.length <= 1);
|
|
53
|
+
const isEditorEmpty = isEditorEmptyFn(editor.children)
|
|
55
54
|
|
|
56
55
|
const isVisible =
|
|
57
56
|
(isEmpty && !isReadOnly && isSelected) || isEditorEmpty;
|