@prosekit/preact 0.6.7 → 0.7.0-beta.0

package/dist/prosekit-preact.js

@@ -1,119 +1,93 @@
-import { n as useEditorContext, t as EditorContextProvider } from "./editor-context-DJZHNwgB.js";
-import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/preact";
-import { h } from "preact";
+import { n as useEditorContext, t as EditorContextProvider } from "./editor-context.js";
+import { Fragment, createElement } from "preact";
 import { useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef } from "preact/hooks";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
+import { AbstractPreactMarkView, AbstractPreactNodeView, buildPreactMarkViewCreator, buildPreactNodeViewCreator, usePreactRenderer } from "@prosemirror-adapter/preact";
+import { createPortal, useSyncExternalStore } from "preact/compat";
 import { queueExtension } from "@prosekit/web";
-import { useSyncExternalStore } from "preact/compat";
-
-//#region src/hooks/use-editor-extension.ts
-/**
-* @internal
-*/
-function useEditorExtension(editor, extension) {
-	if (!editor) throw new EditorNotFoundError();
-	useEffect(() => {
-		if (extension) return queueExtension(editor, extension);
-	}, [editor, extension]);
-}
-
-//#endregion
-//#region src/hooks/use-priority-extension.ts
-/**
-* @internal
-*/
-function usePriorityExtension(extension, priority) {
-	return useMemo(() => {
-		return extension && priority ? withPriority(extension, priority) : extension;
-	}, [extension, priority]);
-}
-
-//#endregion
-//#region src/hooks/use-extension.ts
-/**
-* Add an extension to the editor.
-*/
-function useExtension(extension, options) {
-	const editorContext = useEditorContext();
-	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());
-	};
-}
+var ProseKitPreactMarkView = class extends AbstractPreactMarkView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			return createPortal(createElement(UserComponent, { ...this.context }), this.dom);
+		};
+	}
+};
 /**
 * @internal
 */
-const PreactMarkViewConsumer = () => {
-	const markViewFactory = useMarkViewFactory();
-	useExtension(useMemo(() => definePreactMarkViewFactory(markViewFactory), [markViewFactory]));
-	return null;
-};
+function definePreactMarkViewFactory(renderPreactRenderer, removePreactRenderer) {
+	return defineMarkViewFactory({
+		group: "preact",
+		factory: buildPreactMarkViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactMarkView)
+	});
+}
 /**
 * 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)
-		}
+		name: options.name,
+		args: options
 	});
 }
-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());
-	};
-}
+var ProseKitPreactNodeView = class extends AbstractPreactNodeView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			return createPortal(createElement(UserComponent, { ...this.context }), this.dom);
+		};
+	}
+};
 /**
 * @internal
 */
-const PreactNodeViewConsumer = () => {
-	const nodeViewFactory = useNodeViewFactory();
-	useExtension(useMemo(() => definePreactNodeViewFactory(nodeViewFactory), [nodeViewFactory]));
-	return null;
-};
+function definePreactNodeViewFactory(renderPreactRenderer, removePreactRenderer) {
+	return defineNodeViewFactory({
+		group: "preact",
+		factory: buildPreactNodeViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactNodeView)
+	});
+}
 /**
 * 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)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function definePreactNodeViewFactory(factory) {
-	return defineNodeViewFactory({
-		group: "preact",
-		factory
-	});
+//#endregion
+//#region src/hooks/use-editor-extension.ts
+/**
+* @internal
+*/
+function useEditorExtension(editor, extension) {
+	if (!editor) throw new EditorNotFoundError();
+	useEffect(() => {
+		if (extension) return queueExtension(editor, extension);
+	}, [editor, extension]);
 }
-
+//#endregion
+//#region src/components/view-renderer.ts
+const ViewRenderer = ({ editor, children }) => {
+	const { renderPreactRenderer, removePreactRenderer, render } = usePreactRenderer();
+	useEditorExtension(editor, useMemo(() => {
+		return union([definePreactMarkViewFactory(renderPreactRenderer, removePreactRenderer), definePreactNodeViewFactory(renderPreactRenderer, removePreactRenderer)]);
+	}, [renderPreactRenderer, removePreactRenderer]));
+	return createElement(Fragment, null, createElement(Fragment, null, children), createElement(Fragment, null, render()));
+};
 //#endregion
 //#region src/components/prosekit.ts
 /**
@@ -123,9 +97,11 @@ function definePreactNodeViewFactory(factory) {
 */
 const ProseKit = (props) => {
 	const { editor, children } = props;
-	return h(EditorContextProvider, { value: editor }, h(ProsemirrorAdapterProvider, null, h(PreactNodeViewConsumer, null), h(PreactMarkViewConsumer, null), children));
+	return createElement(EditorContextProvider, { value: editor }, createElement(ViewRenderer, {
+		editor,
+		children
+	}));
 };
-
 //#endregion
 //#region src/hooks/use-event-callback.ts
 /**
@@ -138,7 +114,25 @@ function useEventCallback(callback) {
 	}, [callback]);
 	return useCallback((...args) => callbackRef.current(...args), []);
 }
-
+//#endregion
+//#region src/hooks/use-priority-extension.ts
+/**
+* @internal
+*/
+function usePriorityExtension(extension, priority) {
+	return useMemo(() => {
+		return extension && priority ? withPriority(extension, priority) : extension;
+	}, [extension, priority]);
+}
+//#endregion
+//#region src/hooks/use-extension.ts
+/**
+* Add an extension to the editor.
+*/
+function useExtension(extension, options) {
+	const editorContext = useEditorContext();
+	useEditorExtension(options?.editor || editorContext, usePriorityExtension(extension, options?.priority));
+}
 //#endregion
 //#region src/hooks/use-doc-change.ts
 /**
@@ -150,7 +144,6 @@ function useDocChange(handler, options) {
 	const memoizedHandler = useEventCallback(handler);
 	useExtension(useMemo(() => defineDocChangeHandler((view) => memoizedHandler(view.state.doc)), [memoizedHandler]), options);
 }
-
 //#endregion
 //#region src/hooks/use-editor-derived-value.ts
 /**
@@ -193,7 +186,6 @@ function createEditorStore(editor, derive) {
 	};
 	return [subscribe, getSnapshot];
 }
-
 //#endregion
 //#region src/hooks/use-editor.ts
 /**
@@ -222,13 +214,11 @@ function useForceUpdate() {
 	const [, dispatch] = useReducer((x) => x + 1, 0);
 	return dispatch;
 }
-
 //#endregion
 //#region src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
 	useExtension(useMemo(() => defineKeymap(keymap), [keymap]), options);
 }
-
 //#endregion
 //#region src/hooks/use-state-update.ts
 /**
@@ -240,7 +230,7 @@ function useStateUpdate(handler, options) {
 	const memoizedHandler = useEventCallback(handler);
 	useExtension(useMemo(() => defineUpdateHandler((view) => memoizedHandler(view.state)), [memoizedHandler]), options);
 }
-
 //#endregion
 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":[],"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-event-callback.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { queueExtension } from '@prosekit/web'\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 queueExtension(editor, extension)\n    }\n  }, [editor, extension])\n}\n","import { withPriority, type Extension, type Priority } 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 { Editor, Extension, Priority } from '@prosekit/core'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\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 { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport { useMarkViewContext, useMarkViewFactory, type MarkViewContext, type PreactMarkViewUserOptions } from '@prosemirror-adapter/preact'\nimport { h, type ComponentType, type FunctionComponent } from 'preact'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension } from '../hooks/use-extension.ts'\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 { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport { useNodeViewContext, useNodeViewFactory, type NodeViewContext, type PreactNodeViewUserOptions } from '@prosemirror-adapter/preact'\nimport { h, type ComponentType, type FunctionComponent } from 'preact'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension } from '../hooks/use-extension.ts'\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 { h, type ComponentChildren, type ComponentType } from 'preact'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\nimport { PreactMarkViewConsumer } from '../extensions/preact-mark-view.ts'\nimport { PreactNodeViewConsumer } from '../extensions/preact-node-view.ts'\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    EditorContextProvider,\n    { value: editor },\n    h(\n      ProsemirrorAdapterProvider,\n      null,\n      h(PreactNodeViewConsumer, null),\n      h(PreactMarkViewConsumer, null),\n      children,\n    ),\n  )\n}\n","import { useCallback, useLayoutEffect, useRef } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  callback: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const callbackRef = useRef(callback)\n  useLayoutEffect(() => {\n    callbackRef.current = callback\n  }, [callback])\n  return useCallback((...args: Args) => callbackRef.current(...args), [])\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\nimport { useMemo } from 'preact/hooks'\n\nimport { useEventCallback } from './use-event-callback.ts'\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 memoizedHandler = useEventCallback(handler)\n  const extension = useMemo(\n    () => defineDocChangeHandler((view) => memoizedHandler(view.state.doc)),\n    [memoizedHandler],\n  )\n  useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, EditorNotFoundError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useSyncExternalStore } from 'preact/compat'\nimport { useMemo } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\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 * Runs a function to derive a value from the editor instance after editor state\n * 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 * It returns the derived value that updates whenever the editor state changes.\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 { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useEffect, useReducer } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\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 { defineKeymap, type Keymap } from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 { useEventCallback } from './use-event-callback.ts'\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 memoizedHandler = useEventCallback(handler)\n  const extension = useMemo(\n    () => defineUpdateHandler((view) => memoizedHandler(view.state)),\n    [memoizedHandler],\n  )\n  useExtension(extension, options)\n}\n"],"mappings":"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"}
+{"version":3,"file":"prosekit-preact.js","names":[],"sources":["../src/extensions/preact-mark-view.ts","../src/extensions/preact-node-view.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-event-callback.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-editor.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractPreactMarkView,\n  buildPreactMarkViewCreator,\n  type MarkViewContext,\n  type PreactRendererResult,\n} from '@prosemirror-adapter/preact'\nimport { createElement, type ComponentType } from 'preact'\nimport { createPortal } from 'preact/compat'\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\nclass ProseKitPreactMarkView extends AbstractPreactMarkView<PreactMarkViewComponent> {\n  render = () => {\n    const UserComponent = this.component\n    const props = { ...this.context }\n    return createPortal(\n      createElement(UserComponent, props),\n      this.dom,\n    )\n  }\n}\n\n/**\n * @internal\n */\nexport function definePreactMarkViewFactory(\n  renderPreactRenderer: PreactRendererResult['renderPreactRenderer'],\n  removePreactRenderer: PreactRendererResult['removePreactRenderer'],\n): Extension {\n  const factory = buildPreactMarkViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactMarkView)\n  return defineMarkViewFactory<PreactMarkViewOptions>({\n    group: 'preact',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Preact component.\n *\n * @public\n */\nexport function definePreactMarkView(options: PreactMarkViewOptions): Extension {\n  return defineMarkViewComponent<PreactMarkViewOptions>({\n    group: 'preact',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractPreactNodeView,\n  buildPreactNodeViewCreator,\n  type NodeViewContext,\n  type PreactRendererResult,\n} from '@prosemirror-adapter/preact'\nimport { createElement, type ComponentType } from 'preact'\nimport { createPortal } from 'preact/compat'\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\nclass ProseKitPreactNodeView extends AbstractPreactNodeView<PreactNodeViewComponent> {\n  render = () => {\n    const UserComponent = this.component\n    const props = { ...this.context }\n    return createPortal(\n      createElement(UserComponent, props),\n      this.dom,\n    )\n  }\n}\n\n/**\n * @internal\n */\nexport function definePreactNodeViewFactory(\n  renderPreactRenderer: PreactRendererResult['renderPreactRenderer'],\n  removePreactRenderer: PreactRendererResult['removePreactRenderer'],\n): Extension {\n  const factory = buildPreactNodeViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactNodeView)\n  return defineNodeViewFactory<PreactNodeViewOptions>({\n    group: 'preact',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Preact component.\n *\n * @public\n */\nexport function definePreactNodeView(options: PreactNodeViewOptions): Extension {\n  return defineNodeViewComponent<PreactNodeViewOptions>({\n    group: 'preact',\n    name: options.name,\n    args: options,\n  })\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { queueExtension } from '@prosekit/web'\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 queueExtension(editor, extension)\n    }\n  }, [editor, extension])\n}\n","import { union, type Editor } from '@prosekit/core'\nimport { usePreactRenderer } from '@prosemirror-adapter/preact'\nimport { createElement, Fragment, type ComponentChildren, type ComponentType } from 'preact'\nimport { useMemo } from 'preact/hooks'\n\nimport { definePreactMarkViewFactory } from '../extensions/preact-mark-view.ts'\nimport { definePreactNodeViewFactory } from '../extensions/preact-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\ninterface ViewRendererProps {\n  editor: Editor\n  children: ComponentChildren\n}\n\nexport const ViewRenderer: ComponentType<ViewRendererProps> = ({ editor, children }) => {\n  const { renderPreactRenderer, removePreactRenderer, render } = usePreactRenderer()\n\n  const extension = useMemo(() => {\n    return union([\n      definePreactMarkViewFactory(renderPreactRenderer, removePreactRenderer),\n      definePreactNodeViewFactory(renderPreactRenderer, removePreactRenderer),\n    ])\n  }, [renderPreactRenderer, removePreactRenderer])\n\n  useEditorExtension(editor, extension)\n\n  return createElement(Fragment, null, createElement(Fragment, null, children), createElement(Fragment, null, render()))\n}\n","import type { Editor } from '@prosekit/core'\nimport { createElement, type ComponentChildren, type ComponentType } from 'preact'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\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 createElement(\n    EditorContextProvider,\n    { value: editor },\n    createElement(\n      ViewRenderer,\n      { editor, children },\n    ),\n  )\n}\n","import { useCallback, useLayoutEffect, useRef } from 'preact/hooks'\n\n/**\n * @internal\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  callback: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const callbackRef = useRef(callback)\n  useLayoutEffect(() => {\n    callbackRef.current = callback\n  }, [callback])\n  return useCallback((...args: Args) => callbackRef.current(...args), [])\n}\n","import { withPriority, type Extension, type Priority } 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 { Editor, Extension, Priority } from '@prosekit/core'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\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 { useEventCallback } from './use-event-callback.ts'\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 memoizedHandler = useEventCallback(handler)\n  const extension = useMemo(\n    () => defineDocChangeHandler((view) => memoizedHandler(view.state.doc)),\n    [memoizedHandler],\n  )\n  useExtension(extension, options)\n}\n","import { defineMountHandler, defineUpdateHandler, EditorNotFoundError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useSyncExternalStore } from 'preact/compat'\nimport { useMemo } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\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 * Runs a function to derive a value from the editor instance after editor state\n * 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 * It returns the derived value that updates whenever the editor state changes.\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 { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useEffect, useReducer } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\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 { defineKeymap, type Keymap } from '@prosekit/core'\nimport { useMemo } from 'preact/hooks'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 { useEventCallback } from './use-event-callback.ts'\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 memoizedHandler = useEventCallback(handler)\n  const extension = useMemo(\n    () => defineUpdateHandler((view) => memoizedHandler(view.state)),\n    [memoizedHandler],\n  )\n  useExtension(extension, options)\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/preact",
   "type": "module",
-  "version": "0.6.7",
+  "version": "0.7.0-beta.0",
   "private": false,
   "description": "Preact components and utilities for ProseKit",
   "author": {
@@ -68,10 +68,10 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.6",
-    "@prosemirror-adapter/preact": "^0.5.1",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/web": "^0.7.12",
+    "@prosemirror-adapter/core": "^0.5.2",
+    "@prosemirror-adapter/preact": "^0.5.2",
+    "@prosekit/core": "^0.12.0-beta.0",
+    "@prosekit/web": "^0.8.0-beta.0",
     "@prosekit/pm": "^0.1.15"
   },
   "peerDependencies": {
@@ -83,12 +83,12 @@
     }
   },
   "devDependencies": {
-    "preact": "^10.28.4",
-    "tsdown": "^0.20.3",
+    "preact": "^10.29.0",
+    "tsdown": "^0.21.4",
     "typescript": "~5.9.3",
     "@prosekit/config-ts": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/config-tsdown": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

package/src/components/prosekit.ts

@@ -1,10 +1,9 @@
 import type { Editor } from '@prosekit/core'
-import { ProsemirrorAdapterProvider } from '@prosemirror-adapter/preact'
-import { h, type ComponentChildren, type ComponentType } from 'preact'
+import { createElement, type ComponentChildren, type ComponentType } from 'preact'
 
 import { EditorContextProvider } from '../contexts/editor-context.ts'
-import { PreactMarkViewConsumer } from '../extensions/preact-mark-view.ts'
-import { PreactNodeViewConsumer } from '../extensions/preact-node-view.ts'
+
+import { ViewRenderer } from './view-renderer.ts'
 
 export interface ProseKitProps {
   editor: Editor
@@ -19,15 +18,12 @@ export interface ProseKitProps {
 export const ProseKit: ComponentType<ProseKitProps> = (props) => {
   const { editor, children } = props
 
-  return h(
+  return createElement(
     EditorContextProvider,
     { value: editor },
-    h(
-      ProsemirrorAdapterProvider,
-      null,
-      h(PreactNodeViewConsumer, null),
-      h(PreactMarkViewConsumer, null),
-      children,
+    createElement(
+      ViewRenderer,
+      { editor, children },
     ),
   )
 }

package/src/components/view-renderer.ts

@@ -0,0 +1,28 @@
+import { union, type Editor } from '@prosekit/core'
+import { usePreactRenderer } from '@prosemirror-adapter/preact'
+import { createElement, Fragment, type ComponentChildren, type ComponentType } from 'preact'
+import { useMemo } from 'preact/hooks'
+
+import { definePreactMarkViewFactory } from '../extensions/preact-mark-view.ts'
+import { definePreactNodeViewFactory } from '../extensions/preact-node-view.ts'
+import { useEditorExtension } from '../hooks/use-editor-extension.ts'
+
+interface ViewRendererProps {
+  editor: Editor
+  children: ComponentChildren
+}
+
+export const ViewRenderer: ComponentType<ViewRendererProps> = ({ editor, children }) => {
+  const { renderPreactRenderer, removePreactRenderer, render } = usePreactRenderer()
+
+  const extension = useMemo(() => {
+    return union([
+      definePreactMarkViewFactory(renderPreactRenderer, removePreactRenderer),
+      definePreactNodeViewFactory(renderPreactRenderer, removePreactRenderer),
+    ])
+  }, [renderPreactRenderer, removePreactRenderer])
+
+  useEditorExtension(editor, extension)
+
+  return createElement(Fragment, null, createElement(Fragment, null, children), createElement(Fragment, null, render()))
+}

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

@@ -1,11 +1,13 @@
 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.ts'
+import {
+  AbstractPreactMarkView,
+  buildPreactMarkViewCreator,
+  type MarkViewContext,
+  type PreactRendererResult,
+} from '@prosemirror-adapter/preact'
+import { createElement, type ComponentType } from 'preact'
+import { createPortal } from 'preact/compat'
 
 /**
  * @public
@@ -29,25 +31,29 @@ export interface PreactMarkViewOptions extends CoreMarkViewUserOptions<PreactMar
   name: string
 }
 
-function withMarkViewProps(component: PreactMarkViewComponent) {
-  return function MarkViewPropsWrapper() {
-    const props: PreactMarkViewProps = useMarkViewContext()
-    return h(component, props)
+class ProseKitPreactMarkView extends AbstractPreactMarkView<PreactMarkViewComponent> {
+  render = () => {
+    const UserComponent = this.component
+    const props = { ...this.context }
+    return createPortal(
+      createElement(UserComponent, props),
+      this.dom,
+    )
   }
 }
 
 /**
  * @internal
  */
-export const PreactMarkViewConsumer: FunctionComponent = () => {
-  const markViewFactory = useMarkViewFactory()
-  const extension = useMemo(
-    () => definePreactMarkViewFactory(markViewFactory),
-    [markViewFactory],
-  )
-  useExtension(extension)
-
-  return null
+export function definePreactMarkViewFactory(
+  renderPreactRenderer: PreactRendererResult['renderPreactRenderer'],
+  removePreactRenderer: PreactRendererResult['removePreactRenderer'],
+): Extension {
+  const factory = buildPreactMarkViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactMarkView)
+  return defineMarkViewFactory<PreactMarkViewOptions>({
+    group: 'preact',
+    factory,
+  })
 }
 
 /**
@@ -56,25 +62,9 @@ export const PreactMarkViewConsumer: FunctionComponent = () => {
  * @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>({
+  return defineMarkViewComponent<PreactMarkViewOptions>({
     group: 'preact',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

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

@@ -1,11 +1,13 @@
 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.ts'
+import {
+  AbstractPreactNodeView,
+  buildPreactNodeViewCreator,
+  type NodeViewContext,
+  type PreactRendererResult,
+} from '@prosemirror-adapter/preact'
+import { createElement, type ComponentType } from 'preact'
+import { createPortal } from 'preact/compat'
 
 /**
  * @public
@@ -29,25 +31,29 @@ export interface PreactNodeViewOptions extends CoreNodeViewUserOptions<PreactNod
   name: string
 }
 
-function withNodeViewProps(component: PreactNodeViewComponent) {
-  return function NodeViewPropsWrapper() {
-    const props: PreactNodeViewProps = useNodeViewContext()
-    return h(component, props)
+class ProseKitPreactNodeView extends AbstractPreactNodeView<PreactNodeViewComponent> {
+  render = () => {
+    const UserComponent = this.component
+    const props = { ...this.context }
+    return createPortal(
+      createElement(UserComponent, props),
+      this.dom,
+    )
   }
 }
 
 /**
  * @internal
  */
-export const PreactNodeViewConsumer: FunctionComponent = () => {
-  const nodeViewFactory = useNodeViewFactory()
-  const extension = useMemo(
-    () => definePreactNodeViewFactory(nodeViewFactory),
-    [nodeViewFactory],
-  )
-  useExtension(extension)
-
-  return null
+export function definePreactNodeViewFactory(
+  renderPreactRenderer: PreactRendererResult['renderPreactRenderer'],
+  removePreactRenderer: PreactRendererResult['removePreactRenderer'],
+): Extension {
+  const factory = buildPreactNodeViewCreator(renderPreactRenderer, removePreactRenderer, ProseKitPreactNodeView)
+  return defineNodeViewFactory<PreactNodeViewOptions>({
+    group: 'preact',
+    factory,
+  })
 }
 
 /**
@@ -56,25 +62,9 @@ export const PreactNodeViewConsumer: FunctionComponent = () => {
  * @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>({
+  return defineNodeViewComponent<PreactNodeViewOptions>({
     group: 'preact',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/dist/create-component-_3OMD_6h.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component-_3OMD_6h.js","names":[],"sources":["../src/components/merge-refs.ts","../src/components/create-component.ts"],"sourcesContent":["import type { Ref } from 'preact'\n\n/**\n * Assigns a value to a ref.\n * @returns The ref cleanup callback, if any.\n */\nfunction assignRef<T>(\n  ref: Ref<T> | undefined,\n  value: T | null,\n): VoidFunction | void {\n  if (typeof ref === 'function') {\n    return ref(value)\n  } else if (ref) {\n    ref.current = value\n  }\n}\n\n/**\n * Merges multiple refs into a single one.\n */\nexport function mergeRefs<T>(refs: (Ref<T> | undefined)[]): Ref<T> {\n  return (value: T | null) => {\n    const cleanups: VoidFunction[] = []\n\n    for (const ref of refs) {\n      const cleanup = assignRef(ref, value)\n      const isCleanup = typeof cleanup === 'function'\n      cleanups.push(isCleanup ? cleanup : () => assignRef(ref, null))\n    }\n\n    return () => {\n      for (const cleanup of cleanups) cleanup()\n    }\n  }\n}\n","import type { AnyFunction } from '@prosekit/core'\nimport { createElement } from 'preact'\nimport { forwardRef, type ForwardRefExoticComponent, type HTMLAttributes, type RefAttributes } from 'preact/compat'\nimport { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks'\n\nimport { useEditorContext } from '../contexts/editor-context.ts'\n\nimport { mergeRefs } from './merge-refs.ts'\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect\n\nexport function createComponent<\n  Props extends object,\n  CustomElement extends HTMLElement,\n>(\n  tagName: string,\n  displayName: string,\n  propNames: string[],\n  eventNames: string[],\n): ForwardRefExoticComponent<\n  Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>\n> {\n  const hasEditor = propNames.includes('editor')\n  const lowerCaseEventNameMap = new Map(\n    eventNames.map((name) => [name.toLowerCase(), name]),\n  )\n\n  const Component = forwardRef<any, any>((props: Props, ref) => {\n    const [el, setEl] = useState<HTMLElement | null>(null)\n\n    const properties: Record<string, unknown> = {}\n    const attributes: Record<string, unknown> = {}\n    const eventHandlersRef = useRef<Record<string, AnyFunction>>({})\n    const eventHandlers: Record<string, AnyFunction> = {}\n\n    for (const [name, value] of Object.entries(props)) {\n      if (value === undefined) {\n        continue\n      }\n\n      if (propNames.includes(name)) {\n        properties[name] = value\n        continue\n      }\n\n      if (name.startsWith('on')) {\n        const lowerCaseEventName = name.slice(2).toLowerCase()\n        const eventName = lowerCaseEventNameMap.get(lowerCaseEventName)\n        if (eventName) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers[eventName] = (event: Event) => {\n            const handler = value as AnyFunction | null\n            if (typeof handler === 'function') {\n              handler(extractDetail ? (event as CustomEvent).detail : event)\n            }\n          }\n          continue\n        }\n      }\n\n      if (name === 'className') {\n        attributes['class'] = value\n      } else {\n        attributes[name] = value\n      }\n    }\n\n    const editor = useEditorContext()\n\n    if (hasEditor && editor && !properties['editor']) {\n      properties['editor'] = editor\n    }\n\n    // Set all properties.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) return\n      for (const [name, value] of Object.entries(properties)) {\n        if (value !== undefined) {\n          // @ts-expect-error: we know that name is a valid property name\n          el[name] = value\n        }\n      }\n    }, [el, ...propNames.map((name) => properties[name])])\n\n    // Put all event listeners extracted from `props` into `eventHandlersRef`.\n    useIsomorphicLayoutEffect(() => {\n      eventHandlersRef.current = eventHandlers\n    })\n\n    // Register the event listeners to the element.\n    useIsomorphicLayoutEffect(() => {\n      if (!el) {\n        return\n      }\n\n      const fixedEventHandlers: Record<string, AnyFunction> = {}\n\n      for (const eventName of eventNames) {\n        fixedEventHandlers[eventName] = (event: Event) => {\n          eventHandlersRef.current[eventName]?.(event)\n        }\n      }\n\n      for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n        el.addEventListener(name, handler)\n      }\n\n      return () => {\n        for (const [name, handler] of Object.entries(fixedEventHandlers)) {\n          el.removeEventListener(name, handler)\n        }\n      }\n    }, [el])\n\n    const mergedRef = useMemo(() => mergeRefs([ref, setEl]), [ref])\n\n    return createElement(tagName, { ...attributes, ref: mergedRef })\n  })\n\n  Component.displayName = displayName\n\n  return Component\n}\n"],"mappings":";;;;;;;;;;AAMA,SAAS,UACP,KACA,OACqB;AACrB,KAAI,OAAO,QAAQ,WACjB,QAAO,IAAI,MAAM;UACR,IACT,KAAI,UAAU;;;;;AAOlB,SAAgB,UAAa,MAAsC;AACjE,SAAQ,UAAoB;EAC1B,MAAM,WAA2B,EAAE;AAEnC,OAAK,MAAM,OAAO,MAAM;GACtB,MAAM,UAAU,UAAU,KAAK,MAAM;GACrC,MAAM,YAAY,OAAO,YAAY;AACrC,YAAS,KAAK,YAAY,gBAAgB,UAAU,KAAK,KAAK,CAAC;;AAGjE,eAAa;AACX,QAAK,MAAM,WAAW,SAAU,UAAS;;;;;;;ACtB/C,MAAM,4BAA4B,OAAO,WAAW,cAAc,kBAAkB;AAEpF,SAAgB,gBAId,SACA,aACA,WACA,YAGA;CACA,MAAM,YAAY,UAAU,SAAS,SAAS;CAC9C,MAAM,wBAAwB,IAAI,IAChC,WAAW,KAAK,SAAS,CAAC,KAAK,aAAa,EAAE,KAAK,CAAC,CACrD;CAED,MAAM,YAAY,YAAsB,OAAc,QAAQ;EAC5D,MAAM,CAAC,IAAI,SAAS,SAA6B,KAAK;EAEtD,MAAM,aAAsC,EAAE;EAC9C,MAAM,aAAsC,EAAE;EAC9C,MAAM,mBAAmB,OAAoC,EAAE,CAAC;EAChE,MAAM,gBAA6C,EAAE;AAErD,OAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,MAAM,EAAE;AACjD,OAAI,UAAU,OACZ;AAGF,OAAI,UAAU,SAAS,KAAK,EAAE;AAC5B,eAAW,QAAQ;AACnB;;AAGF,OAAI,KAAK,WAAW,KAAK,EAAE;IACzB,MAAM,qBAAqB,KAAK,MAAM,EAAE,CAAC,aAAa;IACtD,MAAM,YAAY,sBAAsB,IAAI,mBAAmB;AAC/D,QAAI,WAAW;KACb,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,mBAAc,cAAc,UAAiB;MAC3C,MAAM,UAAU;AAChB,UAAI,OAAO,YAAY,WACrB,SAAQ,gBAAiB,MAAsB,SAAS,MAAM;;AAGlE;;;AAIJ,OAAI,SAAS,YACX,YAAW,WAAW;OAEtB,YAAW,QAAQ;;EAIvB,MAAM,SAAS,kBAAkB;AAEjC,MAAI,aAAa,UAAU,CAAC,WAAW,UACrC,YAAW,YAAY;AAIzB,kCAAgC;AAC9B,OAAI,CAAC,GAAI;AACT,QAAK,MAAM,CAAC,MAAM,UAAU,OAAO,QAAQ,WAAW,CACpD,KAAI,UAAU,OAEZ,IAAG,QAAQ;KAGd,CAAC,IAAI,GAAG,UAAU,KAAK,SAAS,WAAW,MAAM,CAAC,CAAC;AAGtD,kCAAgC;AAC9B,oBAAiB,UAAU;IAC3B;AAGF,kCAAgC;AAC9B,OAAI,CAAC,GACH;GAGF,MAAM,qBAAkD,EAAE;AAE1D,QAAK,MAAM,aAAa,WACtB,oBAAmB,cAAc,UAAiB;AAChD,qBAAiB,QAAQ,aAAa,MAAM;;AAIhD,QAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,iBAAiB,MAAM,QAAQ;AAGpC,gBAAa;AACX,SAAK,MAAM,CAAC,MAAM,YAAY,OAAO,QAAQ,mBAAmB,CAC9D,IAAG,oBAAoB,MAAM,QAAQ;;KAGxC,CAAC,GAAG,CAAC;EAER,MAAM,YAAY,cAAc,UAAU,CAAC,KAAK,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC;AAE/D,SAAO,cAAc,SAAS;GAAE,GAAG;GAAY,KAAK;GAAW,CAAC;GAChE;AAEF,WAAU,cAAc;AAExB,QAAO"}

package/dist/create-props-PUVFMh9y.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-props-PUVFMh9y.d.ts","names":[],"sources":["../src/components/create-props.ts"],"mappings":";KAAY,WAAA,oCACyB,KAAA,mDACE,MAAA,GAAS,WAAA,MAC5C,KAAA,GAAQ,gBAAA,CAAiB,MAAA;AAAA,KAExB,gBAAA,sCACkC,MAAA,GAAS,WAAA,4BAE1B,MAAA,SAAe,UAAA,UAAoB,SAAA,OACrD,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/dist/editor-context-DJZHNwgB.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-context-DJZHNwgB.js","names":[],"sources":["../src/contexts/editor-context.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\nimport { createContext, type Provider } from 'preact'\nimport { useContext } from 'preact/hooks'\n\nconst EditorContext = createContext<Editor | null>(null)\n\n/**\n * @internal\n */\nexport function useEditorContext<E extends Extension>(): Editor<E> | null {\n  return useContext(EditorContext)\n}\n\n/**\n * @internal\n */\nexport const EditorContextProvider: Provider<Editor | null> = EditorContext.Provider\n"],"mappings":";;;;AAIA,MAAM,gBAAgB,cAA6B,KAAK;;;;AAKxD,SAAgB,mBAA0D;AACxE,QAAO,WAAW,cAAc;;;;;AAMlC,MAAa,wBAAiD,cAAc"}