@prosekit/react 0.4.14 → 0.5.0

package/dist/prosekit-react.d.ts

@@ -115,11 +115,35 @@ declare function useEditor<E extends Extension = any>(options?: {
   * Whether to update the component when the editor is mounted or editor state
   * is updated.
   *
+  * Note this this option doesn't work with [React
+  * compiler](https://react.dev/learn/react-compiler) because the returned
+  * editor will be the same instance after state updates. If you're using React
+  * compiler, you should use {@link useEditorDerivedValue} instead.
+  *
   * @default false
   */
   update?: boolean;
 }): Editor<E>;
 //#endregion
+//#region src/hooks/use-editor-derived-value.d.ts
+interface UseEditorDerivedOptions<E extends Extension = any> {
+  /**
+  * The editor to add the extension to. If not provided, it will use the
+  * editor from the nearest `ProseKit` component.
+  */
+  editor?: Editor<E>;
+}
+/**
+* A hook that runs a function to derive a value from the editor instance after
+* editor state changes.
+*
+* This is useful when you need to render something based on the editor state,
+* for example, whether the selected text is wrapped in an italic mark.
+*
+* @public
+*/
+declare function useEditorDerivedValue<E extends Extension, Derived>(derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): Derived;
+//#endregion
 //#region src/hooks/use-keymap.d.ts
 declare function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void;
 //#endregion
@@ -139,4 +163,4 @@ type PropsWithClassName<P = unknown> = P & {
   className?: string | undefined;
 };
 //#endregion
-export { PropsWithClassName, ProseKit, ProseKitProps, ReactMarkViewComponent, ReactMarkViewOptions, ReactMarkViewProps, ReactNodeViewComponent, ReactNodeViewOptions, ReactNodeViewProps, UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { PropsWithClassName, ProseKit, ProseKitProps, ReactMarkViewComponent, ReactMarkViewOptions, ReactMarkViewProps, ReactNodeViewComponent, ReactNodeViewOptions, ReactNodeViewProps, UseEditorDerivedOptions, UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };

package/dist/prosekit-react.js

@@ -1,6 +1,6 @@
 import { EditorContextProvider, useEditorContext } from "./editor-context-Cci4uqN_.js";
 import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/react";
-import { createElement, useEffect, useMemo, useReducer } from "react";
+import { createElement, useEffect, useMemo, useReducer, useSyncExternalStore } from "react";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
 
 //#region src/hooks/use-editor-extension.ts
@@ -170,6 +170,47 @@ function useForceUpdate() {
 	return dispatch;
 }
 
+//#endregion
+//#region src/hooks/use-editor-derived-value.ts
+/**
+* A hook that runs a function to derive a value from the editor instance after
+* editor state changes.
+*
+* This is useful when you need to render something based on the editor state,
+* for example, whether the selected text is wrapped in an italic mark.
+*
+* @public
+*/
+function useEditorDerivedValue(derive, options) {
+	const editorContext = useEditorContext();
+	const editor = options?.editor ?? editorContext;
+	if (!editor) throw new EditorNotFoundError();
+	const [subscribe, getSnapshot] = useMemo(() => {
+		return createEditorStore(editor, derive);
+	}, [editor, derive]);
+	return useSyncExternalStore(subscribe, getSnapshot);
+}
+function createEditorStore(editor, derive) {
+	let dirty = true;
+	let derived;
+	const subscribe = (onChange) => {
+		const handleChange = () => {
+			dirty = true;
+			onChange();
+		};
+		const extension = union(defineUpdateHandler(handleChange), defineMountHandler(handleChange));
+		return editor.use(extension);
+	};
+	const getSnapshot = () => {
+		if (dirty) {
+			dirty = false;
+			derived = derive(editor);
+		}
+		return derived;
+	};
+	return [subscribe, getSnapshot];
+}
+
 //#endregion
 //#region src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
@@ -190,4 +231,4 @@ function useStateUpdate(handler, options) {
 }
 
 //#endregion
-export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.4.14",
+  "version": "0.5.0",
   "private": false,
   "description": "React components and utilities for ProseKit",
   "author": {
@@ -65,9 +65,9 @@
   "dependencies": {
     "@prosemirror-adapter/core": "^0.4.0",
     "@prosemirror-adapter/react": "^0.4.1",
+    "@prosekit/core": "^0.8.1",
     "@prosekit/pm": "^0.1.10",
-    "@prosekit/web": "^0.5.9",
-    "@prosekit/core": "^0.8.1"
+    "@prosekit/web": "^0.5.9"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -86,7 +86,7 @@
     "@types/react-dom": "^19.1.5",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "tsdown": "^0.12.4",
+    "tsdown": "^0.12.5",
     "typescript": "~5.8.3",
     "vitest": "^3.1.4",
     "@prosekit/config-tsdown": "0.0.0",