@prosekit/react 0.0.0-next-20230709094459 → 0.0.0-next-20240421132240

package/dist/_tsup-dts-rollup.d.ts

@@ -0,0 +1,343 @@
+/// <reference types="react" />
+
+import type { Attrs } from '@prosekit/pm/model';
+import { AutocompleteEmptyElement } from '@prosekit/web/autocomplete';
+import { AutocompleteEmptyProps } from '@prosekit/web/autocomplete';
+import { AutocompleteItemElement } from '@prosekit/web/autocomplete';
+import { AutocompleteItemProps } from '@prosekit/web/autocomplete';
+import { AutocompleteListElement } from '@prosekit/web/autocomplete';
+import { AutocompleteListProps } from '@prosekit/web/autocomplete';
+import { AutocompletePopoverElement } from '@prosekit/web/autocomplete';
+import { AutocompletePopoverProps } from '@prosekit/web/autocomplete';
+import { BaseNodeViewOptions } from '@prosekit/core';
+import { BlockDragHandleElement } from '@prosekit/web/block-handle';
+import { BlockDragHandleProps } from '@prosekit/web/block-handle';
+import { BlockPopoverElement } from '@prosekit/web/block-handle';
+import { BlockPopoverProps } from '@prosekit/web/block-handle';
+import { CommandArgs } from '@prosekit/core';
+import { ComponentType } from 'react';
+import { Context } from 'react';
+import { CoreNodeView } from '@prosemirror-adapter/core';
+import type { CoreNodeViewSpec } from '@prosemirror-adapter/core';
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
+import type { Decoration } from '@prosekit/pm/view';
+import type { DecorationSource } from '@prosekit/pm/view';
+import { Editor } from '@prosekit/core';
+import type { EditorState } from '@prosekit/pm/state';
+import type { EditorView } from '@prosekit/pm/view';
+import { Extension } from '@prosekit/core';
+import { ExtensionTyping } from '@prosekit/core';
+import { FC } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { InlinePopoverElement } from '@prosekit/web/inline-popover';
+import { InlinePopoverProps } from '@prosekit/web/inline-popover';
+import { Keymap } from '@prosekit/core';
+import type { Node as Node_2 } from '@prosekit/pm/model';
+import type { NodeViewConstructor } from '@prosekit/pm/view';
+import { Options } from 'tsup';
+import { PopoverContentElement } from '@prosekit/web/popover';
+import { PopoverContentProps } from '@prosekit/web/popover';
+import { PopoverRootElement } from '@prosekit/web/popover';
+import { PopoverRootProps } from '@prosekit/web/popover';
+import { PopoverTriggerElement } from '@prosekit/web/popover';
+import { PopoverTriggerProps } from '@prosekit/web/popover';
+import { Priority } from '@prosekit/core';
+import type { ProseMirrorNode } from '@prosekit/pm/model';
+import { Provider } from 'react';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
+import { RefAttributes } from 'react';
+import { ResizableHandleElement } from '@prosekit/web/resizable';
+import { ResizableHandleProps } from '@prosekit/web/resizable';
+import { ResizableRootElement } from '@prosekit/web/resizable';
+import { ResizableRootProps } from '@prosekit/web/resizable';
+import { TooltipContentElement } from '@prosekit/web/tooltip';
+import { TooltipContentProps } from '@prosekit/web/tooltip';
+import { TooltipRootElement } from '@prosekit/web/tooltip';
+import { TooltipRootProps } from '@prosekit/web/tooltip';
+import { TooltipTriggerElement } from '@prosekit/web/tooltip';
+import { TooltipTriggerProps } from '@prosekit/web/tooltip';
+
+declare const AutocompleteEmpty: ForwardRefExoticComponent<Partial<AutocompleteEmptyProps> & RefAttributes<AutocompleteEmptyElement> & HTMLAttributes<AutocompleteEmptyElement>>;
+export { AutocompleteEmpty }
+export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
+
+declare const AutocompleteItem: ForwardRefExoticComponent<Partial<AutocompleteItemProps> & RefAttributes<AutocompleteItemElement> & HTMLAttributes<AutocompleteItemElement>>;
+export { AutocompleteItem }
+export { AutocompleteItem as AutocompleteItem_alias_1 }
+
+declare const AutocompleteList: ForwardRefExoticComponent<Partial<AutocompleteListProps> & RefAttributes<AutocompleteListElement> & HTMLAttributes<AutocompleteListElement>>;
+export { AutocompleteList }
+export { AutocompleteList as AutocompleteList_alias_1 }
+
+declare const AutocompletePopover: ForwardRefExoticComponent<Partial<AutocompletePopoverProps> & RefAttributes<AutocompletePopoverElement> & HTMLAttributes<AutocompletePopoverElement>>;
+export { AutocompletePopover }
+export { AutocompletePopover as AutocompletePopover_alias_1 }
+
+declare const BlockDragHandle: ForwardRefExoticComponent<Partial<BlockDragHandleProps> & RefAttributes<BlockDragHandleElement> & HTMLAttributes<BlockDragHandleElement>>;
+export { BlockDragHandle }
+export { BlockDragHandle as BlockDragHandle_alias_1 }
+
+declare const BlockPopover: ForwardRefExoticComponent<Partial<BlockPopoverProps> & RefAttributes<BlockPopoverElement> & HTMLAttributes<BlockPopoverElement>>;
+export { BlockPopover }
+export { BlockPopover as BlockPopover_alias_1 }
+
+export declare function createComponent<Props extends object, CustomElement extends HTMLElement>(tagName: string, displayName: string, defaultProps: Props): ForwardRefExoticComponent<Partial<Props> & RefAttributes<CustomElement> & HTMLAttributes<CustomElement>>;
+
+export declare const createNodeViewContext: Context<NodeViewFactory | null>;
+
+declare type CreateReactNodeView = ReturnType<typeof useReactNodeViewCreator>;
+export { CreateReactNodeView }
+export { CreateReactNodeView as CreateReactNodeView_alias_1 }
+
+export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
+
+export declare const default_alias_1: {
+    test: {
+        environment: "jsdom";
+    };
+};
+
+/**
+ * Defines a node view using a React component.
+ *
+ * @public
+ */
+declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
+export { defineReactNodeView }
+export { defineReactNodeView as defineReactNodeView_alias_1 }
+
+/**
+ * @internal
+ */
+export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<string, string, CommandArgs>>;
+
+/**
+ * @internal
+ */
+export declare const EditorContextProvider: Provider<Editor<any> | null>;
+
+declare const InlinePopover: ForwardRefExoticComponent<Partial<InlinePopoverProps> & RefAttributes<InlinePopoverElement> & HTMLAttributes<InlinePopoverElement>>;
+export { InlinePopover }
+export { InlinePopover as InlinePopover_alias_1 }
+
+export declare type NodeViewFactory = (options: ReactNodeViewUserOptions) => NodeViewConstructor;
+
+declare const PopoverContent: ForwardRefExoticComponent<Partial<PopoverContentProps> & RefAttributes<PopoverContentElement> & HTMLAttributes<PopoverContentElement>>;
+export { PopoverContent }
+export { PopoverContent as PopoverContent_alias_1 }
+
+declare const PopoverRoot: ForwardRefExoticComponent<Partial<PopoverRootProps> & RefAttributes<PopoverRootElement> & HTMLAttributes<PopoverRootElement>>;
+export { PopoverRoot }
+export { PopoverRoot as PopoverRoot_alias_1 }
+
+declare const PopoverTrigger: ForwardRefExoticComponent<Partial<PopoverTriggerProps> & RefAttributes<PopoverTriggerElement> & HTMLAttributes<PopoverTriggerElement>>;
+export { PopoverTrigger }
+export { PopoverTrigger as PopoverTrigger_alias_1 }
+
+/**
+ * @internal
+ */
+declare type PropsWithClassName<P = unknown> = P & {
+    className?: string | undefined;
+};
+export { PropsWithClassName }
+export { PropsWithClassName as PropsWithClassName_alias_1 }
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+declare const ProseKit: ComponentType<ProseKitProps>;
+export { ProseKit }
+export { ProseKit as ProseKit_alias_1 }
+
+declare interface ProseKitProps {
+    editor: Editor;
+    children?: ReactNode;
+}
+export { ProseKitProps }
+export { ProseKitProps as ProseKitProps_alias_1 }
+
+export declare class ReactNodeView extends CoreNodeView<ReactNodeViewComponent> implements ReactRenderer<ReactNodeViewProps> {
+    key: string;
+    context: ReactNodeViewProps;
+    updateContext: () => void;
+    render: () => ReactPortal;
+}
+
+/**
+ * @public
+ */
+declare type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>;
+export { ReactNodeViewComponent }
+export { ReactNodeViewComponent as ReactNodeViewComponent_alias_1 }
+
+/**
+ * Options for {@link defineReactNodeView}.
+ *
+ * @public
+ */
+declare interface ReactNodeViewOptions extends BaseNodeViewOptions {
+    /**
+     * The name of the node type.
+     */
+    name: string;
+    /**
+     * The React component to render the node.
+     */
+    component: ReactNodeViewComponent;
+}
+export { ReactNodeViewOptions }
+export { ReactNodeViewOptions as ReactNodeViewOptions_alias_1 }
+
+/**
+ * @public
+ */
+declare interface ReactNodeViewProps {
+    contentRef: (node: HTMLElement | null) => void;
+    view: EditorView;
+    getPos: () => number | undefined;
+    setAttrs: (attrs: Attrs) => void;
+    node: Node_2;
+    selected: boolean;
+    decorations: readonly Decoration[];
+    innerDecorations: DecorationSource;
+}
+export { ReactNodeViewProps }
+export { ReactNodeViewProps as ReactNodeViewProps_alias_1 }
+
+export declare type ReactNodeViewSpec = CoreNodeViewSpec<ReactNodeViewComponent>;
+
+export declare type ReactNodeViewUserOptions = CoreNodeViewUserOptions<ReactNodeViewComponent>;
+
+export declare interface ReactRenderer<Context> {
+    key: string;
+    context: Context;
+    render: () => ReactPortal;
+    updateContext: () => void;
+}
+
+export declare interface ReactRendererResult {
+    readonly portals: Record<string, ReactPortal>;
+    readonly renderReactRenderer: (nodeView: ReactRenderer<unknown>, update?: boolean) => void;
+    readonly removeReactRenderer: (nodeView: ReactRenderer<unknown>) => void;
+}
+
+export declare const ReactViewsConsumer: FC;
+
+declare const ReactViewsProvider: FC<{
+    children: ReactNode;
+}>;
+export { ReactViewsProvider }
+export { ReactViewsProvider as ReactViewsProvider_alias_1 }
+
+declare const ResizableHandle: ForwardRefExoticComponent<Partial<ResizableHandleProps> & RefAttributes<ResizableHandleElement> & HTMLAttributes<ResizableHandleElement>>;
+export { ResizableHandle }
+export { ResizableHandle as ResizableHandle_alias_1 }
+
+declare const ResizableRoot: ForwardRefExoticComponent<Partial<ResizableRootProps> & RefAttributes<ResizableRootElement> & HTMLAttributes<ResizableRootElement>>;
+export { ResizableRoot }
+export { ResizableRoot as ResizableRoot_alias_1 }
+
+declare const TooltipContent: ForwardRefExoticComponent<Partial<TooltipContentProps> & RefAttributes<TooltipContentElement> & HTMLAttributes<TooltipContentElement>>;
+export { TooltipContent }
+export { TooltipContent as TooltipContent_alias_1 }
+
+declare const TooltipRoot: ForwardRefExoticComponent<Partial<TooltipRootProps> & RefAttributes<TooltipRootElement> & HTMLAttributes<TooltipRootElement>>;
+export { TooltipRoot }
+export { TooltipRoot as TooltipRoot_alias_1 }
+
+declare const TooltipTrigger: ForwardRefExoticComponent<Partial<TooltipTriggerProps> & RefAttributes<TooltipTriggerElement> & HTMLAttributes<TooltipTriggerElement>>;
+export { TooltipTrigger }
+export { TooltipTrigger as TooltipTrigger_alias_1 }
+
+/**
+ * Calls the given handler whenever the editor document changes.
+ *
+ * @public
+ */
+declare function useDocChange(handler: (doc: ProseMirrorNode) => void, options?: UseExtensionOptions): void;
+export { useDocChange }
+export { useDocChange as useDocChange_alias_1 }
+
+/**
+ * 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.
+     *
+     * @default false
+     */
+    update?: boolean;
+}): Editor<E>;
+export { useEditor }
+export { useEditor as useEditor_alias_1 }
+
+/**
+ * @internal
+ */
+export declare function useEditorContext<E extends Extension>(): Editor<E> | null;
+
+/**
+ * @internal
+ */
+export declare function useEditorExtension(editor: Editor | null | undefined, extension: Extension | null): 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;
+export { useExtension }
+export { useExtension as useExtension_alias_1 }
+
+declare interface UseExtensionOptions {
+    /**
+     * 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.
+     */
+    priority?: Priority;
+}
+export { UseExtensionOptions }
+export { UseExtensionOptions as UseExtensionOptions_alias_1 }
+
+declare function useKeymap(keymap: Keymap, options?: UseExtensionOptions): void;
+export { useKeymap }
+export { useKeymap as useKeymap_alias_1 }
+
+export declare function useNodeViewFactory(): NodeViewFactory;
+
+/**
+ * @internal
+ */
+export declare function usePriorityExtension<T extends Extension = Extension>(extension: T | null, priority?: Priority | null): T | null;
+
+export declare function useReactNodeViewCreator(renderReactRenderer: ReactRendererResult['renderReactRenderer'], removeReactRenderer: ReactRendererResult['removeReactRenderer']): (options: ReactNodeViewUserOptions) => NodeViewConstructor;
+
+export declare function useReactRenderer(): ReactRendererResult;
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
+export { useStateUpdate }
+export { useStateUpdate as useStateUpdate_alias_1 }
+
+export { }

package/dist/chunk-BH56NR2Q.js

@@ -0,0 +1,12 @@
+// src/contexts/editor-context.ts
+import { createContext, useContext } from "react";
+var editorContext = createContext(null);
+function useEditorContext() {
+  return useContext(editorContext);
+}
+var EditorContextProvider = editorContext.Provider;
+
+export {
+  useEditorContext,
+  EditorContextProvider
+};

package/dist/chunk-UG3RPLME.js

@@ -0,0 +1,51 @@
+import {
+  useEditorContext
+} from "./chunk-BH56NR2Q.js";
+
+// src/components/create-component.ts
+import {
+  createElement,
+  forwardRef,
+  useLayoutEffect,
+  useState
+} from "react";
+import { mergeRefs } from "react-merge-refs";
+function createComponent(tagName, displayName, defaultProps) {
+  const propertyNames = Object.keys(defaultProps);
+  const hasEditor = Object.hasOwn(defaultProps, "editor");
+  const Component = forwardRef((props, ref) => {
+    const [el, setEl] = useState(null);
+    const properties = {};
+    const attributes = {};
+    for (const [name, value] of Object.entries(props)) {
+      if (propertyNames.includes(name)) {
+        properties[name] = value;
+      } else {
+        attributes[name === "className" ? "class" : name] = value;
+      }
+    }
+    const editor = useEditorContext();
+    if (hasEditor && editor && !properties["editor"]) {
+      properties["editor"] = editor;
+    }
+    useLayoutEffect(() => {
+      if (el) {
+        for (const [name, value] of Object.entries(properties)) {
+          if (value !== void 0) {
+            el[name] = value;
+          }
+        }
+      }
+    }, [el, ...propertyNames.map((name) => properties[name])]);
+    return createElement(tagName, {
+      ...attributes,
+      ref: mergeRefs([ref, setEl])
+    });
+  });
+  Component.displayName = displayName;
+  return Component;
+}
+
+export {
+  createComponent
+};

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

@@ -0,0 +1,4 @@
+export { AutocompleteEmpty_alias_1 as AutocompleteEmpty } from './_tsup-dts-rollup';
+export { AutocompleteItem_alias_1 as AutocompleteItem } from './_tsup-dts-rollup';
+export { AutocompleteList_alias_1 as AutocompleteList } from './_tsup-dts-rollup';
+export { AutocompletePopover_alias_1 as AutocompletePopover } from './_tsup-dts-rollup';

package/dist/prosekit-react-autocomplete.js

@@ -0,0 +1,50 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/autocomplete/autocomplete-empty.gen.ts
+import {
+  defaultAutocompleteEmptyProps
+} from "@prosekit/web/autocomplete";
+var AutocompleteEmpty = createComponent(
+  "prosekit-autocomplete-empty",
+  "AutocompleteEmpty",
+  defaultAutocompleteEmptyProps
+);
+
+// src/components/autocomplete/autocomplete-item.gen.ts
+import {
+  defaultAutocompleteItemProps
+} from "@prosekit/web/autocomplete";
+var AutocompleteItem = createComponent(
+  "prosekit-autocomplete-item",
+  "AutocompleteItem",
+  defaultAutocompleteItemProps
+);
+
+// src/components/autocomplete/autocomplete-list.gen.ts
+import {
+  defaultAutocompleteListProps
+} from "@prosekit/web/autocomplete";
+var AutocompleteList = createComponent(
+  "prosekit-autocomplete-list",
+  "AutocompleteList",
+  defaultAutocompleteListProps
+);
+
+// src/components/autocomplete/autocomplete-popover.gen.ts
+import {
+  defaultAutocompletePopoverProps
+} from "@prosekit/web/autocomplete";
+var AutocompletePopover = createComponent(
+  "prosekit-autocomplete-popover",
+  "AutocompletePopover",
+  defaultAutocompletePopoverProps
+);
+export {
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopover
+};

package/dist/prosekit-react-block-handle.d.ts

@@ -0,0 +1,2 @@
+export { BlockDragHandle_alias_1 as BlockDragHandle } from './_tsup-dts-rollup';
+export { BlockPopover_alias_1 as BlockPopover } from './_tsup-dts-rollup';

package/dist/prosekit-react-block-handle.js

@@ -0,0 +1,28 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/block-handle/block-drag-handle.gen.ts
+import {
+  defaultBlockDragHandleProps
+} from "@prosekit/web/block-handle";
+var BlockDragHandle = createComponent(
+  "prosekit-block-drag-handle",
+  "BlockDragHandle",
+  defaultBlockDragHandleProps
+);
+
+// src/components/block-handle/block-popover.gen.ts
+import {
+  defaultBlockPopoverProps
+} from "@prosekit/web/block-handle";
+var BlockPopover = createComponent(
+  "prosekit-block-popover",
+  "BlockPopover",
+  defaultBlockPopoverProps
+);
+export {
+  BlockDragHandle,
+  BlockPopover
+};

package/dist/prosekit-react-inline-popover.d.ts

@@ -0,0 +1 @@
+export { InlinePopover } from './_tsup-dts-rollup';

package/dist/prosekit-react-inline-popover.js

@@ -0,0 +1,17 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/inline-popover/inline-popover.gen.ts
+import {
+  defaultInlinePopoverProps
+} from "@prosekit/web/inline-popover";
+var InlinePopover = createComponent(
+  "prosekit-inline-popover",
+  "InlinePopover",
+  defaultInlinePopoverProps
+);
+export {
+  InlinePopover
+};

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

@@ -0,0 +1,3 @@
+export { PopoverContent } from './_tsup-dts-rollup';
+export { PopoverRoot } from './_tsup-dts-rollup';
+export { PopoverTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-react-popover.js

@@ -0,0 +1,39 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/popover/popover-content.gen.ts
+import {
+  defaultPopoverContentProps
+} from "@prosekit/web/popover";
+var PopoverContent = createComponent(
+  "prosekit-popover-content",
+  "PopoverContent",
+  defaultPopoverContentProps
+);
+
+// src/components/popover/popover-root.gen.ts
+import {
+  defaultPopoverRootProps
+} from "@prosekit/web/popover";
+var PopoverRoot = createComponent(
+  "prosekit-popover-root",
+  "PopoverRoot",
+  defaultPopoverRootProps
+);
+
+// src/components/popover/popover-trigger.gen.ts
+import {
+  defaultPopoverTriggerProps
+} from "@prosekit/web/popover";
+var PopoverTrigger = createComponent(
+  "prosekit-popover-trigger",
+  "PopoverTrigger",
+  defaultPopoverTriggerProps
+);
+export {
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger
+};

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

@@ -0,0 +1,2 @@
+export { ResizableHandle } from './_tsup-dts-rollup';
+export { ResizableRoot } from './_tsup-dts-rollup';

package/dist/prosekit-react-resizable.js

@@ -0,0 +1,28 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/resizable/resizable-handle.gen.ts
+import {
+  defaultResizableHandleProps
+} from "@prosekit/web/resizable";
+var ResizableHandle = createComponent(
+  "prosekit-resizable-handle",
+  "ResizableHandle",
+  defaultResizableHandleProps
+);
+
+// src/components/resizable/resizable-root.gen.ts
+import {
+  defaultResizableRootProps
+} from "@prosekit/web/resizable";
+var ResizableRoot = createComponent(
+  "prosekit-resizable-root",
+  "ResizableRoot",
+  defaultResizableRootProps
+);
+export {
+  ResizableHandle,
+  ResizableRoot
+};

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

@@ -0,0 +1,3 @@
+export { TooltipContent } from './_tsup-dts-rollup';
+export { TooltipRoot } from './_tsup-dts-rollup';
+export { TooltipTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-react-tooltip.js

@@ -0,0 +1,39 @@
+import {
+  createComponent
+} from "./chunk-UG3RPLME.js";
+import "./chunk-BH56NR2Q.js";
+
+// src/components/tooltip/tooltip-content.gen.ts
+import {
+  defaultTooltipContentProps
+} from "@prosekit/web/tooltip";
+var TooltipContent = createComponent(
+  "prosekit-tooltip-content",
+  "TooltipContent",
+  defaultTooltipContentProps
+);
+
+// src/components/tooltip/tooltip-root.gen.ts
+import {
+  defaultTooltipRootProps
+} from "@prosekit/web/tooltip";
+var TooltipRoot = createComponent(
+  "prosekit-tooltip-root",
+  "TooltipRoot",
+  defaultTooltipRootProps
+);
+
+// src/components/tooltip/tooltip-trigger.gen.ts
+import {
+  defaultTooltipTriggerProps
+} from "@prosekit/web/tooltip";
+var TooltipTrigger = createComponent(
+  "prosekit-tooltip-trigger",
+  "TooltipTrigger",
+  defaultTooltipTriggerProps
+);
+export {
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger
+};

package/dist/prosekit-react.d.ts

@@ -1,21 +1,13 @@
-import { Editor, Extension, Keymap } from '@prosekit/core';
-import React, { ComponentType } from 'react';
-
-interface ProseKitProps {
-    editor: Editor;
-    children?: React.ReactNode;
-}
-declare const ProseKit: ComponentType<ProseKitProps>;
-
-declare function useEditor<E extends Extension = any>(): Editor<E>;
-
-interface UseExtensionProps<T extends Extension = Extension> {
-    extension: T;
-}
-declare function useExtension({ extension }: UseExtensionProps): void;
-
-declare function useKeymap({ keymap }: {
-    keymap: Keymap;
-}): void;
-
-export { ProseKit, ProseKitProps, useEditor, useExtension, useKeymap };
+export { ProseKit } from './_tsup-dts-rollup';
+export { ProseKitProps } from './_tsup-dts-rollup';
+export { defineReactNodeView } from './_tsup-dts-rollup';
+export { ReactNodeViewOptions } from './_tsup-dts-rollup';
+export { useEditor } from './_tsup-dts-rollup';
+export { useExtension } from './_tsup-dts-rollup';
+export { UseExtensionOptions } from './_tsup-dts-rollup';
+export { useKeymap } from './_tsup-dts-rollup';
+export { useStateUpdate } from './_tsup-dts-rollup';
+export { useDocChange } from './_tsup-dts-rollup';
+export { PropsWithClassName } from './_tsup-dts-rollup';
+export { ReactNodeViewComponent } from './_tsup-dts-rollup';
+export { ReactNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -1,49 +1,335 @@
-// src/contexts/editor-context.tsx
-import { createContext } from "react";
-var editorContext = createContext(null);
+import {
+  EditorContextProvider,
+  useEditorContext
+} from "./chunk-BH56NR2Q.js";
 
-// src/components/prosekit.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
+// src/components/prosekit.ts
+import "@prosekit/core";
+import { createElement as createElement3 } from "react";
+
+// src/views/react-views-consumer.ts
+import { useMemo as useMemo2 } from "react";
+
+// src/extensions/react-node-view.ts
+import {
+  defineNodeViewFactory
+} from "@prosekit/core";
+function defineReactNodeView(options) {
+  const { name, ...userOptions } = options;
+  return defineNodeViewFactory({
+    group: "react",
+    name,
+    args: userOptions
+  });
+}
+function defineReactNodeViewFactory(nodeViewFactory) {
+  return defineNodeViewFactory({
+    group: "react",
+    factory: nodeViewFactory
+  });
+}
+
+// src/hooks/use-extension.ts
+import "@prosekit/core";
+
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
+import { useEffect } from "react";
+function useEditorExtension(editor, extension) {
+  if (!editor) {
+    throw new EditorNotFoundError();
+  }
+  useEffect(() => {
+    if (extension) {
+      return editor.use(extension);
+    }
+  }, [editor, extension]);
+}
+
+// src/hooks/use-priority-extension.ts
+import { withPriority } from "@prosekit/core";
+import { useMemo } from "react";
+function usePriorityExtension(extension, priority) {
+  return useMemo(() => {
+    return extension && priority ? withPriority(extension, priority) : extension;
+  }, [extension, priority]);
+}
+
+// src/hooks/use-extension.ts
+function useExtension(extension, options) {
+  const editorContext = useEditorContext();
+  useEditorExtension(
+    (options == null ? void 0 : options.editor) || editorContext,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
+}
+
+// src/views/node-view/node-view-context.ts
+import { ProseKitError } from "@prosekit/core";
+import { createContext, useContext } from "react";
+var createNodeViewContext = createContext(null);
+function useNodeViewFactory() {
+  const nodeViewFactory = useContext(createNodeViewContext);
+  if (!nodeViewFactory) {
+    throw new ProseKitError("Cannot find node view factory context.");
+  }
+  return nodeViewFactory;
+}
+
+// src/views/react-views-consumer.ts
+var ReactViewsConsumer = () => {
+  const nodeViewFactory = useNodeViewFactory();
+  const extension = useMemo2(
+    () => defineReactNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory]
+  );
+  useExtension(extension);
+  return null;
+};
+
+// src/views/react-views-provider.ts
+import { createElement as createElement2, useMemo as useMemo3 } from "react";
+
+// src/views/node-view/use-react-node-view-creator.ts
+import { useCallback } from "react";
+
+// src/views/node-view/react-node-view.ts
+import { _getId } from "@prosekit/core";
+import { CoreNodeView } from "@prosemirror-adapter/core";
+import { createElement } from "react";
+import { createPortal } from "react-dom";
+var ReactNodeView = class extends CoreNodeView {
+  constructor() {
+    super(...arguments);
+    this.key = _getId();
+    this.context = {
+      contentRef: (element) => {
+        if (element && this.contentDOM && element.firstChild !== this.contentDOM)
+          element.appendChild(this.contentDOM);
+      },
+      view: this.view,
+      getPos: this.getPos,
+      setAttrs: this.setAttrs,
+      node: this.node,
+      selected: this.selected,
+      decorations: this.decorations,
+      innerDecorations: this.innerDecorations
+    };
+    this.updateContext = () => {
+      Object.assign(this.context, {
+        node: this.node,
+        selected: this.selected,
+        decorations: this.decorations,
+        innerDecorations: this.innerDecorations
+      });
+    };
+    this.render = () => {
+      const UserComponent = this.component;
+      return createPortal(
+        createElement(UserComponent, this.context),
+        this.dom,
+        this.key
+      );
+    };
+  }
+};
+
+// src/views/node-view/use-react-node-view-creator.ts
+function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
+  const createReactNodeView = useCallback(
+    (options) => (node, view, getPos, decorations, innerDecorations) => {
+      const nodeView = new ReactNodeView({
+        node,
+        view,
+        getPos,
+        decorations,
+        innerDecorations,
+        options: {
+          ...options,
+          onUpdate() {
+            var _a;
+            (_a = options.onUpdate) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          selectNode() {
+            var _a;
+            (_a = options.selectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          deselectNode() {
+            var _a;
+            (_a = options.deselectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          destroy() {
+            var _a;
+            (_a = options.destroy) == null ? void 0 : _a.call(options);
+            removeReactRenderer(nodeView);
+          }
+        }
+      });
+      renderReactRenderer(nodeView, false);
+      return nodeView;
+    },
+    [removeReactRenderer, renderReactRenderer]
+  );
+  return createReactNodeView;
+}
+
+// src/views/react-renderer.ts
+import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+function useReactRenderer() {
+  const [portals, setPortals] = useState({});
+  const mountedRef = useRef(false);
+  useEffect2(() => {
+    requestAnimationFrame(() => {
+      mountedRef.current = true;
+    });
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const maybeFlushSync = useCallback2((fn) => {
+    if (mountedRef.current)
+      flushSync(fn);
+    else
+      fn();
+  }, []);
+  const renderReactRenderer = useCallback2(
+    (nodeView, update = true) => {
+      maybeFlushSync(() => {
+        if (update)
+          nodeView.updateContext();
+        setPortals((prev) => ({
+          ...prev,
+          [nodeView.key]: nodeView.render()
+        }));
+      });
+    },
+    [maybeFlushSync]
+  );
+  const removeReactRenderer = useCallback2(
+    (nodeView) => {
+      maybeFlushSync(() => {
+        setPortals((prev) => {
+          const next = { ...prev };
+          delete next[nodeView.key];
+          return next;
+        });
+      });
+    },
+    [maybeFlushSync]
+  );
+  return {
+    portals,
+    renderReactRenderer,
+    removeReactRenderer
+  };
+}
+
+// src/views/react-views-provider.ts
+var ReactViewsProvider = ({
+  children
+}) => {
+  const { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer();
+  const createReactNodeView = useReactNodeViewCreator(
+    renderReactRenderer,
+    removeReactRenderer
+  );
+  const memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
+  return createElement2(
+    createNodeViewContext.Provider,
+    { value: createReactNodeView },
+    children,
+    memoizedPortals
+  );
+};
+
+// src/components/prosekit.ts
 var ProseKit = (props) => {
-  const editor = props.editor;
-  return /* @__PURE__ */ jsxDEV(EditorContextProvider, { value: { editor }, children: props.children }, void 0, false, {
-    fileName: "src/components/prosekit.tsx",
-    lineNumber: 15,
-    columnNumber: 5
-  }, this);
+  const { editor, children } = props;
+  return createElement3(
+    ReactViewsProvider,
+    null,
+    createElement3(
+      EditorContextProvider,
+      { value: editor },
+      createElement3(ReactViewsConsumer),
+      children
+    )
+  );
 };
-var EditorContextProvider = editorContext.Provider;
 
 // src/hooks/use-editor.ts
-import { ProseKitError } from "@prosekit/core";
-import { useContext } from "react";
-function useEditor() {
-  const value = useContext(editorContext);
-  if (!value) {
-    throw new ProseKitError(
+import {
+  ProseKitError as ProseKitError2,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
+} from "@prosekit/core";
+import { useEffect as useEffect3, useReducer } from "react";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError2(
       "useEditor must be used within the ProseKit component"
     );
   }
-  return value.editor;
+  const forceUpdate = useForceUpdate();
+  useEffect3(() => {
+    if (update) {
+      const extension = union([
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      ]);
+      return editor.use(extension);
+    }
+  }, [editor, update, forceUpdate]);
+  return editor;
 }
-
-// src/hooks/use-extension.ts
-import { useEffect } from "react";
-function useExtension({ extension }) {
-  const editor = useEditor();
-  useEffect(() => editor.use(extension), [editor, extension]);
+function useForceUpdate() {
+  const [, dispatch] = useReducer((x) => x + 1, 0);
+  return dispatch;
 }
 
 // src/hooks/use-keymap.ts
-import { addKeymap } from "@prosekit/core";
-import { useMemo } from "react";
-function useKeymap({ keymap }) {
-  const extension = useMemo(() => addKeymap(keymap), [keymap]);
-  useExtension({ extension });
+import { defineKeymap } from "@prosekit/core";
+import { useMemo as useMemo4 } from "react";
+function useKeymap(keymap, options) {
+  const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
+  return useExtension(extension, options);
+}
+
+// src/hooks/use-state-update.ts
+import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
+import { useMemo as useMemo5 } from "react";
+function useStateUpdate(handler, options) {
+  const extension = useMemo5(
+    () => defineUpdateHandler2((view) => handler(view.state)),
+    [handler]
+  );
+  return useExtension(extension, options);
+}
+
+// src/hooks/use-doc-change.ts
+import { defineDocChangeHandler } from "@prosekit/core";
+import { useMemo as useMemo6 } from "react";
+function useDocChange(handler, options) {
+  const extension = useMemo6(
+    () => defineDocChangeHandler((view) => handler(view.state.doc)),
+    [handler]
+  );
+  return useExtension(extension, options);
 }
 export {
   ProseKit,
+  defineReactNodeView,
+  useDocChange,
   useEditor,
   useExtension,
-  useKeymap
+  useKeymap,
+  useStateUpdate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.0.0-next-20230709094459",
+  "version": "0.0.0-next-20240421132240",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,34 +30,47 @@
       "import": "./dist/prosekit-react.js",
       "default": "./dist/prosekit-react.js"
     },
-    "./components/menu": {
-      "types": "./dist/prosekit-react-components-menu.d.ts",
-      "import": "./dist/prosekit-react-components-menu.js",
-      "default": "./dist/prosekit-react-components-menu.js"
+    "./autocomplete": {
+      "types": "./dist/prosekit-react-autocomplete.d.ts",
+      "import": "./dist/prosekit-react-autocomplete.js",
+      "default": "./dist/prosekit-react-autocomplete.js"
     },
-    "./components/menu-item": {
-      "types": "./dist/prosekit-react-components-menu-item.d.ts",
-      "import": "./dist/prosekit-react-components-menu-item.js",
-      "default": "./dist/prosekit-react-components-menu-item.js"
+    "./block-handle": {
+      "types": "./dist/prosekit-react-block-handle.d.ts",
+      "import": "./dist/prosekit-react-block-handle.js",
+      "default": "./dist/prosekit-react-block-handle.js"
     },
-    "./components/popover": {
-      "types": "./dist/prosekit-react-components-popover.d.ts",
-      "import": "./dist/prosekit-react-components-popover.js",
-      "default": "./dist/prosekit-react-components-popover.js"
+    "./inline-popover": {
+      "types": "./dist/prosekit-react-inline-popover.d.ts",
+      "import": "./dist/prosekit-react-inline-popover.js",
+      "default": "./dist/prosekit-react-inline-popover.js"
     },
-    "./components/popover-suggestion": {
-      "types": "./dist/prosekit-react-components-popover-suggestion.d.ts",
-      "import": "./dist/prosekit-react-components-popover-suggestion.js",
-      "default": "./dist/prosekit-react-components-popover-suggestion.js"
+    "./popover": {
+      "types": "./dist/prosekit-react-popover.d.ts",
+      "import": "./dist/prosekit-react-popover.js",
+      "default": "./dist/prosekit-react-popover.js"
+    },
+    "./resizable": {
+      "types": "./dist/prosekit-react-resizable.d.ts",
+      "import": "./dist/prosekit-react-resizable.js",
+      "default": "./dist/prosekit-react-resizable.js"
+    },
+    "./tooltip": {
+      "types": "./dist/prosekit-react-tooltip.d.ts",
+      "import": "./dist/prosekit-react-tooltip.js",
+      "default": "./dist/prosekit-react-tooltip.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@lit-labs/react": "latest",
-    "@prosekit/core": "0.0.0-next-20230709094459",
-    "@prosekit/lit": "0.0.0-next-20230709094459"
+    "@lit/react": "^1.0.4",
+    "@prosekit/core": "0.0.0-next-20240421132240",
+    "@prosekit/pm": "0.0.0-next-20240421132240",
+    "@prosekit/web": "0.0.0-next-20240421132240",
+    "@prosemirror-adapter/core": "^0.2.6",
+    "react-merge-refs": "^2.1.1"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -73,13 +86,13 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6",
-    "vitest": "^0.33.0"
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0"
   },
   "scripts": {
     "build:tsup": "tsup",
@@ -91,17 +104,23 @@
       ".": [
         "./dist/prosekit-react.d.ts"
       ],
-      "components/menu": [
-        "./dist/prosekit-react-components-menu.d.ts"
+      "autocomplete": [
+        "./dist/prosekit-react-autocomplete.d.ts"
+      ],
+      "block-handle": [
+        "./dist/prosekit-react-block-handle.d.ts"
+      ],
+      "inline-popover": [
+        "./dist/prosekit-react-inline-popover.d.ts"
       ],
-      "components/menu-item": [
-        "./dist/prosekit-react-components-menu-item.d.ts"
+      "popover": [
+        "./dist/prosekit-react-popover.d.ts"
       ],
-      "components/popover": [
-        "./dist/prosekit-react-components-popover.d.ts"
+      "resizable": [
+        "./dist/prosekit-react-resizable.d.ts"
       ],
-      "components/popover-suggestion": [
-        "./dist/prosekit-react-components-popover-suggestion.d.ts"
+      "tooltip": [
+        "./dist/prosekit-react-tooltip.d.ts"
       ]
     }
   }

package/dist/prosekit-react-components-menu-item.d.ts

@@ -1,6 +0,0 @@
-import * as _lit_labs_react from '@lit-labs/react';
-import { MenuItem as MenuItem$1 } from '@prosekit/lit/elements/menu-item';
-
-declare const MenuItem: _lit_labs_react.ReactWebComponent<MenuItem$1, {}>;
-
-export { MenuItem };

package/dist/prosekit-react-components-menu-item.js

@@ -1,13 +0,0 @@
-// src/components/menu-item.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { MenuItem as MenuItemElement } from "@prosekit/lit/elements/menu-item";
-import React from "react";
-var MenuItem = createComponent({
-  tagName: "prosekit-menu-item",
-  elementClass: MenuItemElement,
-  react: React,
-  displayName: "MenuItem"
-});
-export {
-  MenuItem
-};

package/dist/prosekit-react-components-menu.d.ts

@@ -1,16 +0,0 @@
-import { Editor } from '@prosekit/core';
-import { Menu as Menu$1 } from '@prosekit/lit/elements/menu';
-import { ComponentType, ForwardedRef, ReactNode } from 'react';
-
-/**
- * @module @prosekit/react/components/menu
- */
-
-declare const Menu: ComponentType<{
-    editor?: Editor;
-    ref?: ForwardedRef<Menu$1>;
-    children?: ReactNode | undefined;
-    className?: string;
-}>;
-
-export { Menu };

package/dist/prosekit-react-components-menu.js

@@ -1,16 +0,0 @@
-// src/components/menu.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { Menu as MenuElement } from "@prosekit/lit/elements/menu";
-import React from "react";
-var Menu = createComponent({
-  tagName: "prosekit-menu",
-  elementClass: MenuElement,
-  react: React,
-  displayName: "Menu"
-});
-
-// src/components/menu.tsx
-var Menu2 = Menu;
-export {
-  Menu2 as Menu
-};

package/dist/prosekit-react-components-popover-suggestion.d.ts

@@ -1,16 +0,0 @@
-import { Editor } from '@prosekit/core';
-import { PredictionRule, PopoverSuggestionContext } from '@prosekit/lit/elements/popover-suggestion';
-export { PopoverSuggestionContext, PredictionRule } from '@prosekit/lit/elements/popover-suggestion';
-import React, { FC } from 'react';
-
-/**
- * @module @prosekit/react/components/popover-slash
- */
-
-declare const PopoverSuggestion: FC<{
-    editor: Editor;
-    rules: PredictionRule[];
-    render: (context: PopoverSuggestionContext) => React.ReactNode;
-}>;
-
-export { PopoverSuggestion };

package/dist/prosekit-react-components-popover-suggestion.js

@@ -1,27 +0,0 @@
-// src/components/popover-suggestion.tsx
-import { useState } from "react";
-
-// src/components/popover-suggestion.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { PopoverSuggestion as PopoverSuggestionElement } from "@prosekit/lit/elements/popover-suggestion";
-import React from "react";
-var PopoverSuggestion = createComponent({
-  tagName: "prosekit-popover-suggestion",
-  elementClass: PopoverSuggestionElement,
-  react: React,
-  displayName: "PopoverSuggestion"
-});
-
-// src/components/popover-suggestion.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-var PopoverSuggestion2 = ({ editor, rules, render }) => {
-  const [context, setContext] = useState(null);
-  return /* @__PURE__ */ jsxDEV(PopoverSuggestion, { editor, rules, onContext: setContext, children: context ? render(context) : null }, void 0, false, {
-    fileName: "src/components/popover-suggestion.tsx",
-    lineNumber: 23,
-    columnNumber: 5
-  }, this);
-};
-export {
-  PopoverSuggestion2 as PopoverSuggestion
-};

package/dist/prosekit-react-components-popover.d.ts

@@ -1,6 +0,0 @@
-import * as _lit_labs_react from '@lit-labs/react';
-import { Popover as Popover$1 } from '@prosekit/lit/elements/popover';
-
-declare const Popover: _lit_labs_react.ReactWebComponent<Popover$1, {}>;
-
-export { Popover };

package/dist/prosekit-react-components-popover.js

@@ -1,13 +0,0 @@
-// src/components/popover.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { Popover as PopoverElement } from "@prosekit/lit/elements/popover";
-import React from "react";
-var Popover = createComponent({
-  tagName: "prosekit-popover",
-  elementClass: PopoverElement,
-  react: React,
-  displayName: "Popover"
-});
-export {
-  Popover
-};

package/src/index.ts

@@ -1,8 +0,0 @@
-/**
- * @module @prosekit/react
- */
-
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export { useEditor } from './hooks/use-editor'
-export { useExtension } from './hooks/use-extension'
-export { useKeymap } from './hooks/use-keymap'