@prosekit/react 0.4.11 → 0.4.13
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/create-component-DATBjvTG.js +67 -0
- package/dist/create-props-B_K0wKYy.d.ts +6 -0
- package/dist/editor-context-Cci4uqN_.js +17 -0
- package/dist/prosekit-react-autocomplete.d.ts +40 -8
- package/dist/prosekit-react-autocomplete.js +17 -54
- package/dist/prosekit-react-block-handle.d.ts +32 -6
- package/dist/prosekit-react-block-handle.js +14 -42
- package/dist/prosekit-react-inline-popover.d.ts +16 -2
- package/dist/prosekit-react-inline-popover.js +8 -18
- package/dist/prosekit-react-popover.d.ts +32 -6
- package/dist/prosekit-react-popover.js +14 -42
- package/dist/prosekit-react-resizable.d.ts +24 -4
- package/dist/prosekit-react-resizable.js +11 -30
- package/dist/prosekit-react-table-handle.d.ts +64 -14
- package/dist/prosekit-react-table-handle.js +26 -90
- package/dist/prosekit-react-tooltip.d.ts +32 -6
- package/dist/prosekit-react-tooltip.js +14 -42
- package/dist/prosekit-react.d.ts +151 -17
- package/dist/prosekit-react.js +152 -195
- package/package.json +31 -22
- package/dist/_tsup-dts-rollup.d.ts +0 -574
- package/dist/chunk-BV2MZRRU.js +0 -15
- package/dist/chunk-VASCWPBI.js +0 -98
package/dist/prosekit-react.js
CHANGED
@@ -1,236 +1,193 @@
|
|
1
|
-
import {
|
2
|
-
|
3
|
-
|
4
|
-
} from "
|
1
|
+
import { EditorContextProvider, useEditorContext } from "./editor-context-Cci4uqN_.js";
|
2
|
+
import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/react";
|
3
|
+
import { createElement, useEffect, useMemo, useReducer } from "react";
|
4
|
+
import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
} from "react";
|
11
|
-
|
12
|
-
// src/extensions/react-mark-view.ts
|
13
|
-
import {
|
14
|
-
defineMarkViewComponent,
|
15
|
-
defineMarkViewFactory
|
16
|
-
} from "@prosekit/core";
|
17
|
-
import {
|
18
|
-
useMarkViewContext,
|
19
|
-
useMarkViewFactory
|
20
|
-
} from "@prosemirror-adapter/react";
|
21
|
-
import {
|
22
|
-
createElement,
|
23
|
-
useMemo as useMemo2
|
24
|
-
} from "react";
|
25
|
-
|
26
|
-
// src/hooks/use-editor-extension.ts
|
27
|
-
import {
|
28
|
-
EditorNotFoundError
|
29
|
-
} from "@prosekit/core";
|
30
|
-
import { useEffect } from "react";
|
6
|
+
//#region src/hooks/use-editor-extension.ts
|
7
|
+
/**
|
8
|
+
* @internal
|
9
|
+
*/
|
31
10
|
function useEditorExtension(editor, extension) {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
if (extension) {
|
37
|
-
return editor.use(extension);
|
38
|
-
}
|
39
|
-
}, [editor, extension]);
|
11
|
+
if (!editor) throw new EditorNotFoundError();
|
12
|
+
useEffect(() => {
|
13
|
+
if (extension) return editor.use(extension);
|
14
|
+
}, [editor, extension]);
|
40
15
|
}
|
41
16
|
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
17
|
+
//#endregion
|
18
|
+
//#region src/hooks/use-priority-extension.ts
|
19
|
+
/**
|
20
|
+
* @internal
|
21
|
+
*/
|
47
22
|
function usePriorityExtension(extension, priority) {
|
48
|
-
|
49
|
-
|
50
|
-
|
23
|
+
return useMemo(() => {
|
24
|
+
return extension && priority ? withPriority(extension, priority) : extension;
|
25
|
+
}, [extension, priority]);
|
51
26
|
}
|
52
27
|
|
53
|
-
|
28
|
+
//#endregion
|
29
|
+
//#region src/hooks/use-extension.ts
|
30
|
+
/**
|
31
|
+
* Add an extension to the editor.
|
32
|
+
*/
|
54
33
|
function useExtension(extension, options) {
|
55
|
-
|
56
|
-
|
57
|
-
options?.editor || editorContext,
|
58
|
-
usePriorityExtension(extension, options?.priority)
|
59
|
-
);
|
34
|
+
const editorContext = useEditorContext();
|
35
|
+
useEditorExtension(options?.editor || editorContext, usePriorityExtension(extension, options?.priority));
|
60
36
|
}
|
61
37
|
|
62
|
-
|
38
|
+
//#endregion
|
39
|
+
//#region src/extensions/react-mark-view.ts
|
63
40
|
function withMarkViewProps(component) {
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
41
|
+
return function MarkViewPropsWrapper() {
|
42
|
+
const props = useMarkViewContext();
|
43
|
+
return createElement(component, props);
|
44
|
+
};
|
68
45
|
}
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
46
|
+
/**
|
47
|
+
* @internal
|
48
|
+
*/
|
49
|
+
const ReactMarkViewConsumer = () => {
|
50
|
+
const markViewFactory = useMarkViewFactory();
|
51
|
+
const extension = useMemo(() => defineReactMarkViewFactory(markViewFactory), [markViewFactory]);
|
52
|
+
useExtension(extension);
|
53
|
+
return null;
|
77
54
|
};
|
55
|
+
/**
|
56
|
+
* Defines a mark view using a React component.
|
57
|
+
*
|
58
|
+
* @public
|
59
|
+
*/
|
78
60
|
function defineReactMarkView(options) {
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
61
|
+
const { name, component,...userOptions } = options;
|
62
|
+
const args = {
|
63
|
+
...userOptions,
|
64
|
+
component: withMarkViewProps(component)
|
65
|
+
};
|
66
|
+
return defineMarkViewComponent({
|
67
|
+
group: "react",
|
68
|
+
name,
|
69
|
+
args
|
70
|
+
});
|
89
71
|
}
|
90
72
|
function defineReactMarkViewFactory(factory) {
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
73
|
+
return defineMarkViewFactory({
|
74
|
+
group: "react",
|
75
|
+
factory
|
76
|
+
});
|
95
77
|
}
|
96
78
|
|
97
|
-
|
98
|
-
|
99
|
-
defineNodeViewComponent,
|
100
|
-
defineNodeViewFactory
|
101
|
-
} from "@prosekit/core";
|
102
|
-
import {
|
103
|
-
useNodeViewContext,
|
104
|
-
useNodeViewFactory
|
105
|
-
} from "@prosemirror-adapter/react";
|
106
|
-
import {
|
107
|
-
createElement as createElement2,
|
108
|
-
useMemo as useMemo3
|
109
|
-
} from "react";
|
79
|
+
//#endregion
|
80
|
+
//#region src/extensions/react-node-view.ts
|
110
81
|
function withNodeViewProps(component) {
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
82
|
+
return function NodeViewPropsWrapper() {
|
83
|
+
const props = useNodeViewContext();
|
84
|
+
return createElement(component, props);
|
85
|
+
};
|
115
86
|
}
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
87
|
+
/**
|
88
|
+
* @internal
|
89
|
+
*/
|
90
|
+
const ReactNodeViewConsumer = () => {
|
91
|
+
const nodeViewFactory = useNodeViewFactory();
|
92
|
+
const extension = useMemo(() => defineReactNodeViewFactory(nodeViewFactory), [nodeViewFactory]);
|
93
|
+
useExtension(extension);
|
94
|
+
return null;
|
124
95
|
};
|
96
|
+
/**
|
97
|
+
* Defines a node view using a React component.
|
98
|
+
*
|
99
|
+
* @public
|
100
|
+
*/
|
125
101
|
function defineReactNodeView(options) {
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
102
|
+
const { name, component,...userOptions } = options;
|
103
|
+
const args = {
|
104
|
+
...userOptions,
|
105
|
+
component: withNodeViewProps(component)
|
106
|
+
};
|
107
|
+
return defineNodeViewComponent({
|
108
|
+
group: "react",
|
109
|
+
name,
|
110
|
+
args
|
111
|
+
});
|
136
112
|
}
|
137
113
|
function defineReactNodeViewFactory(factory) {
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
114
|
+
return defineNodeViewFactory({
|
115
|
+
group: "react",
|
116
|
+
factory
|
117
|
+
});
|
142
118
|
}
|
143
119
|
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
createElement3(ReactMarkViewConsumer),
|
155
|
-
children
|
156
|
-
)
|
157
|
-
);
|
120
|
+
//#endregion
|
121
|
+
//#region src/components/prosekit.ts
|
122
|
+
/**
|
123
|
+
* The root component for a ProseKit editor.
|
124
|
+
*
|
125
|
+
* @public
|
126
|
+
*/
|
127
|
+
const ProseKit = (props) => {
|
128
|
+
const { editor, children } = props;
|
129
|
+
return createElement(ProsemirrorAdapterProvider, null, createElement(EditorContextProvider, { value: editor }, createElement(ReactNodeViewConsumer), createElement(ReactMarkViewConsumer), children));
|
158
130
|
};
|
159
131
|
|
160
|
-
|
161
|
-
|
162
|
-
|
132
|
+
//#endregion
|
133
|
+
//#region src/hooks/use-doc-change.ts
|
134
|
+
/**
|
135
|
+
* Calls the given handler whenever the editor document changes.
|
136
|
+
*
|
137
|
+
* @public
|
138
|
+
*/
|
163
139
|
function useDocChange(handler, options) {
|
164
|
-
|
165
|
-
|
166
|
-
[handler]
|
167
|
-
);
|
168
|
-
return useExtension(extension, options);
|
140
|
+
const extension = useMemo(() => defineDocChangeHandler((view) => handler(view.state.doc)), [handler]);
|
141
|
+
useExtension(extension, options);
|
169
142
|
}
|
170
143
|
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
import {
|
179
|
-
useEffect as useEffect2,
|
180
|
-
useReducer
|
181
|
-
} from "react";
|
144
|
+
//#endregion
|
145
|
+
//#region src/hooks/use-editor.ts
|
146
|
+
/**
|
147
|
+
* Retrieves the editor instance from the nearest ProseKit component.
|
148
|
+
*
|
149
|
+
* @public
|
150
|
+
*/
|
182
151
|
function useEditor(options) {
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
}
|
199
|
-
}, [editor, update, forceUpdate]);
|
200
|
-
return editor;
|
152
|
+
const update = options?.update ?? false;
|
153
|
+
const editor = useEditorContext();
|
154
|
+
if (!editor) throw new ProseKitError("useEditor must be used within the ProseKit component");
|
155
|
+
const forceUpdate = useForceUpdate();
|
156
|
+
useEffect(() => {
|
157
|
+
if (update) {
|
158
|
+
const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
|
159
|
+
return editor.use(extension);
|
160
|
+
}
|
161
|
+
}, [
|
162
|
+
editor,
|
163
|
+
update,
|
164
|
+
forceUpdate
|
165
|
+
]);
|
166
|
+
return editor;
|
201
167
|
}
|
202
168
|
function useForceUpdate() {
|
203
|
-
|
204
|
-
|
169
|
+
const [, dispatch] = useReducer((x) => x + 1, 0);
|
170
|
+
return dispatch;
|
205
171
|
}
|
206
172
|
|
207
|
-
|
208
|
-
|
209
|
-
defineKeymap
|
210
|
-
} from "@prosekit/core";
|
211
|
-
import { useMemo as useMemo5 } from "react";
|
173
|
+
//#endregion
|
174
|
+
//#region src/hooks/use-keymap.ts
|
212
175
|
function useKeymap(keymap, options) {
|
213
|
-
|
214
|
-
|
176
|
+
const extension = useMemo(() => defineKeymap(keymap), [keymap]);
|
177
|
+
useExtension(extension, options);
|
215
178
|
}
|
216
179
|
|
217
|
-
|
218
|
-
|
219
|
-
|
180
|
+
//#endregion
|
181
|
+
//#region src/hooks/use-state-update.ts
|
182
|
+
/**
|
183
|
+
* Calls the given handler whenever the editor state changes.
|
184
|
+
*
|
185
|
+
* @public
|
186
|
+
*/
|
220
187
|
function useStateUpdate(handler, options) {
|
221
|
-
|
222
|
-
|
223
|
-
[handler]
|
224
|
-
);
|
225
|
-
return useExtension(extension, options);
|
188
|
+
const extension = useMemo(() => defineUpdateHandler((view) => handler(view.state)), [handler]);
|
189
|
+
useExtension(extension, options);
|
226
190
|
}
|
227
|
-
|
228
|
-
|
229
|
-
|
230
|
-
defineReactNodeView,
|
231
|
-
useDocChange,
|
232
|
-
useEditor,
|
233
|
-
useExtension,
|
234
|
-
useKeymap,
|
235
|
-
useStateUpdate
|
236
|
-
};
|
191
|
+
|
192
|
+
//#endregion
|
193
|
+
export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
|
package/package.json
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
{
|
2
2
|
"name": "@prosekit/react",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.4.
|
4
|
+
"version": "0.4.13",
|
5
5
|
"private": false,
|
6
|
+
"description": "React components and utilities for ProseKit",
|
6
7
|
"author": {
|
7
8
|
"name": "ocavue",
|
8
9
|
"email": "ocavue@gmail.com"
|
@@ -27,42 +28,34 @@
|
|
27
28
|
"exports": {
|
28
29
|
".": {
|
29
30
|
"types": "./dist/prosekit-react.d.ts",
|
30
|
-
"import": "./dist/prosekit-react.js",
|
31
31
|
"default": "./dist/prosekit-react.js"
|
32
32
|
},
|
33
33
|
"./autocomplete": {
|
34
34
|
"types": "./dist/prosekit-react-autocomplete.d.ts",
|
35
|
-
"import": "./dist/prosekit-react-autocomplete.js",
|
36
35
|
"default": "./dist/prosekit-react-autocomplete.js"
|
37
36
|
},
|
38
37
|
"./block-handle": {
|
39
38
|
"types": "./dist/prosekit-react-block-handle.d.ts",
|
40
|
-
"import": "./dist/prosekit-react-block-handle.js",
|
41
39
|
"default": "./dist/prosekit-react-block-handle.js"
|
42
40
|
},
|
43
41
|
"./inline-popover": {
|
44
42
|
"types": "./dist/prosekit-react-inline-popover.d.ts",
|
45
|
-
"import": "./dist/prosekit-react-inline-popover.js",
|
46
43
|
"default": "./dist/prosekit-react-inline-popover.js"
|
47
44
|
},
|
48
45
|
"./popover": {
|
49
46
|
"types": "./dist/prosekit-react-popover.d.ts",
|
50
|
-
"import": "./dist/prosekit-react-popover.js",
|
51
47
|
"default": "./dist/prosekit-react-popover.js"
|
52
48
|
},
|
53
49
|
"./resizable": {
|
54
50
|
"types": "./dist/prosekit-react-resizable.d.ts",
|
55
|
-
"import": "./dist/prosekit-react-resizable.js",
|
56
51
|
"default": "./dist/prosekit-react-resizable.js"
|
57
52
|
},
|
58
53
|
"./table-handle": {
|
59
54
|
"types": "./dist/prosekit-react-table-handle.d.ts",
|
60
|
-
"import": "./dist/prosekit-react-table-handle.js",
|
61
55
|
"default": "./dist/prosekit-react-table-handle.js"
|
62
56
|
},
|
63
57
|
"./tooltip": {
|
64
58
|
"types": "./dist/prosekit-react-tooltip.d.ts",
|
65
|
-
"import": "./dist/prosekit-react-tooltip.js",
|
66
59
|
"default": "./dist/prosekit-react-tooltip.js"
|
67
60
|
}
|
68
61
|
},
|
@@ -72,10 +65,10 @@
|
|
72
65
|
"dependencies": {
|
73
66
|
"@prosemirror-adapter/core": "^0.4.0",
|
74
67
|
"@prosemirror-adapter/react": "^0.4.1",
|
75
|
-
"react-merge-refs": "^
|
76
|
-
"@prosekit/core": "^0.8.
|
77
|
-
"@prosekit/pm": "^0.1.
|
78
|
-
"@prosekit/web": "^0.5.
|
68
|
+
"react-merge-refs": "^3.0.1",
|
69
|
+
"@prosekit/core": "^0.8.1",
|
70
|
+
"@prosekit/pm": "^0.1.10",
|
71
|
+
"@prosekit/web": "^0.5.8"
|
79
72
|
},
|
80
73
|
"peerDependencies": {
|
81
74
|
"react": ">= 18.2.0",
|
@@ -90,18 +83,34 @@
|
|
90
83
|
}
|
91
84
|
},
|
92
85
|
"devDependencies": {
|
93
|
-
"@types/react": "^19.
|
94
|
-
"@types/react-dom": "^19.
|
95
|
-
"react": "^19.
|
96
|
-
"react-dom": "^19.
|
97
|
-
"
|
98
|
-
"typescript": "~5.
|
99
|
-
"vitest": "^3.
|
100
|
-
"@prosekit/
|
86
|
+
"@types/react": "^19.1.3",
|
87
|
+
"@types/react-dom": "^19.1.3",
|
88
|
+
"react": "^19.1.0",
|
89
|
+
"react-dom": "^19.1.0",
|
90
|
+
"tsdown": "^0.11.1",
|
91
|
+
"typescript": "~5.8.3",
|
92
|
+
"vitest": "^3.1.3",
|
93
|
+
"@prosekit/config-tsdown": "0.0.0",
|
94
|
+
"@prosekit/config-vitest": "0.0.0"
|
95
|
+
},
|
96
|
+
"publishConfig": {
|
97
|
+
"dev": {}
|
98
|
+
},
|
99
|
+
"dev": {
|
100
|
+
"entry": {
|
101
|
+
"prosekit-react": "./src/index.ts",
|
102
|
+
"prosekit-react-autocomplete": "./src/components/autocomplete/index.gen.ts",
|
103
|
+
"prosekit-react-block-handle": "./src/components/block-handle/index.gen.ts",
|
104
|
+
"prosekit-react-inline-popover": "./src/components/inline-popover/index.gen.ts",
|
105
|
+
"prosekit-react-popover": "./src/components/popover/index.gen.ts",
|
106
|
+
"prosekit-react-resizable": "./src/components/resizable/index.gen.ts",
|
107
|
+
"prosekit-react-table-handle": "./src/components/table-handle/index.gen.ts",
|
108
|
+
"prosekit-react-tooltip": "./src/components/tooltip/index.gen.ts"
|
109
|
+
}
|
101
110
|
},
|
102
111
|
"scripts": {
|
103
112
|
"build:tsc": "tsc -b tsconfig.json",
|
104
|
-
"build:
|
113
|
+
"build:tsdown": "tsdown"
|
105
114
|
},
|
106
115
|
"types": "./dist/prosekit-react.d.ts",
|
107
116
|
"typesVersions": {
|