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

package/dist/cjs/hooks/{useNodeViewDescriptor.js → useNodeViewDescription.js}

@@ -2,35 +2,30 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useNodeViewDescriptor", {
+Object.defineProperty(exports, "useNodeViewDescription", {
     enumerable: true,
     get: function() {
-        return useNodeViewDescriptor;
+        return useNodeViewDescription;
     }
 });
 const _react = require("react");
 const _ReactEditorView = require("../ReactEditorView.js");
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useEffectEvent = require("./useEffectEvent.js");
-function findContentDOM(source, children) {
-    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
-}
-function useNodeViewDescriptor(ref, constructor, props) {
+function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
-    const [dom, setDOM] = (0, _react.useState)(null);
-    const [nodeDOM, setNodeDOM] = (0, _react.useState)(null);
-    const [contentDOM, setContentDOM] = (0, _react.useState)(null);
+    const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
+    const contentDOMRef = (0, _react.useRef)(null);
     const viewDescRef = (0, _react.useRef)();
     const childrenRef = (0, _react.useRef)([]);
     const create = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -41,12 +36,15 @@ function useNodeViewDescriptor(ref, constructor, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(nodeView, children);
+        const contentDOM = getContentDOM(nodeView);
         const nodeDOM = nodeView.dom;
         const viewDesc = new _viewdesc.ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
-        setNodeDOM(nodeDOM);
+        const siblings = siblingsRef.current;
+        if (!siblings.includes(viewDesc)) {
+            siblings.push(viewDesc);
+        }
+        siblings.sort(_viewdesc.sortViewDescs);
+        contentDOMRef.current = getContentDOM(nodeView);
         return viewDesc;
     });
     const update = (0, _useEffectEvent.useEffectEvent)(()=>{
@@ -57,11 +55,11 @@ function useNodeViewDescriptor(ref, constructor, props) {
         if (!viewDesc) {
             return false;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
-        const contentDOM = findContentDOM(viewDesc, viewDesc.children);
+        const contentDOM = getContentDOM(viewDesc);
         if (contentDOM !== viewDesc.contentDOM) {
             return false;
         }
@@ -82,9 +80,7 @@ function useNodeViewDescriptor(ref, constructor, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
-        setNodeDOM(null);
+        contentDOMRef.current = null;
     });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         viewDescRef.current = create();
@@ -95,6 +91,17 @@ function useNodeViewDescriptor(ref, constructor, props) {
         create,
         destroy
     ]);
+    const refUpdated = (0, _react.useCallback)(()=>{
+        if (!viewDescRef.current) return;
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!update()) {
             destroy();
@@ -146,9 +153,7 @@ function useNodeViewDescriptor(ref, constructor, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        nodeDOM,
-        ref
+        contentDOM: contentDOMRef.current,
+        refUpdated
     };
 }

package/dist/cjs/index.js

@@ -43,6 +43,12 @@ _export(exports, {
     useIsNodeSelected: function() {
         return _useIsNodeSelected.useIsNodeSelected;
     },
+    useMergedDOMRefs: function() {
+        return _refs.useMergedDOMRefs;
+    },
+    useNodePos: function() {
+        return _useNodePos.useNodePos;
+    },
     useSelectNode: function() {
         return _useSelectNode.useSelectNode;
     },
@@ -60,6 +66,7 @@ const _useEditorEffect = require("./hooks/useEditorEffect.js");
 const _useEditorEventCallback = require("./hooks/useEditorEventCallback.js");
 const _useEditorEventListener = require("./hooks/useEditorEventListener.js");
 const _useEditorState = require("./hooks/useEditorState.js");
+const _useNodePos = require("./hooks/useNodePos.js");
 const _useStopEvent = require("./hooks/useStopEvent.js");
 const _useSelectNode = require("./hooks/useSelectNode.js");
 const _useIgnoreMutation = require("./hooks/useIgnoreMutation.js");
@@ -67,3 +74,4 @@ const _useIsEditorStatic = require("./hooks/useIsEditorStatic.js");
 const _useIsNodeSelected = require("./hooks/useIsNodeSelected.js");
 const _reactKeys = require("./plugins/reactKeys.js");
 const _ReactWidgetType = require("./decorations/ReactWidgetType.js");
+const _refs = require("./refs.js");

package/dist/cjs/refs.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMergedDOMRefs", {
+    enumerable: true,
+    get: function() {
+        return useMergedDOMRefs;
+    }
+});
+const _react = require("react");
+function useMergedDOMRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return (0, _react.useCallback)((value)=>{
+        refs.forEach((ref)=>{
+            if (typeof ref === "function") {
+                ref(value);
+                return;
+            }
+            if (ref) {
+                ref.current = value;
+            }
+        });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, refs);
+}

package/dist/cjs/viewdesc.js

@@ -18,6 +18,9 @@ _export(exports, {
     NodeViewDesc: function() {
         return NodeViewDesc;
     },
+    ReactMarkViewDesc: function() {
+        return ReactMarkViewDesc;
+    },
     ReactNodeViewDesc: function() {
         return ReactNodeViewDesc;
     },
@@ -33,6 +36,9 @@ _export(exports, {
     WidgetViewDesc: function() {
         return WidgetViewDesc;
     },
+    sameOuterDeco: function() {
+        return sameOuterDeco;
+    },
     sortViewDescs: function() {
         return sortViewDescs;
     }
@@ -724,23 +730,30 @@ let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
         }
     }
     selectNode() {
-        this.spec.selectNode ? this.spec.selectNode.call(this) : super.selectNode();
+        this.spec.selectNode ? this.spec.selectNode() : super.selectNode();
     }
     deselectNode() {
-        this.spec.deselectNode ? this.spec.deselectNode.call(this) : super.deselectNode();
+        this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode();
     }
     setSelection(anchor, head, view, force) {
-        this.spec.setSelection ? this.spec.setSelection.call(this, anchor, head, view.root) : super.setSelection(anchor, head, view, force);
+        this.spec.setSelection ? this.spec.setSelection(anchor, head, view.root) : super.setSelection(anchor, head, view, force);
     }
     destroy() {
         if (this.spec.destroy) this.spec.destroy();
         super.destroy();
     }
     stopEvent(event) {
-        return this.spec.stopEvent ? this.spec.stopEvent.call(this, event) : false;
+        return this.spec.stopEvent ? this.spec.stopEvent(event) : false;
     }
     ignoreMutation(mutation) {
-        return this.spec.ignoreMutation ? this.spec.ignoreMutation.call(this, mutation) : super.ignoreMutation(mutation);
+        return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
+    }
+};
+let ReactMarkViewDesc = class ReactMarkViewDesc extends MarkViewDesc {
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
     }
 };
 let ReactNodeViewDesc = class ReactNodeViewDesc extends CustomNodeViewDesc {

package/dist/esm/StaticEditorView.js

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

package/dist/esm/components/ChildNodeViews.js

@@ -1,9 +1,10 @@
 import React, { cloneElement, createElement, memo, useCallback, useContext, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { iterDeco } from "../decorations/iterDeco.js";
 import { useReactKeys } from "../hooks/useReactKeys.js";
 import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+import { sameOuterDeco } from "../viewdesc.js";
 import { NativeWidgetView } from "./NativeWidgetView.js";
 import { SeparatorHackView } from "./SeparatorHackView.js";
 import { TextNodeView } from "./TextNodeView.js";
@@ -23,8 +24,7 @@ export function wrapInDeco(reactNode, deco) {
     return /*#__PURE__*/ cloneElement(reactNode, 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) && sameOuterDeco(a.outerDeco, b.outerDeco) && a.innerDeco.eq(b.innerDeco)) && a.widget === b.widget;
 }
 const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     let { child, getInnerPos } = param;
@@ -47,7 +47,7 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     }) : child.type === "hack" ? /*#__PURE__*/ React.createElement(child.component, {
         key: child.key,
         getPos: getPos
-    }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Consumer, {
+    }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Consumer, {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;

package/dist/esm/components/NativeWidgetView.js

@@ -1,11 +1,11 @@
 import React, { useContext, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 import { WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
 export function NativeWidgetView(param) {
     let { widget, getPos } = param;
-    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const rootDomRef = useRef(null);
     useClientLayoutEffect(()=>{

package/dist/esm/components/OutputSpec.js

@@ -1,5 +1,6 @@
 import React, { createElement, forwardRef, memo } from "react";
 import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+import { useMergedDOMRefs } from "../refs.js";
 /**
  * Whether an output spec contains a hole
  */ function hasHole(outputSpec) {
@@ -21,7 +22,8 @@ import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
     return false;
 }
 const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function OutputSpec(param, ref) {
-    let { outputSpec, isMark, children, ...propOverrides } = param;
+    let { outputSpec, isMark, contentDOMRef, children, ...propOverrides } = param;
+    const mergedRef = useMergedDOMRefs(ref, contentDOMRef);
     if (typeof outputSpec === "string") {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, outputSpec);
     }
@@ -47,10 +49,14 @@ const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
             if (i < outputSpec.length - 1 || i > start) {
                 throw new RangeError("Content hole must be the only child of its parent node");
             }
-            return /*#__PURE__*/ createElement(tagName, props, children);
+            return /*#__PURE__*/ createElement(tagName, {
+                ...props,
+                ref: ref ? mergedRef : contentDOMRef
+            }, children);
         }
         content.push(/*#__PURE__*/ React.createElement(ForwardedOutputSpec, {
-            outputSpec: child
+            outputSpec: child,
+            contentDOMRef: contentDOMRef
         }, children));
     }
     // https://prosemirror.net/docs/ref/#model.MarkSpec.toDOM
@@ -58,6 +64,7 @@ const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
     // marked content is placed. Otherwise, it is appended to the top node.
     if (isMark && !hasHole(outputSpec)) {
         content.push(children);
+        props.ref = mergedRef;
     }
     return /*#__PURE__*/ createElement(tagName, props, ...content);
 }));

package/dist/esm/components/ProseMirror.js

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { EditorStateContext } from "../contexts/EditorStateContext.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
@@ -11,7 +11,7 @@ import { DocNodeViewContext } from "./ProseMirrorDoc.js";
 function getPos() {
     return -1;
 }
-const rootChildDescriptorsContextValue = {
+const rootChildDescriptionsContextValue = {
     parentRef: {
         current: undefined
     },
@@ -20,39 +20,33 @@ const rootChildDescriptorsContextValue = {
     }
 };
 function ProseMirrorInner(param) {
-    let { className, children, nodeViews, customNodeViews, markViews, customMarkViews, ...props } = param;
+    let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = useState(null);
-    const { editor, state } = useEditor(mount, {
-        ...props,
-        nodeViews: customNodeViews,
-        markViews: customMarkViews
-    });
+    const { editor, state } = useEditor(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = useMemo(()=>{
         return {
             components: {
-                ...nodeViews,
-                ...markViews
+                ...nodeViewComponents,
+                ...markViewComponents
             },
             constructors: nodeViewConstructors
         };
     }, [
-        markViews,
-        nodeViewConstructors,
-        nodeViews
+        markViewComponents,
+        nodeViewComponents,
+        nodeViewConstructors
     ]);
     const node = state.doc;
     const decorations = computeDocDeco(editor.view);
     const innerDecorations = viewDecorations(editor.view, editor.cursorWrapper);
     const docNodeViewContextValue = useMemo(()=>({
-            className,
             setMount,
             node,
             getPos,
             decorations,
             innerDecorations
         }), [
-        className,
         node,
         decorations,
         innerDecorations
@@ -63,8 +57,8 @@ function ProseMirrorInner(param) {
         value: state
     }, /*#__PURE__*/ React.createElement(NodeViewContext.Provider, {
         value: nodeViewContextValue
-    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: rootChildDescriptorsContextValue
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
+        value: rootChildDescriptionsContextValue
     }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
     }, children)))));

package/dist/esm/components/SeparatorHackView.js

@@ -1,11 +1,11 @@
 import React, { useContext, useRef, useState } from "react";
 import { browser } from "../browser.js";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
 export function SeparatorHackView(param) {
     let { getPos } = param;
-    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const ref = useRef(null);
     const [shouldRender, setShouldRender] = useState(false);

package/dist/esm/components/TrailingHackView.js

@@ -1,10 +1,10 @@
 import React, { useContext, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
 export function TrailingHackView(param) {
     let { getPos } = param;
-    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const ref = useRef(null);
     useClientLayoutEffect(()=>{

package/dist/esm/components/WidgetView.js

@@ -1,10 +1,10 @@
 import React, { useContext, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
 import { WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
 export function WidgetView(param) {
     let { widget, getPos } = param;
-    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const domRef = useRef(null);
     useClientLayoutEffect(()=>{

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

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from "react";
 import { OutputSpec } from "../OutputSpec.js";
 export const DefaultMarkView = /*#__PURE__*/ forwardRef(function DefaultMarkView(param, ref) {
-    let { markProps: { mark, inline }, children, ...props } = param;
+    let { markProps: { mark, inline, contentDOMRef }, children, ...props } = param;
     const spec = useMemo(()=>mark.type.spec.toDOM?.(mark, inline), [
         mark,
         inline
@@ -12,6 +12,7 @@ export const DefaultMarkView = /*#__PURE__*/ forwardRef(function DefaultMarkView
     return /*#__PURE__*/ React.createElement(OutputSpec, {
         ...props,
         outputSpec: spec,
+        contentDOMRef: contentDOMRef,
         ref: ref,
         isMark: true
     }, children);

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

@@ -1,7 +1,7 @@
 import React, { memo, useContext, useMemo } from "react";
 import { NodeViewContext } from "../../contexts/NodeViewContext.js";
-import { CustomMarkView } from "./CustomMarkView.js";
 import { DefaultMarkView } from "./DefaultMarkView.js";
+import { MarkViewConstructorView } from "./MarkViewConstructorView.js";
 import { ReactMarkView } from "./ReactMarkView.js";
 export const MarkView = /*#__PURE__*/ memo(function MarkView(props) {
     const { components, constructors } = useContext(NodeViewContext);
@@ -14,7 +14,7 @@ export const MarkView = /*#__PURE__*/ memo(function MarkView(props) {
     const Component = useMemo(()=>{
         if (constructor) {
             return function MarkView(props) {
-                return /*#__PURE__*/ React.createElement(CustomMarkView, {
+                return /*#__PURE__*/ React.createElement(MarkViewConstructorView, {
                     constructor: constructor,
                     ...props
                 });

package/dist/esm/components/marks/{CustomMarkView.js → MarkViewConstructorView.js}

@@ -1,16 +1,21 @@
 import { DOMSerializer } from "prosemirror-model";
 import React, { memo, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
-import { ChildDescriptorsContext } from "../../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
 import { useMarkViewDescription } from "../../hooks/useMarkViewDescription.js";
-export const CustomMarkView = /*#__PURE__*/ memo(function CustomMarkView(param) {
+export const MarkViewConstructorView = /*#__PURE__*/ memo(function MarkViewConstructorView(param) {
     let { constructor, mark, inline, getPos, children } = param;
     const ref = useRef(null);
     const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
     const markProps = useMemo(()=>({
             mark,
             inline,
-            getPos
+            getPos,
+            contentDOMRef: {
+                current: null
+            }
         }), [
         mark,
         inline,
@@ -30,13 +35,17 @@ export const CustomMarkView = /*#__PURE__*/ memo(function CustomMarkView(param)
         }
         return markView;
     };
-    const { childContextValue, contentDOM } = useMarkViewDescription(ref, function() {
+    const { childContextValue, contentDOM } = useMarkViewDescription(()=>ref.current, (markView)=>markView?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
         const markView = createMarkView(...args);
         const dom = markView.dom;
         const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(dom);
+        // Force a re-render so that we properly create
+        // a portal into the contentDOM/dom
+        forceUpdate();
         return {
             ...markView,
             destroy () {
@@ -50,7 +59,7 @@ export const CustomMarkView = /*#__PURE__*/ memo(function CustomMarkView(param)
     const props = {
         ref: innerRef
     };
-    return /*#__PURE__*/ React.createElement(Component, props, contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    return /*#__PURE__*/ React.createElement(Component, props, contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, children), contentDOM) : null);
 });

package/dist/esm/components/marks/ReactMarkView.js

@@ -1,10 +1,11 @@
 import React, { memo, useCallback, useMemo, useRef } from "react";
-import { ChildDescriptorsContext } from "../../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
 import { IgnoreMutationContext } from "../../contexts/IgnoreMutationContext.js";
 import { useMarkViewDescription } from "../../hooks/useMarkViewDescription.js";
 export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
     let { component: Component, mark, inline, getPos, children } = param;
     const ref = useRef(null);
+    const contentDOMRef = useRef(null);
     const ignoreMutationRef = useRef(null);
     const setIgnoreMutation = useCallback((handler)=>{
         ignoreMutationRef.current = handler;
@@ -15,7 +16,7 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
             };
         };
     }, []);
-    const markProps = useMemo(()=>({
+    const markViewDescProps = useMemo(()=>({
             mark,
             getPos,
             inline
@@ -24,7 +25,7 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
         inline,
         mark
     ]);
-    const { childContextValue } = useMarkViewDescription(ref, ()=>({
+    const { childContextValue, refUpdated } = useMarkViewDescription(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
@@ -33,14 +34,33 @@ export const ReactMarkView = /*#__PURE__*/ memo(function ReactMarkView(param) {
                 }
                 return false;
             }
-        }), markProps);
+        }), markViewDescProps);
+    const setDOM = useCallback((el)=>{
+        ref.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setContentDOM = useCallback((el)=>{
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const markProps = useMemo(()=>({
+            ...markViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        markViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         markProps,
-        ref
+        ref: setDOM
     };
     return /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
         value: setIgnoreMutation
-    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(Component, props, children)));
 });

package/dist/esm/components/nodes/DefaultNodeView.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useMemo } from "react";
 import { OutputSpec } from "../OutputSpec.js";
 export const DefaultNodeView = /*#__PURE__*/ forwardRef(function DefaultNodeView(param, ref) {
-    let { nodeProps: { node }, children, ...props } = param;
+    let { nodeProps: { node, contentDOMRef }, children, ...props } = param;
     const spec = useMemo(()=>node.type.spec.toDOM?.(node), [
         node
     ]);
@@ -11,6 +11,7 @@ export const DefaultNodeView = /*#__PURE__*/ forwardRef(function DefaultNodeView
     return /*#__PURE__*/ React.createElement(OutputSpec, {
         ...props,
         outputSpec: spec,
-        ref: ref
+        ref: ref,
+        contentDOMRef: contentDOMRef
     }, children);
 });