@prosekit/preact 0.5.1 → 0.6.0

package/dist/prosekit-preact-autocomplete.d.ts

@@ -1,6 +1,6 @@
 import { CreateProps } from "./create-props-EGV61dJR.js";
-import { AutocompleteEmptyElement, AutocompleteEmptyEvents, AutocompleteEmptyProps as AutocompleteEmptyProps$1, AutocompleteItemElement, AutocompleteItemEvents, AutocompleteItemProps as AutocompleteItemProps$1, AutocompleteListElement, AutocompleteListEvents, AutocompleteListProps as AutocompleteListProps$1, AutocompletePopoverElement, AutocompletePopoverEvents, AutocompletePopoverProps as AutocompletePopoverProps$1 } from "@prosekit/web/autocomplete";
 import { ForwardRefExoticComponent, HTMLAttributes, RefAttributes } from "preact/compat";
+import { AutocompleteEmptyElement, AutocompleteEmptyEvents, AutocompleteEmptyProps as AutocompleteEmptyProps$1, AutocompleteItemElement, AutocompleteItemEvents, AutocompleteItemProps as AutocompleteItemProps$1, AutocompleteListElement, AutocompleteListEvents, AutocompleteListProps as AutocompleteListProps$1, AutocompletePopoverElement, AutocompletePopoverEvents, AutocompletePopoverProps as AutocompletePopoverProps$1 } from "@prosekit/web/autocomplete";
 
 //#region src/components/autocomplete/autocomplete-empty.gen.d.ts
 

package/dist/prosekit-preact.d.ts

@@ -1,5 +1,7 @@
+import { MarkViewContext, NodeViewContext } from "@prosemirror-adapter/preact";
 import { ComponentChildren, ComponentType } from "preact";
 import { Editor, Extension, Keymap, Priority } from "@prosekit/core";
+import { CoreMarkViewUserOptions, CoreNodeViewUserOptions } from "@prosemirror-adapter/core";
 import { ProseMirrorNode } from "@prosekit/pm/model";
 import { EditorState } from "@prosekit/pm/state";
 
@@ -15,6 +17,60 @@ interface ProseKitProps {
  */
 declare const ProseKit: ComponentType<ProseKitProps>;
 //#endregion
+//#region src/extensions/preact-mark-view.d.ts
+/**
+ * @public
+ */
+interface PreactMarkViewProps extends MarkViewContext {}
+/**
+ * @public
+ */
+type PreactMarkViewComponent = ComponentType<PreactMarkViewProps>;
+/**
+ * Options for {@link definePreactMarkView}.
+ *
+ * @public
+ */
+interface PreactMarkViewOptions extends CoreMarkViewUserOptions<PreactMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string;
+}
+/**
+ * Defines a mark view using a Preact component.
+ *
+ * @public
+ */
+declare function definePreactMarkView(options: PreactMarkViewOptions): Extension;
+//#endregion
+//#region src/extensions/preact-node-view.d.ts
+/**
+ * @public
+ */
+interface PreactNodeViewProps extends NodeViewContext {}
+/**
+ * @public
+ */
+type PreactNodeViewComponent = ComponentType<PreactNodeViewProps>;
+/**
+ * Options for {@link definePreactNodeView}.
+ *
+ * @public
+ */
+interface PreactNodeViewOptions extends CoreNodeViewUserOptions<PreactNodeViewComponent> {
+  /**
+   * The name of the node type.
+   */
+  name: string;
+}
+/**
+ * Defines a node view using a Preact component.
+ *
+ * @public
+ */
+declare function definePreactNodeView(options: PreactNodeViewOptions): Extension;
+//#endregion
 //#region src/hooks/use-extension.d.ts
 interface UseExtensionOptions {
   /**
@@ -61,6 +117,34 @@ declare function useEditor<E extends Extension = any>(options?: {
   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>(
+/**
+ * A function that receives the editor instance and returns a derived value.
+ *
+ * It will be called whenever the editor's document state changes, or when it
+ * mounts.
+ *
+ * This function should be memoized.
+ */
+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
@@ -87,5 +171,5 @@ type PropsWithChildren<P = unknown> = P & {
   children?: ComponentChildren | undefined;
 };
 //#endregion
-export { type PropsWithChildren, type PropsWithClass, ProseKit, type ProseKitProps, type UseExtensionOptions, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { type PreactMarkViewComponent, type PreactMarkViewOptions, type PreactMarkViewProps, type PreactNodeViewComponent, type PreactNodeViewOptions, type PreactNodeViewProps, type PropsWithChildren, type PropsWithClass, ProseKit, type ProseKitProps, type UseEditorDerivedOptions, type UseExtensionOptions, definePreactMarkView, definePreactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
 //# sourceMappingURL=prosekit-preact.d.ts.map

package/dist/prosekit-preact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-preact.d.ts","names":[],"sources":["../src/components/prosekit.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts","../src/types.ts"],"sourcesContent":[],"mappings":";;;;;;UASiB,aAAA;UACP;aACG;;AAFb;;;;;AAUa,cAAA,QAIZ,EAJsB,aAItB,CAJoC,aAIpC,CAAA;;;UCZgB,mBAAA;;;;;EDFA,MAAA,CAAA,ECON,MDPM;EAAa;;;EAEA,QAAA,CAAA,ECUjB,QDViB;AAQ9B;;;;AAAoC,iBCQpB,YAAA;;;;AAhBhB;SAAoC,EAqBvB,SArBuB,GAAA,IAAA,EAAA,OAAA,CAAA,EAsBxB,mBAtBwB,CAAA,EAAA,IAAA;;;;;;;ADFpC;AAA8B,iBEKd,YAAA,CFLc,OAAA,EAAA,CAAA,GAAA,EEMb,eFNa,EAAA,GAAA,IAAA,EAAA,OAAA,CAAA,EEOlB,mBFPkB,CAAA,EAAA,IAAA;;;;;;;;AAAb,iBGWD,SHXc,CAAA,UGWM,SHXN,GAAA,GAAA,CAAA,CAAA,QAAA,EAAA;EAAA;;;;AAU9B;;QAAqC,CAAA,EAAA,OAAA;IGSjC,MHTmB,CGSZ,CHTY,CAAA;;;iBIRP,SAAA,SAAkB,kBAAkB;;;;;;;AJFpD;AAA8B,iBKKd,cAAA,CLLc,OAAA,EAAA,CAAA,KAAA,EKMX,WLNW,EAAA,GAAA,IAAA,EAAA,OAAA,CAAA,EKOlB,mBLPkB,CAAA,EAAA,IAAA;;;;;;KMJlB,8BAA8B;;ENIzB,SAAA,CAAA,EAAA,MAAa,GAAA,SAAA;CAAA;;;;AAUjB,KMND,iBNUX,CAAA,IAAA,OAAA,CAAA,GMV4C,CNU5C,GAAA;EAAA,QAAA,CAAA,EMTY,iBNSZ,GAAA,SAAA"}
+{"version":3,"file":"prosekit-preact.d.ts","names":[],"sources":["../src/components/prosekit.ts","../src/extensions/preact-mark-view.ts","../src/extensions/preact-node-view.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts","../src/types.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAYiB,aAAA;UACP;aACG;;;;AAFb;;;AAEa,cAQA,QARA,EAQU,aARV,CAQwB,aARxB,CAAA;;;;;;UCWI,mBAAA,SAA4B,iBDb7C;;;;AAE8B,KCgBlB,uBAAA,GAA0B,aDhBR,CCgBsB,mBDhBtB,CAAA;AAQ9B;;;;;UCeiB,qBAAA,SAA8B,wBAAwB;;;AAZvE;EAKY,IAAA,EAAA,MAAA;;;;;;AAwCZ;AAAoC,iBAApB,oBAAA,CAAoB,OAAA,EAAU,qBAAV,CAAA,EAAkC,SAAlC;;;;;;UC7CnB,mBAAA,SAA4B,iBFb7C;;;;AAE8B,KEgBlB,uBAAA,GAA0B,aFhBR,CEgBsB,mBFhBtB,CAAA;AAQ9B;;;;;UEeiB,qBAAA,SAA8B,wBAAwB;;;ADZvE;EAKY,IAAA,EAAA,MAAA;;;;;;AAwCZ;AAAoC,iBCApB,oBAAA,CDAoB,OAAA,ECAU,qBDAV,CAAA,ECAkC,SDAlC;;;UE3DnB,mBAAA;;;;;WAKN;;AHJX;;UACU,CAAA,EGQG,QHRH;;;AASV;;AAAqC,iBGKrB,YAAA;;;;;WAKH,4BACD;;;;;;;;iBCnBI,YAAA,gBACC,oCACL;;;;;;;;iBCII,oBAAoB,wBLgBnC;;AAxBD;;;;;EAUa,MAAA,CAAA,EAAA,OAcZ;CAAA,CAAA,EKRG,MLQH,CKRU,CLQV,CAAA;;;UMvBgB,kCAAkC;;;;;WAKxC,OAAO;;ANNlB;;;;;AAUA;;;;AAAoC,iBMQpB,qBNRoB,CAAA,UMQY,SNRZ,EAAA,OAAA,CAAA;;;;ACGpC;AAKA;;;;MAAmD,EAAA,CAAA,MAAA,EKShC,MLTgC,CKSzB,CLTyB,CAAA,EAAA,GKSlB,OLTkB,EAAA,OAAA,CAAA,EKUvC,uBLVuC,CKUf,CLVe,CAAA,CAAA,EKWhD,OLXgD;;;iBMnBnC,SAAA,SAAkB,kBAAkB;;;;;;;;iBCGpC,cAAA,kBACG,gCACP;;;;;;KCXA,8BAA8B;;;;ATO1C;;;AAEa,KSDD,iBTCC,CAAA,IAAA,OAAA,CAAA,GSDgC,CTChC,GAAA;EAAiB,QAAA,CAAA,ESAjB,iBTAiB,GAAA,SAAA;AAQ9B,CAAA"}

package/dist/prosekit-preact.js

@@ -1,23 +1,10 @@
 import { EditorContextProvider, useEditorContext } from "./editor-context-imq7MdJr.js";
+import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/preact";
 import { h } from "preact";
 import { useEffect, useMemo, useReducer } from "preact/hooks";
-import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMountHandler, defineUpdateHandler, union, withPriority } from "@prosekit/core";
+import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
+import { useSyncExternalStore } from "preact/compat";
 
-//#region src/components/prosekit.ts
-/**
-* The root component for a ProseKit editor.
-*
-* @public
-*/
-const ProseKit = (props) => {
-	const { editor, children } = props;
-	return h(EditorContextProvider, {
-		value: editor,
-		children
-	});
-};
-
-//#endregion
 //#region src/hooks/use-editor-extension.ts
 /**
 * @internal
@@ -50,6 +37,94 @@ function useExtension(extension, options) {
 	useEditorExtension(options?.editor || editorContext, usePriorityExtension(extension, options?.priority));
 }
 
+//#endregion
+//#region src/extensions/preact-mark-view.ts
+function withMarkViewProps(component) {
+	return function MarkViewPropsWrapper() {
+		return h(component, useMarkViewContext());
+	};
+}
+/**
+* @internal
+*/
+const PreactMarkViewConsumer = () => {
+	const markViewFactory = useMarkViewFactory();
+	useExtension(useMemo(() => definePreactMarkViewFactory(markViewFactory), [markViewFactory]));
+	return null;
+};
+/**
+* Defines a mark view using a Preact component.
+*
+* @public
+*/
+function definePreactMarkView(options) {
+	const { name, component,...userOptions } = options;
+	return defineMarkViewComponent({
+		group: "preact",
+		name,
+		args: {
+			...userOptions,
+			component: withMarkViewProps(component)
+		}
+	});
+}
+function definePreactMarkViewFactory(factory) {
+	return defineMarkViewFactory({
+		group: "preact",
+		factory
+	});
+}
+
+//#endregion
+//#region src/extensions/preact-node-view.ts
+function withNodeViewProps(component) {
+	return function NodeViewPropsWrapper() {
+		return h(component, useNodeViewContext());
+	};
+}
+/**
+* @internal
+*/
+const PreactNodeViewConsumer = () => {
+	const nodeViewFactory = useNodeViewFactory();
+	useExtension(useMemo(() => definePreactNodeViewFactory(nodeViewFactory), [nodeViewFactory]));
+	return null;
+};
+/**
+* Defines a node view using a Preact component.
+*
+* @public
+*/
+function definePreactNodeView(options) {
+	const { name, component,...userOptions } = options;
+	return defineNodeViewComponent({
+		group: "preact",
+		name,
+		args: {
+			...userOptions,
+			component: withNodeViewProps(component)
+		}
+	});
+}
+function definePreactNodeViewFactory(factory) {
+	return defineNodeViewFactory({
+		group: "preact",
+		factory
+	});
+}
+
+//#endregion
+//#region src/components/prosekit.ts
+/**
+* The root component for a ProseKit editor.
+*
+* @public
+*/
+const ProseKit = (props) => {
+	const { editor, children } = props;
+	return h(ProsemirrorAdapterProvider, null, h(EditorContextProvider, { value: editor }, h(PreactNodeViewConsumer, null), h(PreactMarkViewConsumer, null), children));
+};
+
 //#endregion
 //#region src/hooks/use-doc-change.ts
 /**
@@ -58,8 +133,7 @@ function useExtension(extension, options) {
 * @public
 */
 function useDocChange(handler, options) {
-	const extension = useMemo(() => defineDocChangeHandler((view) => handler(view.state.doc)), [handler]);
-	useExtension(extension, options);
+	useExtension(useMemo(() => defineDocChangeHandler((view) => handler(view.state.doc)), [handler]), options);
 }
 
 //#endregion
@@ -91,11 +165,51 @@ 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) {
-	const extension = useMemo(() => defineKeymap(keymap), [keymap]);
-	useExtension(extension, options);
+	useExtension(useMemo(() => defineKeymap(keymap), [keymap]), options);
 }
 
 //#endregion
@@ -106,10 +220,9 @@ function useKeymap(keymap, options) {
 * @public
 */
 function useStateUpdate(handler, options) {
-	const extension = useMemo(() => defineUpdateHandler((view) => handler(view.state)), [handler]);
-	useExtension(extension, options);
+	useExtension(useMemo(() => defineUpdateHandler((view) => handler(view.state)), [handler]), options);
 }
 
 //#endregion
-export { ProseKit, useDocChange, useEditor, useExtension, useKeymap, useStateUpdate };
+export { ProseKit, definePreactMarkView, definePreactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
 //# sourceMappingURL=prosekit-preact.js.map

package/dist/prosekit-preact.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-preact.js","names":["ProseKit: ComponentType<ProseKitProps>"],"sources":["../src/components/prosekit.ts","../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import type { Editor } from '@prosekit/core'\nimport {\n  h,\n  type ComponentChildren,\n  type ComponentType,\n} from 'preact'\n\nimport { EditorContextProvider } from '../contexts/editor-context'\n\nexport interface ProseKitProps {\n  editor: Editor\n  children?: ComponentChildren\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: ComponentType<ProseKitProps> = (props) => {\n  const { editor, children } = props\n\n  return h(EditorContextProvider, { value: editor, children })\n}\n","import {\n  EditorNotFoundError,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport { useEffect } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editor: Editor | null | undefined,\n  extension: Extension | null,\n): void {\n  if (!editor) {\n    throw new EditorNotFoundError()\n  }\n\n  useEffect(() => {\n    if (extension) {\n      return editor.use(extension)\n    }\n  }, [editor, extension])\n}\n","import {\n  withPriority,\n  type Extension,\n  type Priority,\n} from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: T | null,\n  priority?: Priority | null,\n): T | null {\n  return useMemo(() => {\n    return extension && priority ? withPriority(extension, priority) : extension\n  }, [extension, priority])\n}\n","import type {\n  Editor,\n  Extension,\n  Priority,\n} from '@prosekit/core'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `ProseKit` component.\n   */\n  editor?: Editor\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n */\nexport function useExtension(\n  /**\n   * The extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: Extension | null,\n  options?: UseExtensionOptions,\n): void {\n  const editorContext = useEditorContext()\n  useEditorExtension(\n    options?.editor || editorContext,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineDocChangeHandler((view) => handler(view.state.doc)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  ProseKitError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  useEffect,\n  useReducer,\n} from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): Editor<E> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const forceUpdate = useForceUpdate()\n\n  useEffect(() => {\n    if (update) {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      return editor.use(extension)\n    }\n  }, [editor, update, forceUpdate])\n\n  return editor\n}\n\nfunction useForceUpdate() {\n  const [, dispatch] = useReducer((x: number) => x + 1, 0)\n  return dispatch\n}\n","import {\n  defineKeymap,\n  type Keymap,\n} from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\nexport function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void {\n  const extension = useMemo(() => defineKeymap(keymap), [keymap])\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineUpdateHandler((view) => handler(view.state)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n"],"mappings":";;;;;;;;;;;AAmBA,MAAaA,YAA0C,UAAU;CAC/D,MAAM,EAAE,QAAQ,aAAa;AAE7B,QAAO,EAAE,uBAAuB;EAAE,OAAO;EAAQ;EAAU,CAAC;;;;;;;;ACZ9D,SAAgB,mBACd,QACA,WACM;AACN,KAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;AAGjC,iBAAgB;AACd,MAAI,UACF,QAAO,OAAO,IAAI,UAAU;IAE7B,CAAC,QAAQ,UAAU,CAAC;;;;;;;;ACZzB,SAAgB,qBACd,WACA,UACU;AACV,QAAO,cAAc;AACnB,SAAO,aAAa,WAAW,aAAa,WAAW,SAAS,GAAG;IAClE,CAAC,WAAW,SAAS,CAAC;;;;;;;;ACW3B,SAAgB,aAKd,WACA,SACM;CACN,MAAM,gBAAgB,kBAAkB;AACxC,oBACE,SAAS,UAAU,eACnB,qBAAqB,WAAW,SAAS,SAAS,CACnD;;;;;;;;;;ACzBH,SAAgB,aACd,SACA,SACM;CACN,MAAM,YAAY,cACV,wBAAwB,SAAS,QAAQ,KAAK,MAAM,IAAI,CAAC,EAC/D,CAAC,QAAQ,CACV;AACD,cAAa,WAAW,QAAQ;;;;;;;;;;ACFlC,SAAgB,UAAqC,SAQvC;CACZ,MAAM,SAAS,SAAS,UAAU;CAElC,MAAM,SAAS,kBAAqB;AACpC,KAAI,CAAC,OACH,OAAM,IAAI,cACR,uDACD;CAGH,MAAM,cAAc,gBAAgB;AAEpC,iBAAgB;AACd,MAAI,QAAQ;GACV,MAAM,YAAY,MAChB,mBAAmB,YAAY,EAC/B,oBAAoB,YAAY,CACjC;AACD,UAAO,OAAO,IAAI,UAAU;;IAE7B;EAAC;EAAQ;EAAQ;EAAY,CAAC;AAEjC,QAAO;;AAGT,SAAS,iBAAiB;CACxB,MAAM,GAAG,YAAY,YAAY,MAAc,IAAI,GAAG,EAAE;AACxD,QAAO;;;;;AC5CT,SAAgB,UAAU,QAAgB,SAAqC;CAC7E,MAAM,YAAY,cAAc,aAAa,OAAO,EAAE,CAAC,OAAO,CAAC;AAC/D,cAAa,WAAW,QAAQ;;;;;;;;;;ACClC,SAAgB,eACd,SACA,SACM;CACN,MAAM,YAAY,cACV,qBAAqB,SAAS,QAAQ,KAAK,MAAM,CAAC,EACxD,CAAC,QAAQ,CACV;AACD,cAAa,WAAW,QAAQ"}
+{"version":3,"file":"prosekit-preact.js","names":["PreactMarkViewConsumer: FunctionComponent","PreactNodeViewConsumer: FunctionComponent","ProseKit: ComponentType<ProseKitProps>","derived: Derived"],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/preact-mark-view.ts","../src/extensions/preact-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import {\n  EditorNotFoundError,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport { useEffect } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editor: Editor | null | undefined,\n  extension: Extension | null,\n): void {\n  if (!editor) {\n    throw new EditorNotFoundError()\n  }\n\n  useEffect(() => {\n    if (extension) {\n      return editor.use(extension)\n    }\n  }, [editor, extension])\n}\n","import {\n  withPriority,\n  type Extension,\n  type Priority,\n} from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: T | null,\n  priority?: Priority | null,\n): T | null {\n  return useMemo(() => {\n    return extension && priority ? withPriority(extension, priority) : extension\n  }, [extension, priority])\n}\n","import type {\n  Editor,\n  Extension,\n  Priority,\n} from '@prosekit/core'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `ProseKit` component.\n   */\n  editor?: Editor\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n */\nexport function useExtension(\n  /**\n   * The extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: Extension | null,\n  options?: UseExtensionOptions,\n): void {\n  const editorContext = useEditorContext()\n  useEditorExtension(\n    options?.editor || editorContext,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import {\n  defineMarkViewComponent,\n  defineMarkViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContext,\n  type PreactMarkViewUserOptions,\n} from '@prosemirror-adapter/preact'\nimport {\n  h,\n  type ComponentType,\n  type FunctionComponent,\n} from 'preact'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface PreactMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type PreactMarkViewComponent = ComponentType<PreactMarkViewProps>\n\n/**\n * Options for {@link definePreactMarkView}.\n *\n * @public\n */\nexport interface PreactMarkViewOptions extends CoreMarkViewUserOptions<PreactMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nfunction withMarkViewProps(component: PreactMarkViewComponent) {\n  return function MarkViewPropsWrapper() {\n    const props: PreactMarkViewProps = useMarkViewContext()\n    return h(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport const PreactMarkViewConsumer: FunctionComponent = () => {\n  const markViewFactory = useMarkViewFactory()\n  const extension = useMemo(\n    () => definePreactMarkViewFactory(markViewFactory),\n    [markViewFactory],\n  )\n  useExtension(extension)\n\n  return null\n}\n\n/**\n * Defines a mark view using a Preact component.\n *\n * @public\n */\nexport function definePreactMarkView(options: PreactMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: PreactMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<PreactMarkViewUserOptions>({\n    group: 'preact',\n    name,\n    args,\n  })\n}\n\nfunction definePreactMarkViewFactory(\n  factory: (options: PreactMarkViewUserOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<PreactMarkViewUserOptions>({\n    group: 'preact',\n    factory,\n  })\n}\n","import {\n  defineNodeViewComponent,\n  defineNodeViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContext,\n  type PreactNodeViewUserOptions,\n} from '@prosemirror-adapter/preact'\nimport {\n  h,\n  type ComponentType,\n  type FunctionComponent,\n} from 'preact'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface PreactNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type PreactNodeViewComponent = ComponentType<PreactNodeViewProps>\n\n/**\n * Options for {@link definePreactNodeView}.\n *\n * @public\n */\nexport interface PreactNodeViewOptions extends CoreNodeViewUserOptions<PreactNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nfunction withNodeViewProps(component: PreactNodeViewComponent) {\n  return function NodeViewPropsWrapper() {\n    const props: PreactNodeViewProps = useNodeViewContext()\n    return h(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport const PreactNodeViewConsumer: FunctionComponent = () => {\n  const nodeViewFactory = useNodeViewFactory()\n  const extension = useMemo(\n    () => definePreactNodeViewFactory(nodeViewFactory),\n    [nodeViewFactory],\n  )\n  useExtension(extension)\n\n  return null\n}\n\n/**\n * Defines a node view using a Preact component.\n *\n * @public\n */\nexport function definePreactNodeView(options: PreactNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: PreactNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<PreactNodeViewUserOptions>({\n    group: 'preact',\n    name,\n    args,\n  })\n}\n\nfunction definePreactNodeViewFactory(\n  factory: (options: PreactNodeViewUserOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<PreactNodeViewUserOptions>({\n    group: 'preact',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/preact'\nimport {\n  h,\n  type ComponentChildren,\n  type ComponentType,\n} from 'preact'\n\nimport { EditorContextProvider } from '../contexts/editor-context'\nimport { PreactMarkViewConsumer } from '../extensions/preact-mark-view'\nimport { PreactNodeViewConsumer } from '../extensions/preact-node-view'\n\nexport interface ProseKitProps {\n  editor: Editor\n  children?: ComponentChildren\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: ComponentType<ProseKitProps> = (props) => {\n  const { editor, children } = props\n\n  return h(\n    ProsemirrorAdapterProvider,\n    null,\n    h(\n      EditorContextProvider,\n      { value: editor },\n      h(PreactNodeViewConsumer, null),\n      h(PreactMarkViewConsumer, null),\n      children,\n    ),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineDocChangeHandler((view) => handler(view.state.doc)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  ProseKitError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  useEffect,\n  useReducer,\n} from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): Editor<E> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const forceUpdate = useForceUpdate()\n\n  useEffect(() => {\n    if (update) {\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      return editor.use(extension)\n    }\n  }, [editor, update, forceUpdate])\n\n  return editor\n}\n\nfunction useForceUpdate() {\n  const [, dispatch] = useReducer((x: number) => x + 1, 0)\n  return dispatch\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  EditorNotFoundError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport { useSyncExternalStore } from 'preact/compat'\nimport { useMemo } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `ProseKit` component.\n   */\n  editor?: Editor<E>\n}\n\n/**\n * A hook that runs a function to derive a value from the editor instance after\n * editor state changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   *\n   * This function should be memoized.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): Derived {\n  const editorContext = useEditorContext<E>()\n  const editor = options?.editor ?? editorContext\n  if (!editor) {\n    throw new EditorNotFoundError()\n  }\n\n  const [subscribe, getSnapshot] = useMemo(() => {\n    return createEditorStore(editor, derive)\n  }, [editor, derive])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n\nfunction createEditorStore<Derived, E extends Extension = any>(editor: Editor<E>, derive: (editor: Editor<E>) => Derived) {\n  let dirty = true\n  let derived: Derived\n\n  const subscribe = (onChange: VoidFunction): VoidFunction => {\n    const handleChange = () => {\n      dirty = true\n      onChange()\n    }\n    const extension = union(\n      defineUpdateHandler(handleChange),\n      defineMountHandler(handleChange),\n    )\n    return editor.use(extension)\n  }\n\n  const getSnapshot = () => {\n    if (dirty) {\n      dirty = false\n      derived = derive(editor)\n    }\n    return derived\n  }\n\n  return [subscribe, getSnapshot] as const\n}\n","import {\n  defineKeymap,\n  type Keymap,\n} from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\nexport function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void {\n  const extension = useMemo(() => defineKeymap(keymap), [keymap])\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\nimport { useMemo } from 'preact/hooks'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineUpdateHandler((view) => handler(view.state)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,mBACd,QACA,WACM;AACN,KAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;AAGjC,iBAAgB;AACd,MAAI,UACF,QAAO,OAAO,IAAI,UAAU;IAE7B,CAAC,QAAQ,UAAU,CAAC;;;;;;;;ACZzB,SAAgB,qBACd,WACA,UACU;AACV,QAAO,cAAc;AACnB,SAAO,aAAa,WAAW,aAAa,WAAW,SAAS,GAAG;IAClE,CAAC,WAAW,SAAS,CAAC;;;;;;;;ACW3B,SAAgB,aAKd,WACA,SACM;CACN,MAAM,gBAAgB,kBAAkB;AACxC,oBACE,SAAS,UAAU,eACnB,qBAAqB,WAAW,SAAS,SAAS,CACnD;;;;;ACKH,SAAS,kBAAkB,WAAoC;AAC7D,QAAO,SAAS,uBAAuB;AAErC,SAAO,EAAE,WAD0B,oBAAoB,CAC7B;;;;;;AAO9B,MAAaA,+BAAkD;CAC7D,MAAM,kBAAkB,oBAAoB;AAK5C,cAJkB,cACV,4BAA4B,gBAAgB,EAClD,CAAC,gBAAgB,CAClB,CACsB;AAEvB,QAAO;;;;;;;AAQT,SAAgB,qBAAqB,SAA2C;CAC9E,MAAM,EAAE,MAAM,UAAW,GAAG,gBAAgB;AAO5C,QAAO,wBAAmD;EACxD,OAAO;EACP;EACA,MARsC;GACtC,GAAG;GACH,WAAW,kBAAkB,UAAU;GACxC;EAMA,CAAC;;AAGJ,SAAS,4BACP,SACA;AACA,QAAO,sBAAiD;EACtD,OAAO;EACP;EACD,CAAC;;;;;AC/CJ,SAAS,kBAAkB,WAAoC;AAC7D,QAAO,SAAS,uBAAuB;AAErC,SAAO,EAAE,WAD0B,oBAAoB,CAC7B;;;;;;AAO9B,MAAaC,+BAAkD;CAC7D,MAAM,kBAAkB,oBAAoB;AAK5C,cAJkB,cACV,4BAA4B,gBAAgB,EAClD,CAAC,gBAAgB,CAClB,CACsB;AAEvB,QAAO;;;;;;;AAQT,SAAgB,qBAAqB,SAA2C;CAC9E,MAAM,EAAE,MAAM,UAAW,GAAG,gBAAgB;AAO5C,QAAO,wBAAmD;EACxD,OAAO;EACP;EACA,MARsC;GACtC,GAAG;GACH,WAAW,kBAAkB,UAAU;GACxC;EAMA,CAAC;;AAGJ,SAAS,4BACP,SACA;AACA,QAAO,sBAAiD;EACtD,OAAO;EACP;EACD,CAAC;;;;;;;;;;ACrEJ,MAAaC,YAA0C,UAAU;CAC/D,MAAM,EAAE,QAAQ,aAAa;AAE7B,QAAO,EACL,4BACA,MACA,EACE,uBACA,EAAE,OAAO,QAAQ,EACjB,EAAE,wBAAwB,KAAK,EAC/B,EAAE,wBAAwB,KAAK,EAC/B,SACD,CACF;;;;;;;;;;ACrBH,SAAgB,aACd,SACA,SACM;AAKN,cAJkB,cACV,wBAAwB,SAAS,QAAQ,KAAK,MAAM,IAAI,CAAC,EAC/D,CAAC,QAAQ,CACV,EACuB,QAAQ;;;;;;;;;;ACFlC,SAAgB,UAAqC,SAQvC;CACZ,MAAM,SAAS,SAAS,UAAU;CAElC,MAAM,SAAS,kBAAqB;AACpC,KAAI,CAAC,OACH,OAAM,IAAI,cACR,uDACD;CAGH,MAAM,cAAc,gBAAgB;AAEpC,iBAAgB;AACd,MAAI,QAAQ;GACV,MAAM,YAAY,MAChB,mBAAmB,YAAY,EAC/B,oBAAoB,YAAY,CACjC;AACD,UAAO,OAAO,IAAI,UAAU;;IAE7B;EAAC;EAAQ;EAAQ;EAAY,CAAC;AAEjC,QAAO;;AAGT,SAAS,iBAAiB;CACxB,MAAM,GAAG,YAAY,YAAY,MAAc,IAAI,GAAG,EAAE;AACxD,QAAO;;;;;;;;;;;;;;ACzBT,SAAgB,sBASd,QACA,SACS;CACT,MAAM,gBAAgB,kBAAqB;CAC3C,MAAM,SAAS,SAAS,UAAU;AAClC,KAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;CAGjC,MAAM,CAAC,WAAW,eAAe,cAAc;AAC7C,SAAO,kBAAkB,QAAQ,OAAO;IACvC,CAAC,QAAQ,OAAO,CAAC;AAEpB,QAAO,qBAAqB,WAAW,YAAY;;AAGrD,SAAS,kBAAsD,QAAmB,QAAwC;CACxH,IAAI,QAAQ;CACZ,IAAIC;CAEJ,MAAM,aAAa,aAAyC;EAC1D,MAAM,qBAAqB;AACzB,WAAQ;AACR,aAAU;;EAEZ,MAAM,YAAY,MAChB,oBAAoB,aAAa,EACjC,mBAAmB,aAAa,CACjC;AACD,SAAO,OAAO,IAAI,UAAU;;CAG9B,MAAM,oBAAoB;AACxB,MAAI,OAAO;AACT,WAAQ;AACR,aAAU,OAAO,OAAO;;AAE1B,SAAO;;AAGT,QAAO,CAAC,WAAW,YAAY;;;;;ACpEjC,SAAgB,UAAU,QAAgB,SAAqC;AAE7E,cADkB,cAAc,aAAa,OAAO,EAAE,CAAC,OAAO,CAAC,EACvC,QAAQ;;;;;;;;;;ACClC,SAAgB,eACd,SACA,SACM;AAKN,cAJkB,cACV,qBAAqB,SAAS,QAAQ,KAAK,MAAM,CAAC,EACxD,CAAC,QAAQ,CACV,EACuB,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/preact",
   "type": "module",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "private": false,
   "description": "Preact components and utilities for ProseKit",
   "author": {
@@ -68,9 +68,11 @@
     "src"
   ],
   "dependencies": {
+    "@prosemirror-adapter/core": "^0.4.5",
+    "@prosemirror-adapter/preact": "^0.4.5",
+    "@prosekit/web": "^0.7.4",
     "@prosekit/core": "^0.8.4",
-    "@prosekit/pm": "^0.1.12",
-    "@prosekit/web": "^0.7.4"
+    "@prosekit/pm": "^0.1.12"
   },
   "peerDependencies": {
     "preact": ">= 10.11.0"
@@ -81,8 +83,8 @@
     }
   },
   "devDependencies": {
-    "preact": "^10.27.1",
-    "tsdown": "^0.14.2",
+    "preact": "^10.27.2",
+    "tsdown": "^0.15.6",
     "typescript": "~5.9.2",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"

package/src/components/prosekit.ts

@@ -1,4 +1,5 @@
 import type { Editor } from '@prosekit/core'
+import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/preact'
 import {
   h,
   type ComponentChildren,
@@ -6,6 +7,8 @@ import {
 } from 'preact'
 
 import { EditorContextProvider } from '../contexts/editor-context'
+import { PreactMarkViewConsumer } from '../extensions/preact-mark-view'
+import { PreactNodeViewConsumer } from '../extensions/preact-node-view'
 
 export interface ProseKitProps {
   editor: Editor
@@ -20,5 +23,15 @@ export interface ProseKitProps {
 export const ProseKit: ComponentType<ProseKitProps> = (props) => {
   const { editor, children } = props
 
-  return h(EditorContextProvider, { value: editor, children })
+  return h(
+    ProsemirrorAdapterProvider,
+    null,
+    h(
+      EditorContextProvider,
+      { value: editor },
+      h(PreactNodeViewConsumer, null),
+      h(PreactMarkViewConsumer, null),
+      children,
+    ),
+  )
 }

package/src/extensions/preact-mark-view.ts

@@ -0,0 +1,93 @@
+import {
+  defineMarkViewComponent,
+  defineMarkViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { MarkViewConstructor } from '@prosekit/pm/view'
+import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useMarkViewContext,
+  useMarkViewFactory,
+  type MarkViewContext,
+  type PreactMarkViewUserOptions,
+} from '@prosemirror-adapter/preact'
+import {
+  h,
+  type ComponentType,
+  type FunctionComponent,
+} from 'preact'
+import { useMemo } from 'preact/hooks'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface PreactMarkViewProps extends MarkViewContext {}
+
+/**
+ * @public
+ */
+export type PreactMarkViewComponent = ComponentType<PreactMarkViewProps>
+
+/**
+ * Options for {@link definePreactMarkView}.
+ *
+ * @public
+ */
+export interface PreactMarkViewOptions extends CoreMarkViewUserOptions<PreactMarkViewComponent> {
+  /**
+   * The name of the mark type.
+   */
+  name: string
+}
+
+function withMarkViewProps(component: PreactMarkViewComponent) {
+  return function MarkViewPropsWrapper() {
+    const props: PreactMarkViewProps = useMarkViewContext()
+    return h(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export const PreactMarkViewConsumer: FunctionComponent = () => {
+  const markViewFactory = useMarkViewFactory()
+  const extension = useMemo(
+    () => definePreactMarkViewFactory(markViewFactory),
+    [markViewFactory],
+  )
+  useExtension(extension)
+
+  return null
+}
+
+/**
+ * Defines a mark view using a Preact component.
+ *
+ * @public
+ */
+export function definePreactMarkView(options: PreactMarkViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: PreactMarkViewUserOptions = {
+    ...userOptions,
+    component: withMarkViewProps(component),
+  }
+
+  return defineMarkViewComponent<PreactMarkViewUserOptions>({
+    group: 'preact',
+    name,
+    args,
+  })
+}
+
+function definePreactMarkViewFactory(
+  factory: (options: PreactMarkViewUserOptions) => MarkViewConstructor,
+) {
+  return defineMarkViewFactory<PreactMarkViewUserOptions>({
+    group: 'preact',
+    factory,
+  })
+}

package/src/extensions/preact-node-view.ts

@@ -0,0 +1,93 @@
+import {
+  defineNodeViewComponent,
+  defineNodeViewFactory,
+  type Extension,
+} from '@prosekit/core'
+import type { NodeViewConstructor } from '@prosekit/pm/view'
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
+import {
+  useNodeViewContext,
+  useNodeViewFactory,
+  type NodeViewContext,
+  type PreactNodeViewUserOptions,
+} from '@prosemirror-adapter/preact'
+import {
+  h,
+  type ComponentType,
+  type FunctionComponent,
+} from 'preact'
+import { useMemo } from 'preact/hooks'
+
+import { useExtension } from '../hooks/use-extension'
+
+/**
+ * @public
+ */
+export interface PreactNodeViewProps extends NodeViewContext {}
+
+/**
+ * @public
+ */
+export type PreactNodeViewComponent = ComponentType<PreactNodeViewProps>
+
+/**
+ * Options for {@link definePreactNodeView}.
+ *
+ * @public
+ */
+export interface PreactNodeViewOptions extends CoreNodeViewUserOptions<PreactNodeViewComponent> {
+  /**
+   * The name of the node type.
+   */
+  name: string
+}
+
+function withNodeViewProps(component: PreactNodeViewComponent) {
+  return function NodeViewPropsWrapper() {
+    const props: PreactNodeViewProps = useNodeViewContext()
+    return h(component, props)
+  }
+}
+
+/**
+ * @internal
+ */
+export const PreactNodeViewConsumer: FunctionComponent = () => {
+  const nodeViewFactory = useNodeViewFactory()
+  const extension = useMemo(
+    () => definePreactNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory],
+  )
+  useExtension(extension)
+
+  return null
+}
+
+/**
+ * Defines a node view using a Preact component.
+ *
+ * @public
+ */
+export function definePreactNodeView(options: PreactNodeViewOptions): Extension {
+  const { name, component, ...userOptions } = options
+
+  const args: PreactNodeViewUserOptions = {
+    ...userOptions,
+    component: withNodeViewProps(component),
+  }
+
+  return defineNodeViewComponent<PreactNodeViewUserOptions>({
+    group: 'preact',
+    name,
+    args,
+  })
+}
+
+function definePreactNodeViewFactory(
+  factory: (options: PreactNodeViewUserOptions) => NodeViewConstructor,
+) {
+  return defineNodeViewFactory<PreactNodeViewUserOptions>({
+    group: 'preact',
+    factory,
+  })
+}

package/src/hooks/use-editor-derived-value.ts

@@ -0,0 +1,81 @@
+import {
+  defineMountHandler,
+  defineUpdateHandler,
+  EditorNotFoundError,
+  union,
+  type Editor,
+  type Extension,
+} from '@prosekit/core'
+import { useSyncExternalStore } from 'preact/compat'
+import { useMemo } from 'preact/hooks'
+
+import { useEditorContext } from '../contexts/editor-context'
+
+export 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
+ */
+export function useEditorDerivedValue<E extends Extension, Derived>(
+  /**
+   * A function that receives the editor instance and returns a derived value.
+   *
+   * It will be called whenever the editor's document state changes, or when it
+   * mounts.
+   *
+   * This function should be memoized.
+   */
+  derive: (editor: Editor<E>) => Derived,
+  options?: UseEditorDerivedOptions<E>,
+): Derived {
+  const editorContext = useEditorContext<E>()
+  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<Derived, E extends Extension = any>(editor: Editor<E>, derive: (editor: Editor<E>) => Derived) {
+  let dirty = true
+  let derived: Derived
+
+  const subscribe = (onChange: VoidFunction): VoidFunction => {
+    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] as const
+}

package/src/index.ts

@@ -2,8 +2,24 @@ export {
   ProseKit,
   type ProseKitProps,
 } from './components/prosekit'
+export {
+  definePreactMarkView,
+  type PreactMarkViewComponent,
+  type PreactMarkViewOptions,
+  type PreactMarkViewProps,
+} from './extensions/preact-mark-view'
+export {
+  definePreactNodeView,
+  type PreactNodeViewComponent,
+  type PreactNodeViewOptions,
+  type PreactNodeViewProps,
+} from './extensions/preact-node-view'
 export { useDocChange } from './hooks/use-doc-change'
 export { useEditor } from './hooks/use-editor'
+export {
+  useEditorDerivedValue,
+  type UseEditorDerivedOptions,
+} from './hooks/use-editor-derived-value'
 export {
   useExtension,
   type UseExtensionOptions,