@prosekit/solid 0.2.0 → 0.2.2

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.
@@ -1,3 +1,4 @@
1
+ import { Accessor } from 'solid-js';
1
2
  import type { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/autocomplete-empty';
2
3
  import type { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/autocomplete-item';
3
4
  import type { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/autocomplete-list';
@@ -7,8 +8,9 @@ import type { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/com
7
8
  import type { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-box-list';
8
9
  import type { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
9
10
  import { Component } from 'solid-js';
10
- import { Context } from 'solid-js';
11
+ import { ContextProviderComponent } from 'solid-js';
11
12
  import { Editor } from '@prosekit/core';
13
+ import type { EditorState } from '@prosekit/pm/state';
12
14
  import { Extension } from '@prosekit/core';
13
15
  import type { InlinePopoverProps as InlinePopoverProps_2 } from '@prosekit/lit/inline-popover';
14
16
  import type { JSXElement } from 'solid-js';
@@ -77,11 +79,10 @@ export declare const default_alias_1: {
77
79
  };
78
80
  };
79
81
 
80
- declare interface EditorContext {
81
- editor: Editor;
82
- }
83
-
84
- export declare const editorContext: Context<EditorContext | null>;
82
+ /**
83
+ * @internal
84
+ */
85
+ export declare const EditorContextProvider: ContextProviderComponent<Editor<any> | null>;
85
86
 
86
87
  export declare function forceProps<T extends Record<string, any>>(props: T): T;
87
88
 
@@ -89,6 +90,29 @@ export declare const InlinePopover: Component<InlinePopoverProps>;
89
90
 
90
91
  export declare type InlinePopoverProps = PropsWithChildren<PropsWithClass<InlinePopoverProps_2>>;
91
92
 
93
+ /**
94
+ * T or a reactive/non-reactive function returning T
95
+ */
96
+ declare type MaybeAccessor<T> = T | Accessor<T>;
97
+ export { MaybeAccessor }
98
+ export { MaybeAccessor as MaybeAccessor_alias_1 }
99
+
100
+ /**
101
+ * Accessed value of a MaybeAccessor
102
+ *
103
+ * @example
104
+ *
105
+ * ```ts
106
+ * MaybeAccessorValue<MaybeAccessor<string>>
107
+ * // => string
108
+ * MaybeAccessorValue<MaybeAccessor<() => string>>
109
+ * // => string | (() => string)
110
+ * MaybeAccessorValue<MaybeAccessor<string> | Function>
111
+ * // => string | void
112
+ * ```
113
+ */
114
+ export declare type MaybeAccessorValue<T extends MaybeAccessor<any>> = T extends () => any ? ReturnType<T> : T;
115
+
92
116
  export declare const Popover: Component<PopoverProps>;
93
117
 
94
118
  export declare type PopoverProps = PropsWithChildren<PropsWithClass<PopoverProps_2>>;
@@ -113,6 +137,11 @@ declare type PropsWithClass<P = unknown> = P & {
113
137
  export { PropsWithClass }
114
138
  export { PropsWithClass as PropsWithClass_alias_1 }
115
139
 
140
+ /**
141
+ * The root component for a ProseKit editor.
142
+ *
143
+ * @public
144
+ */
116
145
  declare const ProseKit: Component<ProseKitProps>;
117
146
  export { ProseKit }
118
147
  export { ProseKit as ProseKit_alias_1 }
@@ -131,6 +160,17 @@ export declare type ResizableHandleProps = PropsWithChildren<PropsWithClass<Resi
131
160
 
132
161
  export declare type ResizableProps = PropsWithChildren<PropsWithClass<ResizableProps_2>>;
133
162
 
163
+ /**
164
+ * Accesses the value of a MaybeAccessor
165
+ *
166
+ * @example
167
+ * ```ts
168
+ * access("foo") // => "foo"
169
+ * access(() => "foo") // => "foo"
170
+ * ```
171
+ */
172
+ export declare function toValue<T extends MaybeAccessor<any>>(v: T): MaybeAccessorValue<T>;
173
+
134
174
  /**
135
175
  * Retrieves the editor instance from the nearest ProseKit component.
136
176
  *
@@ -148,23 +188,58 @@ declare function useEditor<E extends Extension = any>(options?: {
148
188
  export { useEditor }
149
189
  export { useEditor as useEditor_alias_1 }
150
190
 
191
+ /**
192
+ * @internal
193
+ */
194
+ export declare function useEditorContext<E extends Extension>(): Editor<E> | null;
195
+
196
+ /**
197
+ * @internal
198
+ */
199
+ export declare function useEditorExtension(editorAccessor: MaybeAccessor<Editor> | undefined | null, extensionAccessor: Accessor<Extension | null>): void;
200
+
151
201
  /**
152
202
  * Add an extension to the editor.
153
- *
154
- * It accepts an accessor to an optional extension. If the extension is changed,
155
- * the previous extension will be removed and the new one (if not null) will be
156
- * added.
157
203
  */
158
- declare function useExtension<T extends Extension = Extension>(extension: (T | null) | (() => T | null)): void;
204
+ declare function useExtension(
205
+ /**
206
+ * The accessor to an extension to add to the editor. If it changes, the previous
207
+ * extension will be removed and the new one (if not null) will be added.
208
+ */
209
+ extension: Accessor<Extension | null>, options?: UseExtensionOptions): void;
159
210
  export { useExtension }
160
211
  export { useExtension as useExtension_alias_1 }
161
212
 
162
- declare function useKeymap(keymap: Keymap | (() => Keymap), options?: {
213
+ declare interface UseExtensionOptions {
214
+ /**
215
+ * The editor to add the extension to. If not provided, it will use the
216
+ * editor from the nearest `ProseKit` component.
217
+ */
218
+ editor?: MaybeAccessor<Editor>;
219
+ /**
220
+ * Optional priority to add the extension with.
221
+ */
163
222
  priority?: Priority;
164
- }): void;
223
+ }
224
+ export { UseExtensionOptions }
225
+ export { UseExtensionOptions as UseExtensionOptions_alias_1 }
226
+
227
+ declare function useKeymap(keymap: () => Keymap, options?: UseExtensionOptions): void;
165
228
  export { useKeymap }
166
229
  export { useKeymap as useKeymap_alias_1 }
167
230
 
168
- export declare function usePriorityExtension<T extends Extension = Extension>(extension: () => T | null, priority?: Priority | null): void;
231
+ /**
232
+ * @internal
233
+ */
234
+ export declare function usePriorityExtension<T extends Extension = Extension>(extension: () => T | null, priority?: Priority | null): () => T | null;
235
+
236
+ /**
237
+ * Calls the given handler whenever the editor state changes.
238
+ *
239
+ * @public
240
+ */
241
+ declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
242
+ export { useStateUpdate }
243
+ export { useStateUpdate as useStateUpdate_alias_1 }
169
244
 
170
245
  export { }
@@ -2,6 +2,9 @@ export { ProseKit } from './_tsup-dts-rollup';
2
2
  export { ProseKitProps } from './_tsup-dts-rollup';
3
3
  export { useEditor } from './_tsup-dts-rollup';
4
4
  export { useExtension } from './_tsup-dts-rollup';
5
+ export { UseExtensionOptions } from './_tsup-dts-rollup';
5
6
  export { useKeymap } from './_tsup-dts-rollup';
7
+ export { useStateUpdate } from './_tsup-dts-rollup';
8
+ export { MaybeAccessor } from './_tsup-dts-rollup';
6
9
  export { PropsWithChildren } from './_tsup-dts-rollup';
7
10
  export { PropsWithClass } from './_tsup-dts-rollup';
@@ -2,16 +2,18 @@
2
2
  import { createComponent } from "solid-js";
3
3
 
4
4
  // src/contexts/editor-context.ts
5
- import { createContext } from "solid-js";
5
+ import { createContext, useContext } from "solid-js";
6
6
  var editorContext = createContext(null);
7
+ function useEditorContext() {
8
+ return useContext(editorContext);
9
+ }
10
+ var EditorContextProvider = editorContext.Provider;
7
11
 
8
12
  // src/components/prosekit.ts
9
13
  var ProseKit = (props) => {
10
- return createComponent(editorContext.Provider, {
14
+ return createComponent(EditorContextProvider, {
11
15
  get value() {
12
- return {
13
- editor: props.editor
14
- };
16
+ return props.editor;
15
17
  },
16
18
  get children() {
17
19
  return props.children;
@@ -22,21 +24,20 @@ var ProseKit = (props) => {
22
24
  // src/hooks/use-editor.ts
23
25
  import {
24
26
  ProseKitError,
25
- defineUpdateHandler,
26
27
  defineMountHandler,
28
+ defineUpdateHandler,
27
29
  union
28
30
  } from "@prosekit/core";
29
- import { createEffect, createSignal, useContext } from "solid-js";
31
+ import { createEffect, createSignal } from "solid-js";
30
32
  function useEditor(options) {
31
33
  var _a;
32
34
  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
33
- const value = useContext(editorContext);
34
- if (!value) {
35
+ const editor = useEditorContext();
36
+ if (!editor) {
35
37
  throw new ProseKitError(
36
38
  "useEditor must be used within the ProseKit component"
37
39
  );
38
40
  }
39
- const editor = value.editor;
40
41
  const [depend, forceUpdate] = useForceUpdate();
41
42
  createEffect(() => {
42
43
  if (update) {
@@ -58,50 +59,66 @@ function useForceUpdate() {
58
59
 
59
60
  // src/hooks/use-extension.ts
60
61
  import "@prosekit/core";
62
+ import "solid-js";
63
+
64
+ // src/hooks/use-editor-extension.ts
65
+ import { EditorNotFoundError } from "@prosekit/core";
61
66
  import { createEffect as createEffect2, onCleanup } from "solid-js";
62
- function useExtension(extension) {
63
- if (typeof extension !== "function") {
64
- console.warn(
65
- "useExtension should accept a function that returns an extension or null"
66
- );
67
- return useExtension(() => extension);
68
- }
69
- const extensionAccessor = extension;
70
- const editor = useEditor();
67
+
68
+ // src/utils/to-value.ts
69
+ function toValue(v) {
70
+ return typeof v === "function" && v.length === 0 ? v() : v;
71
+ }
72
+
73
+ // src/hooks/use-editor-extension.ts
74
+ function useEditorExtension(editorAccessor, extensionAccessor) {
75
+ const editorContext2 = useEditorContext();
71
76
  createEffect2(() => {
72
- const extension2 = extensionAccessor();
73
- if (extension2) {
74
- onCleanup(editor().use(extension2));
77
+ const editor = toValue(editorAccessor) || toValue(editorContext2);
78
+ const extension = extensionAccessor();
79
+ if (!editor) {
80
+ throw new EditorNotFoundError();
81
+ }
82
+ if (extension) {
83
+ onCleanup(editor.use(extension));
75
84
  }
76
85
  });
77
86
  }
78
87
 
79
- // src/hooks/use-keymap.ts
80
- import { defineKeymap } from "@prosekit/core";
81
-
82
88
  // src/hooks/use-priority-extension.ts
83
89
  import { withPriority } from "@prosekit/core";
84
90
  function usePriorityExtension(extension, priority) {
85
- const extensionWithPriority = () => {
91
+ return () => {
86
92
  const ext = extension();
87
93
  return ext && priority ? withPriority(ext, priority) : ext;
88
94
  };
89
- return useExtension(extensionWithPriority);
95
+ }
96
+
97
+ // src/hooks/use-extension.ts
98
+ function useExtension(extension, options) {
99
+ useEditorExtension(
100
+ options == null ? void 0 : options.editor,
101
+ usePriorityExtension(extension, options == null ? void 0 : options.priority)
102
+ );
90
103
  }
91
104
 
92
105
  // src/hooks/use-keymap.ts
106
+ import { defineKeymap } from "@prosekit/core";
93
107
  function useKeymap(keymap, options) {
94
- if (typeof keymap !== "function") {
95
- console.warn(
96
- "useKeymap should accept a function that returns a keymap object"
97
- );
98
- return useKeymap(() => keymap);
99
- }
100
- return usePriorityExtension(() => defineKeymap(keymap()), options == null ? void 0 : options.priority);
108
+ const extension = () => defineKeymap(keymap());
109
+ return useExtension(extension, options);
110
+ }
111
+
112
+ // src/hooks/use-state-update.ts
113
+ import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
114
+ function useStateUpdate(handler, options) {
115
+ const extension = defineUpdateHandler2((view) => handler(view.state));
116
+ return useExtension(() => extension, options);
101
117
  }
102
118
  export {
103
119
  ProseKit,
104
120
  useEditor,
105
121
  useExtension,
106
- useKeymap
122
+ useKeymap,
123
+ useStateUpdate
107
124
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@prosekit/solid",
3
3
  "type": "module",
4
- "version": "0.2.0",
4
+ "version": "0.2.2",
5
5
  "private": false,
6
6
  "author": {
7
7
  "name": "ocavue",
@@ -95,8 +95,9 @@
95
95
  "dist"
96
96
  ],
97
97
  "dependencies": {
98
- "@prosekit/core": "^0.2.5",
99
- "@prosekit/lit": "^0.2.0"
98
+ "@prosekit/core": "^0.2.7",
99
+ "@prosekit/lit": "^0.2.1",
100
+ "@prosekit/pm": "^0.1.1"
100
101
  },
101
102
  "peerDependencies": {
102
103
  "solid-js": ">= 1.7.0"
@@ -108,10 +109,10 @@
108
109
  },
109
110
  "devDependencies": {
110
111
  "@prosekit/dev": "*",
111
- "solid-js": "^1.8.11",
112
+ "solid-js": "^1.8.12",
112
113
  "tsup": "^8.0.1",
113
114
  "typescript": "^5.3.3",
114
- "vitest": "^1.2.0"
115
+ "vitest": "^1.2.1"
115
116
  },
116
117
  "scripts": {
117
118
  "build:tsup": "tsup",
package/src/index.ts DELETED
@@ -1,5 +0,0 @@
1
- export { ProseKit, type ProseKitProps } from './components/prosekit'
2
- export { useEditor } from './hooks/use-editor'
3
- export { useExtension } from './hooks/use-extension'
4
- export { useKeymap } from './hooks/use-keymap'
5
- export type { PropsWithChildren, PropsWithClass } from './types'