@prosekit/react 0.2.0 → 0.2.2

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

@@ -27,6 +27,7 @@ import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
 import type { Decoration } from '@prosekit/pm/view';
 import type { DecorationSource } from '@prosekit/pm/view';
 import { Editor } from '@prosekit/core';
+import type { EditorState } from '@prosekit/pm/state';
 import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
@@ -41,6 +42,7 @@ import { Popover as Popover_2 } from '@prosekit/lit/popover';
 import { PopoverProps as PopoverProps_2 } from '@prosekit/lit/popover';
 import { PositioningOptions } from '@prosekit/lit/autocomplete-popover';
 import { Priority } from '@prosekit/core';
+import { Provider } from 'react';
 import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { ReactPortal } from 'react';
@@ -125,11 +127,10 @@ export { defineReactNodeView as defineReactNodeView_alias_1 }
  */
 export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<string, string, CommandArgs>>;
 
-export declare interface EditorContext {
-    editor: Editor;
-}
-
-export declare const editorContext: Context<EditorContext | null>;
+/**
+ * @internal
+ */
+export declare const EditorContextProvider: Provider<Editor<any> | null>;
 
 export declare const InlinePopover: React_2.ComponentType<InlinePopoverProps & React_2.RefAttributes<InlinePopover_2>>;
 
@@ -152,6 +153,11 @@ declare type PropsWithClassName<P = unknown> = P & {
 export { PropsWithClassName }
 export { PropsWithClassName as PropsWithClassName_alias_1 }
 
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
 declare const ProseKit: ComponentType<ProseKitProps>;
 export { ProseKit }
 export { ProseKit as ProseKit_alias_1 }
@@ -261,28 +267,64 @@ 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(editor: Editor | null | undefined, extension: Extension | null): void;
+
 /**
  * Add an extension to the editor.
- *
- * It accepts an optional extension. If the extension is changed, the previous
+ */
+declare function useExtension(
+/**
+ * The 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.
  */
-declare function useExtension<T extends Extension = Extension>(extension: T | null): void;
+extension: Extension | null, options?: UseExtensionOptions): void;
 export { useExtension }
 export { useExtension as useExtension_alias_1 }
 
-declare function useKeymap(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?: 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 useNodeViewFactory(): NodeViewFactory;
 
-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;
 
 export declare function useReactNodeViewCreator(renderReactRenderer: ReactRendererResult['renderReactRenderer'], removeReactRenderer: ReactRendererResult['removeReactRenderer']): (options: ReactNodeViewUserOptions) => NodeViewConstructor;
 
 export declare function useReactRenderer(): ReactRendererResult;
 
+/**
+ * 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-react.d.ts

@@ -1,10 +1,12 @@
-export { ReactNodeViewComponent } from './_tsup-dts-rollup';
 export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
 export { defineReactNodeView } from './_tsup-dts-rollup';
 export { ReactNodeViewOptions } 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 { PropsWithClassName } from './_tsup-dts-rollup';
+export { ReactNodeViewComponent } from './_tsup-dts-rollup';
 export { ReactNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -3,11 +3,15 @@ import "@prosekit/core";
 import { createElement as createElement3 } from "react";
 
 // src/contexts/editor-context.ts
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 var editorContext = createContext(null);
+function useEditorContext() {
+  return useContext(editorContext);
+}
+var EditorContextProvider = editorContext.Provider;
 
 // src/views/react-views-consumer.ts
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 
 // src/extensions/react-node-view.ts
 import {
@@ -30,61 +34,47 @@ function defineReactNodeViewFactory(nodeViewFactory) {
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
-import { useEffect as useEffect2 } from "react";
 
-// src/hooks/use-editor.ts
-import {
-  ProseKitError,
-  defineUpdateHandler,
-  union,
-  defineMountHandler
-} from "@prosekit/core";
-import { useContext, useEffect, useReducer } from "react";
-function useEditor(options) {
-  var _a;
-  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
-  const value = useContext(editorContext);
-  if (!value) {
-    throw new ProseKitError(
-      "useEditor must be used within the ProseKit component"
-    );
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
+import { useEffect } from "react";
+function useEditorExtension(editor, extension) {
+  if (!editor) {
+    throw new EditorNotFoundError();
   }
-  const editor = value.editor;
-  const forceUpdate = useForceUpdate();
   useEffect(() => {
-    if (update) {
-      const extension = union([
-        defineMountHandler(forceUpdate),
-        defineUpdateHandler(forceUpdate)
-      ]);
+    if (extension) {
       return editor.use(extension);
     }
-  }, [editor, update, forceUpdate]);
-  return editor;
+  }, [editor, extension]);
 }
-function useForceUpdate() {
-  const [, dispatch] = useReducer((x) => x + 1, 0);
-  return dispatch;
+
+// src/hooks/use-priority-extension.ts
+import { withPriority } from "@prosekit/core";
+import { useMemo } from "react";
+function usePriorityExtension(extension, priority) {
+  return useMemo(() => {
+    return extension && priority ? withPriority(extension, priority) : extension;
+  }, [extension, priority]);
 }
 
 // src/hooks/use-extension.ts
-function useExtension(extension) {
-  const editor = useEditor();
-  useEffect2(() => {
-    if (extension) {
-      return editor.use(extension);
-    }
-  }, [editor, extension]);
+function useExtension(extension, options) {
+  const editorContext2 = useEditorContext();
+  useEditorExtension(
+    (options == null ? void 0 : options.editor) || editorContext2,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
 }
 
 // src/views/node-view/node-view-context.ts
-import { ProseKitError as ProseKitError2 } from "@prosekit/core";
+import { ProseKitError } from "@prosekit/core";
 import { createContext as createContext2, useContext as useContext2 } from "react";
 var createNodeViewContext = createContext2(null);
 function useNodeViewFactory() {
   const nodeViewFactory = useContext2(createNodeViewContext);
   if (!nodeViewFactory) {
-    throw new ProseKitError2("Cannot find node view factory context.");
+    throw new ProseKitError("Cannot find node view factory context.");
   }
   return nodeViewFactory;
 }
@@ -92,7 +82,7 @@ function useNodeViewFactory() {
 // src/views/react-views-consumer.ts
 var ReactViewsConsumer = () => {
   const nodeViewFactory = useNodeViewFactory();
-  const extension = useMemo(
+  const extension = useMemo2(
     () => defineReactNodeViewFactory(nodeViewFactory),
     [nodeViewFactory]
   );
@@ -101,7 +91,7 @@ var ReactViewsConsumer = () => {
 };
 
 // src/views/react-views-provider.ts
-import { createElement as createElement2, useMemo as useMemo2 } from "react";
+import { createElement as createElement2, useMemo as useMemo3 } from "react";
 
 // src/views/node-view/use-react-node-view-creator.ts
 import { useCallback } from "react";
@@ -190,12 +180,12 @@ function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
 }
 
 // src/views/react-renderer.ts
-import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 function useReactRenderer() {
   const [portals, setPortals] = useState({});
   const mountedRef = useRef(false);
-  useEffect3(() => {
+  useEffect2(() => {
     requestAnimationFrame(() => {
       mountedRef.current = true;
     });
@@ -250,7 +240,7 @@ var ReactViewsProvider = ({
     renderReactRenderer,
     removeReactRenderer
   );
-  const memoizedPortals = useMemo2(() => Object.values(portals), [portals]);
+  const memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
   return createElement2(
     createNodeViewContext.Provider,
     { value: createReactNodeView },
@@ -266,37 +256,67 @@ var ProseKit = (props) => {
     ReactViewsProvider,
     null,
     createElement3(
-      editorContext.Provider,
-      { value: { editor } },
+      EditorContextProvider,
+      { value: editor },
       createElement3(ReactViewsConsumer),
       children
     )
   );
 };
 
-// src/hooks/use-keymap.ts
-import { defineKeymap } from "@prosekit/core";
-import { useMemo as useMemo4 } from "react";
-
-// src/hooks/use-priority-extension.ts
-import { withPriority } from "@prosekit/core";
-import { useMemo as useMemo3 } from "react";
-function usePriorityExtension(extension, priority) {
-  const extensionWithPriority = useMemo3(() => {
-    return extension && priority ? withPriority(extension, priority) : extension;
-  }, [extension, priority]);
-  return useExtension(extensionWithPriority);
+// src/hooks/use-editor.ts
+import {
+  ProseKitError as ProseKitError2,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
+} from "@prosekit/core";
+import { useEffect as useEffect3, useReducer } from "react";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError2(
+      "useEditor must be used within the ProseKit component"
+    );
+  }
+  const forceUpdate = useForceUpdate();
+  useEffect3(() => {
+    if (update) {
+      const extension = union([
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      ]);
+      return editor.use(extension);
+    }
+  }, [editor, update, forceUpdate]);
+  return editor;
+}
+function useForceUpdate() {
+  const [, dispatch] = useReducer((x) => x + 1, 0);
+  return dispatch;
 }
 
 // src/hooks/use-keymap.ts
+import { defineKeymap } from "@prosekit/core";
+import { useMemo as useMemo4 } from "react";
 function useKeymap(keymap, options) {
   const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
-  usePriorityExtension(extension, options == null ? void 0 : options.priority);
+  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,
   defineReactNodeView,
   useEditor,
   useExtension,
-  useKeymap
+  useKeymap,
+  useStateUpdate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -96,8 +96,8 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.2",
-    "@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",
     "@prosemirror-adapter/core": "^0.2.6"
   },
@@ -115,13 +115,13 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "@types/react": "^18.2.47",
+    "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "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,11 +0,0 @@
-export type { ReactNodeViewComponent } from './views/node-view/react-node-view-options'
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export {
-  defineReactNodeView,
-  type ReactNodeViewOptions,
-} from './extensions/react-node-view'
-export { useEditor } from './hooks/use-editor'
-export { useExtension } from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'
-export { type PropsWithClassName } from './types'
-export type { ReactNodeViewProps } from './views/node-view/react-node-view-props'