@handlewithcare/react-prosemirror 2.9.0-tiptap.25 → 3.0.0

package/README.md

@@ -16,7 +16,7 @@ releases, and are not guaranteed to work with other versions of
 prosemirror-view. Ensure that your version of prosemirror-view matches the
 version in React ProseMirror's peer dependencies!
 
-_Note_: React ProseMirror does not require a specific verson of React, React
+_Note_: React ProseMirror does not require a specific version of React, React
 DOM, or React Reconciler. **However**, you must ensure that your React
 Reconciler version matches your React/React DOM versions.
 
@@ -85,6 +85,7 @@ import "prosemirror-view/style/prosemirror.css";
   - [`useEditorEventListener`](#useeditoreventlistener-1)
   - [`useEditorEffect`](#useeditoreffect-1)
   - [`NodeViewComponentProps`](#nodeviewcomponentprops)
+  - [`useNodePos`](#usenodepos)
   - [`useStopEvent`](#usestopevent)
   - [`useIgnoreMutation`](#useignoremutation)
   - [`useSelectNode`](#useselectnode)
@@ -115,7 +116,7 @@ differences between the rendering approaches taken by each framework. The first
 phase of a React update should be free of side effects, which requires that
 updates to the ProseMirror View happen in the second phase. This means that
 during the first phase, React components actually have access to a different
-(newer) version of the EditorState than the one in the Editorview. As a result
+(newer) version of the EditorState than the one in the EditorView. As a result
 code that dispatches transactions may dispatch transactions based on incorrect
 state. Code that invokes methods of the ProseMirror view may make bad
 assumptions about its state that cause incorrect behavior or errors.
@@ -212,7 +213,7 @@ export function ProseMirrorEditor() {
 
 The `EditorView` interface exposes several useful methods that provide access to
 the DOM or data derived from its layout, such as `coordsFromPos`. These methods
-should only be accessed outside of the render cycle, to ensure that the DOM has
+should only be accessed outside the render cycle, to ensure that the DOM has
 been updated to match the latest state. React ProseMirror provides two hooks to
 enable this access pattern: `useEditorEffect` and `useEditorEventCallback`. Both
 of these hooks can be used from any children of the ProseMirror component.
@@ -290,14 +291,14 @@ export function ProseMirrorEditor() {
 #### `useEditorEventCallback`
 
 It's also often necessary to dispatch transactions or execute side effects in
-response to user actions, like mouse clicks and keyboard events. Note: if you
-need to respond to keyboard events from _within_ the `contenteditable` element,
-you should instead use [`useEditorEventListener`](#useEditorEventListener).
+response to user actions, like mouse clicks and keyboard events.
 
-However, if you need to dispatch a transaction in response to some event
-dispatched from a React component, like a tooltip or a toolbar button, you can
-use `useEditorEventCallback` to create a stable function reference that can
-safely access the latest value of the `EditorView`.
+You can use `useEditorEventCallback` to create a stable function reference that
+can safely access the latest value of the `EditorView`.
+
+_Note_: if you need to respond to keyboard events from _within_ the
+`contenteditable` element, you should instead use
+[`useEditorEventListener`](#useEditorEventListener).
 
 ```tsx
 // BoldButton.tsx
@@ -365,40 +366,38 @@ semantics for ProseMirror's `handleDOMEvents` prop:
   want to prevent the default contenteditable behavior, you must call
   `event.preventDefault`.
 
-You can use this hook to implement custom behavior in your NodeViews:
+You can use this hook to implement custom behavior in your node views:
 
 ```tsx
-import { forwardRef, Ref } from "react";
 import {
   useEditorEventListener,
   NodeViewComponentProps,
+  useMergedDOMRefs,
 } from "@handlewithcare/react-prosemirror";
 
-const Paragraph = forwardRef<HTMLParagraphElement, NodeViewComponentProps>(
-  function Paragraph({ children, nodeProps, ...props }, ref) {
-    useEditorEventListener("keydown", (view, event) => {
-      const { pos, node } = nodeProps;
-
-      if (event.code !== "ArrowDown") {
-        return false;
-      }
-      const nodeEnd = pos + node.nodeSize;
-      const { selection } = view.state;
-      if (selection.anchor < pos || selection.anchor > nodeEnd) {
-        return false;
-      }
-      event.preventDefault();
-      alert("No down keys allowed!");
-      return true;
-    });
-
-    return (
-      <p {...props} ref={ref}>
-        {children}
-      </p>
-    );
-  }
-);
+function Paragraph({ children, nodeProps, ref, ...props }) {
+  useEditorEventListener("keydown", (view, event) => {
+    const { pos, node } = nodeProps;
+
+    if (event.code !== "ArrowDown") {
+      return false;
+    }
+    const nodeEnd = pos + node.nodeSize;
+    const { selection } = view.state;
+    if (selection.anchor < pos || selection.anchor > nodeEnd) {
+      return false;
+    }
+    event.preventDefault();
+    alert("No down keys allowed!");
+    return true;
+  });
+
+  return (
+    <p {...props} ref={useMergedDOMRefs(ref, nodeProps.contentDOMRef)}>
+      {children}
+    </p>
+  );
+}
 ```
 
 ### Building node views with React
@@ -410,43 +409,61 @@ special other than fulfill the
 [`NodeViewComponentProps`](#nodeviewcomponentprops) interface.
 
 ```tsx
-import { forwardRef, Ref } from "react";
 import {
   ProseMirror,
   ProseMirrorDoc,
   useEditorEventCallback,
   NodeViewComponentProps,
+  useMergedDOMRefs,
   reactKeys,
 } from "@handlewithcare/react-prosemirror";
 import { EditorState } from "prosemirror-state";
 import { schema } from "prosemirror-schema-basic";
 
 // Paragraph is more or less a normal React component, taking and rendering
-// its children. All node view components _must_ forward refs to their top-level
-// DOM elements. All node view components _should_ spread all of the props that they
-// receive onto their top-level DOM elements; this is required for node Decorations
-// that apply attributes rather than wrapping nodes in an additional element.
-const Paragraph = forwardRef<HTMLParagraphElement, NodeViewComponentProps>(
-  function Paragraph({ children, nodeProps, ...props }, ref) {
-    const onClick = useEditorEventCallback((view) =>
-      view.dispatch(view.state.tr.deleteSelection())
-    );
-
-    return (
-      <p {...props} ref={ref} onClick={onClick}>
-        {children}
-      </p>
-    );
-  }
-);
+// its children. Some guidelines:
+//
+//   - All node view components _must_ pass refs to their top-level
+//     DOM elements.
+//   - All node view components that render children _must_ pass nodeProps.contentDOMRef
+//     to the parent element of `children`. If this is also the top-level DOM
+//     element, use `useMergedDOMRefs` to apply both refs
+//   - All node view components _should_ spread all of the props that they
+//     receive onto their top-level DOM elements; this is required for node Decorations
+//     that apply attributes rather than wrapping nodes in an additional element.
+//
+// Note: we are accessing `ref` as a prop here, which has been available since React 19.
+// If you are using React <=18, you will need to use forwardRef to access `ref`.
+function Paragraph({ children, nodeProps, ref, ...props }) {
+  const onClick = useEditorEventCallback((view) =>
+    view.dispatch(view.state.tr.deleteSelection())
+  );
+
+  return (
+    <p
+      {...props}
+      ref={useMergedDOMRefs(ref, nodeProps.contentDOMRef)}
+      onClick={onClick}
+    >
+      {children}
+    </p>
+  );
+}
+
+// **IMPORTANT**: Define nodeViewComponents _outside_ of your editor
+// component. It should be a stable reference.
+//
+// If you need to define it within a React component for some reason,
+// ensure that it is properly memoized with `useMemo` or the React Compiler.
+const nodeViewComponents = {
+  paragraph: Paragraph,
+};
 
 function ProseMirrorEditor() {
   return (
     <ProseMirror
       defaultState={EditorState.create({ schema, plugins: [reactKeys()] })}
-      nodeViews={{
-        paragraph: Paragraph,
-      }}
+      nodeViewComponents={nodeViewComponents}
     >
       <ProseMirrorDoc />
     </ProseMirror>
@@ -454,6 +471,29 @@ function ProseMirrorEditor() {
 }
 ```
 
+If your node view component is more complex, and the top level DOM element does
+not directly render `children`, use `ref` and `nodeProps.contentDOMRef`
+separately:
+
+```tsx
+function FancyParagraph({ children, nodeProps, ref, ...props }) {
+  const onClick = useEditorEventCallback((view) =>
+    view.dispatch(view.state.tr.deleteSelection())
+  );
+
+  return (
+    <div
+      {...props}
+      className={cx(props.className, "fancy-paragraph")}
+      ref={ref}
+      onClick={onClick}
+    >
+      <p ref={nodeProps.contentDOMRef}>{children}</p>
+    </div>
+  );
+}
+```
+
 ## API
 
 ### `ProseMirror`
@@ -463,20 +503,16 @@ type ProseMirror = (
   props: DirectEditorProps &
     ({ defaultState: EditorState } | { state: EditorState }) & {
       children: ReactNode;
-      nodeViews?: {
-        [nodeType: string]: ForwardRefExoticComponent<
-          NodeViewComponentProps & RefAttributes<any>
-        >;
+      nodeViewComponents?: {
+        [nodeType: string]: ComponentType<NodeViewComponentProps>;
       };
-      customNodeViews?: {
+      nodeViews?: {
         [nodeType: string]: NodeViewConstructor;
       };
-      markViews?: {
-        [markType: string]: ForwardRefExoticComponent<
-          MarkViewComponentProps & RefAttributes<any>
-        >;
+      markViewComponents?: {
+        [markType: string]: ComponentType<MarkViewComponentProps>;
       };
-      customMarkViews?: {
+      markViews?: {
         [markType: string]: MarkViewConstructor;
       };
     }
@@ -516,7 +552,7 @@ Renders the actual editable ProseMirror document.
 
 This **must** be passed as a child to the `ProseMirror` component. It may be
 wrapped in any other components, and other children may be passed before or
-after
+after.
 
 Example usage:
 
@@ -535,7 +571,7 @@ export function ProseMirrorEditor() {
     >
       <ToolBar />
       <SomeWrapper>
-        <ProseMirrorDoc as={<article />} />
+        <ProseMirrorDoc as="article" />
       </SomeWrapper>
       <Footnotes />
     </ProseMirror>
@@ -639,7 +675,9 @@ interface NodeViewComponentProps extends AllHTMLAttributes<HTMLElement> = {
     innerDecorations: DecorationSource;
     node: Node;
     getPos: () => number;
+    contentDOMRef: Exclude<Ref<any>, null>;
   };
+  ref: LegacyRef<any>;
 };
 ```
 
@@ -650,10 +688,36 @@ by the default ProseMirror EditorView implementation.
 
 Node view components may also be passed _any_ other valid HTML attribute props,
 and should pass them through to their top-level DOM element.
+
+In addition to accepting these props, all node view components _must_ pass their
+ref to their top-level DOM element. All node view components that render their
+`children` _must_ pass `nodeProps.contentDOMRef` to the parent element of
+`children`.
+
 [See the above example](#building-node-views-with-react) for more details.
 
-In addition to accepting these props, all node view components _must_ forward
-their ref to their top-level DOM element.
+### `useNodePos`
+
+```ts
+type useNodePos = () => number;
+```
+
+Like prosemirror-view’s `NodeViewConstructor` API, React ProseMirror passes a
+`getPos` function to all node view components. This function will return the
+current position of the node in the document.
+
+`getPos` is guaranteed to always return the correct value for the current node,
+but it will not subscribe a node view component to updates to its position. This
+means that _it is only safe to use `getPos` in a callback or effect_. It is
+_not_ safe to use in a render function, because changes to the node's position
+will not trigger a re-render of the node view component.
+
+It’s best to avoid relying on the node’s position in the render function,
+because that will require that your node view component re-render on every
+update to the document. But if you have an infrequently used node, or small
+enough documents that you don't have to worry about this, you can use the
+`useNodePos` function to get an up-to-date node position after every document
+update.
 
 ### `useStopEvent`
 
@@ -715,10 +779,10 @@ components.
 
 A [command](https://prosemirror.net/docs/ref/#state.Command) creator that can be
 used to reorder adjacent nodes in a document. The command creator takes two
-argumnts:
+arguments:
 
-- `pos` - The `start` position of the parent of the nodes being reordered
-- `order` - The new order for the nodes, expressed as an array of indices. For
+- `pos` — The `start` position of the parent of the nodes being reordered
+- `order` — The new order for the nodes, expressed as an array of indices. For
   example, to swap the first two nodes in a set of three, `order` would be set
   to `[1, 0, 2]`. To move the first node to the end, and keep the other two in
   relative order, set `order` to `[1, 2, 0]`.
@@ -746,6 +810,7 @@ component remounts.
 ## Migrations
 
 - [Migrating from v1 to v2](migration-guides/v2.md)
+- [Migrating from v2 to v3](migration-guides/v3.md)
 
 ## Looking for someone to collaborate with?
 

package/dist/cjs/StaticEditorView.js

@@ -27,9 +27,6 @@ let StaticEditorView = class StaticEditorView {
     get state() {
         return this.props.state;
     }
-    get isDestroyed() {
-        return false;
-    }
     setProps(props) {
         return this.update({
             ...this.props,

package/dist/cjs/components/ChildNodeViews.js

@@ -17,11 +17,12 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _iterDeco = require("../decorations/iterDeco.js");
 const _useReactKeys = require("../hooks/useReactKeys.js");
 const _props = require("../props.js");
+const _viewdesc = require("../viewdesc.js");
 const _NativeWidgetView = require("./NativeWidgetView.js");
 const _SeparatorHackView = require("./SeparatorHackView.js");
 const _TextNodeView = require("./TextNodeView.js");
@@ -82,8 +83,7 @@ function wrapInDeco(reactNode, deco) {
     return /*#__PURE__*/ (0, _react.cloneElement)(reactNode, (0, _props.mergeReactProps)(reactNode.props, props));
 }
 function areChildrenEqual(a, b) {
-    return a.type === b.type && a.marks.every((mark)=>mark.isInSet(b.marks)) && b.marks.every((mark)=>mark.isInSet(a.marks)) && a.key === b.key && (a.type === "node" ? a.outerDeco?.length === b.outerDeco?.length && a.outerDeco?.every((prevDeco)=>b.outerDeco?.some((nextDeco)=>prevDeco.from === nextDeco.from && prevDeco.to && nextDeco.to && // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            prevDeco.type.eq(nextDeco.type))) && a.innerDeco.eq(b.innerDeco) : true) && a.node === b.node && a.widget === b.widget;
+    return a.type === b.type && a.marks.every((mark)=>mark.isInSet(b.marks)) && b.marks.every((mark)=>mark.isInSet(a.marks)) && a.key === b.key && (a.type !== "node" || b.type !== "node" || a.node.eq(b.node) && (0, _viewdesc.sameOuterDeco)(a.outerDeco, b.outerDeco) && a.innerDeco.eq(b.innerDeco)) && a.widget === b.widget;
 }
 const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     let { child, getInnerPos } = param;
@@ -106,7 +106,7 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     }) : child.type === "hack" ? /*#__PURE__*/ _react.default.createElement(child.component, {
         key: child.key,
         getPos: getPos
-    }) : child.node.isText ? /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Consumer, {
+    }) : child.node.isText ? /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Consumer, {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;

package/dist/cjs/components/NativeWidgetView.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "NativeWidgetView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
 const _useEditorEffect = require("../hooks/useEditorEffect.js");
 const _viewdesc = require("../viewdesc.js");
@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function NativeWidgetView(param) {
     let { widget, getPos } = param;
-    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const rootDomRef = (0, _react.useRef)(null);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{

package/dist/cjs/components/OutputSpec.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "OutputSpec", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _props = require("../props.js");
+const _refs = require("../refs.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -72,7 +73,8 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return false;
 }
 const ForwardedOutputSpec = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forwardRef)(function OutputSpec(param, ref) {
-    let { outputSpec, isMark, children, ...propOverrides } = param;
+    let { outputSpec, isMark, contentDOMRef, children, ...propOverrides } = param;
+    const mergedRef = (0, _refs.useMergedDOMRefs)(ref, contentDOMRef);
     if (typeof outputSpec === "string") {
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, outputSpec);
     }
@@ -98,10 +100,14 @@ const ForwardedOutputSpec = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _re
             if (i < outputSpec.length - 1 || i > start) {
                 throw new RangeError("Content hole must be the only child of its parent node");
             }
-            return /*#__PURE__*/ (0, _react.createElement)(tagName, props, children);
+            return /*#__PURE__*/ (0, _react.createElement)(tagName, {
+                ...props,
+                ref: ref ? mergedRef : contentDOMRef
+            }, children);
         }
         content.push(/*#__PURE__*/ _react.default.createElement(ForwardedOutputSpec, {
-            outputSpec: child
+            outputSpec: child,
+            contentDOMRef: contentDOMRef
         }, children));
     }
     // https://prosemirror.net/docs/ref/#model.MarkSpec.toDOM
@@ -109,6 +115,7 @@ const ForwardedOutputSpec = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _re
     // marked content is placed. Otherwise, it is appended to the top node.
     if (isMark && !hasHole(outputSpec)) {
         content.push(children);
+        props.ref = mergedRef;
     }
     return /*#__PURE__*/ (0, _react.createElement)(tagName, props, ...content);
 }));

package/dist/cjs/components/ProseMirror.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "ProseMirror", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _EditorStateContext = require("../contexts/EditorStateContext.js");
 const _NodeViewContext = require("../contexts/NodeViewContext.js");
@@ -62,7 +62,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 function getPos() {
     return -1;
 }
-const rootChildDescriptorsContextValue = {
+const rootChildDescriptionsContextValue = {
     parentRef: {
         current: undefined
     },
@@ -71,39 +71,33 @@ const rootChildDescriptorsContextValue = {
     }
 };
 function ProseMirrorInner(param) {
-    let { className, children, nodeViews, customNodeViews, markViews, customMarkViews, ...props } = param;
+    let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
-    const { editor, state } = (0, _useEditor.useEditor)(mount, {
-        ...props,
-        nodeViews: customNodeViews,
-        markViews: customMarkViews
-    });
+    const { editor, state } = (0, _useEditor.useEditor)(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = (0, _react.useMemo)(()=>{
         return {
             components: {
-                ...nodeViews,
-                ...markViews
+                ...nodeViewComponents,
+                ...markViewComponents
             },
             constructors: nodeViewConstructors
         };
     }, [
-        markViews,
-        nodeViewConstructors,
-        nodeViews
+        markViewComponents,
+        nodeViewComponents,
+        nodeViewConstructors
     ]);
     const node = state.doc;
     const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
     const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
     const docNodeViewContextValue = (0, _react.useMemo)(()=>({
-            className,
             setMount,
             node,
             getPos,
             decorations,
             innerDecorations
         }), [
-        className,
         node,
         decorations,
         innerDecorations
@@ -114,8 +108,8 @@ function ProseMirrorInner(param) {
         value: state
     }, /*#__PURE__*/ _react.default.createElement(_NodeViewContext.NodeViewContext.Provider, {
         value: nodeViewContextValue
-    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
-        value: rootChildDescriptorsContextValue
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
+        value: rootChildDescriptionsContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
     }, children)))));

package/dist/cjs/components/SeparatorHackView.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "SeparatorHackView", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _browser = require("../browser.js");
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -56,7 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function SeparatorHackView(param) {
     let { getPos } = param;
-    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
     const [shouldRender, setShouldRender] = (0, _react.useState)(false);

package/dist/cjs/components/TrailingHackView.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "TrailingHackView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -55,7 +55,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TrailingHackView(param) {
     let { getPos } = param;
-    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{

package/dist/cjs/components/WidgetView.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "WidgetView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -55,7 +55,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function WidgetView(param) {
     let { widget, getPos } = param;
-    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const domRef = (0, _react.useRef)(null);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{

package/dist/cjs/components/marks/DefaultMarkView.js

@@ -52,7 +52,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DefaultMarkView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultMarkView(param, ref) {
-    let { markProps: { mark, inline }, children, ...props } = param;
+    let { markProps: { mark, inline, contentDOMRef }, children, ...props } = param;
     const spec = (0, _react.useMemo)(()=>mark.type.spec.toDOM?.(mark, inline), [
         mark,
         inline
@@ -63,6 +63,7 @@ const DefaultMarkView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultMar
     return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
         ...props,
         outputSpec: spec,
+        contentDOMRef: contentDOMRef,
         ref: ref,
         isMark: true
     }, children);

package/dist/cjs/components/marks/MarkView.js

@@ -10,8 +10,8 @@ Object.defineProperty(exports, "MarkView", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _NodeViewContext = require("../../contexts/NodeViewContext.js");
-const _CustomMarkView = require("./CustomMarkView.js");
 const _DefaultMarkView = require("./DefaultMarkView.js");
+const _MarkViewConstructorView = require("./MarkViewConstructorView.js");
 const _ReactMarkView = require("./ReactMarkView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -65,7 +65,7 @@ const MarkView = /*#__PURE__*/ (0, _react.memo)(function MarkView(props) {
     const Component = (0, _react.useMemo)(()=>{
         if (constructor) {
             return function MarkView(props) {
-                return /*#__PURE__*/ _react.default.createElement(_CustomMarkView.CustomMarkView, {
+                return /*#__PURE__*/ _react.default.createElement(_MarkViewConstructorView.MarkViewConstructorView, {
                     constructor: constructor,
                     ...props
                 });