@prosekit/solid 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-DhWsGDHc.js +41 -0
- package/dist/create-props-YzgBVL0x.d.ts +6 -0
- package/dist/editor-context-DIj_hnDx.js +17 -0
- package/dist/prosekit-solid-autocomplete.d.ts +41 -8
- package/dist/prosekit-solid-autocomplete.js +17 -50
- package/dist/prosekit-solid-block-handle.d.ts +33 -6
- package/dist/prosekit-solid-block-handle.js +14 -39
- package/dist/prosekit-solid-inline-popover.d.ts +17 -2
- package/dist/prosekit-solid-inline-popover.js +8 -17
- package/dist/prosekit-solid-popover.d.ts +33 -6
- package/dist/prosekit-solid-popover.js +14 -39
- package/dist/prosekit-solid-resizable.d.ts +25 -4
- package/dist/prosekit-solid-resizable.js +11 -28
- package/dist/prosekit-solid-table-handle.d.ts +65 -14
- package/dist/prosekit-solid-table-handle.js +26 -83
- package/dist/prosekit-solid-tooltip.d.ts +33 -6
- package/dist/prosekit-solid-tooltip.js +14 -39
- package/dist/prosekit-solid.d.ts +142 -19
- package/dist/prosekit-solid.js +180 -200
- package/dist/types-CC9kxezm.d.ts +43 -0
- package/package.json +27 -18
- package/dist/_tsup-dts-rollup.d.ts +0 -615
- package/dist/chunk-BZVX5KNK.js +0 -45
- package/dist/chunk-XDDJIQ4M.js +0 -15
package/dist/prosekit-solid.js
CHANGED
@@ -1,241 +1,221 @@
|
|
1
|
-
import {
|
2
|
-
|
3
|
-
|
4
|
-
} from "
|
1
|
+
import { EditorContextProvider, useEditorContext } from "./editor-context-DIj_hnDx.js";
|
2
|
+
import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/solid";
|
3
|
+
import { createComponent, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
|
4
|
+
import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
//
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
} from "@prosekit/core";
|
17
|
-
import {
|
18
|
-
useMarkViewContext,
|
19
|
-
useMarkViewFactory
|
20
|
-
} from "@prosemirror-adapter/solid";
|
21
|
-
import {
|
22
|
-
createComponent,
|
23
|
-
createMemo
|
24
|
-
} from "solid-js";
|
25
|
-
|
26
|
-
// src/hooks/use-editor-extension.ts
|
27
|
-
import {
|
28
|
-
EditorNotFoundError
|
29
|
-
} from "@prosekit/core";
|
30
|
-
import {
|
31
|
-
createEffect,
|
32
|
-
onCleanup
|
33
|
-
} from "solid-js";
|
34
|
-
|
35
|
-
// src/utils/to-value.ts
|
6
|
+
//#region src/utils/to-value.ts
|
7
|
+
/**
|
8
|
+
* Accesses the value of a MaybeAccessor
|
9
|
+
*
|
10
|
+
* @example
|
11
|
+
* ```ts
|
12
|
+
* access("foo") // => "foo"
|
13
|
+
* access(() => "foo") // => "foo"
|
14
|
+
* ```
|
15
|
+
*/
|
36
16
|
function toValue(v) {
|
37
|
-
|
17
|
+
return typeof v === "function" ? v() : v;
|
38
18
|
}
|
39
19
|
|
40
|
-
|
20
|
+
//#endregion
|
21
|
+
//#region src/hooks/use-editor-extension.ts
|
22
|
+
/**
|
23
|
+
* @internal
|
24
|
+
*/
|
41
25
|
function useEditorExtension(editorAccessor, extensionAccessor) {
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
if (extension) {
|
50
|
-
onCleanup(editor.use(extension));
|
51
|
-
}
|
52
|
-
});
|
26
|
+
const editorContext = useEditorContext();
|
27
|
+
createEffect(() => {
|
28
|
+
const editor = toValue(editorAccessor) || toValue(editorContext);
|
29
|
+
const extension = extensionAccessor();
|
30
|
+
if (!editor) throw new EditorNotFoundError();
|
31
|
+
if (extension) onCleanup(editor.use(extension));
|
32
|
+
});
|
53
33
|
}
|
54
34
|
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
35
|
+
//#endregion
|
36
|
+
//#region src/hooks/use-priority-extension.ts
|
37
|
+
/**
|
38
|
+
* @internal
|
39
|
+
*/
|
59
40
|
function usePriorityExtension(extension, priority) {
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
41
|
+
return () => {
|
42
|
+
const ext = extension();
|
43
|
+
return ext && priority ? withPriority(ext, priority) : ext;
|
44
|
+
};
|
64
45
|
}
|
65
46
|
|
66
|
-
|
47
|
+
//#endregion
|
48
|
+
//#region src/hooks/use-extension.ts
|
49
|
+
/**
|
50
|
+
* Add an extension to the editor.
|
51
|
+
*/
|
67
52
|
function useExtension(extension, options) {
|
68
|
-
|
69
|
-
options?.editor,
|
70
|
-
usePriorityExtension(extension, options?.priority)
|
71
|
-
);
|
53
|
+
useEditorExtension(options?.editor, usePriorityExtension(extension, options?.priority));
|
72
54
|
}
|
73
55
|
|
74
|
-
|
56
|
+
//#endregion
|
57
|
+
//#region src/extensions/solid-mark-view.ts
|
75
58
|
function withMarkViewProps(component) {
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
}
|
59
|
+
return function MarkViewPropsWrapper() {
|
60
|
+
const props = useMarkViewContext();
|
61
|
+
return createComponent(component, props());
|
62
|
+
};
|
63
|
+
}
|
64
|
+
/**
|
65
|
+
* @internal
|
66
|
+
*/
|
81
67
|
function consumeSolidMarkViews() {
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
68
|
+
const markViewFactory = useMarkViewFactory();
|
69
|
+
const extension = createMemo(() => defineSolidMarkViewFactory(markViewFactory), [markViewFactory]);
|
70
|
+
useExtension(extension);
|
71
|
+
}
|
72
|
+
/**
|
73
|
+
* Defines a mark view using a Solid component.
|
74
|
+
*
|
75
|
+
* @public
|
76
|
+
*/
|
89
77
|
function defineSolidMarkView(options) {
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
78
|
+
const { name, component,...userOptions } = options;
|
79
|
+
const args = {
|
80
|
+
...userOptions,
|
81
|
+
component: withMarkViewProps(component)
|
82
|
+
};
|
83
|
+
return defineMarkViewComponent({
|
84
|
+
group: "solid",
|
85
|
+
name,
|
86
|
+
args
|
87
|
+
});
|
100
88
|
}
|
101
89
|
function defineSolidMarkViewFactory(factory) {
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
90
|
+
return defineMarkViewFactory({
|
91
|
+
group: "solid",
|
92
|
+
factory
|
93
|
+
});
|
106
94
|
}
|
107
95
|
|
108
|
-
|
109
|
-
|
110
|
-
defineNodeViewComponent,
|
111
|
-
defineNodeViewFactory
|
112
|
-
} from "@prosekit/core";
|
113
|
-
import {
|
114
|
-
useNodeViewContext,
|
115
|
-
useNodeViewFactory
|
116
|
-
} from "@prosemirror-adapter/solid";
|
117
|
-
import {
|
118
|
-
createComponent as createComponent2,
|
119
|
-
createMemo as createMemo2
|
120
|
-
} from "solid-js";
|
96
|
+
//#endregion
|
97
|
+
//#region src/extensions/solid-node-view.ts
|
121
98
|
function withNodeViewProps(component) {
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
}
|
99
|
+
return function NodeViewPropsWrapper() {
|
100
|
+
const props = useNodeViewContext();
|
101
|
+
return createComponent(component, props());
|
102
|
+
};
|
103
|
+
}
|
104
|
+
/**
|
105
|
+
* @internal
|
106
|
+
*/
|
127
107
|
function consumeSolidNodeViews() {
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
108
|
+
const nodeViewFactory = useNodeViewFactory();
|
109
|
+
const extension = createMemo(() => defineSolidNodeViewFactory(nodeViewFactory), [nodeViewFactory]);
|
110
|
+
useExtension(extension);
|
111
|
+
}
|
112
|
+
/**
|
113
|
+
* Defines a node view using a Solid component.
|
114
|
+
*
|
115
|
+
* @public
|
116
|
+
*/
|
135
117
|
function defineSolidNodeView(options) {
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
118
|
+
const { name, component,...userOptions } = options;
|
119
|
+
const args = {
|
120
|
+
...userOptions,
|
121
|
+
component: withNodeViewProps(component)
|
122
|
+
};
|
123
|
+
return defineNodeViewComponent({
|
124
|
+
group: "solid",
|
125
|
+
name,
|
126
|
+
args
|
127
|
+
});
|
146
128
|
}
|
147
129
|
function defineSolidNodeViewFactory(factory) {
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
130
|
+
return defineNodeViewFactory({
|
131
|
+
group: "solid",
|
132
|
+
factory
|
133
|
+
});
|
152
134
|
}
|
153
135
|
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
136
|
+
//#endregion
|
137
|
+
//#region src/components/prosekit.ts
|
138
|
+
/**
|
139
|
+
* The root component for a ProseKit editor.
|
140
|
+
*
|
141
|
+
* @public
|
142
|
+
*/
|
143
|
+
const ProseKit = (props) => {
|
144
|
+
return createComponent(ProsemirrorAdapterProvider, { get children() {
|
145
|
+
return createComponent(EditorContextProvider, {
|
146
|
+
get value() {
|
147
|
+
return props.editor;
|
148
|
+
},
|
149
|
+
get children() {
|
150
|
+
consumeSolidNodeViews();
|
151
|
+
consumeSolidMarkViews();
|
152
|
+
return props.children;
|
153
|
+
}
|
154
|
+
});
|
155
|
+
} });
|
170
156
|
};
|
171
157
|
|
172
|
-
|
173
|
-
|
158
|
+
//#endregion
|
159
|
+
//#region src/hooks/use-doc-change.ts
|
160
|
+
/**
|
161
|
+
* Calls the given handler whenever the editor document changes.
|
162
|
+
*
|
163
|
+
* @public
|
164
|
+
*/
|
174
165
|
function useDocChange(handler, options) {
|
175
|
-
|
176
|
-
|
166
|
+
const extension = defineDocChangeHandler((view) => handler(view.state.doc));
|
167
|
+
useExtension(() => extension, options);
|
177
168
|
}
|
178
169
|
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
import {
|
187
|
-
createEffect as createEffect2,
|
188
|
-
createSignal
|
189
|
-
} from "solid-js";
|
170
|
+
//#endregion
|
171
|
+
//#region src/hooks/use-editor.ts
|
172
|
+
/**
|
173
|
+
* Retrieves the editor instance from the nearest ProseKit component.
|
174
|
+
*
|
175
|
+
* @public
|
176
|
+
*/
|
190
177
|
function useEditor(options) {
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
depend();
|
210
|
-
return editor;
|
211
|
-
};
|
178
|
+
const update = options?.update ?? false;
|
179
|
+
const editor = useEditorContext();
|
180
|
+
if (!editor) throw new ProseKitError("useEditor must be used within the ProseKit component");
|
181
|
+
const [depend, forceUpdate] = useForceUpdate();
|
182
|
+
createEffect(() => {
|
183
|
+
if (update) {
|
184
|
+
const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
|
185
|
+
return editor.use(extension);
|
186
|
+
}
|
187
|
+
}, [
|
188
|
+
editor,
|
189
|
+
update,
|
190
|
+
forceUpdate
|
191
|
+
]);
|
192
|
+
return () => {
|
193
|
+
depend();
|
194
|
+
return editor;
|
195
|
+
};
|
212
196
|
}
|
213
197
|
function useForceUpdate() {
|
214
|
-
|
198
|
+
return createSignal(void 0, { equals: false });
|
215
199
|
}
|
216
200
|
|
217
|
-
|
218
|
-
|
219
|
-
defineKeymap
|
220
|
-
} from "@prosekit/core";
|
201
|
+
//#endregion
|
202
|
+
//#region src/hooks/use-keymap.ts
|
221
203
|
function useKeymap(keymap, options) {
|
222
|
-
|
223
|
-
|
204
|
+
const extension = () => defineKeymap(keymap());
|
205
|
+
useExtension(extension, options);
|
224
206
|
}
|
225
207
|
|
226
|
-
|
227
|
-
|
208
|
+
//#endregion
|
209
|
+
//#region src/hooks/use-state-update.ts
|
210
|
+
/**
|
211
|
+
* Calls the given handler whenever the editor state changes.
|
212
|
+
*
|
213
|
+
* @public
|
214
|
+
*/
|
228
215
|
function useStateUpdate(handler, options) {
|
229
|
-
|
230
|
-
|
231
|
-
}
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
defineSolidNodeView,
|
236
|
-
useDocChange,
|
237
|
-
useEditor,
|
238
|
-
useExtension,
|
239
|
-
useKeymap,
|
240
|
-
useStateUpdate
|
241
|
-
};
|
216
|
+
const extension = defineUpdateHandler((view) => handler(view.state));
|
217
|
+
useExtension(() => extension, options);
|
218
|
+
}
|
219
|
+
|
220
|
+
//#endregion
|
221
|
+
export { ProseKit, defineSolidMarkView, defineSolidNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import { Accessor, JSX, JSXElement } from "solid-js";
|
2
|
+
|
3
|
+
//#region src/types.d.ts
|
4
|
+
/**
|
5
|
+
* @internal
|
6
|
+
*/
|
7
|
+
/**
|
8
|
+
* @internal
|
9
|
+
*/
|
10
|
+
type PropsWithClass<P = unknown> = P & {
|
11
|
+
class?: string | undefined;
|
12
|
+
};
|
13
|
+
/**
|
14
|
+
* @internal
|
15
|
+
*/
|
16
|
+
type PropsWithChildren<P = unknown> = P & {
|
17
|
+
children?: JSXElement | undefined;
|
18
|
+
};
|
19
|
+
/**
|
20
|
+
* @internal
|
21
|
+
*/
|
22
|
+
type PropsWithElement<Props extends object, CustomElement extends HTMLElement> = Props & JSX.HTMLAttributes<CustomElement>;
|
23
|
+
/**
|
24
|
+
* T or a reactive/non-reactive function returning T
|
25
|
+
*/
|
26
|
+
type MaybeAccessor<T> = T | Accessor<T>;
|
27
|
+
|
28
|
+
//#endregion
|
29
|
+
/**
|
30
|
+
* Accessed value of a MaybeAccessor
|
31
|
+
*
|
32
|
+
* @example
|
33
|
+
*
|
34
|
+
* ```ts
|
35
|
+
* MaybeAccessorValue<MaybeAccessor<string>>
|
36
|
+
* // => string
|
37
|
+
* MaybeAccessorValue<MaybeAccessor<() => string>>
|
38
|
+
* // => string | (() => string)
|
39
|
+
* MaybeAccessorValue<MaybeAccessor<string> | Function>
|
40
|
+
* // => string | void
|
41
|
+
* ```
|
42
|
+
*/
|
43
|
+
export { MaybeAccessor, PropsWithChildren, PropsWithClass, PropsWithElement };
|
package/package.json
CHANGED
@@ -1,8 +1,9 @@
|
|
1
1
|
{
|
2
2
|
"name": "@prosekit/solid",
|
3
3
|
"type": "module",
|
4
|
-
"version": "0.4.
|
4
|
+
"version": "0.4.13",
|
5
5
|
"private": false,
|
6
|
+
"description": "Solid 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-solid.d.ts",
|
30
|
-
"import": "./dist/prosekit-solid.js",
|
31
31
|
"default": "./dist/prosekit-solid.js"
|
32
32
|
},
|
33
33
|
"./autocomplete": {
|
34
34
|
"types": "./dist/prosekit-solid-autocomplete.d.ts",
|
35
|
-
"import": "./dist/prosekit-solid-autocomplete.js",
|
36
35
|
"default": "./dist/prosekit-solid-autocomplete.js"
|
37
36
|
},
|
38
37
|
"./block-handle": {
|
39
38
|
"types": "./dist/prosekit-solid-block-handle.d.ts",
|
40
|
-
"import": "./dist/prosekit-solid-block-handle.js",
|
41
39
|
"default": "./dist/prosekit-solid-block-handle.js"
|
42
40
|
},
|
43
41
|
"./inline-popover": {
|
44
42
|
"types": "./dist/prosekit-solid-inline-popover.d.ts",
|
45
|
-
"import": "./dist/prosekit-solid-inline-popover.js",
|
46
43
|
"default": "./dist/prosekit-solid-inline-popover.js"
|
47
44
|
},
|
48
45
|
"./popover": {
|
49
46
|
"types": "./dist/prosekit-solid-popover.d.ts",
|
50
|
-
"import": "./dist/prosekit-solid-popover.js",
|
51
47
|
"default": "./dist/prosekit-solid-popover.js"
|
52
48
|
},
|
53
49
|
"./resizable": {
|
54
50
|
"types": "./dist/prosekit-solid-resizable.d.ts",
|
55
|
-
"import": "./dist/prosekit-solid-resizable.js",
|
56
51
|
"default": "./dist/prosekit-solid-resizable.js"
|
57
52
|
},
|
58
53
|
"./table-handle": {
|
59
54
|
"types": "./dist/prosekit-solid-table-handle.d.ts",
|
60
|
-
"import": "./dist/prosekit-solid-table-handle.js",
|
61
55
|
"default": "./dist/prosekit-solid-table-handle.js"
|
62
56
|
},
|
63
57
|
"./tooltip": {
|
64
58
|
"types": "./dist/prosekit-solid-tooltip.d.ts",
|
65
|
-
"import": "./dist/prosekit-solid-tooltip.js",
|
66
59
|
"default": "./dist/prosekit-solid-tooltip.js"
|
67
60
|
}
|
68
61
|
},
|
@@ -72,9 +65,9 @@
|
|
72
65
|
"dependencies": {
|
73
66
|
"@prosemirror-adapter/core": "^0.4.0",
|
74
67
|
"@prosemirror-adapter/solid": "^0.4.1",
|
75
|
-
"@prosekit/
|
76
|
-
"@prosekit/
|
77
|
-
"@prosekit/
|
68
|
+
"@prosekit/pm": "^0.1.10",
|
69
|
+
"@prosekit/core": "^0.8.1",
|
70
|
+
"@prosekit/web": "^0.5.8"
|
78
71
|
},
|
79
72
|
"peerDependencies": {
|
80
73
|
"solid-js": ">= 1.7.0"
|
@@ -85,15 +78,31 @@
|
|
85
78
|
}
|
86
79
|
},
|
87
80
|
"devDependencies": {
|
88
|
-
"solid-js": "^1.9.
|
89
|
-
"
|
90
|
-
"typescript": "~5.
|
91
|
-
"vitest": "^3.
|
92
|
-
"@prosekit/
|
81
|
+
"solid-js": "^1.9.6",
|
82
|
+
"tsdown": "^0.11.1",
|
83
|
+
"typescript": "~5.8.3",
|
84
|
+
"vitest": "^3.1.3",
|
85
|
+
"@prosekit/config-tsdown": "0.0.0",
|
86
|
+
"@prosekit/config-vitest": "0.0.0"
|
87
|
+
},
|
88
|
+
"publishConfig": {
|
89
|
+
"dev": {}
|
90
|
+
},
|
91
|
+
"dev": {
|
92
|
+
"entry": {
|
93
|
+
"prosekit-solid": "./src/index.ts",
|
94
|
+
"prosekit-solid-autocomplete": "./src/components/autocomplete/index.gen.ts",
|
95
|
+
"prosekit-solid-block-handle": "./src/components/block-handle/index.gen.ts",
|
96
|
+
"prosekit-solid-inline-popover": "./src/components/inline-popover/index.gen.ts",
|
97
|
+
"prosekit-solid-popover": "./src/components/popover/index.gen.ts",
|
98
|
+
"prosekit-solid-resizable": "./src/components/resizable/index.gen.ts",
|
99
|
+
"prosekit-solid-table-handle": "./src/components/table-handle/index.gen.ts",
|
100
|
+
"prosekit-solid-tooltip": "./src/components/tooltip/index.gen.ts"
|
101
|
+
}
|
93
102
|
},
|
94
103
|
"scripts": {
|
95
104
|
"build:tsc": "tsc -b tsconfig.json",
|
96
|
-
"build:
|
105
|
+
"build:tsdown": "tsdown"
|
97
106
|
},
|
98
107
|
"types": "./dist/prosekit-solid.d.ts",
|
99
108
|
"typesVersions": {
|