@prosekit/react 0.3.5 → 0.3.7
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/_tsup-dts-rollup.d.ts +1 -3
- package/dist/chunk-JQQDRLKV.js +33 -0
- package/dist/prosekit-react-autocomplete.js +1 -1
- package/dist/prosekit-react-block-handle.js +1 -1
- package/dist/prosekit-react-inline-popover.js +1 -1
- package/dist/prosekit-react-popover.js +1 -1
- package/dist/prosekit-react-resizable.js +1 -1
- package/dist/prosekit-react-tooltip.js +1 -1
- package/dist/prosekit-react.js +45 -76
- package/package.json +9 -9
- package/dist/chunk-UG3RPLME.js +0 -51
@@ -14,7 +14,6 @@ import { BlockDragHandleElement } from '@prosekit/web/block-handle';
|
|
14
14
|
import { BlockDragHandleProps } from '@prosekit/web/block-handle';
|
15
15
|
import { BlockPopoverElement } from '@prosekit/web/block-handle';
|
16
16
|
import { BlockPopoverProps } from '@prosekit/web/block-handle';
|
17
|
-
import { CommandArgs } from '@prosekit/core';
|
18
17
|
import { ComponentType } from 'react';
|
19
18
|
import { Context } from 'react';
|
20
19
|
import { CoreNodeView } from '@prosemirror-adapter/core';
|
@@ -26,7 +25,6 @@ import { Editor } from '@prosekit/core';
|
|
26
25
|
import type { EditorState } from '@prosekit/pm/state';
|
27
26
|
import type { EditorView } from '@prosekit/pm/view';
|
28
27
|
import { Extension } from '@prosekit/core';
|
29
|
-
import { ExtensionTyping } from '@prosekit/core';
|
30
28
|
import { FC } from 'react';
|
31
29
|
import { ForwardRefExoticComponent } from 'react';
|
32
30
|
import { HTMLAttributes } from 'react';
|
@@ -111,7 +109,7 @@ export { defineReactNodeView as defineReactNodeView_alias_1 }
|
|
111
109
|
/**
|
112
110
|
* @internal
|
113
111
|
*/
|
114
|
-
export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<
|
112
|
+
export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<any>;
|
115
113
|
|
116
114
|
/**
|
117
115
|
* @internal
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import {
|
2
|
+
useEditorContext
|
3
|
+
} from "./chunk-BH56NR2Q.js";
|
4
|
+
|
5
|
+
// src/components/create-component.ts
|
6
|
+
import {
|
7
|
+
createElement,
|
8
|
+
forwardRef,
|
9
|
+
useLayoutEffect,
|
10
|
+
useState
|
11
|
+
} from "react";
|
12
|
+
import { mergeRefs } from "react-merge-refs";
|
13
|
+
function createComponent(tagName, displayName, defaultProps) {
|
14
|
+
let propertyNames = Object.keys(defaultProps), hasEditor = Object.hasOwn(defaultProps, "editor"), Component = forwardRef((props, ref) => {
|
15
|
+
let [el, setEl] = useState(null), properties = {}, attributes = {};
|
16
|
+
for (let [name, value] of Object.entries(props))
|
17
|
+
propertyNames.includes(name) ? properties[name] = value : attributes[name === "className" ? "class" : name] = value;
|
18
|
+
let editor = useEditorContext();
|
19
|
+
return hasEditor && editor && !properties.editor && (properties.editor = editor), useLayoutEffect(() => {
|
20
|
+
if (el)
|
21
|
+
for (let [name, value] of Object.entries(properties))
|
22
|
+
value !== void 0 && (el[name] = value);
|
23
|
+
}, [el, ...propertyNames.map((name) => properties[name])]), createElement(tagName, {
|
24
|
+
...attributes,
|
25
|
+
ref: mergeRefs([ref, setEl])
|
26
|
+
});
|
27
|
+
});
|
28
|
+
return Component.displayName = displayName, Component;
|
29
|
+
}
|
30
|
+
|
31
|
+
export {
|
32
|
+
createComponent
|
33
|
+
};
|
package/dist/prosekit-react.js
CHANGED
@@ -15,7 +15,7 @@ import {
|
|
15
15
|
defineNodeViewFactory
|
16
16
|
} from "@prosekit/core";
|
17
17
|
function defineReactNodeView(options) {
|
18
|
-
|
18
|
+
let { name, ...userOptions } = options;
|
19
19
|
return defineNodeViewFactory({
|
20
20
|
group: "react",
|
21
21
|
name,
|
@@ -36,13 +36,11 @@ import "@prosekit/core";
|
|
36
36
|
import { EditorNotFoundError } from "@prosekit/core";
|
37
37
|
import { useEffect } from "react";
|
38
38
|
function useEditorExtension(editor, extension) {
|
39
|
-
if (!editor)
|
39
|
+
if (!editor)
|
40
40
|
throw new EditorNotFoundError();
|
41
|
-
}
|
42
41
|
useEffect(() => {
|
43
|
-
if (extension)
|
42
|
+
if (extension)
|
44
43
|
return editor.use(extension);
|
45
|
-
}
|
46
44
|
}, [editor, extension]);
|
47
45
|
}
|
48
46
|
|
@@ -50,14 +48,12 @@ function useEditorExtension(editor, extension) {
|
|
50
48
|
import { withPriority } from "@prosekit/core";
|
51
49
|
import { useMemo } from "react";
|
52
50
|
function usePriorityExtension(extension, priority) {
|
53
|
-
return useMemo(() =>
|
54
|
-
return extension && priority ? withPriority(extension, priority) : extension;
|
55
|
-
}, [extension, priority]);
|
51
|
+
return useMemo(() => extension && priority ? withPriority(extension, priority) : extension, [extension, priority]);
|
56
52
|
}
|
57
53
|
|
58
54
|
// src/hooks/use-extension.ts
|
59
55
|
function useExtension(extension, options) {
|
60
|
-
|
56
|
+
let editorContext = useEditorContext();
|
61
57
|
useEditorExtension(
|
62
58
|
(options == null ? void 0 : options.editor) || editorContext,
|
63
59
|
usePriorityExtension(extension, options == null ? void 0 : options.priority)
|
@@ -69,22 +65,19 @@ import { ProseKitError } from "@prosekit/core";
|
|
69
65
|
import { createContext, useContext } from "react";
|
70
66
|
var createNodeViewContext = createContext(null);
|
71
67
|
function useNodeViewFactory() {
|
72
|
-
|
73
|
-
if (!nodeViewFactory)
|
68
|
+
let nodeViewFactory = useContext(createNodeViewContext);
|
69
|
+
if (!nodeViewFactory)
|
74
70
|
throw new ProseKitError("Cannot find node view factory context.");
|
75
|
-
}
|
76
71
|
return nodeViewFactory;
|
77
72
|
}
|
78
73
|
|
79
74
|
// src/views/react-views-consumer.ts
|
80
75
|
var ReactViewsConsumer = () => {
|
81
|
-
|
82
|
-
const extension = useMemo2(
|
76
|
+
let nodeViewFactory = useNodeViewFactory(), extension = useMemo2(
|
83
77
|
() => defineReactNodeViewFactory(nodeViewFactory),
|
84
78
|
[nodeViewFactory]
|
85
79
|
);
|
86
|
-
useExtension(extension);
|
87
|
-
return null;
|
80
|
+
return useExtension(extension), null;
|
88
81
|
};
|
89
82
|
|
90
83
|
// src/views/react-views-provider.ts
|
@@ -104,8 +97,7 @@ var ReactNodeView = class extends CoreNodeView {
|
|
104
97
|
this.key = _getId();
|
105
98
|
this.context = {
|
106
99
|
contentRef: (element) => {
|
107
|
-
|
108
|
-
element.appendChild(this.contentDOM);
|
100
|
+
element && this.contentDOM && element.firstChild !== this.contentDOM && element.appendChild(this.contentDOM);
|
109
101
|
},
|
110
102
|
view: this.view,
|
111
103
|
getPos: this.getPos,
|
@@ -124,7 +116,7 @@ var ReactNodeView = class extends CoreNodeView {
|
|
124
116
|
});
|
125
117
|
};
|
126
118
|
this.render = () => {
|
127
|
-
|
119
|
+
let UserComponent = this.component;
|
128
120
|
return createPortal(
|
129
121
|
createElement(UserComponent, this.context),
|
130
122
|
this.dom,
|
@@ -136,9 +128,9 @@ var ReactNodeView = class extends CoreNodeView {
|
|
136
128
|
|
137
129
|
// src/views/node-view/use-react-node-view-creator.ts
|
138
130
|
function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
|
139
|
-
|
131
|
+
return useCallback(
|
140
132
|
(options) => (node, view, getPos, decorations, innerDecorations) => {
|
141
|
-
|
133
|
+
let nodeView = new ReactNodeView({
|
142
134
|
node,
|
143
135
|
view,
|
144
136
|
getPos,
|
@@ -148,74 +140,56 @@ function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
|
|
148
140
|
...options,
|
149
141
|
onUpdate() {
|
150
142
|
var _a;
|
151
|
-
(_a = options.onUpdate) == null
|
152
|
-
renderReactRenderer(nodeView);
|
143
|
+
(_a = options.onUpdate) == null || _a.call(options), renderReactRenderer(nodeView);
|
153
144
|
},
|
154
145
|
selectNode() {
|
155
146
|
var _a;
|
156
|
-
(_a = options.selectNode) == null
|
157
|
-
renderReactRenderer(nodeView);
|
147
|
+
(_a = options.selectNode) == null || _a.call(options), renderReactRenderer(nodeView);
|
158
148
|
},
|
159
149
|
deselectNode() {
|
160
150
|
var _a;
|
161
|
-
(_a = options.deselectNode) == null
|
162
|
-
renderReactRenderer(nodeView);
|
151
|
+
(_a = options.deselectNode) == null || _a.call(options), renderReactRenderer(nodeView);
|
163
152
|
},
|
164
153
|
destroy() {
|
165
154
|
var _a;
|
166
|
-
(_a = options.destroy) == null
|
167
|
-
removeReactRenderer(nodeView);
|
155
|
+
(_a = options.destroy) == null || _a.call(options), removeReactRenderer(nodeView);
|
168
156
|
}
|
169
157
|
}
|
170
158
|
});
|
171
|
-
renderReactRenderer(nodeView,
|
172
|
-
return nodeView;
|
159
|
+
return renderReactRenderer(nodeView, !1), nodeView;
|
173
160
|
},
|
174
161
|
[removeReactRenderer, renderReactRenderer]
|
175
162
|
);
|
176
|
-
return createReactNodeView;
|
177
163
|
}
|
178
164
|
|
179
165
|
// src/views/react-renderer.ts
|
180
166
|
import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
|
181
167
|
import { flushSync } from "react-dom";
|
182
168
|
function useReactRenderer() {
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
const maybeFlushSync = useCallback2((fn) => {
|
194
|
-
if (mountedRef.current)
|
195
|
-
flushSync(fn);
|
196
|
-
else
|
197
|
-
fn();
|
198
|
-
}, []);
|
199
|
-
const renderReactRenderer = useCallback2(
|
200
|
-
(nodeView, update = true) => {
|
169
|
+
let [portals, setPortals] = useState({}), mountedRef = useRef(!1);
|
170
|
+
useEffect2(() => (requestAnimationFrame(() => {
|
171
|
+
mountedRef.current = !0;
|
172
|
+
}), () => {
|
173
|
+
mountedRef.current = !1;
|
174
|
+
}), []);
|
175
|
+
let maybeFlushSync = useCallback2((fn) => {
|
176
|
+
mountedRef.current ? flushSync(fn) : fn();
|
177
|
+
}, []), renderReactRenderer = useCallback2(
|
178
|
+
(nodeView, update = !0) => {
|
201
179
|
maybeFlushSync(() => {
|
202
|
-
|
203
|
-
nodeView.updateContext();
|
204
|
-
setPortals((prev) => ({
|
180
|
+
update && nodeView.updateContext(), setPortals((prev) => ({
|
205
181
|
...prev,
|
206
182
|
[nodeView.key]: nodeView.render()
|
207
183
|
}));
|
208
184
|
});
|
209
185
|
},
|
210
186
|
[maybeFlushSync]
|
211
|
-
)
|
212
|
-
const removeReactRenderer = useCallback2(
|
187
|
+
), removeReactRenderer = useCallback2(
|
213
188
|
(nodeView) => {
|
214
189
|
maybeFlushSync(() => {
|
215
190
|
setPortals((prev) => {
|
216
|
-
|
217
|
-
delete next[nodeView.key];
|
218
|
-
return next;
|
191
|
+
let next = { ...prev };
|
192
|
+
return delete next[nodeView.key], next;
|
219
193
|
});
|
220
194
|
});
|
221
195
|
},
|
@@ -232,12 +206,10 @@ function useReactRenderer() {
|
|
232
206
|
var ReactViewsProvider = ({
|
233
207
|
children
|
234
208
|
}) => {
|
235
|
-
|
236
|
-
const createReactNodeView = useReactNodeViewCreator(
|
209
|
+
let { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer(), createReactNodeView = useReactNodeViewCreator(
|
237
210
|
renderReactRenderer,
|
238
211
|
removeReactRenderer
|
239
|
-
);
|
240
|
-
const memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
|
212
|
+
), memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
|
241
213
|
return createElement2(
|
242
214
|
createNodeViewContext.Provider,
|
243
215
|
{ value: createReactNodeView },
|
@@ -248,7 +220,7 @@ var ReactViewsProvider = ({
|
|
248
220
|
|
249
221
|
// src/components/prosekit.ts
|
250
222
|
var ProseKit = (props) => {
|
251
|
-
|
223
|
+
let { editor, children } = props;
|
252
224
|
return createElement3(
|
253
225
|
ReactViewsProvider,
|
254
226
|
null,
|
@@ -271,27 +243,24 @@ import {
|
|
271
243
|
import { useEffect as useEffect3, useReducer } from "react";
|
272
244
|
function useEditor(options) {
|
273
245
|
var _a;
|
274
|
-
|
275
|
-
|
276
|
-
if (!editor) {
|
246
|
+
let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
|
247
|
+
if (!editor)
|
277
248
|
throw new ProseKitError2(
|
278
249
|
"useEditor must be used within the ProseKit component"
|
279
250
|
);
|
280
|
-
|
281
|
-
|
282
|
-
useEffect3(() => {
|
251
|
+
let forceUpdate = useForceUpdate();
|
252
|
+
return useEffect3(() => {
|
283
253
|
if (update) {
|
284
|
-
|
254
|
+
let extension = union([
|
285
255
|
defineMountHandler(forceUpdate),
|
286
256
|
defineUpdateHandler(forceUpdate)
|
287
257
|
]);
|
288
258
|
return editor.use(extension);
|
289
259
|
}
|
290
|
-
}, [editor, update, forceUpdate]);
|
291
|
-
return editor;
|
260
|
+
}, [editor, update, forceUpdate]), editor;
|
292
261
|
}
|
293
262
|
function useForceUpdate() {
|
294
|
-
|
263
|
+
let [, dispatch] = useReducer((x) => x + 1, 0);
|
295
264
|
return dispatch;
|
296
265
|
}
|
297
266
|
|
@@ -299,7 +268,7 @@ function useForceUpdate() {
|
|
299
268
|
import { defineKeymap } from "@prosekit/core";
|
300
269
|
import { useMemo as useMemo4 } from "react";
|
301
270
|
function useKeymap(keymap, options) {
|
302
|
-
|
271
|
+
let extension = useMemo4(() => defineKeymap(keymap), [keymap]);
|
303
272
|
return useExtension(extension, options);
|
304
273
|
}
|
305
274
|
|
@@ -307,7 +276,7 @@ function useKeymap(keymap, options) {
|
|
307
276
|
import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
|
308
277
|
import { useMemo as useMemo5 } from "react";
|
309
278
|
function useStateUpdate(handler, options) {
|
310
|
-
|
279
|
+
let extension = useMemo5(
|
311
280
|
() => defineUpdateHandler2((view) => handler(view.state)),
|
312
281
|
[handler]
|
313
282
|
);
|
@@ -318,7 +287,7 @@ function useStateUpdate(handler, options) {
|
|
318
287
|
import { defineDocChangeHandler } from "@prosekit/core";
|
319
288
|
import { useMemo as useMemo6 } from "react";
|
320
289
|
function useDocChange(handler, options) {
|
321
|
-
|
290
|
+
let extension = useMemo6(
|
322
291
|
() => defineDocChangeHandler((view) => handler(view.state.doc)),
|
323
292
|
[handler]
|
324
293
|
);
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@prosekit/react",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.3.
|
4
|
+
"version": "0.3.7",
|
5
5
|
"private": false,
|
6
6
|
"author": {
|
7
7
|
"name": "ocavue",
|
@@ -65,11 +65,11 @@
|
|
65
65
|
"dist"
|
66
66
|
],
|
67
67
|
"dependencies": {
|
68
|
-
"@prosekit/core": "^0.5.0",
|
69
|
-
"@prosekit/pm": "^0.1.3",
|
70
|
-
"@prosekit/web": "^0.1.6",
|
71
68
|
"@prosemirror-adapter/core": "^0.2.6",
|
72
|
-
"react-merge-refs": "^2.1.1"
|
69
|
+
"react-merge-refs": "^2.1.1",
|
70
|
+
"@prosekit/core": "^0.5.5",
|
71
|
+
"@prosekit/web": "^0.1.10",
|
72
|
+
"@prosekit/pm": "^0.1.5"
|
73
73
|
},
|
74
74
|
"peerDependencies": {
|
75
75
|
"react": ">= 18.2.0",
|
@@ -84,14 +84,14 @@
|
|
84
84
|
}
|
85
85
|
},
|
86
86
|
"devDependencies": {
|
87
|
-
"@
|
88
|
-
"@types/react": "^18.3.1",
|
87
|
+
"@types/react": "^18.3.3",
|
89
88
|
"@types/react-dom": "^18.3.0",
|
90
89
|
"react": "^18.3.1",
|
91
90
|
"react-dom": "^18.3.1",
|
92
|
-
"tsup": "^8.0
|
91
|
+
"tsup": "^8.1.0",
|
93
92
|
"typescript": "^5.4.5",
|
94
|
-
"vitest": "^1.6.0"
|
93
|
+
"vitest": "^1.6.0",
|
94
|
+
"@prosekit/dev": "0.0.0"
|
95
95
|
},
|
96
96
|
"scripts": {
|
97
97
|
"build:tsup": "tsup",
|
package/dist/chunk-UG3RPLME.js
DELETED
@@ -1,51 +0,0 @@
|
|
1
|
-
import {
|
2
|
-
useEditorContext
|
3
|
-
} from "./chunk-BH56NR2Q.js";
|
4
|
-
|
5
|
-
// src/components/create-component.ts
|
6
|
-
import {
|
7
|
-
createElement,
|
8
|
-
forwardRef,
|
9
|
-
useLayoutEffect,
|
10
|
-
useState
|
11
|
-
} from "react";
|
12
|
-
import { mergeRefs } from "react-merge-refs";
|
13
|
-
function createComponent(tagName, displayName, defaultProps) {
|
14
|
-
const propertyNames = Object.keys(defaultProps);
|
15
|
-
const hasEditor = Object.hasOwn(defaultProps, "editor");
|
16
|
-
const Component = forwardRef((props, ref) => {
|
17
|
-
const [el, setEl] = useState(null);
|
18
|
-
const properties = {};
|
19
|
-
const attributes = {};
|
20
|
-
for (const [name, value] of Object.entries(props)) {
|
21
|
-
if (propertyNames.includes(name)) {
|
22
|
-
properties[name] = value;
|
23
|
-
} else {
|
24
|
-
attributes[name === "className" ? "class" : name] = value;
|
25
|
-
}
|
26
|
-
}
|
27
|
-
const editor = useEditorContext();
|
28
|
-
if (hasEditor && editor && !properties["editor"]) {
|
29
|
-
properties["editor"] = editor;
|
30
|
-
}
|
31
|
-
useLayoutEffect(() => {
|
32
|
-
if (el) {
|
33
|
-
for (const [name, value] of Object.entries(properties)) {
|
34
|
-
if (value !== void 0) {
|
35
|
-
el[name] = value;
|
36
|
-
}
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}, [el, ...propertyNames.map((name) => properties[name])]);
|
40
|
-
return createElement(tagName, {
|
41
|
-
...attributes,
|
42
|
-
ref: mergeRefs([ref, setEl])
|
43
|
-
});
|
44
|
-
});
|
45
|
-
Component.displayName = displayName;
|
46
|
-
return Component;
|
47
|
-
}
|
48
|
-
|
49
|
-
export {
|
50
|
-
createComponent
|
51
|
-
};
|