@prosekit/react 0.3.13 → 0.3.15
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/chunk-UG3RPLME.js +51 -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 +30 -20
- package/package.json +4 -4
- package/dist/chunk-JQQDRLKV.js +0 -33
@@ -0,0 +1,51 @@
|
|
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
|
+
};
|
package/dist/prosekit-react.js
CHANGED
@@ -26,11 +26,13 @@ import "@prosekit/core";
|
|
26
26
|
import { EditorNotFoundError } from "@prosekit/core";
|
27
27
|
import { useEffect } from "react";
|
28
28
|
function useEditorExtension(editor, extension) {
|
29
|
-
if (!editor)
|
29
|
+
if (!editor) {
|
30
30
|
throw new EditorNotFoundError();
|
31
|
+
}
|
31
32
|
useEffect(() => {
|
32
|
-
if (extension)
|
33
|
+
if (extension) {
|
33
34
|
return editor.use(extension);
|
35
|
+
}
|
34
36
|
}, [editor, extension]);
|
35
37
|
}
|
36
38
|
|
@@ -38,12 +40,14 @@ function useEditorExtension(editor, extension) {
|
|
38
40
|
import { withPriority } from "@prosekit/core";
|
39
41
|
import { useMemo } from "react";
|
40
42
|
function usePriorityExtension(extension, priority) {
|
41
|
-
return useMemo(() =>
|
43
|
+
return useMemo(() => {
|
44
|
+
return extension && priority ? withPriority(extension, priority) : extension;
|
45
|
+
}, [extension, priority]);
|
42
46
|
}
|
43
47
|
|
44
48
|
// src/hooks/use-extension.ts
|
45
49
|
function useExtension(extension, options) {
|
46
|
-
|
50
|
+
const editorContext = useEditorContext();
|
47
51
|
useEditorExtension(
|
48
52
|
(options == null ? void 0 : options.editor) || editorContext,
|
49
53
|
usePriorityExtension(extension, options == null ? void 0 : options.priority)
|
@@ -52,20 +56,23 @@ function useExtension(extension, options) {
|
|
52
56
|
|
53
57
|
// src/extensions/react-node-view.ts
|
54
58
|
function withNodeViewProps(component) {
|
55
|
-
return function() {
|
56
|
-
|
59
|
+
return function NodeViewPropsWrapper() {
|
60
|
+
const props = useNodeViewContext();
|
57
61
|
return createElement(component, props);
|
58
62
|
};
|
59
63
|
}
|
60
64
|
var ReactViewsConsumer = () => {
|
61
|
-
|
65
|
+
const nodeViewFactory = useNodeViewFactory();
|
66
|
+
const extension = useMemo2(
|
62
67
|
() => defineReactNodeViewFactory(nodeViewFactory),
|
63
68
|
[nodeViewFactory]
|
64
69
|
);
|
65
|
-
|
70
|
+
useExtension(extension);
|
71
|
+
return null;
|
66
72
|
};
|
67
73
|
function defineReactNodeView(options) {
|
68
|
-
|
74
|
+
const { name, component, ...userOptions } = options;
|
75
|
+
const args = {
|
69
76
|
...userOptions,
|
70
77
|
component: withNodeViewProps(component)
|
71
78
|
};
|
@@ -84,7 +91,7 @@ function defineReactNodeViewFactory(factory) {
|
|
84
91
|
|
85
92
|
// src/components/prosekit.ts
|
86
93
|
var ProseKit = (props) => {
|
87
|
-
|
94
|
+
const { editor, children } = props;
|
88
95
|
return createElement2(
|
89
96
|
ProsemirrorAdapterProvider,
|
90
97
|
null,
|
@@ -101,7 +108,7 @@ var ProseKit = (props) => {
|
|
101
108
|
import { defineDocChangeHandler } from "@prosekit/core";
|
102
109
|
import { useMemo as useMemo3 } from "react";
|
103
110
|
function useDocChange(handler, options) {
|
104
|
-
|
111
|
+
const extension = useMemo3(
|
105
112
|
() => defineDocChangeHandler((view) => handler(view.state.doc)),
|
106
113
|
[handler]
|
107
114
|
);
|
@@ -118,24 +125,27 @@ import {
|
|
118
125
|
import { useEffect as useEffect2, useReducer } from "react";
|
119
126
|
function useEditor(options) {
|
120
127
|
var _a;
|
121
|
-
|
122
|
-
|
128
|
+
const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
|
129
|
+
const editor = useEditorContext();
|
130
|
+
if (!editor) {
|
123
131
|
throw new ProseKitError(
|
124
132
|
"useEditor must be used within the ProseKit component"
|
125
133
|
);
|
126
|
-
|
127
|
-
|
134
|
+
}
|
135
|
+
const forceUpdate = useForceUpdate();
|
136
|
+
useEffect2(() => {
|
128
137
|
if (update) {
|
129
|
-
|
138
|
+
const extension = union([
|
130
139
|
defineMountHandler(forceUpdate),
|
131
140
|
defineUpdateHandler(forceUpdate)
|
132
141
|
]);
|
133
142
|
return editor.use(extension);
|
134
143
|
}
|
135
|
-
}, [editor, update, forceUpdate])
|
144
|
+
}, [editor, update, forceUpdate]);
|
145
|
+
return editor;
|
136
146
|
}
|
137
147
|
function useForceUpdate() {
|
138
|
-
|
148
|
+
const [, dispatch] = useReducer((x) => x + 1, 0);
|
139
149
|
return dispatch;
|
140
150
|
}
|
141
151
|
|
@@ -143,7 +153,7 @@ function useForceUpdate() {
|
|
143
153
|
import { defineKeymap } from "@prosekit/core";
|
144
154
|
import { useMemo as useMemo4 } from "react";
|
145
155
|
function useKeymap(keymap, options) {
|
146
|
-
|
156
|
+
const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
|
147
157
|
return useExtension(extension, options);
|
148
158
|
}
|
149
159
|
|
@@ -151,7 +161,7 @@ function useKeymap(keymap, options) {
|
|
151
161
|
import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
|
152
162
|
import { useMemo as useMemo5 } from "react";
|
153
163
|
function useStateUpdate(handler, options) {
|
154
|
-
|
164
|
+
const extension = useMemo5(
|
155
165
|
() => defineUpdateHandler2((view) => handler(view.state)),
|
156
166
|
[handler]
|
157
167
|
);
|
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.15",
|
5
5
|
"private": false,
|
6
6
|
"author": {
|
7
7
|
"name": "ocavue",
|
@@ -67,9 +67,9 @@
|
|
67
67
|
"dependencies": {
|
68
68
|
"@prosemirror-adapter/react": "^0.2.6",
|
69
69
|
"react-merge-refs": "^2.1.1",
|
70
|
-
"@prosekit/core": "^0.7.
|
71
|
-
"@prosekit/
|
72
|
-
"@prosekit/
|
70
|
+
"@prosekit/core": "^0.7.3",
|
71
|
+
"@prosekit/pm": "^0.1.6",
|
72
|
+
"@prosekit/web": "^0.3.3"
|
73
73
|
},
|
74
74
|
"peerDependencies": {
|
75
75
|
"react": ">= 18.2.0",
|
package/dist/chunk-JQQDRLKV.js
DELETED
@@ -1,33 +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
|
-
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
|
-
};
|