@prosekit/react 0.0.16 → 0.0.17

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

@@ -18,18 +18,23 @@ import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/combo-bo
 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/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: ForwardRefExoticComponent<PropsWithoutRef<AutocompleteEmptyProps> & RefAttributes<AutocompleteEmpty_2>>;
@@ -115,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;
 }
@@ -134,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 }
@@ -158,4 +184,6 @@ declare function useKeymap({ keymap }: {
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
+export { useNodeViewContext }
+
 export { }

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,17 +1,58 @@
+// 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 {
@@ -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 { defineKeymap } from "@prosekit/core";
-import { useMemo } from "react";
+import { useMemo as useMemo2 } from "react";
 function useKeymap({ keymap }) {
-  const extension = useMemo(() => defineKeymap(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.16",
+  "version": "0.0.17",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -81,8 +81,9 @@
   ],
   "dependencies": {
     "@lit/react": "^1.0.0",
-    "@prosekit/core": "^0.0.12",
-    "@prosekit/lit": "^0.0.16"
+    "@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.28",
-    "@types/react-dom": "^18.2.13",
+    "@types/react": "^18.2.31",
+    "@types/react-dom": "^18.2.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^7.2.0",

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'