@prosekit/react 0.0.15 → 0.0.17

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

@@ -1,26 +1,43 @@
 /// <reference types="react" />
 
-import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/components/autocomplete-empty';
-import { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/components/autocomplete-item';
-import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/components/autocomplete-list';
-import { AutocompletePopoverProps as AutocompletePopoverProps_2 } from '@prosekit/lit/components/autocomplete-popover';
-import { CodeBlockPopoverProps as CodeBlockPopoverProps_2 } from '@prosekit/lit/components/code-block-popover';
-import { ComboBoxInputProps as ComboBoxInputProps_2 } from '@prosekit/lit/components/combo-box-input';
-import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/components/combo-box-item';
-import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/components/combo-box-list';
-import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/components/combo-box';
+import { AutocompleteEmpty as AutocompleteEmpty_2 } from '@prosekit/lit/autocomplete-empty';
+import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/autocomplete-empty';
+import { AutocompleteItem as AutocompleteItem_2 } from '@prosekit/lit/autocomplete-item';
+import { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/autocomplete-item';
+import { AutocompleteList as AutocompleteList_2 } from '@prosekit/lit/autocomplete-list';
+import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/autocomplete-list';
+import { AutocompletePopover as AutocompletePopover_2 } from '@prosekit/lit/autocomplete-popover';
+import { AutocompletePopoverProps as AutocompletePopoverProps_2 } from '@prosekit/lit/autocomplete-popover';
+import { CodeBlockPopover as CodeBlockPopover_2 } from '@prosekit/lit/code-block-popover';
+import { CodeBlockPopoverProps as CodeBlockPopoverProps_2 } from '@prosekit/lit/code-block-popover';
+import { ComboBox as ComboBox_2 } from '@prosekit/lit/combo-box';
+import { ComboBoxInput as ComboBoxInput_2 } from '@prosekit/lit/combo-box-input';
+import { ComboBoxInputProps as ComboBoxInputProps_2 } from '@prosekit/lit/combo-box-input';
+import { ComboBoxItem as ComboBoxItem_2 } from '@prosekit/lit/combo-box-item';
+import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/combo-box-item';
+import { ComboBoxList as ComboBoxList_2 } from '@prosekit/lit/combo-box-list';
+import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-box-list';
+import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
+import { CommandArgs } from '@prosekit/core';
 import { ComponentType } from 'react';
 import { Context } from 'react';
 import { Editor } from '@prosekit/core';
 import { Extension } from '@prosekit/core';
+import { ExtensionTyping } from '@prosekit/core';
+import type { ForwardRefExoticComponent } from 'react';
 import { Keymap } from '@prosekit/core';
+import type { NodeViewContext } from '@prosemirror-adapter/react';
 import { Options } from 'tsup';
-import { PopoverOptions } from '@prosekit/lit/components/autocomplete-popover';
+import { PopoverOptions } from '@prosekit/lit/autocomplete-popover';
+import type { PropsWithoutRef } from 'react';
 import { default as React_2 } from 'react';
+import type { RefAttributes } from 'react';
 import type { SimplifyUnion } from '@prosekit/core';
+import { useNodeViewContext } from '@prosemirror-adapter/react';
+import { useNodeViewFactory } from '@prosemirror-adapter/react';
 import { UserProjectConfigExport } from 'vitest/dist/config.js';
 
-declare const AutocompleteEmpty: ComponentType<AutocompleteEmptyProps>;
+declare const AutocompleteEmpty: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteEmptyProps> & RefAttributes<AutocompleteEmpty_2>>;
 export { AutocompleteEmpty }
 export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
 
@@ -31,7 +48,7 @@ declare type AutocompleteEmptyProps = SimplifyUnion<{
 export { AutocompleteEmptyProps }
 export { AutocompleteEmptyProps as AutocompleteEmptyProps_alias_1 }
 
-declare const AutocompleteItem: ComponentType<AutocompleteItemProps>;
+declare const AutocompleteItem: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteItemProps> & RefAttributes<AutocompleteItem_2>>;
 export { AutocompleteItem }
 export { AutocompleteItem as AutocompleteItem_alias_1 }
 
@@ -42,7 +59,7 @@ declare type AutocompleteItemProps = SimplifyUnion<{
 export { AutocompleteItemProps }
 export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
 
-declare const AutocompleteList: ComponentType<AutocompleteListProps>;
+declare const AutocompleteList: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteListProps> & RefAttributes<AutocompleteList_2>>;
 export { AutocompleteList }
 export { AutocompleteList as AutocompleteList_alias_1 }
 
@@ -53,7 +70,7 @@ declare type AutocompleteListProps = SimplifyUnion<{
 export { AutocompleteListProps }
 export { AutocompleteListProps as AutocompleteListProps_alias_1 }
 
-declare const AutocompletePopover: ComponentType<AutocompletePopoverProps>;
+declare const AutocompletePopover: ForwardRefExoticComponent<PropsWithoutRef<AutocompletePopoverProps> & RefAttributes<AutocompletePopover_2>>;
 export { AutocompletePopover }
 export { AutocompletePopover as AutocompletePopover_alias_1 }
 
@@ -64,30 +81,30 @@ declare type AutocompletePopoverProps = SimplifyUnion<{
 export { AutocompletePopoverProps }
 export { AutocompletePopoverProps as AutocompletePopoverProps_alias_1 }
 
-export declare const CodeBlockPopover: ComponentType<CodeBlockPopoverProps>;
+export declare const CodeBlockPopover: ForwardRefExoticComponent<PropsWithoutRef<CodeBlockPopoverProps> & RefAttributes<CodeBlockPopover_2>>;
 
 export declare type CodeBlockPopoverProps = SimplifyUnion<{
     className?: string;
     children?: React_2.ReactNode;
 } & CodeBlockPopoverProps_2>;
 
-export declare const ComboBox: ComponentType<ComboBoxProps>;
+export declare const ComboBox: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxProps> & RefAttributes<ComboBox_2>>;
 
-export declare const ComboBoxInput: ComponentType<ComboBoxInputProps>;
+export declare const ComboBoxInput: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxInputProps> & RefAttributes<ComboBoxInput_2>>;
 
 export declare type ComboBoxInputProps = SimplifyUnion<{
     className?: string;
     children?: React_2.ReactNode;
 } & ComboBoxInputProps_2>;
 
-export declare const ComboBoxItem: ComponentType<ComboBoxItemProps>;
+export declare const ComboBoxItem: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxItemProps> & RefAttributes<ComboBoxItem_2>>;
 
 export declare type ComboBoxItemProps = SimplifyUnion<{
     className?: string;
     children?: React_2.ReactNode;
 } & ComboBoxItemProps_2>;
 
-export declare const ComboBoxList: ComponentType<ComboBoxListProps>;
+export declare const ComboBoxList: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxListProps> & RefAttributes<ComboBoxList_2>>;
 
 export declare type ComboBoxListProps = SimplifyUnion<{
     className?: string;
@@ -103,6 +120,14 @@ export declare const default_alias: Options | Options[] | ((overrideOptions: Opt
 
 export declare const default_alias_1: UserProjectConfigExport;
 
+declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
+export { defineReactNodeView }
+export { defineReactNodeView as defineReactNodeView_alias_1 }
+
+export declare function defineReactNodeViewRenderer({ nodeViewFactory, }: {
+    nodeViewFactory: ReturnType<typeof useNodeViewFactory>;
+}): Extension<ExtensionTyping<string, string, CommandArgs>>;
+
 export declare interface EditorContext {
     editor: Editor;
 }
@@ -122,6 +147,19 @@ declare interface ProseKitProps {
 export { ProseKitProps }
 export { ProseKitProps as ProseKitProps_alias_1 }
 
+declare type ReactNodeViewComponentProps = NodeViewContext;
+export { ReactNodeViewComponentProps }
+export { ReactNodeViewComponentProps as ReactNodeViewComponentProps_alias_1 }
+
+declare interface ReactNodeViewOptions {
+    name: string;
+    component: React.ComponentType<ReactNodeViewComponentProps>;
+    dom?: string | (() => HTMLElement);
+    contentDOM?: string | (() => HTMLElement);
+}
+export { ReactNodeViewOptions }
+export { ReactNodeViewOptions as ReactNodeViewOptions_alias_1 }
+
 declare function useEditor<E extends Extension = any>(options?: UseEditorOptions): Editor<E>;
 export { useEditor }
 export { useEditor as useEditor_alias_1 }
@@ -146,4 +184,6 @@ declare function useKeymap({ keymap }: {
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
+export { useNodeViewContext }
+
 export { }

package/dist/prosekit-react-autocomplete-empty.js

@@ -0,0 +1,17 @@
+// src/components/autocomplete-empty.gen.ts
+import { createComponent } from "@lit/react";
+import { AutocompleteEmpty as AutocompleteEmptyElement } from "@prosekit/lit/autocomplete-empty";
+import React from "react";
+var AutocompleteEmptyInner = createComponent({
+  tagName: "prosekit-autocomplete-empty",
+  elementClass: AutocompleteEmptyElement,
+  react: React,
+  displayName: "AutocompleteEmptyInner"
+});
+var AutocompleteEmpty = React.forwardRef((props, ref) => {
+  return React.createElement(AutocompleteEmptyInner, { ...props, ref });
+});
+AutocompleteEmpty.displayName = "AutocompleteEmpty";
+export {
+  AutocompleteEmpty
+};

package/dist/prosekit-react-autocomplete-item.js

@@ -0,0 +1,17 @@
+// src/components/autocomplete-item.gen.ts
+import { createComponent } from "@lit/react";
+import { AutocompleteItem as AutocompleteItemElement } from "@prosekit/lit/autocomplete-item";
+import React from "react";
+var AutocompleteItemInner = createComponent({
+  tagName: "prosekit-autocomplete-item",
+  elementClass: AutocompleteItemElement,
+  react: React,
+  displayName: "AutocompleteItemInner"
+});
+var AutocompleteItem = React.forwardRef((props, ref) => {
+  return React.createElement(AutocompleteItemInner, { ...props, ref });
+});
+AutocompleteItem.displayName = "AutocompleteItem";
+export {
+  AutocompleteItem
+};

package/dist/prosekit-react-autocomplete-list.js

@@ -0,0 +1,17 @@
+// src/components/autocomplete-list.gen.ts
+import { createComponent } from "@lit/react";
+import { AutocompleteList as AutocompleteListElement } from "@prosekit/lit/autocomplete-list";
+import React from "react";
+var AutocompleteListInner = createComponent({
+  tagName: "prosekit-autocomplete-list",
+  elementClass: AutocompleteListElement,
+  react: React,
+  displayName: "AutocompleteListInner"
+});
+var AutocompleteList = React.forwardRef((props, ref) => {
+  return React.createElement(AutocompleteListInner, { ...props, ref });
+});
+AutocompleteList.displayName = "AutocompleteList";
+export {
+  AutocompleteList
+};

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

@@ -0,0 +1,17 @@
+// src/components/autocomplete-popover.gen.ts
+import { createComponent } from "@lit/react";
+import { AutocompletePopover as AutocompletePopoverElement } from "@prosekit/lit/autocomplete-popover";
+import React from "react";
+var AutocompletePopoverInner = createComponent({
+  tagName: "prosekit-autocomplete-popover",
+  elementClass: AutocompletePopoverElement,
+  react: React,
+  displayName: "AutocompletePopoverInner"
+});
+var AutocompletePopover = React.forwardRef((props, ref) => {
+  return React.createElement(AutocompletePopoverInner, { ...props, ref });
+});
+AutocompletePopover.displayName = "AutocompletePopover";
+export {
+  AutocompletePopover
+};

package/dist/prosekit-react-code-block-popover.js

@@ -0,0 +1,17 @@
+// src/components/code-block-popover.gen.ts
+import { createComponent } from "@lit/react";
+import { CodeBlockPopover as CodeBlockPopoverElement } from "@prosekit/lit/code-block-popover";
+import React from "react";
+var CodeBlockPopoverInner = createComponent({
+  tagName: "prosekit-code-block-popover",
+  elementClass: CodeBlockPopoverElement,
+  react: React,
+  displayName: "CodeBlockPopoverInner"
+});
+var CodeBlockPopover = React.forwardRef((props, ref) => {
+  return React.createElement(CodeBlockPopoverInner, { ...props, ref });
+});
+CodeBlockPopover.displayName = "CodeBlockPopover";
+export {
+  CodeBlockPopover
+};

package/dist/prosekit-react-combo-box-input.js

@@ -0,0 +1,17 @@
+// src/components/combo-box-input.gen.ts
+import { createComponent } from "@lit/react";
+import { ComboBoxInput as ComboBoxInputElement } from "@prosekit/lit/combo-box-input";
+import React from "react";
+var ComboBoxInputInner = createComponent({
+  tagName: "prosekit-combo-box-input",
+  elementClass: ComboBoxInputElement,
+  react: React,
+  displayName: "ComboBoxInputInner"
+});
+var ComboBoxInput = React.forwardRef((props, ref) => {
+  return React.createElement(ComboBoxInputInner, { ...props, ref });
+});
+ComboBoxInput.displayName = "ComboBoxInput";
+export {
+  ComboBoxInput
+};

package/dist/prosekit-react-combo-box-item.js

@@ -0,0 +1,17 @@
+// src/components/combo-box-item.gen.ts
+import { createComponent } from "@lit/react";
+import { ComboBoxItem as ComboBoxItemElement } from "@prosekit/lit/combo-box-item";
+import React from "react";
+var ComboBoxItemInner = createComponent({
+  tagName: "prosekit-combo-box-item",
+  elementClass: ComboBoxItemElement,
+  react: React,
+  displayName: "ComboBoxItemInner"
+});
+var ComboBoxItem = React.forwardRef((props, ref) => {
+  return React.createElement(ComboBoxItemInner, { ...props, ref });
+});
+ComboBoxItem.displayName = "ComboBoxItem";
+export {
+  ComboBoxItem
+};

package/dist/prosekit-react-combo-box-list.js

@@ -0,0 +1,17 @@
+// src/components/combo-box-list.gen.ts
+import { createComponent } from "@lit/react";
+import { ComboBoxList as ComboBoxListElement } from "@prosekit/lit/combo-box-list";
+import React from "react";
+var ComboBoxListInner = createComponent({
+  tagName: "prosekit-combo-box-list",
+  elementClass: ComboBoxListElement,
+  react: React,
+  displayName: "ComboBoxListInner"
+});
+var ComboBoxList = React.forwardRef((props, ref) => {
+  return React.createElement(ComboBoxListInner, { ...props, ref });
+});
+ComboBoxList.displayName = "ComboBoxList";
+export {
+  ComboBoxList
+};

package/dist/prosekit-react-combo-box.js

@@ -0,0 +1,17 @@
+// src/components/combo-box.gen.ts
+import { createComponent } from "@lit/react";
+import { ComboBox as ComboBoxElement } from "@prosekit/lit/combo-box";
+import React from "react";
+var ComboBoxInner = createComponent({
+  tagName: "prosekit-combo-box",
+  elementClass: ComboBoxElement,
+  react: React,
+  displayName: "ComboBoxInner"
+});
+var ComboBox = React.forwardRef((props, ref) => {
+  return React.createElement(ComboBoxInner, { ...props, ref });
+});
+ComboBox.displayName = "ComboBox";
+export {
+  ComboBox
+};

package/dist/prosekit-react.d.ts

@@ -1,5 +1,9 @@
+export { useNodeViewContext } from './_tsup-dts-rollup';
 export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
+export { defineReactNodeView } from './_tsup-dts-rollup';
+export { ReactNodeViewComponentProps } from './_tsup-dts-rollup';
+export { ReactNodeViewOptions } from './_tsup-dts-rollup';
 export { useEditor } from './_tsup-dts-rollup';
 export { UseEditorOptions } from './_tsup-dts-rollup';
 export { useExtension } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -1,22 +1,63 @@
+// src/index.ts
+import { useNodeViewContext as useNodeViewContext2 } from "@prosemirror-adapter/react";
+
 // src/components/prosekit.ts
 import "@prosekit/core";
-import { createElement } from "react";
+import {
+  ProsemirrorAdapterProvider,
+  useNodeViewFactory
+} from "@prosemirror-adapter/react";
+import { createElement as createElement2, useMemo } from "react";
 
 // src/contexts/editor-context.ts
 import { createContext } from "react";
 var editorContext = createContext(null);
 
-// src/components/prosekit.ts
-var ProseKit = (props) => {
-  const { editor, children } = props;
-  return createElement(EditorContextProvider, { value: { editor } }, children);
-};
-var EditorContextProvider = editorContext.Provider;
+// src/extensions/react-node-view.ts
+import { defineNodeViewEffect } from "@prosekit/core";
+import {
+  useNodeViewContext
+} from "@prosemirror-adapter/react";
+import { createElement } from "react";
+function defineReactNodeView(options) {
+  return defineNodeViewEffect({
+    group: "react",
+    name: options.name,
+    args: options
+  });
+}
+function defineReactNodeViewRenderer({
+  nodeViewFactory
+}) {
+  return defineNodeViewEffect({
+    group: "react",
+    factory: (args) => {
+      const nodeViewOptions = args;
+      return nodeViewFactory({
+        component: function ReactNodeViewWrapper() {
+          const context = useNodeViewContext();
+          return createElement(nodeViewOptions.component, context);
+        },
+        // Optional: add some options
+        as: () => {
+          const dom = document.createElement("div");
+          dom.style.display = "contents";
+          return dom;
+        },
+        contentAs: "code"
+      });
+    }
+  });
+}
+
+// src/hooks/use-extension.ts
+import "@prosekit/core";
+import { useEffect as useEffect2 } from "react";
 
 // src/hooks/use-editor.ts
 import {
   ProseKitError,
-  addEventHandler
+  defineEventHandler
 } from "@prosekit/core";
 import { useContext, useEffect, useReducer } from "react";
 function useEditor(options) {
@@ -32,7 +73,7 @@ function useEditor(options) {
   const forceUpdate = useForceUpdate();
   useEffect(() => {
     if (update) {
-      return editor.use(addEventHandler({ update: forceUpdate }));
+      return editor.use(defineEventHandler({ update: forceUpdate }));
     }
   }, [editor, update, forceUpdate]);
   return editor;
@@ -43,23 +84,50 @@ function useForceUpdate() {
 }
 
 // src/hooks/use-extension.ts
-import "@prosekit/core";
-import { useEffect as useEffect2 } from "react";
 function useExtension({ extension }) {
   const editor = useEditor();
-  useEffect2(() => editor.use(extension), [editor, extension]);
+  useEffect2(() => {
+    return editor.use(extension);
+  }, [editor, extension]);
 }
 
+// src/components/prosekit.ts
+var ProseKit = (props) => {
+  const { editor, children } = props;
+  return createElement2(
+    ProsemirrorAdapterProvider,
+    null,
+    createElement2(
+      EditorContextProvider,
+      { value: { editor } },
+      children,
+      createElement2(RendererRegister)
+    )
+  );
+};
+function RendererRegister() {
+  const nodeViewFactory = useNodeViewFactory();
+  const extension = useMemo(
+    () => defineReactNodeViewRenderer({ nodeViewFactory }),
+    [nodeViewFactory]
+  );
+  useExtension({ extension });
+  return null;
+}
+var EditorContextProvider = editorContext.Provider;
+
 // src/hooks/use-keymap.ts
-import { addKeymap } from "@prosekit/core";
-import { useMemo } from "react";
+import { defineKeymap } from "@prosekit/core";
+import { useMemo as useMemo2 } from "react";
 function useKeymap({ keymap }) {
-  const extension = useMemo(() => addKeymap(keymap), [keymap]);
+  const extension = useMemo2(() => defineKeymap(keymap), [keymap]);
   useExtension({ extension });
 }
 export {
   ProseKit,
+  defineReactNodeView,
   useEditor,
   useExtension,
-  useKeymap
+  useKeymap,
+  useNodeViewContext2 as useNodeViewContext
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,59 +30,60 @@
       "import": "./dist/prosekit-react.js",
       "default": "./dist/prosekit-react.js"
     },
-    "./components/autocomplete-empty": {
-      "types": "./dist/prosekit-react-components-autocomplete-empty.d.ts",
-      "import": "./dist/prosekit-react-components-autocomplete-empty.js",
-      "default": "./dist/prosekit-react-components-autocomplete-empty.js"
+    "./autocomplete-empty": {
+      "types": "./dist/prosekit-react-autocomplete-empty.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-empty.js",
+      "default": "./dist/prosekit-react-autocomplete-empty.js"
     },
-    "./components/autocomplete-item": {
-      "types": "./dist/prosekit-react-components-autocomplete-item.d.ts",
-      "import": "./dist/prosekit-react-components-autocomplete-item.js",
-      "default": "./dist/prosekit-react-components-autocomplete-item.js"
+    "./autocomplete-item": {
+      "types": "./dist/prosekit-react-autocomplete-item.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-item.js",
+      "default": "./dist/prosekit-react-autocomplete-item.js"
     },
-    "./components/autocomplete-list": {
-      "types": "./dist/prosekit-react-components-autocomplete-list.d.ts",
-      "import": "./dist/prosekit-react-components-autocomplete-list.js",
-      "default": "./dist/prosekit-react-components-autocomplete-list.js"
+    "./autocomplete-list": {
+      "types": "./dist/prosekit-react-autocomplete-list.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-list.js",
+      "default": "./dist/prosekit-react-autocomplete-list.js"
     },
-    "./components/autocomplete-popover": {
-      "types": "./dist/prosekit-react-components-autocomplete-popover.d.ts",
-      "import": "./dist/prosekit-react-components-autocomplete-popover.js",
-      "default": "./dist/prosekit-react-components-autocomplete-popover.js"
+    "./autocomplete-popover": {
+      "types": "./dist/prosekit-react-autocomplete-popover.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-popover.js",
+      "default": "./dist/prosekit-react-autocomplete-popover.js"
     },
-    "./components/code-block-popover": {
-      "types": "./dist/prosekit-react-components-code-block-popover.d.ts",
-      "import": "./dist/prosekit-react-components-code-block-popover.js",
-      "default": "./dist/prosekit-react-components-code-block-popover.js"
+    "./code-block-popover": {
+      "types": "./dist/prosekit-react-code-block-popover.d.ts",
+      "import": "./dist/prosekit-react-code-block-popover.js",
+      "default": "./dist/prosekit-react-code-block-popover.js"
     },
-    "./components/combo-box": {
-      "types": "./dist/prosekit-react-components-combo-box.d.ts",
-      "import": "./dist/prosekit-react-components-combo-box.js",
-      "default": "./dist/prosekit-react-components-combo-box.js"
+    "./combo-box": {
+      "types": "./dist/prosekit-react-combo-box.d.ts",
+      "import": "./dist/prosekit-react-combo-box.js",
+      "default": "./dist/prosekit-react-combo-box.js"
     },
-    "./components/combo-box-input": {
-      "types": "./dist/prosekit-react-components-combo-box-input.d.ts",
-      "import": "./dist/prosekit-react-components-combo-box-input.js",
-      "default": "./dist/prosekit-react-components-combo-box-input.js"
+    "./combo-box-input": {
+      "types": "./dist/prosekit-react-combo-box-input.d.ts",
+      "import": "./dist/prosekit-react-combo-box-input.js",
+      "default": "./dist/prosekit-react-combo-box-input.js"
     },
-    "./components/combo-box-item": {
-      "types": "./dist/prosekit-react-components-combo-box-item.d.ts",
-      "import": "./dist/prosekit-react-components-combo-box-item.js",
-      "default": "./dist/prosekit-react-components-combo-box-item.js"
+    "./combo-box-item": {
+      "types": "./dist/prosekit-react-combo-box-item.d.ts",
+      "import": "./dist/prosekit-react-combo-box-item.js",
+      "default": "./dist/prosekit-react-combo-box-item.js"
     },
-    "./components/combo-box-list": {
-      "types": "./dist/prosekit-react-components-combo-box-list.d.ts",
-      "import": "./dist/prosekit-react-components-combo-box-list.js",
-      "default": "./dist/prosekit-react-components-combo-box-list.js"
+    "./combo-box-list": {
+      "types": "./dist/prosekit-react-combo-box-list.d.ts",
+      "import": "./dist/prosekit-react-combo-box-list.js",
+      "default": "./dist/prosekit-react-combo-box-list.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@lit-labs/react": "^2.1.0",
-    "@prosekit/core": "^0.0.11",
-    "@prosekit/lit": "^0.0.15"
+    "@lit/react": "^1.0.0",
+    "@prosekit/core": "^0.0.13",
+    "@prosekit/lit": "^0.0.17",
+    "@prosemirror-adapter/react": "^0.2.6"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -98,8 +99,8 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.11",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^7.2.0",
@@ -116,32 +117,32 @@
       ".": [
         "./dist/prosekit-react.d.ts"
       ],
-      "components/autocomplete-empty": [
-        "./dist/prosekit-react-components-autocomplete-empty.d.ts"
+      "autocomplete-empty": [
+        "./dist/prosekit-react-autocomplete-empty.d.ts"
       ],
-      "components/autocomplete-item": [
-        "./dist/prosekit-react-components-autocomplete-item.d.ts"
+      "autocomplete-item": [
+        "./dist/prosekit-react-autocomplete-item.d.ts"
       ],
-      "components/autocomplete-list": [
-        "./dist/prosekit-react-components-autocomplete-list.d.ts"
+      "autocomplete-list": [
+        "./dist/prosekit-react-autocomplete-list.d.ts"
       ],
-      "components/autocomplete-popover": [
-        "./dist/prosekit-react-components-autocomplete-popover.d.ts"
+      "autocomplete-popover": [
+        "./dist/prosekit-react-autocomplete-popover.d.ts"
       ],
-      "components/code-block-popover": [
-        "./dist/prosekit-react-components-code-block-popover.d.ts"
+      "code-block-popover": [
+        "./dist/prosekit-react-code-block-popover.d.ts"
       ],
-      "components/combo-box": [
-        "./dist/prosekit-react-components-combo-box.d.ts"
+      "combo-box": [
+        "./dist/prosekit-react-combo-box.d.ts"
       ],
-      "components/combo-box-input": [
-        "./dist/prosekit-react-components-combo-box-input.d.ts"
+      "combo-box-input": [
+        "./dist/prosekit-react-combo-box-input.d.ts"
       ],
-      "components/combo-box-item": [
-        "./dist/prosekit-react-components-combo-box-item.d.ts"
+      "combo-box-item": [
+        "./dist/prosekit-react-combo-box-item.d.ts"
       ],
-      "components/combo-box-list": [
-        "./dist/prosekit-react-components-combo-box-list.d.ts"
+      "combo-box-list": [
+        "./dist/prosekit-react-combo-box-list.d.ts"
       ]
     }
   }

package/src/index.ts

@@ -1,4 +1,10 @@
+export { useNodeViewContext } from '@prosemirror-adapter/react'
 export { ProseKit, type ProseKitProps } from './components/prosekit'
+export {
+  defineReactNodeView,
+  type ReactNodeViewComponentProps,
+  type ReactNodeViewOptions,
+} from './extensions/react-node-view'
 export { useEditor, type UseEditorOptions } from './hooks/use-editor'
 export { useExtension } from './hooks/use-extension'
 export { useKeymap } from './hooks/use-keymap'

package/dist/prosekit-react-components-autocomplete-empty.js

@@ -1,20 +0,0 @@
-// src/components/autocomplete-empty.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { AutocompleteEmpty as AutocompleteEmptyElement } from "@prosekit/lit/components/autocomplete-empty";
-import React from "react";
-var AutocompleteEmptyComponent = createComponent({
-  tagName: "prosekit-autocomplete-empty",
-  elementClass: AutocompleteEmptyElement,
-  react: React,
-  displayName: "AutocompleteEmptyComponent"
-});
-var AutocompleteEmpty = (props) => {
-  return React.createElement(
-    AutocompleteEmptyComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  AutocompleteEmpty
-};

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

@@ -1,20 +0,0 @@
-// src/components/autocomplete-item.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { AutocompleteItem as AutocompleteItemElement } from "@prosekit/lit/components/autocomplete-item";
-import React from "react";
-var AutocompleteItemComponent = createComponent({
-  tagName: "prosekit-autocomplete-item",
-  elementClass: AutocompleteItemElement,
-  react: React,
-  displayName: "AutocompleteItemComponent"
-});
-var AutocompleteItem = (props) => {
-  return React.createElement(
-    AutocompleteItemComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  AutocompleteItem
-};

package/dist/prosekit-react-components-autocomplete-list.js

@@ -1,20 +0,0 @@
-// src/components/autocomplete-list.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { AutocompleteList as AutocompleteListElement } from "@prosekit/lit/components/autocomplete-list";
-import React from "react";
-var AutocompleteListComponent = createComponent({
-  tagName: "prosekit-autocomplete-list",
-  elementClass: AutocompleteListElement,
-  react: React,
-  displayName: "AutocompleteListComponent"
-});
-var AutocompleteList = (props) => {
-  return React.createElement(
-    AutocompleteListComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  AutocompleteList
-};

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

@@ -1,20 +0,0 @@
-// src/components/autocomplete-popover.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { AutocompletePopover as AutocompletePopoverElement } from "@prosekit/lit/components/autocomplete-popover";
-import React from "react";
-var AutocompletePopoverComponent = createComponent({
-  tagName: "prosekit-autocomplete-popover",
-  elementClass: AutocompletePopoverElement,
-  react: React,
-  displayName: "AutocompletePopoverComponent"
-});
-var AutocompletePopover = (props) => {
-  return React.createElement(
-    AutocompletePopoverComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  AutocompletePopover
-};

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

@@ -1,20 +0,0 @@
-// src/components/code-block-popover.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { CodeBlockPopover as CodeBlockPopoverElement } from "@prosekit/lit/components/code-block-popover";
-import React from "react";
-var CodeBlockPopoverComponent = createComponent({
-  tagName: "prosekit-code-block-popover",
-  elementClass: CodeBlockPopoverElement,
-  react: React,
-  displayName: "CodeBlockPopoverComponent"
-});
-var CodeBlockPopover = (props) => {
-  return React.createElement(
-    CodeBlockPopoverComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  CodeBlockPopover
-};

package/dist/prosekit-react-components-combo-box-input.js

@@ -1,20 +0,0 @@
-// src/components/combo-box-input.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { ComboBoxInput as ComboBoxInputElement } from "@prosekit/lit/components/combo-box-input";
-import React from "react";
-var ComboBoxInputComponent = createComponent({
-  tagName: "prosekit-combo-box-input",
-  elementClass: ComboBoxInputElement,
-  react: React,
-  displayName: "ComboBoxInputComponent"
-});
-var ComboBoxInput = (props) => {
-  return React.createElement(
-    ComboBoxInputComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  ComboBoxInput
-};

package/dist/prosekit-react-components-combo-box-item.js

@@ -1,20 +0,0 @@
-// src/components/combo-box-item.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { ComboBoxItem as ComboBoxItemElement } from "@prosekit/lit/components/combo-box-item";
-import React from "react";
-var ComboBoxItemComponent = createComponent({
-  tagName: "prosekit-combo-box-item",
-  elementClass: ComboBoxItemElement,
-  react: React,
-  displayName: "ComboBoxItemComponent"
-});
-var ComboBoxItem = (props) => {
-  return React.createElement(
-    ComboBoxItemComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  ComboBoxItem
-};

package/dist/prosekit-react-components-combo-box-list.js

@@ -1,20 +0,0 @@
-// src/components/combo-box-list.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { ComboBoxList as ComboBoxListElement } from "@prosekit/lit/components/combo-box-list";
-import React from "react";
-var ComboBoxListComponent = createComponent({
-  tagName: "prosekit-combo-box-list",
-  elementClass: ComboBoxListElement,
-  react: React,
-  displayName: "ComboBoxListComponent"
-});
-var ComboBoxList = (props) => {
-  return React.createElement(
-    ComboBoxListComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  ComboBoxList
-};

package/dist/prosekit-react-components-combo-box.js

@@ -1,20 +0,0 @@
-// src/components/combo-box.gen.ts
-import { createComponent } from "@lit-labs/react";
-import { ComboBox as ComboBoxElement } from "@prosekit/lit/components/combo-box";
-import React from "react";
-var ComboBoxComponent = createComponent({
-  tagName: "prosekit-combo-box",
-  elementClass: ComboBoxElement,
-  react: React,
-  displayName: "ComboBoxComponent"
-});
-var ComboBox = (props) => {
-  return React.createElement(
-    ComboBoxComponent,
-    // The type in @lit-labs/react is not compatible to React.ReactNode
-    props
-  );
-};
-export {
-  ComboBox
-};