@prosekit/solid 0.2.0 → 0.2.2

package/dist/_tsup-dts-rollup.d.ts

@@ -1,3 +1,4 @@
+import { Accessor } from 'solid-js';
 import type { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/autocomplete-empty';
 import type { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/autocomplete-item';
 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
 import type { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-box-list';
 import type { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
 import { Component } from 'solid-js';
-import { Context } from 'solid-js';
+import { ContextProviderComponent } from 'solid-js';
 import { Editor } from '@prosekit/core';
+import type { EditorState } from '@prosekit/pm/state';
 import { Extension } from '@prosekit/core';
 import type { InlinePopoverProps as InlinePopoverProps_2 } from '@prosekit/lit/inline-popover';
 import type { JSXElement } from 'solid-js';
@@ -77,11 +79,10 @@ export declare const default_alias_1: {
     };
 };
 
-declare interface EditorContext {
-    editor: Editor;
-}
-
-export declare const editorContext: Context<EditorContext | null>;
+/**
+ * @internal
+ */
+export declare const EditorContextProvider: ContextProviderComponent<Editor<any> | null>;
 
 export declare function forceProps<T extends Record<string, any>>(props: T): T;
 
@@ -89,6 +90,29 @@ export declare const InlinePopover: Component<InlinePopoverProps>;
 
 export declare type InlinePopoverProps = PropsWithChildren<PropsWithClass<InlinePopoverProps_2>>;
 
+/**
+ * T or a reactive/non-reactive function returning T
+ */
+declare type MaybeAccessor<T> = T | Accessor<T>;
+export { MaybeAccessor }
+export { MaybeAccessor as MaybeAccessor_alias_1 }
+
+/**
+ * Accessed value of a MaybeAccessor
+ *
+ * @example
+ *
+ * ```ts
+ * MaybeAccessorValue<MaybeAccessor<string>>
+ * // => string
+ * MaybeAccessorValue<MaybeAccessor<() => string>>
+ * // => string | (() => string)
+ * MaybeAccessorValue<MaybeAccessor<string> | Function>
+ * // => string | void
+ * ```
+ */
+export declare type MaybeAccessorValue<T extends MaybeAccessor<any>> = T extends () => any ? ReturnType<T> : T;
+
 export declare const Popover: Component<PopoverProps>;
 
 export declare type PopoverProps = PropsWithChildren<PropsWithClass<PopoverProps_2>>;
@@ -113,6 +137,11 @@ declare type PropsWithClass<P = unknown> = P & {
 export { PropsWithClass }
 export { PropsWithClass as PropsWithClass_alias_1 }
 
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
 declare const ProseKit: Component<ProseKitProps>;
 export { ProseKit }
 export { ProseKit as ProseKit_alias_1 }
@@ -131,6 +160,17 @@ export declare type ResizableHandleProps = PropsWithChildren<PropsWithClass<Resi
 
 export declare type ResizableProps = PropsWithChildren<PropsWithClass<ResizableProps_2>>;
 
+/**
+ * Accesses the value of a MaybeAccessor
+ *
+ * @example
+ * ```ts
+ * access("foo") // => "foo"
+ * access(() => "foo") // => "foo"
+ * ```
+ */
+export declare function toValue<T extends MaybeAccessor<any>>(v: T): MaybeAccessorValue<T>;
+
 /**
  * Retrieves the editor instance from the nearest ProseKit component.
  *
@@ -148,23 +188,58 @@ declare function useEditor<E extends Extension = any>(options?: {
 export { useEditor }
 export { useEditor as useEditor_alias_1 }
 
+/**
+ * @internal
+ */
+export declare function useEditorContext<E extends Extension>(): Editor<E> | null;
+
+/**
+ * @internal
+ */
+export declare function useEditorExtension(editorAccessor: MaybeAccessor<Editor> | undefined | null, extensionAccessor: Accessor<Extension | null>): void;
+
 /**
  * Add an extension to the editor.
- *
- * It accepts an accessor to an optional extension. If the extension is changed,
- * the previous extension will be removed and the new one (if not null) will be
- * added.
  */
-declare function useExtension<T extends Extension = Extension>(extension: (T | null) | (() => T | null)): void;
+declare function useExtension(
+/**
+ * The accessor to an extension to add to the editor. If it changes, the previous
+ * extension will be removed and the new one (if not null) will be added.
+ */
+extension: Accessor<Extension | null>, options?: UseExtensionOptions): void;
 export { useExtension }
 export { useExtension as useExtension_alias_1 }
 
-declare function useKeymap(keymap: Keymap | (() => Keymap), options?: {
+declare interface UseExtensionOptions {
+    /**
+     * The editor to add the extension to. If not provided, it will use the
+     * editor from the nearest `ProseKit` component.
+     */
+    editor?: MaybeAccessor<Editor>;
+    /**
+     * Optional priority to add the extension with.
+     */
     priority?: Priority;
-}): void;
+}
+export { UseExtensionOptions }
+export { UseExtensionOptions as UseExtensionOptions_alias_1 }
+
+declare function useKeymap(keymap: () => Keymap, options?: UseExtensionOptions): void;
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
-export declare function usePriorityExtension<T extends Extension = Extension>(extension: () => T | null, priority?: Priority | null): void;
+/**
+ * @internal
+ */
+export declare function usePriorityExtension<T extends Extension = Extension>(extension: () => T | null, priority?: Priority | null): () => T | null;
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
+export { useStateUpdate }
+export { useStateUpdate as useStateUpdate_alias_1 }
 
 export { }

package/dist/prosekit-solid.d.ts

@@ -2,6 +2,9 @@ export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
 export { useEditor } from './_tsup-dts-rollup';
 export { useExtension } from './_tsup-dts-rollup';
+export { UseExtensionOptions } from './_tsup-dts-rollup';
 export { useKeymap } from './_tsup-dts-rollup';
+export { useStateUpdate } from './_tsup-dts-rollup';
+export { MaybeAccessor } from './_tsup-dts-rollup';
 export { PropsWithChildren } from './_tsup-dts-rollup';
 export { PropsWithClass } from './_tsup-dts-rollup';

package/dist/prosekit-solid.js

@@ -2,16 +2,18 @@
 import { createComponent } from "solid-js";
 
 // src/contexts/editor-context.ts
-import { createContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
 var editorContext = createContext(null);
+function useEditorContext() {
+  return useContext(editorContext);
+}
+var EditorContextProvider = editorContext.Provider;
 
 // src/components/prosekit.ts
 var ProseKit = (props) => {
-  return createComponent(editorContext.Provider, {
+  return createComponent(EditorContextProvider, {
     get value() {
-      return {
-        editor: props.editor
-      };
+      return props.editor;
     },
     get children() {
       return props.children;
@@ -22,21 +24,20 @@ var ProseKit = (props) => {
 // src/hooks/use-editor.ts
 import {
   ProseKitError,
-  defineUpdateHandler,
   defineMountHandler,
+  defineUpdateHandler,
   union
 } from "@prosekit/core";
-import { createEffect, createSignal, useContext } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 function useEditor(options) {
   var _a;
   const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
-  const value = useContext(editorContext);
-  if (!value) {
+  const editor = useEditorContext();
+  if (!editor) {
     throw new ProseKitError(
       "useEditor must be used within the ProseKit component"
     );
   }
-  const editor = value.editor;
   const [depend, forceUpdate] = useForceUpdate();
   createEffect(() => {
     if (update) {
@@ -58,50 +59,66 @@ function useForceUpdate() {
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
+import "solid-js";
+
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
 import { createEffect as createEffect2, onCleanup } from "solid-js";
-function useExtension(extension) {
-  if (typeof extension !== "function") {
-    console.warn(
-      "useExtension should accept a function that returns an extension or null"
-    );
-    return useExtension(() => extension);
-  }
-  const extensionAccessor = extension;
-  const editor = useEditor();
+
+// src/utils/to-value.ts
+function toValue(v) {
+  return typeof v === "function" && v.length === 0 ? v() : v;
+}
+
+// src/hooks/use-editor-extension.ts
+function useEditorExtension(editorAccessor, extensionAccessor) {
+  const editorContext2 = useEditorContext();
   createEffect2(() => {
-    const extension2 = extensionAccessor();
-    if (extension2) {
-      onCleanup(editor().use(extension2));
+    const editor = toValue(editorAccessor) || toValue(editorContext2);
+    const extension = extensionAccessor();
+    if (!editor) {
+      throw new EditorNotFoundError();
+    }
+    if (extension) {
+      onCleanup(editor.use(extension));
     }
   });
 }
 
-// src/hooks/use-keymap.ts
-import { defineKeymap } from "@prosekit/core";
-
 // src/hooks/use-priority-extension.ts
 import { withPriority } from "@prosekit/core";
 function usePriorityExtension(extension, priority) {
-  const extensionWithPriority = () => {
+  return () => {
     const ext = extension();
     return ext && priority ? withPriority(ext, priority) : ext;
   };
-  return useExtension(extensionWithPriority);
+}
+
+// src/hooks/use-extension.ts
+function useExtension(extension, options) {
+  useEditorExtension(
+    options == null ? void 0 : options.editor,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
 }
 
 // src/hooks/use-keymap.ts
+import { defineKeymap } from "@prosekit/core";
 function useKeymap(keymap, options) {
-  if (typeof keymap !== "function") {
-    console.warn(
-      "useKeymap should accept a function that returns a keymap object"
-    );
-    return useKeymap(() => keymap);
-  }
-  return usePriorityExtension(() => defineKeymap(keymap()), options == null ? void 0 : options.priority);
+  const extension = () => defineKeymap(keymap());
+  return useExtension(extension, options);
+}
+
+// src/hooks/use-state-update.ts
+import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
+function useStateUpdate(handler, options) {
+  const extension = defineUpdateHandler2((view) => handler(view.state));
+  return useExtension(() => extension, options);
 }
 export {
   ProseKit,
   useEditor,
   useExtension,
-  useKeymap
+  useKeymap,
+  useStateUpdate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/solid",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -95,8 +95,9 @@
     "dist"
   ],
   "dependencies": {
-    "@prosekit/core": "^0.2.5",
-    "@prosekit/lit": "^0.2.0"
+    "@prosekit/core": "^0.2.7",
+    "@prosekit/lit": "^0.2.1",
+    "@prosekit/pm": "^0.1.1"
   },
   "peerDependencies": {
     "solid-js": ">= 1.7.0"
@@ -108,10 +109,10 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "solid-js": "^1.8.11",
+    "solid-js": "^1.8.12",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "vitest": "^1.2.0"
+    "vitest": "^1.2.1"
   },
   "scripts": {
     "build:tsup": "tsup",

package/src/index.ts

@@ -1,5 +0,0 @@
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export { useEditor } from './hooks/use-editor'
-export { useExtension } from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'
-export type { PropsWithChildren, PropsWithClass } from './types'