@prosekit/react 0.1.2 → 0.1.3

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 
+import type { Attrs } from '@prosekit/pm/model';
 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';
@@ -19,22 +20,29 @@ import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
 import { CommandArgs } from '@prosekit/core';
 import { ComponentType } from 'react';
 import { Context } from 'react';
+import { CoreNodeView } from '@prosemirror-adapter/core';
+import type { CoreNodeViewSpec } from '@prosemirror-adapter/core';
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
+import type { Decoration } from '@prosekit/pm/view';
+import type { DecorationSource } from '@prosekit/pm/view';
 import { Editor } from '@prosekit/core';
+import type { EditorView } from '@prosekit/pm/view';
 import { Extension } from '@prosekit/core';
 import { ExtensionTyping } from '@prosekit/core';
+import { FC } 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 type { Node as Node_2 } from '@prosekit/pm/model';
+import type { NodeViewConstructor } from '@prosekit/pm/view';
 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 { Priority } from '@prosekit/core';
 import { default as React_2 } from 'react';
-import { useNodeViewContext } from '@prosemirror-adapter/react';
-import { useNodeViewFactory } from '@prosemirror-adapter/react';
-import { UserProjectConfigExport } from 'vitest/dist/config.js';
+import { ReactNode } from 'react';
+import { ReactPortal } from 'react';
 
 declare const AutocompleteEmpty: React_2.ComponentType<AutocompleteEmptyProps & React_2.RefAttributes<AutocompleteEmpty_2>>;
 export { AutocompleteEmpty }
@@ -84,17 +92,33 @@ export declare type ComboBoxListProps = React_2.PropsWithChildren<PropsWithClass
 
 export declare type ComboBoxProps = React_2.PropsWithChildren<PropsWithClassName<ComboBoxProps_2>>;
 
+export declare const createNodeViewContext: Context<NodeViewFactory | null>;
+
+declare type CreateReactNodeView = ReturnType<typeof useReactNodeViewCreator>;
+export { CreateReactNodeView }
+export { CreateReactNodeView as CreateReactNodeView_alias_1 }
+
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
-export declare const default_alias_1: UserProjectConfigExport;
+export declare const default_alias_1: {
+    test: {
+        environment: "jsdom";
+    };
+};
 
+/**
+ * Defines a node view using a React component.
+ *
+ * @public
+ */
 declare function defineReactNodeView(options: ReactNodeViewOptions): Extension;
 export { defineReactNodeView }
 export { defineReactNodeView as defineReactNodeView_alias_1 }
 
-export declare function defineReactNodeViewRenderer({ nodeViewFactory, }: {
-    nodeViewFactory: ReturnType<typeof useNodeViewFactory>;
-}): Extension<ExtensionTyping<string, string, CommandArgs>>;
+/**
+ * @internal
+ */
+export declare function defineReactNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<string, string, CommandArgs>>;
 
 export declare interface EditorContext {
     editor: Editor;
@@ -106,6 +130,8 @@ export declare const InlinePopover: React_2.ComponentType<InlinePopoverProps & R
 
 export declare type InlinePopoverProps = React_2.PropsWithChildren<PropsWithClassName<InlinePopoverProps_2>>;
 
+export declare type NodeViewFactory = (options: ReactNodeViewUserOptions) => NodeViewConstructor;
+
 export declare const Popover: React_2.ComponentType<PopoverProps & React_2.RefAttributes<Popover_2>>;
 
 export { PopoverOptions }
@@ -127,33 +153,85 @@ export { ProseKit as ProseKit_alias_1 }
 
 declare interface ProseKitProps {
     editor: Editor;
-    children?: React_2.ReactNode;
+    children?: ReactNode;
 }
 export { ProseKitProps }
 export { ProseKitProps as ProseKitProps_alias_1 }
 
-declare type ReactNodeViewComponentProps = NodeViewContext;
-export { ReactNodeViewComponentProps }
-export { ReactNodeViewComponentProps as ReactNodeViewComponentProps_alias_1 }
+export declare class ReactNodeView extends CoreNodeView<ReactNodeViewComponent> implements ReactRenderer<ReactNodeViewProps> {
+    key: string;
+    context: ReactNodeViewProps;
+    updateContext: () => void;
+    render: () => ReactPortal;
+}
+
+/**
+ * @public
+ */
+declare type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>;
+export { ReactNodeViewComponent }
+export { ReactNodeViewComponent as ReactNodeViewComponent_alias_1 }
 
-declare interface ReactNodeViewOptions {
+/**
+ * Options for {@link defineReactNodeView}.
+ *
+ * @public
+ */
+declare interface ReactNodeViewOptions extends ReactNodeViewUserOptions {
+    /**
+     * The name of the node.
+     */
     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 }
+/**
+ * @public
+ */
+declare interface ReactNodeViewProps {
+    contentRef: (node: HTMLElement | null) => void;
+    view: EditorView;
+    getPos: () => number | undefined;
+    setAttrs: (attrs: Attrs) => void;
+    node: Node_2;
+    selected: boolean;
+    decorations: readonly Decoration[];
+    innerDecorations: DecorationSource;
+}
+export { ReactNodeViewProps }
+export { ReactNodeViewProps as ReactNodeViewProps_alias_1 }
 
-declare interface UseEditorOptions {
-    update?: boolean;
+export declare type ReactNodeViewSpec = CoreNodeViewSpec<ReactNodeViewComponent>;
+
+export declare type ReactNodeViewUserOptions = CoreNodeViewUserOptions<ReactNodeViewComponent>;
+
+export declare interface ReactRenderer<Context> {
+    key: string;
+    context: Context;
+    render: () => ReactPortal;
+    updateContext: () => void;
+}
+
+export declare interface ReactRendererResult {
+    readonly portals: Record<string, ReactPortal>;
+    readonly renderReactRenderer: (nodeView: ReactRenderer<unknown>, update?: boolean) => void;
+    readonly removeReactRenderer: (nodeView: ReactRenderer<unknown>) => void;
 }
-export { UseEditorOptions }
-export { UseEditorOptions as UseEditorOptions_alias_1 }
+
+export declare const ReactViewsConsumer: FC;
+
+declare const ReactViewsProvider: FC<{
+    children: ReactNode;
+}>;
+export { ReactViewsProvider }
+export { ReactViewsProvider as ReactViewsProvider_alias_1 }
+
+declare function useEditor<E extends Extension = any>(options?: {
+    update?: boolean;
+}): Editor<E>;
+export { useEditor }
+export { useEditor as useEditor_alias_1 }
 
 /**
  * Add an extension to the editor.
@@ -171,8 +249,12 @@ declare function useKeymap(keymap: Keymap, options?: {
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
-export { useNodeViewContext }
+export declare function useNodeViewFactory(): NodeViewFactory;
 
 export declare function usePriorityExtension<T extends Extension = Extension>(extension: T | null, priority?: Priority | null): void;
 
+export declare function useReactNodeViewCreator(renderReactRenderer: ReactRendererResult['renderReactRenderer'], removeReactRenderer: ReactRendererResult['removeReactRenderer']): (options: ReactNodeViewUserOptions) => NodeViewConstructor;
+
+export declare function useReactRenderer(): ReactRendererResult;
+
 export { }

package/dist/prosekit-react.d.ts

@@ -1,11 +1,10 @@
-export { useNodeViewContext } from './_tsup-dts-rollup';
+export { ReactNodeViewComponent } 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';
 export { PropsWithClassName } from './_tsup-dts-rollup';
+export { ReactNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-react.js

@@ -1,52 +1,28 @@
-// 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";
+import { createElement as createElement3 } from "react";
 
 // src/contexts/editor-context.ts
 import { createContext } from "react";
 var editorContext = createContext(null);
 
+// src/views/react-views-consumer.ts
+import { useMemo } from "react";
+
 // src/extensions/react-node-view.ts
-import { defineNodeViewEffect } from "@prosekit/core";
-import {
-  useNodeViewContext
-} from "@prosemirror-adapter/react";
-import { createElement } from "react";
+import { defineNodeViewFactory } from "@prosekit/core";
 function defineReactNodeView(options) {
-  return defineNodeViewEffect({
+  const { name, ...userOptions } = options;
+  return defineNodeViewFactory({
     group: "react",
-    name: options.name,
-    args: options
+    name,
+    args: userOptions
   });
 }
-function defineReactNodeViewRenderer({
-  nodeViewFactory
-}) {
-  return defineNodeViewEffect({
+function defineReactNodeViewFactory(nodeViewFactory) {
+  return defineNodeViewFactory({
     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"
-      });
-    }
+    factory: nodeViewFactory
   });
 }
 
@@ -93,40 +69,212 @@ function useExtension(extension) {
   }, [editor, extension]);
 }
 
+// src/views/node-view/node-view-context.ts
+import { ProseKitError as ProseKitError2 } from "@prosekit/core";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var createNodeViewContext = createContext2(null);
+function useNodeViewFactory() {
+  const nodeViewFactory = useContext2(createNodeViewContext);
+  if (!nodeViewFactory) {
+    throw new ProseKitError2("Cannot find node view factory context.");
+  }
+  return nodeViewFactory;
+}
+
+// src/views/react-views-consumer.ts
+var ReactViewsConsumer = () => {
+  const nodeViewFactory = useNodeViewFactory();
+  const extension = useMemo(
+    () => defineReactNodeViewFactory(nodeViewFactory),
+    [nodeViewFactory]
+  );
+  useExtension(extension);
+  return null;
+};
+
+// src/views/react-views-provider.ts
+import { createElement as createElement2, useMemo as useMemo2 } from "react";
+
+// src/views/node-view/use-react-node-view-creator.ts
+import { useCallback } from "react";
+
+// src/views/node-view/react-node-view.ts
+import { _getId } from "@prosekit/core";
+import { CoreNodeView } from "@prosemirror-adapter/core";
+import { createElement } from "react";
+import { createPortal } from "react-dom";
+var ReactNodeView = class extends CoreNodeView {
+  constructor() {
+    super(...arguments);
+    this.key = _getId();
+    this.context = {
+      contentRef: (element) => {
+        if (element && this.contentDOM && element.firstChild !== this.contentDOM)
+          element.appendChild(this.contentDOM);
+      },
+      view: this.view,
+      getPos: this.getPos,
+      setAttrs: this.setAttrs,
+      node: this.node,
+      selected: this.selected,
+      decorations: this.decorations,
+      innerDecorations: this.innerDecorations
+    };
+    this.updateContext = () => {
+      Object.assign(this.context, {
+        node: this.node,
+        selected: this.selected,
+        decorations: this.decorations,
+        innerDecorations: this.innerDecorations
+      });
+    };
+    this.render = () => {
+      const UserComponent = this.component;
+      return createPortal(
+        createElement(UserComponent, this.context),
+        this.dom,
+        this.key
+      );
+    };
+  }
+};
+
+// src/views/node-view/use-react-node-view-creator.ts
+function useReactNodeViewCreator(renderReactRenderer, removeReactRenderer) {
+  const createReactNodeView = useCallback(
+    (options) => (node, view, getPos, decorations, innerDecorations) => {
+      const nodeView = new ReactNodeView({
+        node,
+        view,
+        getPos,
+        decorations,
+        innerDecorations,
+        options: {
+          ...options,
+          onUpdate() {
+            var _a;
+            (_a = options.onUpdate) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          selectNode() {
+            var _a;
+            (_a = options.selectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          deselectNode() {
+            var _a;
+            (_a = options.deselectNode) == null ? void 0 : _a.call(options);
+            renderReactRenderer(nodeView);
+          },
+          destroy() {
+            var _a;
+            (_a = options.destroy) == null ? void 0 : _a.call(options);
+            removeReactRenderer(nodeView);
+          }
+        }
+      });
+      renderReactRenderer(nodeView, false);
+      return nodeView;
+    },
+    [removeReactRenderer, renderReactRenderer]
+  );
+  return createReactNodeView;
+}
+
+// src/views/react-renderer.ts
+import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+function useReactRenderer() {
+  const [portals, setPortals] = useState({});
+  const mountedRef = useRef(false);
+  useEffect3(() => {
+    requestAnimationFrame(() => {
+      mountedRef.current = true;
+    });
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const maybeFlushSync = useCallback2((fn) => {
+    if (mountedRef.current)
+      flushSync(fn);
+    else
+      fn();
+  }, []);
+  const renderReactRenderer = useCallback2(
+    (nodeView, update = true) => {
+      maybeFlushSync(() => {
+        if (update)
+          nodeView.updateContext();
+        setPortals((prev) => ({
+          ...prev,
+          [nodeView.key]: nodeView.render()
+        }));
+      });
+    },
+    [maybeFlushSync]
+  );
+  const removeReactRenderer = useCallback2(
+    (nodeView) => {
+      maybeFlushSync(() => {
+        setPortals((prev) => {
+          const next = { ...prev };
+          delete next[nodeView.key];
+          return next;
+        });
+      });
+    },
+    [maybeFlushSync]
+  );
+  return {
+    portals,
+    renderReactRenderer,
+    removeReactRenderer
+  };
+}
+
+// src/views/react-views-provider.ts
+var ReactViewsProvider = ({
+  children
+}) => {
+  const { renderReactRenderer, removeReactRenderer, portals } = useReactRenderer();
+  const createReactNodeView = useReactNodeViewCreator(
+    renderReactRenderer,
+    removeReactRenderer
+  );
+  const memoizedPortals = useMemo2(() => Object.values(portals), [portals]);
+  return createElement2(
+    createNodeViewContext.Provider,
+    { value: createReactNodeView },
+    children,
+    memoizedPortals
+  );
+};
+
 // src/components/prosekit.ts
 var ProseKit = (props) => {
   const { editor, children } = props;
-  return createElement2(
-    ProsemirrorAdapterProvider,
+  return createElement3(
+    ReactViewsProvider,
     null,
-    createElement2(
-      EditorContextProvider,
+    createElement3(
+      editorContext.Provider,
       { value: { editor } },
-      children,
-      createElement2(RendererRegister)
+      createElement3(ReactViewsConsumer),
+      children
     )
   );
 };
-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 as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 
 // src/hooks/use-priority-extension.ts
 import { withPriority } from "@prosekit/core";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 function usePriorityExtension(extension, priority) {
-  const extensionWithPriority = useMemo2(() => {
+  const extensionWithPriority = useMemo3(() => {
     return extension && priority ? withPriority(extension, priority) : extension;
   }, [extension, priority]);
   return useExtension(extensionWithPriority);
@@ -134,7 +282,7 @@ function usePriorityExtension(extension, priority) {
 
 // src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
-  const extension = useMemo3(() => defineKeymap(keymap), [keymap]);
+  const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
   usePriorityExtension(extension, options == null ? void 0 : options.priority);
 }
 export {
@@ -142,6 +290,5 @@ export {
   defineReactNodeView,
   useEditor,
   useExtension,
-  useKeymap,
-  useNodeViewContext2 as useNodeViewContext
+  useKeymap
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -88,7 +88,8 @@
     "@lit/react": "^1.0.2",
     "@prosekit/core": "^0.1.0",
     "@prosekit/lit": "^0.1.0",
-    "@prosemirror-adapter/react": "^0.2.6"
+    "@prosekit/pm": "^0.1.0",
+    "@prosemirror-adapter/core": "^0.2.6"
   },
   "peerDependencies": {
     "react": ">= 17.0.0",
@@ -104,13 +105,13 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "@types/react": "^18.2.39",
+    "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.17",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.2",
-    "vitest": "^0.34.6"
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.4"
   },
   "scripts": {
     "build:tsup": "tsup",

package/src/index.ts

@@ -1,11 +1,11 @@
-export { useNodeViewContext } from '@prosemirror-adapter/react'
+export type { ReactNodeViewComponent } from './views/node-view/react-node-view-options'
 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 { useEditor } from './hooks/use-editor'
 export { useExtension } from './hooks/use-extension'
 export { useKeymap } from './hooks/use-keymap'
 export { type PropsWithClassName } from './types'
+export type { ReactNodeViewProps } from './views/node-view/react-node-view-props'