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

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

@@ -0,0 +1,192 @@
+/// <reference types="react" />
+
+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 { 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 { InlinePopover as InlinePopover_2 } from '@prosekit/lit/inline-popover';
+import { InlinePopoverProps as InlinePopoverProps_2 } from '@prosekit/lit/inline-popover';
+import { Keymap } from '@prosekit/core';
+import type { NodeViewContext } from '@prosemirror-adapter/react';
+import { Options } from 'tsup';
+import { Popover as Popover_2 } from '@prosekit/lit/popover';
+import { PopoverOptions } from '@prosekit/lit/autocomplete-popover';
+import { PopoverProps as PopoverProps_2 } from '@prosekit/lit/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: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteEmptyProps> & RefAttributes<AutocompleteEmpty_2>>;
+export { AutocompleteEmpty }
+export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
+
+declare type AutocompleteEmptyProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & AutocompleteEmptyProps_2>;
+export { AutocompleteEmptyProps }
+export { AutocompleteEmptyProps as AutocompleteEmptyProps_alias_1 }
+
+declare const AutocompleteItem: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteItemProps> & RefAttributes<AutocompleteItem_2>>;
+export { AutocompleteItem }
+export { AutocompleteItem as AutocompleteItem_alias_1 }
+
+declare type AutocompleteItemProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & AutocompleteItemProps_2>;
+export { AutocompleteItemProps }
+export { AutocompleteItemProps as AutocompleteItemProps_alias_1 }
+
+declare const AutocompleteList: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteListProps> & RefAttributes<AutocompleteList_2>>;
+export { AutocompleteList }
+export { AutocompleteList as AutocompleteList_alias_1 }
+
+declare type AutocompleteListProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & AutocompleteListProps_2>;
+export { AutocompleteListProps }
+export { AutocompleteListProps as AutocompleteListProps_alias_1 }
+
+declare const AutocompletePopover: ForwardRefExoticComponent<PropsWithoutRef<AutocompletePopoverProps> & RefAttributes<AutocompletePopover_2>>;
+export { AutocompletePopover }
+export { AutocompletePopover as AutocompletePopover_alias_1 }
+
+declare type AutocompletePopoverProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & AutocompletePopoverProps_2>;
+export { AutocompletePopoverProps }
+export { AutocompletePopoverProps as AutocompletePopoverProps_alias_1 }
+
+export declare const ComboBox: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxProps> & RefAttributes<ComboBox_2>>;
+
+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: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxItemProps> & RefAttributes<ComboBoxItem_2>>;
+
+export declare type ComboBoxItemProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & ComboBoxItemProps_2>;
+
+export declare const ComboBoxList: ForwardRefExoticComponent<PropsWithoutRef<ComboBoxListProps> & RefAttributes<ComboBoxList_2>>;
+
+export declare type ComboBoxListProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & ComboBoxListProps_2>;
+
+export declare type ComboBoxProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & ComboBoxProps_2>;
+
+export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
+
+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;
+}
+
+export declare const editorContext: Context<EditorContext | null>;
+
+export declare const InlinePopover: ForwardRefExoticComponent<PropsWithoutRef<InlinePopoverProps> & RefAttributes<InlinePopover_2>>;
+
+export declare type InlinePopoverProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & InlinePopoverProps_2>;
+
+export declare const Popover: ForwardRefExoticComponent<PropsWithoutRef<PopoverProps> & RefAttributes<Popover_2>>;
+
+export { PopoverOptions }
+
+export declare type PopoverProps = SimplifyUnion<{
+    className?: string;
+    children?: React_2.ReactNode;
+} & PopoverProps_2>;
+
+declare const ProseKit: ComponentType<ProseKitProps>;
+export { ProseKit }
+export { ProseKit as ProseKit_alias_1 }
+
+declare interface ProseKitProps {
+    editor: Editor;
+    children?: React_2.ReactNode;
+}
+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 }
+
+declare interface UseEditorOptions {
+    update?: boolean;
+}
+export { UseEditorOptions }
+export { UseEditorOptions as UseEditorOptions_alias_1 }
+
+declare function useExtension<T extends Extension = Extension>(extension: T): void;
+export { useExtension }
+export { useExtension as useExtension_alias_1 }
+
+declare function useKeymap(keymap: Keymap): void;
+export { useKeymap }
+export { useKeymap as useKeymap_alias_1 }
+
+export { useNodeViewContext }
+
+export { }

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

@@ -0,0 +1,2 @@
+export { AutocompleteEmpty_alias_1 as AutocompleteEmpty } from './_tsup-dts-rollup';
+export { AutocompleteEmptyProps_alias_1 as AutocompleteEmptyProps } from './_tsup-dts-rollup';

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.d.ts

@@ -0,0 +1,2 @@
+export { AutocompleteItem_alias_1 as AutocompleteItem } from './_tsup-dts-rollup';
+export { AutocompleteItemProps_alias_1 as AutocompleteItemProps } from './_tsup-dts-rollup';

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.d.ts

@@ -0,0 +1,2 @@
+export { AutocompleteList_alias_1 as AutocompleteList } from './_tsup-dts-rollup';
+export { AutocompleteListProps_alias_1 as AutocompleteListProps } from './_tsup-dts-rollup';

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.d.ts

@@ -0,0 +1,3 @@
+export { PopoverOptions } from './_tsup-dts-rollup';
+export { AutocompletePopover_alias_1 as AutocompletePopover } from './_tsup-dts-rollup';
+export { AutocompletePopoverProps_alias_1 as AutocompletePopoverProps } from './_tsup-dts-rollup';

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-combo-box-input.d.ts

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

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.d.ts

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

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.d.ts

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

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.d.ts

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

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-inline-popover.d.ts

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

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

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

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

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

package/dist/prosekit-react-popover.js

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

package/dist/prosekit-react.d.ts

@@ -1,21 +1,10 @@
-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 { 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';
+export { useKeymap } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -1,49 +1,133 @@
-// src/contexts/editor-context.tsx
+// src/index.ts
+import { useNodeViewContext as useNodeViewContext2 } from "@prosemirror-adapter/react";
+
+// src/components/prosekit.ts
+import "@prosekit/core";
+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.tsx
-import { jsxDEV } from "react/jsx-dev-runtime";
-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);
-};
-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 } from "@prosekit/core";
-import { useContext } from "react";
-function useEditor() {
+import {
+  ProseKitError,
+  defineUpdateHandler
+} from "@prosekit/core";
+import { useContext, useEffect, useReducer } from "react";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
   const value = useContext(editorContext);
   if (!value) {
     throw new ProseKitError(
       "useEditor must be used within the ProseKit component"
     );
   }
-  return value.editor;
+  const editor = value.editor;
+  const forceUpdate = useForceUpdate();
+  useEffect(() => {
+    if (update) {
+      return editor.use(defineUpdateHandler(forceUpdate));
+    }
+  }, [editor, update, forceUpdate]);
+  return editor;
+}
+function useForceUpdate() {
+  const [, dispatch] = useReducer((x) => x + 1, 0);
+  return dispatch;
 }
 
 // src/hooks/use-extension.ts
-import { useEffect } from "react";
-function useExtension({ extension }) {
+function useExtension(extension) {
   const editor = useEditor();
-  useEffect(() => 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";
-function useKeymap({ keymap }) {
-  const extension = useMemo(() => addKeymap(keymap), [keymap]);
-  useExtension({ extension });
+import { defineKeymap } from "@prosekit/core";
+import { useMemo as useMemo2 } from "react";
+function useKeymap(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.0-next-20230709094459",
+  "version": "0.0.0-next-20231120040948",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,34 +30,65 @@
       "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-empty": {
+      "types": "./dist/prosekit-react-autocomplete-empty.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-empty.js",
+      "default": "./dist/prosekit-react-autocomplete-empty.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"
+    "./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/popover": {
-      "types": "./dist/prosekit-react-components-popover.d.ts",
-      "import": "./dist/prosekit-react-components-popover.js",
-      "default": "./dist/prosekit-react-components-popover.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/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"
+    "./autocomplete-popover": {
+      "types": "./dist/prosekit-react-autocomplete-popover.d.ts",
+      "import": "./dist/prosekit-react-autocomplete-popover.js",
+      "default": "./dist/prosekit-react-autocomplete-popover.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"
+    },
+    "./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"
+    },
+    "./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"
+    },
+    "./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"
+    },
+    "./inline-popover": {
+      "types": "./dist/prosekit-react-inline-popover.d.ts",
+      "import": "./dist/prosekit-react-inline-popover.js",
+      "default": "./dist/prosekit-react-inline-popover.js"
+    },
+    "./popover": {
+      "types": "./dist/prosekit-react-popover.d.ts",
+      "import": "./dist/prosekit-react-popover.js",
+      "default": "./dist/prosekit-react-popover.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.2",
+    "@prosekit/core": "0.0.0-next-20231120040948",
+    "@prosekit/lit": "0.0.0-next-20231120040948",
+    "@prosemirror-adapter/react": "^0.2.6"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -73,13 +104,13 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6",
-    "vitest": "^0.33.0"
+    "tsup": "^8.0.0",
+    "typescript": "^5.2.2",
+    "vitest": "^0.34.6"
   },
   "scripts": {
     "build:tsup": "tsup",
@@ -91,17 +122,35 @@
       ".": [
         "./dist/prosekit-react.d.ts"
       ],
-      "components/menu": [
-        "./dist/prosekit-react-components-menu.d.ts"
+      "autocomplete-empty": [
+        "./dist/prosekit-react-autocomplete-empty.d.ts"
+      ],
+      "autocomplete-item": [
+        "./dist/prosekit-react-autocomplete-item.d.ts"
+      ],
+      "autocomplete-list": [
+        "./dist/prosekit-react-autocomplete-list.d.ts"
+      ],
+      "autocomplete-popover": [
+        "./dist/prosekit-react-autocomplete-popover.d.ts"
+      ],
+      "combo-box": [
+        "./dist/prosekit-react-combo-box.d.ts"
+      ],
+      "combo-box-input": [
+        "./dist/prosekit-react-combo-box-input.d.ts"
+      ],
+      "combo-box-item": [
+        "./dist/prosekit-react-combo-box-item.d.ts"
       ],
-      "components/menu-item": [
-        "./dist/prosekit-react-components-menu-item.d.ts"
+      "combo-box-list": [
+        "./dist/prosekit-react-combo-box-list.d.ts"
       ],
-      "components/popover": [
-        "./dist/prosekit-react-components-popover.d.ts"
+      "inline-popover": [
+        "./dist/prosekit-react-inline-popover.d.ts"
       ],
-      "components/popover-suggestion": [
-        "./dist/prosekit-react-components-popover-suggestion.d.ts"
+      "popover": [
+        "./dist/prosekit-react-popover.d.ts"
       ]
     }
   }

package/src/index.ts

@@ -1,8 +1,10 @@
-/**
- * @module @prosekit/react
- */
-
+export { useNodeViewContext } from '@prosemirror-adapter/react'
 export { ProseKit, type ProseKitProps } from './components/prosekit'
-export { useEditor } from './hooks/use-editor'
+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-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
-};