@prosekit/react 0.4.5 → 0.4.7

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

@@ -1,4 +1,3 @@
-import type { Attrs } from '@prosekit/pm/model';
 import { AutocompleteEmptyElement } from '@prosekit/web/autocomplete';
 import { AutocompleteEmptyEvents } from '@prosekit/web/autocomplete';
 import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/web/autocomplete';
@@ -11,7 +10,6 @@ import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/web/
 import { AutocompletePopoverElement } from '@prosekit/web/autocomplete';
 import { AutocompletePopoverEvents } from '@prosekit/web/autocomplete';
 import { AutocompletePopoverProps as AutocompletePopoverProps_2 } from '@prosekit/web/autocomplete';
-import { BaseNodeViewOptions } from '@prosekit/core';
 import { BlockHandleAddElement } from '@prosekit/web/block-handle';
 import { BlockHandleAddEvents } from '@prosekit/web/block-handle';
 import { BlockHandleAddProps as BlockHandleAddProps_2 } from '@prosekit/web/block-handle';
@@ -22,12 +20,11 @@ import { BlockHandlePopoverElement } from '@prosekit/web/block-handle';
 import { BlockHandlePopoverEvents } from '@prosekit/web/block-handle';
 import { BlockHandlePopoverProps as BlockHandlePopoverProps_2 } from '@prosekit/web/block-handle';
 import { ComponentType } from 'react';
-import type { Decoration } from '@prosekit/pm/view';
-import type { DecorationSource } from '@prosekit/pm/view';
+import type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core';
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
 import { config as default_alias_1 } from '@prosekit/dev/config-vitest';
 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 { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -36,6 +33,8 @@ import { InlinePopoverElement } from '@prosekit/web/inline-popover';
 import { InlinePopoverEvents } from '@prosekit/web/inline-popover';
 import { InlinePopoverProps as InlinePopoverProps_2 } from '@prosekit/web/inline-popover';
 import { Keymap } from '@prosekit/core';
+import { MarkViewContext } from '@prosemirror-adapter/react';
+import { NodeViewContext } from '@prosemirror-adapter/react';
 import { Options } from 'tsup';
 import { PopoverContentElement } from '@prosekit/web/popover';
 import { PopoverContentEvents } from '@prosekit/web/popover';
@@ -190,6 +189,15 @@ export declare const default_alias: Options | Options[] | ((overrideOptions: Opt
 
 export { default_alias_1 }
 
+/**
+ * Defines a mark view using a React component.
+ *
+ * @public
+ */
+declare function defineReactMarkView(options: ReactMarkViewOptions): Extension;
+export { defineReactMarkView }
+export { defineReactMarkView as defineReactMarkView_alias_1 }
+
 /**
  * Defines a node view using a React component.
  *
@@ -277,6 +285,40 @@ declare interface ProseKitProps {
 export { ProseKitProps }
 export { ProseKitProps as ProseKitProps_alias_1 }
 
+/**
+ * @public
+ */
+declare type ReactMarkViewComponent = ComponentType<ReactMarkViewProps>;
+export { ReactMarkViewComponent }
+export { ReactMarkViewComponent as ReactMarkViewComponent_alias_1 }
+
+/**
+ * @internal
+ */
+export declare const ReactMarkViewConsumer: FC;
+
+/**
+ * Options for {@link defineReactMarkView}.
+ *
+ * @public
+ */
+declare interface ReactMarkViewOptions extends CoreMarkViewUserOptions<ReactMarkViewComponent> {
+    /**
+     * The name of the mark type.
+     */
+    name: string;
+}
+export { ReactMarkViewOptions }
+export { ReactMarkViewOptions as ReactMarkViewOptions_alias_1 }
+
+/**
+ * @public
+ */
+declare interface ReactMarkViewProps extends MarkViewContext {
+}
+export { ReactMarkViewProps }
+export { ReactMarkViewProps as ReactMarkViewProps_alias_1 }
+
 /**
  * @public
  */
@@ -284,20 +326,21 @@ declare type ReactNodeViewComponent = ComponentType<ReactNodeViewProps>;
 export { ReactNodeViewComponent }
 export { ReactNodeViewComponent as ReactNodeViewComponent_alias_1 }
 
+/**
+ * @internal
+ */
+export declare const ReactNodeViewConsumer: FC;
+
 /**
  * Options for {@link defineReactNodeView}.
  *
  * @public
  */
-declare interface ReactNodeViewOptions extends BaseNodeViewOptions {
+declare interface ReactNodeViewOptions extends CoreNodeViewUserOptions<ReactNodeViewComponent> {
     /**
      * The name of the node type.
      */
     name: string;
-    /**
-     * The React component to render the node.
-     */
-    component: ReactNodeViewComponent;
 }
 export { ReactNodeViewOptions }
 export { ReactNodeViewOptions as ReactNodeViewOptions_alias_1 }
@@ -305,24 +348,11 @@ export { ReactNodeViewOptions as ReactNodeViewOptions_alias_1 }
 /**
  * @public
  */
-declare interface ReactNodeViewProps {
-    contentRef: (node: HTMLElement | null) => void;
-    view: EditorView;
-    getPos: () => number | undefined;
-    setAttrs: (attrs: Attrs) => void;
-    node: ProseMirrorNode;
-    selected: boolean;
-    decorations: readonly Decoration[];
-    innerDecorations: DecorationSource;
+declare interface ReactNodeViewProps extends NodeViewContext {
 }
 export { ReactNodeViewProps }
 export { ReactNodeViewProps as ReactNodeViewProps_alias_1 }
 
-/**
- * @internal
- */
-export declare const ReactViewsConsumer: FC;
-
 declare const ResizableHandle: ForwardRefExoticComponent<ResizableHandleProps & RefAttributes<ResizableHandleElement> & HTMLAttributes<ResizableHandleElement>>;
 export { ResizableHandle }
 export { ResizableHandle as ResizableHandle_alias_1 }

package/dist/{chunk-BH56NR2Q.js → chunk-BV2MZRRU.js}

@@ -1,5 +1,8 @@
 // src/contexts/editor-context.ts
-import { createContext, useContext } from "react";
+import {
+  createContext,
+  useContext
+} from "react";
 var editorContext = createContext(null);
 function useEditorContext() {
   return useContext(editorContext);

package/dist/{chunk-E43DMYRE.js → chunk-IO5VSPOS.js}

@@ -1,6 +1,6 @@
 import {
   useEditorContext
-} from "./chunk-BH56NR2Q.js";
+} from "./chunk-BV2MZRRU.js";
 
 // src/components/create-component.ts
 import {

package/dist/prosekit-react-autocomplete.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/autocomplete/autocomplete-empty.gen.ts
 import {

package/dist/prosekit-react-block-handle.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/block-handle/block-handle-add.gen.ts
 import {

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

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/inline-popover/inline-popover.gen.ts
 import {

package/dist/prosekit-react-popover.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/popover/popover-content.gen.ts
 import {

package/dist/prosekit-react-resizable.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/resizable/resizable-handle.gen.ts
 import {

package/dist/prosekit-react-table-handle.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/table-handle/table-handle-column-root.gen.ts
 import {

package/dist/prosekit-react-tooltip.js

@@ -1,7 +1,7 @@
 import {
   createComponent
-} from "./chunk-E43DMYRE.js";
-import "./chunk-BH56NR2Q.js";
+} from "./chunk-IO5VSPOS.js";
+import "./chunk-BV2MZRRU.js";
 
 // src/components/tooltip/tooltip-content.gen.ts
 import {

package/dist/prosekit-react.d.ts

@@ -1,5 +1,9 @@
 export { ProseKit } from './_tsup-dts-rollup.js';
 export { ProseKitProps } from './_tsup-dts-rollup.js';
+export { defineReactMarkView } from './_tsup-dts-rollup.js';
+export { ReactMarkViewComponent } from './_tsup-dts-rollup.js';
+export { ReactMarkViewOptions } from './_tsup-dts-rollup.js';
+export { ReactMarkViewProps } from './_tsup-dts-rollup.js';
 export { defineReactNodeView } from './_tsup-dts-rollup.js';
 export { ReactNodeViewComponent } from './_tsup-dts-rollup.js';
 export { ReactNodeViewOptions } from './_tsup-dts-rollup.js';

package/dist/prosekit-react.js

@@ -1,22 +1,27 @@
 import {
   EditorContextProvider,
   useEditorContext
-} from "./chunk-BH56NR2Q.js";
+} from "./chunk-BV2MZRRU.js";
 
 // src/components/prosekit.ts
 import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/react";
-import { createElement as createElement2 } from "react";
+import {
+  createElement as createElement3
+} from "react";
 
-// src/extensions/react-node-view.ts
+// src/extensions/react-mark-view.ts
 import {
-  defineNodeViewComponent,
-  defineNodeViewFactory
+  defineMarkViewComponent,
+  defineMarkViewFactory
 } from "@prosekit/core";
 import {
-  useNodeViewContext,
-  useNodeViewFactory
+  useMarkViewContext,
+  useMarkViewFactory
 } from "@prosemirror-adapter/react";
-import { createElement, useMemo as useMemo2 } from "react";
+import {
+  createElement,
+  useMemo as useMemo2
+} from "react";
 
 // src/hooks/use-editor-extension.ts
 import {
@@ -35,7 +40,9 @@ function useEditorExtension(editor, extension) {
 }
 
 // src/hooks/use-priority-extension.ts
-import { withPriority } from "@prosekit/core";
+import {
+  withPriority
+} from "@prosekit/core";
 import { useMemo } from "react";
 function usePriorityExtension(extension, priority) {
   return useMemo(() => {
@@ -52,16 +59,63 @@ function useExtension(extension, options) {
   );
 }
 
+// src/extensions/react-mark-view.ts
+function withMarkViewProps(component) {
+  return function MarkViewPropsWrapper() {
+    const props = useMarkViewContext();
+    return createElement(component, props);
+  };
+}
+var ReactMarkViewConsumer = () => {
+  const markViewFactory = useMarkViewFactory();
+  const extension = useMemo2(
+    () => defineReactMarkViewFactory(markViewFactory),
+    [markViewFactory]
+  );
+  useExtension(extension);
+  return null;
+};
+function defineReactMarkView(options) {
+  const { name, component, ...userOptions } = options;
+  const args = {
+    ...userOptions,
+    component: withMarkViewProps(component)
+  };
+  return defineMarkViewComponent({
+    group: "react",
+    name,
+    args
+  });
+}
+function defineReactMarkViewFactory(factory) {
+  return defineMarkViewFactory({
+    group: "react",
+    factory
+  });
+}
+
 // src/extensions/react-node-view.ts
+import {
+  defineNodeViewComponent,
+  defineNodeViewFactory
+} from "@prosekit/core";
+import {
+  useNodeViewContext,
+  useNodeViewFactory
+} from "@prosemirror-adapter/react";
+import {
+  createElement as createElement2,
+  useMemo as useMemo3
+} from "react";
 function withNodeViewProps(component) {
   return function NodeViewPropsWrapper() {
     const props = useNodeViewContext();
-    return createElement(component, props);
+    return createElement2(component, props);
   };
 }
-var ReactViewsConsumer = () => {
+var ReactNodeViewConsumer = () => {
   const nodeViewFactory = useNodeViewFactory();
-  const extension = useMemo2(
+  const extension = useMemo3(
     () => defineReactNodeViewFactory(nodeViewFactory),
     [nodeViewFactory]
   );
@@ -90,13 +144,14 @@ function defineReactNodeViewFactory(factory) {
 // src/components/prosekit.ts
 var ProseKit = (props) => {
   const { editor, children } = props;
-  return createElement2(
+  return createElement3(
     ProsemirrorAdapterProvider,
     null,
-    createElement2(
+    createElement3(
       EditorContextProvider,
       { value: editor },
-      createElement2(ReactViewsConsumer),
+      createElement3(ReactNodeViewConsumer),
+      createElement3(ReactMarkViewConsumer),
       children
     )
   );
@@ -104,9 +159,9 @@ var ProseKit = (props) => {
 
 // src/hooks/use-doc-change.ts
 import { defineDocChangeHandler } from "@prosekit/core";
-import { useMemo as useMemo3 } from "react";
+import { useMemo as useMemo4 } from "react";
 function useDocChange(handler, options) {
-  const extension = useMemo3(
+  const extension = useMemo4(
     () => defineDocChangeHandler((view) => handler(view.state.doc)),
     [handler]
   );
@@ -115,12 +170,15 @@ function useDocChange(handler, options) {
 
 // src/hooks/use-editor.ts
 import {
-  ProseKitError,
   defineMountHandler,
   defineUpdateHandler,
+  ProseKitError,
   union
 } from "@prosekit/core";
-import { useEffect as useEffect2, useReducer } from "react";
+import {
+  useEffect as useEffect2,
+  useReducer
+} from "react";
 function useEditor(options) {
   var _a;
   const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
@@ -148,18 +206,20 @@ function useForceUpdate() {
 }
 
 // src/hooks/use-keymap.ts
-import { defineKeymap } from "@prosekit/core";
-import { useMemo as useMemo4 } from "react";
+import {
+  defineKeymap
+} from "@prosekit/core";
+import { useMemo as useMemo5 } from "react";
 function useKeymap(keymap, options) {
-  const extension = useMemo4(() => defineKeymap(keymap), [keymap]);
+  const extension = useMemo5(() => defineKeymap(keymap), [keymap]);
   return useExtension(extension, options);
 }
 
 // src/hooks/use-state-update.ts
 import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 function useStateUpdate(handler, options) {
-  const extension = useMemo5(
+  const extension = useMemo6(
     () => defineUpdateHandler2((view) => handler(view.state)),
     [handler]
   );
@@ -167,6 +227,7 @@ function useStateUpdate(handler, options) {
 }
 export {
   ProseKit,
+  defineReactMarkView,
   defineReactNodeView,
   useDocChange,
   useEditor,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/react",
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -70,11 +70,12 @@
     "dist"
   ],
   "dependencies": {
-    "@prosemirror-adapter/react": "^0.2.6",
+    "@prosemirror-adapter/core": "^0.4.0",
+    "@prosemirror-adapter/react": "^0.4.0",
     "react-merge-refs": "^2.1.1",
-    "@prosekit/core": "^0.7.13",
-    "@prosekit/web": "^0.5.1",
-    "@prosekit/pm": "^0.1.9"
+    "@prosekit/core": "^0.7.14",
+    "@prosekit/pm": "^0.1.9",
+    "@prosekit/web": "^0.5.2"
   },
   "peerDependencies": {
     "react": ">= 18.2.0",
@@ -89,13 +90,13 @@
     }
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.6",
+    "typescript": "~5.6.3",
+    "vitest": "^2.1.8",
     "@prosekit/dev": "0.0.0"
   },
   "scripts": {