@prosekit/react 0.3.10 → 0.3.12

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

@@ -13,10 +13,6 @@ import { BlockDragHandleProps } from '@prosekit/web/block-handle';
 import { BlockPopoverElement } from '@prosekit/web/block-handle';
 import { BlockPopoverProps } from '@prosekit/web/block-handle';
 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 { config as default_alias_1 } from '@prosekit/dev/config-vitest';
@@ -24,15 +20,12 @@ 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';
@@ -44,7 +37,6 @@ 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';
@@ -83,12 +75,6 @@ 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 { default_alias_1 }
@@ -102,11 +88,6 @@ declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
 export { defineReactNodeView }
 export { defineReactNodeView as defineReactNodeView_alias_1 }
 
-/**
- * @internal
- */
-export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<any, any, any>>;
-
 /**
  * @internal
  */
@@ -116,8 +97,6 @@ declare const InlinePopover: ForwardRefExoticComponent<Partial<InlinePopoverProp
 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 }
@@ -155,13 +134,6 @@ declare interface ProseKitProps {
 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
  */
@@ -195,7 +167,7 @@ declare interface ReactNodeViewProps {
     view: EditorView;
     getPos: () => number | undefined;
     setAttrs: (attrs: Attrs) => void;
-    node: Node_2;
+    node: ProseMirrorNode;
     selected: boolean;
     decorations: readonly Decoration[];
     innerDecorations: DecorationSource;
@@ -203,31 +175,11 @@ declare interface ReactNodeViewProps {
 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;
-}
-
+/**
+ * @internal
+ */
 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 }
@@ -314,17 +266,11 @@ 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.
  *

package/dist/prosekit-react.d.ts

@@ -1,13 +1,13 @@
 export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
 export { defineReactNodeView } from './_tsup-dts-rollup';
+export { ReactNodeViewComponent } from './_tsup-dts-rollup';
 export { ReactNodeViewOptions } from './_tsup-dts-rollup';
+export { ReactNodeViewProps } from './_tsup-dts-rollup';
+export { useDocChange } 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

@@ -5,29 +5,19 @@ import {
 
 // 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";
+import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/react";
+import { createElement as createElement2 } from "react";
 
 // src/extensions/react-node-view.ts
 import {
+  defineNodeViewComponent,
   defineNodeViewFactory
 } from "@prosekit/core";
-function defineReactNodeView(options) {
-  let { name, ...userOptions } = options;
-  return defineNodeViewFactory({
-    group: "react",
-    name,
-    args: userOptions
-  });
-}
-function defineReactNodeViewFactory(nodeViewFactory) {
-  return defineNodeViewFactory({
-    group: "react",
-    factory: nodeViewFactory
-  });
-}
+import {
+  useNodeViewContext,
+  useNodeViewFactory
+} from "@prosemirror-adapter/react";
+import { createElement, useMemo as useMemo2 } from "react";
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
@@ -60,18 +50,13 @@ function useExtension(extension, options) {
   );
 }
 
-// src/views/node-view/node-view-context.ts
-import { ProseKitError } from "@prosekit/core";
-import { createContext, useContext } from "react";
-var createNodeViewContext = createContext(null);
-function useNodeViewFactory() {
-  let nodeViewFactory = useContext(createNodeViewContext);
-  if (!nodeViewFactory)
-    throw new ProseKitError("Cannot find node view factory context.");
-  return nodeViewFactory;
+// src/extensions/react-node-view.ts
+function withNodeViewProps(component) {
+  return function() {
+    let props = useNodeViewContext();
+    return createElement(component, props);
+  };
 }
-
-// src/views/react-views-consumer.ts
 var ReactViewsConsumer = () => {
   let nodeViewFactory = useNodeViewFactory(), extension = useMemo2(
     () => defineReactNodeViewFactory(nodeViewFactory),
@@ -79,177 +64,67 @@ var ReactViewsConsumer = () => {
   );
   return useExtension(extension), 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) => {
-        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 = () => {
-      let 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) {
-  return useCallback(
-    (options) => (node, view, getPos, decorations, innerDecorations) => {
-      let nodeView = new ReactNodeView({
-        node,
-        view,
-        getPos,
-        decorations,
-        innerDecorations,
-        options: {
-          ...options,
-          onUpdate() {
-            var _a;
-            (_a = options.onUpdate) == null || _a.call(options), renderReactRenderer(nodeView);
-          },
-          selectNode() {
-            var _a;
-            (_a = options.selectNode) == null || _a.call(options), renderReactRenderer(nodeView);
-          },
-          deselectNode() {
-            var _a;
-            (_a = options.deselectNode) == null || _a.call(options), renderReactRenderer(nodeView);
-          },
-          destroy() {
-            var _a;
-            (_a = options.destroy) == null || _a.call(options), removeReactRenderer(nodeView);
-          }
-        }
-      });
-      return renderReactRenderer(nodeView, !1), nodeView;
-    },
-    [removeReactRenderer, renderReactRenderer]
-  );
-}
-
-// src/views/react-renderer.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useRef, useState } from "react";
-import { flushSync } from "react-dom";
-function useReactRenderer() {
-  let [portals, setPortals] = useState({}), mountedRef = useRef(!1);
-  useEffect2(() => (requestAnimationFrame(() => {
-    mountedRef.current = !0;
-  }), () => {
-    mountedRef.current = !1;
-  }), []);
-  let maybeFlushSync = useCallback2((fn) => {
-    mountedRef.current ? flushSync(fn) : fn();
-  }, []), renderReactRenderer = useCallback2(
-    (nodeView, update = !0) => {
-      maybeFlushSync(() => {
-        update && nodeView.updateContext(), setPortals((prev) => ({
-          ...prev,
-          [nodeView.key]: nodeView.render()
-        }));
-      });
-    },
-    [maybeFlushSync]
-  ), removeReactRenderer = useCallback2(
-    (nodeView) => {
-      maybeFlushSync(() => {
-        setPortals((prev) => {
-          let next = { ...prev };
-          return delete next[nodeView.key], next;
-        });
-      });
-    },
-    [maybeFlushSync]
-  );
-  return {
-    portals,
-    renderReactRenderer,
-    removeReactRenderer
+function defineReactNodeView(options) {
+  let { name, component, ...userOptions } = options, args = {
+    ...userOptions,
+    component: withNodeViewProps(component)
   };
+  return defineNodeViewComponent({
+    group: "react",
+    name,
+    args
+  });
+}
+function defineReactNodeViewFactory(factory) {
+  return defineNodeViewFactory({
+    group: "react",
+    factory
+  });
 }
-
-// src/views/react-views-provider.ts
-var ReactViewsProvider = ({
-  children
-}) => {
-  let { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer(), createReactNodeView = useReactNodeViewCreator(
-    renderReactRenderer,
-    removeReactRenderer
-  ), memoizedPortals = useMemo3(() => Object.values(portals), [portals]);
-  return createElement2(
-    createNodeViewContext.Provider,
-    { value: createReactNodeView },
-    children,
-    memoizedPortals
-  );
-};
 
 // src/components/prosekit.ts
 var ProseKit = (props) => {
   let { editor, children } = props;
-  return createElement3(
-    ReactViewsProvider,
+  return createElement2(
+    ProsemirrorAdapterProvider,
     null,
-    createElement3(
+    createElement2(
       EditorContextProvider,
       { value: editor },
-      createElement3(ReactViewsConsumer),
+      createElement2(ReactViewsConsumer),
       children
     )
   );
 };
 
+// src/hooks/use-doc-change.ts
+import { defineDocChangeHandler } from "@prosekit/core";
+import { useMemo as useMemo3 } from "react";
+function useDocChange(handler, options) {
+  let extension = useMemo3(
+    () => defineDocChangeHandler((view) => handler(view.state.doc)),
+    [handler]
+  );
+  return useExtension(extension, options);
+}
+
 // src/hooks/use-editor.ts
 import {
-  ProseKitError as ProseKitError2,
+  ProseKitError,
   defineMountHandler,
   defineUpdateHandler,
   union
 } from "@prosekit/core";
-import { useEffect as useEffect3, useReducer } from "react";
+import { useEffect as useEffect2, useReducer } from "react";
 function useEditor(options) {
   var _a;
   let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
   if (!editor)
-    throw new ProseKitError2(
+    throw new ProseKitError(
       "useEditor must be used within the ProseKit component"
     );
   let forceUpdate = useForceUpdate();
-  return useEffect3(() => {
+  return useEffect2(() => {
     if (update) {
       let extension = union([
         defineMountHandler(forceUpdate),
@@ -282,17 +157,6 @@ function useStateUpdate(handler, options) {
   );
   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) {
-  let extension = useMemo6(
-    () => defineDocChangeHandler((view) => handler(view.state.doc)),
-    [handler]
-  );
-  return useExtension(extension, options);
-}
 export {
   ProseKit,
   defineReactNodeView,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.3.10",
+  "version": "0.3.12",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -65,11 +65,11 @@
     "dist"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.2.6",
+    "@prosemirror-adapter/react": "^0.2.6",
     "react-merge-refs": "^2.1.1",
-    "@prosekit/core": "^0.7.0",
+    "@prosekit/core": "^0.7.1",
     "@prosekit/pm": "^0.1.5",
-    "@prosekit/web": "^0.2.2"
+    "@prosekit/web": "^0.3.0"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",