@prosekit/react 0.6.7 → 0.6.9

package/dist/prosekit-react.js

@@ -1,117 +1,92 @@
-import { n as useEditorContext, t as EditorContextProvider } from "./editor-context-DHjS00Fa.js";
-import { ProsemirrorAdapterProvider, useMarkViewContext, useMarkViewFactory, useNodeViewContext, useNodeViewFactory } from "@prosemirror-adapter/react";
-import { createElement, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
+import { n as useEditorContext, t as EditorContextProvider } from "./editor-context.js";
+import { Fragment, createElement, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useSyncExternalStore } from "react";
 import { EditorNotFoundError, ProseKitError, defineDocChangeHandler, defineKeymap, defineMarkViewComponent, defineMarkViewFactory, defineMountHandler, defineNodeViewComponent, defineNodeViewFactory, defineUpdateHandler, union, withPriority } from "@prosekit/core";
+import { AbstractReactMarkView, AbstractReactNodeView, buildReactMarkViewCreator, buildReactNodeViewCreator, useReactRenderer } from "@prosemirror-adapter/react";
+import { createPortal } from "react-dom";
 import { queueExtension } from "@prosekit/web";
-
-//#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/react-mark-view.ts
-function withMarkViewProps(component) {
-	return function MarkViewPropsWrapper() {
-		return createElement(component, useMarkViewContext());
-	};
-}
+var ProseKitReactMarkView = class extends AbstractReactMarkView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			return createPortal(createElement(UserComponent, { ...this.context }), this.dom, this.key);
+		};
+	}
+};
 /**
 * @internal
 */
-const ReactMarkViewConsumer = () => {
-	const markViewFactory = useMarkViewFactory();
-	useExtension(useMemo(() => defineReactMarkViewFactory(markViewFactory), [markViewFactory]));
-	return null;
-};
+function defineReactMarkViewFactory(renderReactRenderer, removeReactRenderer) {
+	return defineMarkViewFactory({
+		group: "react",
+		factory: buildReactMarkViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactMarkView)
+	});
+}
 /**
 * Defines a mark view using a React component.
 *
 * @public
 */
 function defineReactMarkView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineMarkViewComponent({
 		group: "react",
-		name,
-		args: {
-			...userOptions,
-			component: withMarkViewProps(component)
-		}
-	});
-}
-function defineReactMarkViewFactory(factory) {
-	return defineMarkViewFactory({
-		group: "react",
-		factory
+		name: options.name,
+		args: options
 	});
 }
-
 //#endregion
 //#region src/extensions/react-node-view.ts
-function withNodeViewProps(component) {
-	return function NodeViewPropsWrapper() {
-		return createElement(component, useNodeViewContext());
-	};
-}
+var ProseKitReactNodeView = class extends AbstractReactNodeView {
+	constructor(..._args) {
+		super(..._args);
+		this.render = () => {
+			const UserComponent = this.component;
+			return createPortal(createElement(UserComponent, { ...this.context }), this.dom, this.key);
+		};
+	}
+};
 /**
 * @internal
 */
-const ReactNodeViewConsumer = () => {
-	const nodeViewFactory = useNodeViewFactory();
-	useExtension(useMemo(() => defineReactNodeViewFactory(nodeViewFactory), [nodeViewFactory]));
-	return null;
-};
+function defineReactNodeViewFactory(renderReactRenderer, removeReactRenderer) {
+	return defineNodeViewFactory({
+		group: "react",
+		factory: buildReactNodeViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactNodeView)
+	});
+}
 /**
 * Defines a node view using a React component.
 *
 * @public
 */
 function defineReactNodeView(options) {
-	const { name, component, ...userOptions } = options;
 	return defineNodeViewComponent({
 		group: "react",
-		name,
-		args: {
-			...userOptions,
-			component: withNodeViewProps(component)
-		}
+		name: options.name,
+		args: options
 	});
 }
-function defineReactNodeViewFactory(factory) {
-	return defineNodeViewFactory({
-		group: "react",
-		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 { renderReactRenderer, removeReactRenderer, render } = useReactRenderer();
+	useEditorExtension(editor, useMemo(() => {
+		return union([defineReactMarkViewFactory(renderReactRenderer, removeReactRenderer), defineReactNodeViewFactory(renderReactRenderer, removeReactRenderer)]);
+	}, [renderReactRenderer, removeReactRenderer]));
+	return createElement(Fragment, null, createElement(Fragment, null, children), createElement(Fragment, null, render()));
+};
 //#endregion
 //#region src/components/prosekit.ts
 /**
@@ -121,9 +96,11 @@ function defineReactNodeViewFactory(factory) {
 */
 const ProseKit = (props) => {
 	const { editor, children } = props;
-	return createElement(EditorContextProvider, { value: editor }, createElement(ProsemirrorAdapterProvider, null, createElement(ReactNodeViewConsumer), createElement(ReactMarkViewConsumer), children));
+	return createElement(EditorContextProvider, { value: editor }, createElement(ViewRenderer, {
+		editor,
+		children
+	}));
 };
-
 //#endregion
 //#region src/hooks/use-event-callback.ts
 /**
@@ -136,7 +113,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
 /**
@@ -148,36 +143,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.ts
-/**
-* Retrieves the editor instance from the nearest ProseKit component.
-*
-* @public
-*/
-function useEditor(options) {
-	const update = options?.update ?? false;
-	const editor = useEditorContext();
-	if (!editor) throw new ProseKitError("useEditor must be used within the ProseKit component");
-	const forceUpdate = useForceUpdate();
-	useEffect(() => {
-		if (update) {
-			const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
-			return editor.use(extension);
-		}
-	}, [
-		editor,
-		update,
-		forceUpdate
-	]);
-	return editor;
-}
-function useForceUpdate() {
-	const [, dispatch] = useReducer((x) => x + 1, 0);
-	return dispatch;
-}
-
 //#endregion
 //#region src/hooks/use-editor-derived-value.ts
 /**
@@ -220,13 +185,39 @@ function createEditorStore(editor, derive) {
 	};
 	return [subscribe, getSnapshot];
 }
-
+//#endregion
+//#region src/hooks/use-editor.ts
+/**
+* Retrieves the editor instance from the nearest ProseKit component.
+*
+* @public
+*/
+function useEditor(options) {
+	const update = options?.update ?? false;
+	const editor = useEditorContext();
+	if (!editor) throw new ProseKitError("useEditor must be used within the ProseKit component");
+	const forceUpdate = useForceUpdate();
+	useEffect(() => {
+		if (update) {
+			const extension = union(defineMountHandler(forceUpdate), defineUpdateHandler(forceUpdate));
+			return editor.use(extension);
+		}
+	}, [
+		editor,
+		update,
+		forceUpdate
+	]);
+	return editor;
+}
+function useForceUpdate() {
+	const [, dispatch] = useReducer((x) => x + 1, 0);
+	return dispatch;
+}
 //#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
 /**
@@ -238,7 +229,7 @@ function useStateUpdate(handler, options) {
 	const memoizedHandler = useEventCallback(handler);
 	useExtension(useMemo(() => defineUpdateHandler((view) => memoizedHandler(view.state)), [memoizedHandler]), options);
 }
-
 //#endregion
 export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+
 //# sourceMappingURL=prosekit-react.js.map

package/dist/prosekit-react.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-react.js","names":[],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/react-mark-view.ts","../src/extensions/react-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-event-callback.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 { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { queueExtension } from '@prosekit/web'\nimport { useEffect } from 'react'\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 'react'\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'\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 { 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 ReactMarkViewUserOptions } from '@prosemirror-adapter/react'\nimport { createElement, useMemo, type ComponentType, type FC } from 'react'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface ReactMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type ReactMarkViewComponent = ComponentType<ReactMarkViewProps>\n\n/**\n * Options for {@link defineReactMarkView}.\n *\n * @public\n */\nexport interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nfunction withMarkViewProps(component: ReactMarkViewComponent) {\n  return function MarkViewPropsWrapper() {\n    const props: ReactMarkViewProps = useMarkViewContext()\n    return createElement(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport const ReactMarkViewConsumer: FC = () => {\n  const markViewFactory = useMarkViewFactory()\n  const extension = useMemo(\n    () => defineReactMarkViewFactory(markViewFactory),\n    [markViewFactory],\n  )\n  useExtension(extension)\n\n  return null\n}\n\n/**\n * Defines a mark view using a React component.\n *\n * @public\n */\nexport function defineReactMarkView(options: ReactMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: ReactMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<ReactMarkViewUserOptions>({\n    group: 'react',\n    name,\n    args,\n  })\n}\n\nfunction defineReactMarkViewFactory(\n  factory: (options: ReactMarkViewUserOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<ReactMarkViewUserOptions>({\n    group: 'react',\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 ReactNodeViewUserOptions } from '@prosemirror-adapter/react'\nimport { createElement, useMemo, type ComponentType, type FC } from 'react'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface ReactNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>\n\n/**\n * Options for {@link defineReactNodeView}.\n *\n * @public\n */\nexport interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nfunction withNodeViewProps(component: ReactNodeViewComponent) {\n  return function NodeViewPropsWrapper() {\n    const props: ReactNodeViewProps = useNodeViewContext()\n    return createElement(component, props)\n  }\n}\n\n/**\n * @internal\n */\nexport const ReactNodeViewConsumer: FC = () => {\n  const nodeViewFactory = useNodeViewFactory()\n  const extension = useMemo(\n    () => defineReactNodeViewFactory(nodeViewFactory),\n    [nodeViewFactory],\n  )\n  useExtension(extension)\n\n  return null\n}\n\n/**\n * Defines a node view using a React component.\n *\n * @public\n */\nexport function defineReactNodeView(options: ReactNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: ReactNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<ReactNodeViewUserOptions>({\n    group: 'react',\n    name,\n    args,\n  })\n}\n\nfunction defineReactNodeViewFactory(\n  factory: (options: ReactNodeViewUserOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<ReactNodeViewUserOptions>({\n    group: 'react',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/react'\nimport { createElement, type ComponentType, type ReactNode } from 'react'\n\nimport { EditorContextProvider } from '../contexts/editor-context'\nimport { ReactMarkViewConsumer } from '../extensions/react-mark-view'\nimport { ReactNodeViewConsumer } from '../extensions/react-node-view'\n\nexport interface ProseKitProps {\n  editor: Editor\n  children?: ReactNode\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      ProsemirrorAdapterProvider,\n      null,\n      createElement(ReactNodeViewConsumer),\n      createElement(ReactMarkViewConsumer),\n      children,\n    ),\n  )\n}\n","import { useCallback, useLayoutEffect, useRef } from 'react'\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 'react'\n\nimport { useEventCallback } from './use-event-callback'\nimport { useExtension, type UseExtensionOptions } 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 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, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useEffect, useReducer } from 'react'\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   * Note this this option doesn't work with [React\n   * compiler](https://react.dev/learn/react-compiler) because the returned\n   * editor will be the same instance after state updates. If you're using React\n   * compiler, you should use {@link useEditorDerivedValue} instead.\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 { defineMountHandler, defineUpdateHandler, EditorNotFoundError, union, type Editor, type Extension } from '@prosekit/core'\nimport { useMemo, useSyncExternalStore } from 'react'\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 * 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, 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 { defineKeymap, type Keymap } from '@prosekit/core'\nimport { useMemo } from 'react'\n\nimport { useExtension, type UseExtensionOptions } 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 'react'\n\nimport { useEventCallback } from './use-event-callback'\nimport { useExtension, type UseExtensionOptions } 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 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-react.js","names":[],"sources":["../src/extensions/react-mark-view.ts","../src/extensions/react-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  AbstractReactMarkView,\n  buildReactMarkViewCreator,\n  type MarkViewContext,\n  type ReactRendererResult,\n} from '@prosemirror-adapter/react'\nimport { createElement, type ComponentType, type ReactPortal } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * @public\n */\nexport interface ReactMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type ReactMarkViewComponent = ComponentType<ReactMarkViewProps>\n\n/**\n * Options for {@link defineReactMarkView}.\n *\n * @public\n */\nexport interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitReactMarkView extends AbstractReactMarkView<ReactMarkViewComponent> {\n  render = (): ReactPortal => {\n    const UserComponent = this.component\n    const props = { ...this.context }\n    return createPortal(\n      createElement(UserComponent, props),\n      this.dom,\n      this.key,\n    )\n  }\n}\n\n/**\n * @internal\n */\nexport function defineReactMarkViewFactory(\n  renderReactRenderer: ReactRendererResult['renderReactRenderer'],\n  removeReactRenderer: ReactRendererResult['removeReactRenderer'],\n): Extension {\n  const factory = buildReactMarkViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactMarkView)\n  return defineMarkViewFactory<ReactMarkViewOptions>({\n    group: 'react',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a React component.\n *\n * @public\n */\nexport function defineReactMarkView(options: ReactMarkViewOptions): Extension {\n  return defineMarkViewComponent<ReactMarkViewOptions>({\n    group: 'react',\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  AbstractReactNodeView,\n  buildReactNodeViewCreator,\n  type NodeViewContext,\n  type ReactRendererResult,\n} from '@prosemirror-adapter/react'\nimport { createElement, type ComponentType, type ReactPortal } from 'react'\nimport { createPortal } from 'react-dom'\n\n/**\n * @public\n */\nexport interface ReactNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>\n\n/**\n * Options for {@link defineReactNodeView}.\n *\n * @public\n */\nexport interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitReactNodeView extends AbstractReactNodeView<ReactNodeViewComponent> {\n  render = (): ReactPortal => {\n    const UserComponent = this.component\n    const props = { ...this.context }\n    return createPortal(\n      createElement(UserComponent, props),\n      this.dom,\n      this.key,\n    )\n  }\n}\n\n/**\n * @internal\n */\nexport function defineReactNodeViewFactory(\n  renderReactRenderer: ReactRendererResult['renderReactRenderer'],\n  removeReactRenderer: ReactRendererResult['removeReactRenderer'],\n): Extension {\n  const factory = buildReactNodeViewCreator(renderReactRenderer, removeReactRenderer, ProseKitReactNodeView)\n  return defineNodeViewFactory<ReactNodeViewOptions>({\n    group: 'react',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a React component.\n *\n * @public\n */\nexport function defineReactNodeView(options: ReactNodeViewOptions): Extension {\n  return defineNodeViewComponent<ReactNodeViewOptions>({\n    group: 'react',\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 'react'\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 { useReactRenderer } from '@prosemirror-adapter/react'\nimport { createElement, Fragment, useMemo, type ComponentType, type ReactNode } from 'react'\n\nimport { defineReactMarkViewFactory } from '../extensions/react-mark-view.ts'\nimport { defineReactNodeViewFactory } from '../extensions/react-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\ninterface ViewRendererProps {\n  editor: Editor\n  children: ReactNode\n}\n\nexport const ViewRenderer: ComponentType<ViewRendererProps> = ({ editor, children }): ReactNode => {\n  const { renderReactRenderer, removeReactRenderer, render } = useReactRenderer()\n\n  const extension = useMemo(() => {\n    return union([\n      defineReactMarkViewFactory(renderReactRenderer, removeReactRenderer),\n      defineReactNodeViewFactory(renderReactRenderer, removeReactRenderer),\n    ])\n  }, [renderReactRenderer, removeReactRenderer])\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 ComponentType, type ReactNode } from 'react'\n\nimport { EditorContextProvider } from '../contexts/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport interface ProseKitProps {\n  editor: Editor\n  children?: ReactNode\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 'react'\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 'react'\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 'react'\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 { useMemo, useSyncExternalStore } from 'react'\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, 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 'react'\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   * Note this this option doesn't work with [React\n   * compiler](https://react.dev/learn/react-compiler) because the returned\n   * editor will be the same instance after state updates. If you're using React\n   * compiler, you should use {@link useEditorDerivedValue} instead.\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 'react'\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 'react'\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":";;;;;;;AAiCA,IAAM,wBAAN,cAAoC,sBAA8C;;;sBACpD;GAC1B,MAAM,gBAAgB,KAAK;AAE3B,UAAO,aACL,cAAc,eAFF,EAAE,GAAG,KAAK,SAAS,CAEI,EACnC,KAAK,KACL,KAAK,IACN;;;;;;;AAOL,SAAgB,2BACd,qBACA,qBACW;AAEX,QAAO,sBAA4C;EACjD,OAAO;EACP,SAHc,0BAA0B,qBAAqB,qBAAqB,sBAAsB;EAIzG,CAAC;;;;;;;AAQJ,SAAgB,oBAAoB,SAA0C;AAC5E,QAAO,wBAA8C;EACnD,OAAO;EACP,MAAM,QAAQ;EACd,MAAM;EACP,CAAC;;;;ACpCJ,IAAM,wBAAN,cAAoC,sBAA8C;;;sBACpD;GAC1B,MAAM,gBAAgB,KAAK;AAE3B,UAAO,aACL,cAAc,eAFF,EAAE,GAAG,KAAK,SAAS,CAEI,EACnC,KAAK,KACL,KAAK,IACN;;;;;;;AAOL,SAAgB,2BACd,qBACA,qBACW;AAEX,QAAO,sBAA4C;EACjD,OAAO;EACP,SAHc,0BAA0B,qBAAqB,qBAAqB,sBAAsB;EAIzG,CAAC;;;;;;;AAQJ,SAAgB,oBAAoB,SAA0C;AAC5E,QAAO,wBAA8C;EACnD,OAAO;EACP,MAAM,QAAQ;EACd,MAAM;EACP,CAAC;;;;;;;AC9DJ,SAAgB,mBACd,QACA,WACM;AACN,KAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;AAGjC,iBAAgB;AACd,MAAI,UACF,QAAO,eAAe,QAAQ,UAAU;IAEzC,CAAC,QAAQ,UAAU,CAAC;;;;ACNzB,MAAa,gBAAkD,EAAE,QAAQ,eAA0B;CACjG,MAAM,EAAE,qBAAqB,qBAAqB,WAAW,kBAAkB;AAS/E,oBAAmB,QAPD,cAAc;AAC9B,SAAO,MAAM,CACX,2BAA2B,qBAAqB,oBAAoB,EACpE,2BAA2B,qBAAqB,oBAAoB,CACrE,CAAC;IACD,CAAC,qBAAqB,oBAAoB,CAAC,CAET;AAErC,QAAO,cAAc,UAAU,MAAM,cAAc,UAAU,MAAM,SAAS,EAAE,cAAc,UAAU,MAAM,QAAQ,CAAC,CAAC;;;;;;;;;ACRxH,MAAa,YAA0C,UAAU;CAC/D,MAAM,EAAE,QAAQ,aAAa;AAE7B,QAAO,cACL,uBACA,EAAE,OAAO,QAAQ,EACjB,cACE,cACA;EAAE;EAAQ;EAAU,CACrB,CACF;;;;;;;ACtBH,SAAgB,iBACd,UAC2B;CAC3B,MAAM,cAAc,OAAO,SAAS;AACpC,uBAAsB;AACpB,cAAY,UAAU;IACrB,CAAC,SAAS,CAAC;AACd,QAAO,aAAa,GAAG,SAAe,YAAY,QAAQ,GAAG,KAAK,EAAE,EAAE,CAAC;;;;;;;ACNzE,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;;;;;;;;;ACvBH,SAAgB,aACd,SACA,SACM;CACN,MAAM,kBAAkB,iBAAiB,QAAQ;AAKjD,cAJkB,cACV,wBAAwB,SAAS,gBAAgB,KAAK,MAAM,IAAI,CAAC,EACvE,CAAC,gBAAgB,CAClB,EACuB,QAAQ;;;;;;;;;;;;;;;ACGlC,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,aAAa,YAAY;;AAGlE,SAAS,kBAAsD,QAAmB,QAAwC;CACxH,IAAI,QAAQ;CACZ,IAAI;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;;;;;;;;;AC/DjC,SAAgB,UAAqC,SAavC;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;;;;AC7CT,SAAgB,UAAU,QAAgB,SAAqC;AAE7E,cADkB,cAAc,aAAa,OAAO,EAAE,CAAC,OAAO,CAAC,EACvC,QAAQ;;;;;;;;;ACKlC,SAAgB,eACd,SACA,SACM;CACN,MAAM,kBAAkB,iBAAiB,QAAQ;AAKjD,cAJkB,cACV,qBAAqB,SAAS,gBAAgB,KAAK,MAAM,CAAC,EAChE,CAAC,gBAAgB,CAClB,EACuB,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "private": false,
   "description": "React components and utilities for ProseKit",
   "author": {
@@ -68,11 +68,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.6",
-    "@prosemirror-adapter/react": "^0.5.1",
-    "@prosekit/core": "^0.10.0",
-    "@prosekit/pm": "^0.1.15",
-    "@prosekit/web": "^0.7.11"
+    "@prosemirror-adapter/core": "^0.5.2",
+    "@prosemirror-adapter/react": "^0.5.2",
+    "@prosekit/core": "^0.11.0",
+    "@prosekit/web": "^0.7.13",
+    "@prosekit/pm": "^0.1.15"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -91,8 +91,9 @@
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tsdown": "^0.20.3",
+    "tsdown": "^0.21.4",
     "typescript": "~5.9.3",
+    "@prosekit/config-ts": "0.0.0",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"
   },

package/src/components/autocomplete/autocomplete-empty.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link AutocompleteEmpty} component.
  */
 export interface AutocompleteEmptyProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const AutocompleteEmpty: ForwardRefExoticComponent<
   AutocompleteEmptyProps &
   RefAttributes<AutocompleteEmptyElement> &
   HTMLAttributes<AutocompleteEmptyElement>
 > = createComponent<
-  AutocompleteEmptyProps, 
+  AutocompleteEmptyProps,
   AutocompleteEmptyElement
 >(
   'prosekit-autocomplete-empty',

package/src/components/autocomplete/autocomplete-item.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link AutocompleteItem} component.
  */
 export interface AutocompleteItemProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const AutocompleteItem: ForwardRefExoticComponent<
   AutocompleteItemProps &
   RefAttributes<AutocompleteItemElement> &
   HTMLAttributes<AutocompleteItemElement>
 > = createComponent<
-  AutocompleteItemProps, 
+  AutocompleteItemProps,
   AutocompleteItemElement
 >(
   'prosekit-autocomplete-item',

package/src/components/autocomplete/autocomplete-list.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link AutocompleteList} component.
  */
 export interface AutocompleteListProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const AutocompleteList: ForwardRefExoticComponent<
   AutocompleteListProps &
   RefAttributes<AutocompleteListElement> &
   HTMLAttributes<AutocompleteListElement>
 > = createComponent<
-  AutocompleteListProps, 
+  AutocompleteListProps,
   AutocompleteListElement
 >(
   'prosekit-autocomplete-list',

package/src/components/autocomplete/autocomplete-popover.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link AutocompletePopover} component.
  */
 export interface AutocompletePopoverProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const AutocompletePopover: ForwardRefExoticComponent<
   AutocompletePopoverProps &
   RefAttributes<AutocompletePopoverElement> &
   HTMLAttributes<AutocompletePopoverElement>
 > = createComponent<
-  AutocompletePopoverProps, 
+  AutocompletePopoverProps,
   AutocompletePopoverElement
 >(
   'prosekit-autocomplete-popover',

package/src/components/autocomplete/index.gen.ts

@@ -1,7 +1,7 @@
-export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen'
+export { AutocompleteEmpty, type AutocompleteEmptyProps } from './autocomplete-empty.gen.ts'
 
-export { AutocompleteItem, type AutocompleteItemProps } from './autocomplete-item.gen'
+export { AutocompleteItem, type AutocompleteItemProps } from './autocomplete-item.gen.ts'
 
-export { AutocompleteList, type AutocompleteListProps } from './autocomplete-list.gen'
+export { AutocompleteList, type AutocompleteListProps } from './autocomplete-list.gen.ts'
 
-export { AutocompletePopover, type AutocompletePopoverProps } from './autocomplete-popover.gen'
+export { AutocompletePopover, type AutocompletePopoverProps } from './autocomplete-popover.gen.ts'

package/src/components/block-handle/block-handle-add.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link BlockHandleAdd} component.
  */
 export interface BlockHandleAddProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const BlockHandleAdd: ForwardRefExoticComponent<
   BlockHandleAddProps &
   RefAttributes<BlockHandleAddElement> &
   HTMLAttributes<BlockHandleAddElement>
 > = createComponent<
-  BlockHandleAddProps, 
+  BlockHandleAddProps,
   BlockHandleAddElement
 >(
   'prosekit-block-handle-add',

package/src/components/block-handle/block-handle-draggable.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link BlockHandleDraggable} component.
  */
 export interface BlockHandleDraggableProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const BlockHandleDraggable: ForwardRefExoticComponent<
   BlockHandleDraggableProps &
   RefAttributes<BlockHandleDraggableElement> &
   HTMLAttributes<BlockHandleDraggableElement>
 > = createComponent<
-  BlockHandleDraggableProps, 
+  BlockHandleDraggableProps,
   BlockHandleDraggableElement
 >(
   'prosekit-block-handle-draggable',

package/src/components/block-handle/block-handle-popover.gen.ts

@@ -11,20 +11,20 @@ import type {
   RefAttributes,
 } from 'react'
 
-import { createComponent } from '../create-component'
-import type { CreateProps } from '../create-props'
+import { createComponent } from '../create-component.ts'
+import type { CreateProps } from '../create-props.ts'
 
 /**
  * Props for the {@link BlockHandlePopover} component.
  */
 export interface BlockHandlePopoverProps extends Partial<CreateProps<Props, Events>> {}
- 
+
 export const BlockHandlePopover: ForwardRefExoticComponent<
   BlockHandlePopoverProps &
   RefAttributes<BlockHandlePopoverElement> &
   HTMLAttributes<BlockHandlePopoverElement>
 > = createComponent<
-  BlockHandlePopoverProps, 
+  BlockHandlePopoverProps,
   BlockHandlePopoverElement
 >(
   'prosekit-block-handle-popover',

package/src/components/block-handle/index.gen.ts

@@ -1,5 +1,5 @@
-export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen'
+export { BlockHandleAdd, type BlockHandleAddProps } from './block-handle-add.gen.ts'
 
-export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen'
+export { BlockHandleDraggable, type BlockHandleDraggableProps } from './block-handle-draggable.gen.ts'
 
-export { BlockHandlePopover, type BlockHandlePopoverProps } from './block-handle-popover.gen'
+export { BlockHandlePopover, type BlockHandlePopoverProps } from './block-handle-popover.gen.ts'

package/src/components/create-component.ts

@@ -12,9 +12,9 @@ import {
   type RefAttributes,
 } from 'react'
 
-import { useEditorContext } from '../contexts/editor-context'
+import { useEditorContext } from '../contexts/editor-context.ts'
 
-import { mergeRefs } from './merge-refs'
+import { mergeRefs } from './merge-refs.ts'
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
@@ -86,7 +86,6 @@ export function createComponent<
       for (const [name, value] of Object.entries(properties)) {
         if (value !== undefined) {
           // @ts-expect-error: we know that name is a valid property name
-          // eslint-disable-next-line react-hooks/immutability
           el[name] = value
         }
       }