@prosekit/react 0.5.3 → 0.6.1

package/dist/prosekit-react-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prosekit-react-tooltip.js","names":["TooltipContent: ForwardRefExoticComponent<\n  TooltipContentProps &\n  RefAttributes<TooltipContentElement> &\n  HTMLAttributes<TooltipContentElement>\n>","TooltipRoot: ForwardRefExoticComponent<\n  TooltipRootProps &\n  RefAttributes<TooltipRootElement> &\n  HTMLAttributes<TooltipRootElement>\n>","TooltipTrigger: ForwardRefExoticComponent<\n  TooltipTriggerProps &\n  RefAttributes<TooltipTriggerElement> &\n  HTMLAttributes<TooltipTriggerElement>\n>"],"sources":["../src/components/tooltip/tooltip-content.gen.ts","../src/components/tooltip/tooltip-root.gen.ts","../src/components/tooltip/tooltip-trigger.gen.ts"],"sourcesContent":["import {\n  type TooltipContentElement,\n  type TooltipContentProps as Props,\n  type TooltipContentEvents as Events,\n  tooltipContentProps,\n  tooltipContentEvents,\n} from '@prosekit/web/tooltip'\nimport type {\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  RefAttributes,\n} from 'react'\n\nimport { createComponent } from '../create-component'\nimport type { CreateProps } from '../create-props'\n\n/**\n * Props for the {@link TooltipContent} component.\n */\nexport interface TooltipContentProps extends Partial<CreateProps<Props, Events>> {}\n \nexport const TooltipContent: ForwardRefExoticComponent<\n  TooltipContentProps &\n  RefAttributes<TooltipContentElement> &\n  HTMLAttributes<TooltipContentElement>\n> = createComponent<\n  TooltipContentProps, \n  TooltipContentElement\n>(\n  'prosekit-tooltip-content',\n  'TooltipContent',\n  Object.keys(tooltipContentProps),\n  Object.keys(tooltipContentEvents),\n)\n","import {\n  type TooltipRootElement,\n  type TooltipRootProps as Props,\n  type TooltipRootEvents as Events,\n  tooltipRootProps,\n  tooltipRootEvents,\n} from '@prosekit/web/tooltip'\nimport type {\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  RefAttributes,\n} from 'react'\n\nimport { createComponent } from '../create-component'\nimport type { CreateProps } from '../create-props'\n\n/**\n * Props for the {@link TooltipRoot} component.\n */\nexport interface TooltipRootProps extends Partial<CreateProps<Props, Events>> {}\n \nexport const TooltipRoot: ForwardRefExoticComponent<\n  TooltipRootProps &\n  RefAttributes<TooltipRootElement> &\n  HTMLAttributes<TooltipRootElement>\n> = createComponent<\n  TooltipRootProps, \n  TooltipRootElement\n>(\n  'prosekit-tooltip-root',\n  'TooltipRoot',\n  Object.keys(tooltipRootProps),\n  Object.keys(tooltipRootEvents),\n)\n","import {\n  type TooltipTriggerElement,\n  type TooltipTriggerProps as Props,\n  type TooltipTriggerEvents as Events,\n  tooltipTriggerProps,\n  tooltipTriggerEvents,\n} from '@prosekit/web/tooltip'\nimport type {\n  ForwardRefExoticComponent,\n  HTMLAttributes,\n  RefAttributes,\n} from 'react'\n\nimport { createComponent } from '../create-component'\nimport type { CreateProps } from '../create-props'\n\n/**\n * Props for the {@link TooltipTrigger} component.\n */\nexport interface TooltipTriggerProps extends Partial<CreateProps<Props, Events>> {}\n \nexport const TooltipTrigger: ForwardRefExoticComponent<\n  TooltipTriggerProps &\n  RefAttributes<TooltipTriggerElement> &\n  HTMLAttributes<TooltipTriggerElement>\n> = createComponent<\n  TooltipTriggerProps, \n  TooltipTriggerElement\n>(\n  'prosekit-tooltip-trigger',\n  'TooltipTrigger',\n  Object.keys(tooltipTriggerProps),\n  Object.keys(tooltipTriggerEvents),\n)\n"],"mappings":";;;;;AAqBA,MAAaA,iBAIT,gBAIF,4BACA,kBACA,OAAO,KAAK,oBAAoB,EAChC,OAAO,KAAK,qBAAqB,CAClC;;;;ACZD,MAAaC,cAIT,gBAIF,yBACA,eACA,OAAO,KAAK,iBAAiB,EAC7B,OAAO,KAAK,kBAAkB,CAC/B;;;;ACZD,MAAaC,iBAIT,gBAIF,4BACA,kBACA,OAAO,KAAK,oBAAoB,EAChC,OAAO,KAAK,qBAAqB,CAClC"}

package/dist/prosekit-react.d.ts

@@ -11,156 +11,171 @@ interface ProseKitProps {
   children?: ReactNode;
 }
 /**
-* The root component for a ProseKit editor.
-*
-* @public
-*/
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
 declare const ProseKit: ComponentType<ProseKitProps>;
 //#endregion
 //#region src/extensions/react-mark-view.d.ts
 /**
-* @public
-*/
+ * @public
+ */
 interface ReactMarkViewProps extends MarkViewContext {}
 /**
-* @public
-*/
+ * @public
+ */
 type ReactMarkViewComponent = ComponentType<ReactMarkViewProps>;
 /**
-* Options for {@link defineReactMarkView}.
-*
-* @public
-*/
+ * Options for {@link defineReactMarkView}.
+ *
+ * @public
+ */
 interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkViewComponent> {
   /**
-  * The name of the mark type.
-  */
+   * The name of the mark type.
+   */
   name: string;
 }
 /**
-* @internal
-*/
+ * @internal
+ */
 
 /**
-* Defines a mark view using a React component.
-*
-* @public
-*/
+ * Defines a mark view using a React component.
+ *
+ * @public
+ */
 declare function defineReactMarkView(options: ReactMarkViewOptions): Extension;
 //#endregion
 //#region src/extensions/react-node-view.d.ts
 /**
-* @public
-*/
+ * @public
+ */
 interface ReactNodeViewProps extends NodeViewContext {}
 /**
-* @public
-*/
+ * @public
+ */
 type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>;
 /**
-* Options for {@link defineReactNodeView}.
-*
-* @public
-*/
+ * Options for {@link defineReactNodeView}.
+ *
+ * @public
+ */
 interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeViewComponent> {
   /**
-  * The name of the node type.
-  */
+   * The name of the node type.
+   */
   name: string;
 }
 /**
-* @internal
-*/
+ * @internal
+ */
 
 /**
-* Defines a node view using a React component.
-*
-* @public
-*/
+ * Defines a node view using a React component.
+ *
+ * @public
+ */
 declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
 //#endregion
 //#region src/hooks/use-extension.d.ts
 interface UseExtensionOptions {
   /**
-  * The editor to add the extension to. If not provided, it will use the
-  * editor from the nearest `ProseKit` component.
-  */
+   * The editor to add the extension to. If not provided, it will use the
+   * editor from the nearest `ProseKit` component.
+   */
   editor?: Editor;
   /**
-  * Optional priority to add the extension with.
-  */
+   * Optional priority to add the extension with.
+   */
   priority?: Priority;
 }
 /**
-* Add an extension to the editor.
-*/
-declare function useExtension(extension: Extension | null, options?: UseExtensionOptions): void;
+ * Add an extension to the editor.
+ */
+declare function useExtension(
+/**
+ * The extension to add to the editor. If it changes, the previous
+ * extension will be removed and the new one (if not null) will be added.
+ */
+extension: Extension | null, options?: UseExtensionOptions): void;
 //#endregion
 //#region src/hooks/use-doc-change.d.ts
 /**
-* Calls the given handler whenever the editor document changes.
-*
-* @public
-*/
+ * Calls the given handler whenever the editor document changes.
+ *
+ * @public
+ */
 declare function useDocChange(handler: (doc: ProseMirrorNode) => void, options?: UseExtensionOptions): void;
 //#endregion
 //#region src/hooks/use-editor.d.ts
 /**
-* Retrieves the editor instance from the nearest ProseKit component.
-*
-* @public
-*/
+ * Retrieves the editor instance from the nearest ProseKit component.
+ *
+ * @public
+ */
 declare function useEditor<E extends Extension = any>(options?: {
   /**
-  * Whether to update the component when the editor is mounted or editor state
-  * is updated.
-  *
-  * Note this this option doesn't work with [React
-  * compiler](https://react.dev/learn/react-compiler) because the returned
-  * editor will be the same instance after state updates. If you're using React
-  * compiler, you should use {@link useEditorDerivedValue} instead.
-  *
-  * @default false
-  */
+   * Whether to update the component when the editor is mounted or editor state
+   * is updated.
+   *
+   * Note this this option doesn't work with [React
+   * compiler](https://react.dev/learn/react-compiler) because the returned
+   * editor will be the same instance after state updates. If you're using React
+   * compiler, you should use {@link useEditorDerivedValue} instead.
+   *
+   * @default false
+   */
   update?: boolean;
 }): Editor<E>;
 //#endregion
 //#region src/hooks/use-editor-derived-value.d.ts
 interface UseEditorDerivedOptions<E extends Extension = any> {
   /**
-  * The editor to add the extension to. If not provided, it will use the
-  * editor from the nearest `ProseKit` component.
-  */
+   * The editor to add the extension to. If not provided, it will use the
+   * editor from the nearest `ProseKit` component.
+   */
   editor?: Editor<E>;
 }
 /**
-* A hook that runs a function to derive a value from the editor instance after
-* editor state changes.
-*
-* This is useful when you need to render something based on the editor state,
-* for example, whether the selected text is wrapped in an italic mark.
-*
-* @public
-*/
-declare function useEditorDerivedValue<E extends Extension, Derived>(derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): Derived;
+ * A hook that runs a function to derive a value from the editor instance after
+ * editor state changes.
+ *
+ * This is useful when you need to render something based on the editor state,
+ * for example, whether the selected text is wrapped in an italic mark.
+ *
+ * @public
+ */
+declare function useEditorDerivedValue<E extends Extension, Derived>(
+/**
+ * A function that receives the editor instance and returns a derived value.
+ *
+ * It will be called whenever the editor's document state changes, or when it
+ * mounts.
+ *
+ * This function should be memoized.
+ */
+derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): Derived;
 //#endregion
 //#region src/hooks/use-keymap.d.ts
 declare function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void;
 //#endregion
 //#region src/hooks/use-state-update.d.ts
 /**
-* Calls the given handler whenever the editor state changes.
-*
-* @public
-*/
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
 declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
 //#endregion
 //#region src/types.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 type PropsWithClassName<P = unknown> = P & {
   className?: string | undefined;
 };
 //#endregion
-export { PropsWithClassName, ProseKit, ProseKitProps, ReactMarkViewComponent, ReactMarkViewOptions, ReactMarkViewProps, ReactNodeViewComponent, ReactNodeViewOptions, ReactNodeViewProps, UseEditorDerivedOptions, UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+export { type PropsWithClassName, ProseKit, type ProseKitProps, type ReactMarkViewComponent, type ReactMarkViewOptions, type ReactMarkViewProps, type ReactNodeViewComponent, type ReactNodeViewOptions, type ReactNodeViewProps, type UseEditorDerivedOptions, type UseExtensionOptions, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+//# sourceMappingURL=prosekit-react.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"prosekit-react.d.ts","names":[],"sources":["../src/components/prosekit.ts","../src/extensions/react-mark-view.ts","../src/extensions/react-node-view.ts","../src/hooks/use-extension.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts","../src/types.ts"],"sourcesContent":[],"mappings":";;;;;;;;UAYiB,aAAA;UACP;aACG;;;;AAFb;;;AAEa,cAQA,QARA,EAQU,aARV,CAQwB,aARxB,CAAA;;;;;;UCWI,kBAAA,SAA2B,iBDb5C;;;;AAEsB,KCgBV,sBAAA,GAAyB,aDhBf,CCgB6B,kBDhB7B,CAAA;AAQtB;;;;;UCeiB,oBAAA,SAA6B,wBAAwB;;;AAZtE;EAKY,IAAA,EAAA,MAAA;;;;;;;;;;AAwCZ;AAAmC,iBAAnB,mBAAA,CAAmB,OAAA,EAAU,oBAAV,CAAA,EAAiC,SAAjC;;;;;;UC7ClB,kBAAA,SAA2B,iBFb5C;;;;AAEsB,KEgBV,sBAAA,GAAyB,aFhBf,CEgB6B,kBFhB7B,CAAA;AAQtB;;;;;UEeiB,oBAAA,SAA6B,wBAAwB;;;ADZtE;EAKY,IAAA,EAAA,MAAA;;;;;;;;;;AAwCZ;AAAmC,iBCAnB,mBAAA,CDAmB,OAAA,ECAU,oBDAV,CAAA,ECAiC,SDAjC;;;UE3DlB,mBAAA;;;;;WAKN;;AHJX;;UACU,CAAA,EGQG,QHRH;;;AASV;;AAAqC,iBGKrB,YAAA;;;;;WAKH,4BACD;;;;;;;;iBCnBI,YAAA,gBACC,oCACL;;;;;;;;iBCII,oBAAoB;;ALRpC;;;;;AAUA;;;;;;IKWI,OAAO;;;UClBM,kCAAkC;;;;;WAKxC,OAAO;;ANRlB;;;;;AAUA;;;;AAAoC,iBMUpB,qBNVoB,CAAA,UMUY,SNVZ,EAAA,OAAA,CAAA;;;;ACGpC;AAKA;;;;MAAkD,EAAA,CAAA,MAAA,EKW/B,MLX+B,CKWxB,CLXwB,CAAA,EAAA,GKWjB,OLXiB,EAAA,OAAA,CAAA,EKYtC,uBLZsC,CKYd,CLZc,CAAA,CAAA,EKa/C,OLb+C;;;iBMnBlC,SAAA,SAAkB,kBAAkB;;;;;;;;iBCGpC,cAAA,kBACG,gCACP;;;;;;KCbA,kCAAkC"}

package/dist/prosekit-react.js

@@ -231,4 +231,5 @@ function useStateUpdate(handler, options) {
 }
 
 //#endregion
-export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+export { ProseKit, defineReactMarkView, defineReactNodeView, useDocChange, useEditor, useEditorDerivedValue, useExtension, useKeymap, useStateUpdate };
+//# sourceMappingURL=prosekit-react.js.map

package/dist/prosekit-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prosekit-react.js","names":["props: ReactMarkViewProps","ReactMarkViewConsumer: FC","args: ReactMarkViewUserOptions","props: ReactNodeViewProps","ReactNodeViewConsumer: FC","args: ReactNodeViewUserOptions","ProseKit: ComponentType<ProseKitProps>","derived: Derived"],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/react-mark-view.ts","../src/extensions/react-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import {\n  EditorNotFoundError,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport { useEffect } from '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 editor.use(extension)\n    }\n  }, [editor, extension])\n}\n","import {\n  withPriority,\n  type Extension,\n  type Priority,\n} from '@prosekit/core'\nimport { useMemo } from '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 {\n  Editor,\n  Extension,\n  Priority,\n} from '@prosekit/core'\n\nimport { useEditorContext } from '../contexts/editor-context'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `ProseKit` component.\n   */\n  editor?: Editor\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n */\nexport function useExtension(\n  /**\n   * The extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: Extension | null,\n  options?: UseExtensionOptions,\n): void {\n  const editorContext = useEditorContext()\n  useEditorExtension(\n    options?.editor || editorContext,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import {\n  defineMarkViewComponent,\n  defineMarkViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContext,\n  type ReactMarkViewUserOptions,\n} from '@prosemirror-adapter/react'\nimport {\n  createElement,\n  useMemo,\n  type ComponentType,\n  type FC,\n} 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 {\n  defineNodeViewComponent,\n  defineNodeViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContext,\n  type ReactNodeViewUserOptions,\n} from '@prosemirror-adapter/react'\nimport {\n  createElement,\n  useMemo,\n  type ComponentType,\n  type FC,\n} 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 {\n  createElement,\n  type ComponentType,\n  type ReactNode,\n} 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    ProsemirrorAdapterProvider,\n    null,\n    createElement(\n      EditorContextProvider,\n      { value: editor },\n      createElement(ReactNodeViewConsumer),\n      createElement(ReactMarkViewConsumer),\n      children,\n    ),\n  )\n}\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\nimport { useMemo } from 'react'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineDocChangeHandler((view) => handler(view.state.doc)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  ProseKitError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  useEffect,\n  useReducer,\n} from '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 {\n  defineMountHandler,\n  defineUpdateHandler,\n  EditorNotFoundError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  useMemo,\n  useSyncExternalStore,\n} 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 * A hook that runs a function to derive a value from the editor instance after\n * editor state changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   *\n   * This function should be memoized.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): Derived {\n  const editorContext = useEditorContext<E>()\n  const editor = options?.editor ?? editorContext\n  if (!editor) {\n    throw new EditorNotFoundError()\n  }\n\n  const [subscribe, getSnapshot] = useMemo(() => {\n    return createEditorStore(editor, derive)\n  }, [editor, derive])\n\n  return useSyncExternalStore(subscribe, getSnapshot)\n}\n\nfunction createEditorStore<Derived, E extends Extension = any>(editor: Editor<E>, derive: (editor: Editor<E>) => Derived) {\n  let dirty = true\n  let derived: Derived\n\n  const subscribe = (onChange: VoidFunction): VoidFunction => {\n    const handleChange = () => {\n      dirty = true\n      onChange()\n    }\n    const extension = union(\n      defineUpdateHandler(handleChange),\n      defineMountHandler(handleChange),\n    )\n    return editor.use(extension)\n  }\n\n  const getSnapshot = () => {\n    if (dirty) {\n      dirty = false\n      derived = derive(editor)\n    }\n    return derived\n  }\n\n  return [subscribe, getSnapshot] as const\n}\n","import {\n  defineKeymap,\n  type Keymap,\n} from '@prosekit/core'\nimport { useMemo } from 'react'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\nexport function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void {\n  const extension = useMemo(() => defineKeymap(keymap), [keymap])\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\nimport { useMemo } from 'react'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = useMemo(\n    () => defineUpdateHandler((view) => handler(view.state)),\n    [handler],\n  )\n  useExtension(extension, options)\n}\n"],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "private": false,
   "description": "React components and utilities for ProseKit",
   "author": {
@@ -10,14 +10,14 @@
   },
   "license": "MIT",
   "funding": "https://github.com/sponsors/ocavue",
-  "homepage": "https://github.com/ocavue/prosekit#readme",
+  "homepage": "https://github.com/prosekit/prosekit#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ocavue/prosekit.git",
+    "url": "git+https://github.com/prosekit/prosekit.git",
     "directory": "packages/react"
   },
   "bugs": {
-    "url": "https://github.com/ocavue/prosekit/issues"
+    "url": "https://github.com/prosekit/prosekit/issues"
   },
   "keywords": [
     "ProseMirror"
@@ -38,6 +38,10 @@
       "types": "./dist/prosekit-react-block-handle.d.ts",
       "default": "./dist/prosekit-react-block-handle.js"
     },
+    "./drop-indicator": {
+      "types": "./dist/prosekit-react-drop-indicator.d.ts",
+      "default": "./dist/prosekit-react-drop-indicator.js"
+    },
     "./inline-popover": {
       "types": "./dist/prosekit-react-inline-popover.d.ts",
       "default": "./dist/prosekit-react-inline-popover.js"
@@ -60,14 +64,15 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.4.0",
-    "@prosemirror-adapter/react": "^0.4.1",
-    "@prosekit/pm": "^0.1.11",
-    "@prosekit/web": "^0.6.0",
-    "@prosekit/core": "^0.8.3"
+    "@prosemirror-adapter/core": "^0.4.2",
+    "@prosemirror-adapter/react": "^0.4.4",
+    "@prosekit/web": "^0.7.4",
+    "@prosekit/pm": "^0.1.12",
+    "@prosekit/core": "^0.8.4"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -82,13 +87,12 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "tsdown": "^0.12.9",
-    "typescript": "~5.8.3",
-    "vitest": "^3.2.4",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "tsdown": "^0.14.2",
+    "typescript": "~5.9.2",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"
   },
@@ -100,6 +104,7 @@
       "prosekit-react": "./src/index.ts",
       "prosekit-react-autocomplete": "./src/components/autocomplete/index.gen.ts",
       "prosekit-react-block-handle": "./src/components/block-handle/index.gen.ts",
+      "prosekit-react-drop-indicator": "./src/components/drop-indicator/index.gen.ts",
       "prosekit-react-inline-popover": "./src/components/inline-popover/index.gen.ts",
       "prosekit-react-popover": "./src/components/popover/index.gen.ts",
       "prosekit-react-resizable": "./src/components/resizable/index.gen.ts",
@@ -123,6 +128,9 @@
       "block-handle": [
         "./dist/prosekit-react-block-handle.d.ts"
       ],
+      "drop-indicator": [
+        "./dist/prosekit-react-drop-indicator.d.ts"
+      ],
       "inline-popover": [
         "./dist/prosekit-react-inline-popover.d.ts"
       ],

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteEmptyElement,
+  type AutocompleteEmptyProps as Props,
+  type AutocompleteEmptyEvents as Events,
+  autocompleteEmptyProps,
+  autocompleteEmptyEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  AutocompleteEmptyElement
+>(
+  'prosekit-autocomplete-empty',
+  'AutocompleteEmpty',
+  Object.keys(autocompleteEmptyProps),
+  Object.keys(autocompleteEmptyEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteItemElement,
+  type AutocompleteItemProps as Props,
+  type AutocompleteItemEvents as Events,
+  autocompleteItemProps,
+  autocompleteItemEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  AutocompleteItemElement
+>(
+  'prosekit-autocomplete-item',
+  'AutocompleteItem',
+  Object.keys(autocompleteItemProps),
+  Object.keys(autocompleteItemEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompleteListElement,
+  type AutocompleteListProps as Props,
+  type AutocompleteListEvents as Events,
+  autocompleteListProps,
+  autocompleteListEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  AutocompleteListElement
+>(
+  'prosekit-autocomplete-list',
+  'AutocompleteList',
+  Object.keys(autocompleteListProps),
+  Object.keys(autocompleteListEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type AutocompletePopoverElement,
+  type AutocompletePopoverProps as Props,
+  type AutocompletePopoverEvents as Events,
+  autocompletePopoverProps,
+  autocompletePopoverEvents,
+} from '@prosekit/web/autocomplete'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  AutocompletePopoverElement
+>(
+  'prosekit-autocomplete-popover',
+  'AutocompletePopover',
+  Object.keys(autocompletePopoverProps),
+  Object.keys(autocompletePopoverEvents),
+)

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

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

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

@@ -0,0 +1,34 @@
+import {
+  type BlockHandleAddElement,
+  type BlockHandleAddProps as Props,
+  type BlockHandleAddEvents as Events,
+  blockHandleAddProps,
+  blockHandleAddEvents,
+} from '@prosekit/web/block-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  BlockHandleAddElement
+>(
+  'prosekit-block-handle-add',
+  'BlockHandleAdd',
+  Object.keys(blockHandleAddProps),
+  Object.keys(blockHandleAddEvents),
+)

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

@@ -0,0 +1,34 @@
+import {
+  type BlockHandleDraggableElement,
+  type BlockHandleDraggableProps as Props,
+  type BlockHandleDraggableEvents as Events,
+  blockHandleDraggableProps,
+  blockHandleDraggableEvents,
+} from '@prosekit/web/block-handle'
+import type {
+  ForwardRefExoticComponent,
+  HTMLAttributes,
+  RefAttributes,
+} from 'react'
+
+import { createComponent } from '../create-component'
+import type { CreateProps } from '../create-props'
+
+/**
+ * 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, 
+  BlockHandleDraggableElement
+>(
+  'prosekit-block-handle-draggable',
+  'BlockHandleDraggable',
+  Object.keys(blockHandleDraggableProps),
+  Object.keys(blockHandleDraggableEvents),
+)