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

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

@@ -1,6 +1,6 @@
-import React, { cloneElement, createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
-import { ChildDescriptorsContext } from "../../contexts/ChildDescriptorsContext.js";
-import { useNodeViewDescriptor } from "../../hooks/useNodeViewDescriptor.js";
+import React, { createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
 import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
 export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function DocNodeView(param, ref) {
     let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
@@ -11,14 +11,15 @@ export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
             node,
             getPos,
             decorations,
-            innerDecorations
+            innerDecorations,
+            contentDOMRef: innerRef
         }), [
         node,
         getPos,
         decorations,
         innerDecorations
     ]);
-    const { childContextValue } = useNodeViewDescriptor(innerRef, ()=>{
+    const { childContextValue } = useNodeViewDescription(()=>innerRef.current, ()=>innerRef.current, ()=>{
         const dom = innerRef.current;
         return {
             dom,
@@ -28,7 +29,7 @@ export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
             }
         };
     }, nodeProps);
-    const children = /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    const children = /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,
@@ -40,6 +41,6 @@ export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
         suppressContentEditableWarning: true,
         ref: innerRef
     };
-    const element = as ? /*#__PURE__*/ cloneElement(as, props, children) : /*#__PURE__*/ createElement("div", props, children);
+    const element = as ? /*#__PURE__*/ createElement(as, props, children) : /*#__PURE__*/ createElement("div", props, children);
     return nodeProps.decorations.reduce(wrapInDeco, element);
 }));

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

@@ -1,7 +1,7 @@
-import React, { memo, useContext, useMemo } from "react";
+import React, { createContext, memo, useContext, useMemo } from "react";
 import { NodeViewContext } from "../../contexts/NodeViewContext.js";
-import { CustomNodeView } from "./CustomNodeView.js";
 import { DefaultNodeView } from "./DefaultNodeView.js";
+import { NodeViewConstructorView } from "./NodeViewConstructorView.js";
 import { ReactNodeView } from "./ReactNodeView.js";
 export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
     const { components, constructors } = useContext(NodeViewContext);
@@ -14,7 +14,7 @@ export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
     const Component = useMemo(()=>{
         if (constructor) {
             return function NodeView(props) {
-                return /*#__PURE__*/ React.createElement(CustomNodeView, {
+                return /*#__PURE__*/ React.createElement(NodeViewConstructorView, {
                     constructor: constructor,
                     ...props
                 });
@@ -31,5 +31,8 @@ export const NodeView = /*#__PURE__*/ memo(function NodeView(props) {
         constructor,
         component
     ]);
-    return /*#__PURE__*/ React.createElement(Component, props);
+    return /*#__PURE__*/ React.createElement(GetPosContext.Provider, {
+        value: props.getPos
+    }, /*#__PURE__*/ React.createElement(Component, props));
 });
+export const GetPosContext = /*#__PURE__*/ createContext(null);

package/dist/esm/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js}

@@ -1,18 +1,23 @@
 import { DOMSerializer } from "prosemirror-model";
 import React, { cloneElement, memo, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
-import { ChildDescriptorsContext } from "../../contexts/ChildDescriptorsContext.js";
-import { useNodeViewDescriptor } from "../../hooks/useNodeViewDescriptor.js";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
 import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
-export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param) {
+export const NodeViewConstructorView = /*#__PURE__*/ memo(function NodeViewConstructorView(param) {
     let { constructor, node, getPos, innerDeco, outerDeco } = param;
     const ref = useRef(null);
     const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
     const nodeProps = useMemo(()=>({
             node,
             getPos,
             decorations: outerDeco,
-            innerDecorations: innerDeco
+            innerDecorations: innerDeco,
+            contentDOMRef: {
+                current: null
+            }
         }), [
         node,
         getPos,
@@ -33,7 +38,7 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         }
         return nodeView;
     };
-    const { childContextValue, contentDOM } = useNodeViewDescriptor(ref, function() {
+    const { childContextValue, contentDOM } = useNodeViewDescription(()=>ref.current, (source)=>source?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -50,14 +55,22 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
                 nodeDOM.draggable = true;
             }
         }
+        if (contentDOM) {
+            // Force a re-render if we have a contentDOM,
+            // so that we properly create a portal into it
+            forceUpdate();
+        }
         return {
-            ...nodeView,
             destroy () {
                 if (nodeView.destroy) {
                     nodeView.destroy();
                 }
                 wrapperDOM.removeChild(nodeDOM);
             },
+            dom: nodeView.dom,
+            contentDOM: nodeView.contentDOM,
+            multiType: nodeView.multiType,
+            update: nodeView.update?.bind(nodeView),
             selectNode: nodeView.selectNode?.bind(nodeView),
             deselectNode: nodeView.deselectNode?.bind(nodeView),
             stopEvent: nodeView.stopEvent?.bind(nodeView),
@@ -68,7 +81,7 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
     const props = {
         ref: innerRef
     };
-    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,

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

@@ -1,16 +1,19 @@
 import React, { cloneElement, memo, useCallback, useMemo, useRef, useState } from "react";
-import { ChildDescriptorsContext } from "../../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
 import { IgnoreMutationContext } from "../../contexts/IgnoreMutationContext.js";
 import { SelectNodeContext } from "../../contexts/SelectNodeContext.js";
 import { StopEventContext } from "../../contexts/StopEventContext.js";
-import { useNodeViewDescriptor } from "../../hooks/useNodeViewDescriptor.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
+import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
 import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
 export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
     const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
     const [selected, setSelected] = useState(false);
-    const ref = useRef(null);
-    const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
+    const domRef = useRef(null);
+    const nodeDOMRef = useRef(null);
+    const contentDOMRef = useRef(null);
     const selectNodeRef = useRef(null);
     const deselectNodeRef = useRef(null);
     const stopEventRef = useRef(null);
@@ -40,7 +43,7 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             };
         };
     }, []);
-    const nodeProps = useMemo(()=>({
+    const nodeViewDescProps = useMemo(()=>({
             node: node,
             getPos: getPos,
             decorations: outerDeco,
@@ -51,10 +54,10 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         node,
         outerDeco
     ]);
-    const { childContextValue, contentDOM, nodeDOM } = useNodeViewDescriptor(ref, ()=>{
+    const { childContextValue, refUpdated } = useNodeViewDescription(()=>domRef.current, ()=>contentDOMRef.current, ()=>{
         setSelected(false);
         return {
-            dom: innerRef.current ?? ref.current,
+            dom: nodeDOMRef.current ?? domRef.current,
             update () {
                 return true;
             },
@@ -62,46 +65,85 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             selectNode () {
                 const selectNode = selectNodeRef.current;
                 if (selectNode) {
-                    selectNode.call(this);
+                    selectNode();
                 }
                 setSelected(true);
             },
             deselectNode () {
                 const deselectNode = deselectNodeRef.current;
                 if (deselectNode) {
-                    deselectNode.call(this);
+                    deselectNode();
                 }
                 setSelected(false);
             },
             stopEvent (event) {
                 const stopEvent = stopEventRef.current;
                 if (stopEvent) {
-                    return stopEvent.call(this, event);
+                    return stopEvent(event);
                 }
                 return false;
             },
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation.call(this, mutation);
+                    return ignoreMutation(mutation);
                 }
                 return false;
             }
         };
-    }, nodeProps);
+    }, nodeViewDescProps);
+    const setDOM = useCallback((el)=>{
+        domRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setNodeDOM = useCallback((el)=>{
+        if (!!nodeDOMRef.current !== !!el) {
+            // Force a re-render if the existence of nodeDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        nodeDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const setContentDOM = useCallback((el)=>{
+        if (!!contentDOMRef.current !== !!el) {
+            // Force a re-render if the existence of contentDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const nodeProps = useMemo(()=>({
+            ...nodeViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        nodeViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         nodeProps,
-        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+        ...!contentDOMRef.current && !nodeProps.node.isText && nodeDOMRef.current?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,
         ...!hasCustomSelectNode && selected ? {
             className: "ProseMirror-selectednode"
         } : null,
-        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
+        ...!hasCustomSelectNode && selected || !contentDOMRef.current && !nodeProps.node.isText && domRef.current?.nodeName !== "BR" && node.type.spec.draggable ? {
             draggable: true
         } : null,
-        ref: innerRef
+        ref: setNodeDOM
     };
     const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,
@@ -109,7 +151,7 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         innerDecorations: innerDeco
     }) : null;
     const element = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
-        ref
+        ref: setDOM
     });
     return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
         value: setSelectNode
@@ -117,7 +159,7 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         value: setStopEvent
     }, /*#__PURE__*/ React.createElement(IgnoreMutationContext.Provider, {
         value: setIgnoreMutation
-    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+    }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, element))));
 });

package/dist/esm/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js}

@@ -1,5 +1,5 @@
 import { createContext } from "react";
-export const ChildDescriptorsContext = createContext({
+export const ChildDescriptionsContext = createContext({
     parentRef: {
         current: undefined
     },

package/dist/esm/hooks/useEditor.js

@@ -101,11 +101,7 @@ let didWarnValueDefaultValue = false;
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof ReactEditorView && !view.isDestroyed) {
-            // Plugins might dispatch transactions from their
-            // view update lifecycle hooks
-            flushSyncRef.current = false;
             view.commitPendingEffects();
-            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/esm/hooks/useEditorEffect.js

@@ -15,10 +15,6 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
  * synchronously after all DOM mutations, but they do so
  * _after_ the EditorView has been updated, even when the
  * EditorView lives in an ancestor component.
- *
- * This hook can only be used in a component that is mounted
- * as a child of the TiptapEditorView component, including
- * React node view components.
  */ export function useEditorEffect(effect, dependencies) {
     const { view, flushSyncRef } = useContext(EditorContext);
     // The rules of hooks want `effect` to be included in the

package/dist/esm/hooks/useEditorEventCallback.js

@@ -15,9 +15,11 @@ function assertIsReactEditorView(view) {
  * The callback will be called with the EditorView instance
  * as its first argument.
  *
- * This hook can only be used in a component that is mounted
- * as a child of the TiptapEditorView component, including
- * React node view components.
+ * This hook is dependent on both the
+ * `EditorViewContext.Provider` and the
+ * `DeferredLayoutEffectProvider`. It can only be used in a
+ * component that is mounted as a child of both of these
+ * providers.
  */ export function useEditorEventCallback(callback) {
     const ref = useRef(callback);
     const { view } = useContext(EditorContext);
@@ -31,7 +33,7 @@ function assertIsReactEditorView(view) {
             args[_key] = arguments[_key];
         }
         assertIsReactEditorView(view);
-        return ref.current.call(this, view, ...args);
+        return ref.current(view, ...args);
     }, [
         view
     ]);

package/dist/esm/hooks/useMarkViewDescription.js

@@ -1,25 +1,21 @@
-import { useContext, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { MarkViewDesc, sortViewDescs } from "../viewdesc.js";
+import { ReactMarkViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
-function findContentDOM(source, children, dom) {
-    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? dom;
-}
-export function useMarkViewDescription(ref, constructor, props) {
+export function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = useContext(EditorContext);
-    const { parentRef, siblingsRef } = useContext(ChildDescriptorsContext);
-    const [dom, setDOM] = useState(null);
-    const [contentDOM, setContentDOM] = useState(null);
+    const { parentRef, siblingsRef } = useContext(ChildDescriptionsContext);
+    const contentDOMRef = useRef(null);
     const viewDescRef = useRef();
     const childrenRef = useRef([]);
     const create = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -30,10 +26,9 @@ export function useMarkViewDescription(ref, constructor, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(markView, children, ref.current);
-        const viewDesc = new MarkViewDesc(parent, children, getPos, mark, dom, contentDOM, markView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
+        const contentDOM = getContentDOM(markView);
+        const viewDesc = new ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        contentDOMRef.current = contentDOM;
         return viewDesc;
     });
     const update = useEffectEvent(()=>{
@@ -44,12 +39,12 @@ export function useMarkViewDescription(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, dom);
-        if (contentDOM !== viewDesc.contentDOM) {
+        const contentDOM = getContentDOM(viewDesc);
+        if (contentDOM !== (viewDesc.contentDOM ?? dom)) {
             return false;
         }
         const { mark } = props;
@@ -66,8 +61,7 @@ export function useMarkViewDescription(ref, constructor, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
+        contentDOMRef.current = null;
     });
     useClientLayoutEffect(()=>{
         viewDescRef.current = create();
@@ -78,6 +72,16 @@ export function useMarkViewDescription(ref, constructor, props) {
         create,
         destroy
     ]);
+    const refUpdated = useCallback(()=>{
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     useClientLayoutEffect(()=>{
         if (!update()) {
             destroy();
@@ -108,8 +112,7 @@ export function useMarkViewDescription(ref, constructor, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        ref
+        contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,
+        refUpdated
     };
 }

package/dist/esm/hooks/useNodePos.js

@@ -0,0 +1,15 @@
+import { useContext } from "react";
+import { GetPosContext } from "../components/nodes/NodeView.js";
+import { useEditorState } from "./useEditorState.js";
+/**
+ * Get this node's current position in the document.
+ *
+ * Using this hook will subscribe this node to the
+ * EditorState, which means that it will be re-rendered
+ * on every EditorState update. This may have performance
+ * implications for large documents.
+ */ export function useNodePos() {
+    useEditorState();
+    const getPos = useContext(GetPosContext);
+    return getPos();
+}

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

@@ -1,26 +1,21 @@
-import { useContext, useMemo, useRef, useState } from "react";
+import { useCallback, useContext, useMemo, useRef } from "react";
 import { ReactEditorView } from "../ReactEditorView.js";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
 import { useEffectEvent } from "./useEffectEvent.js";
-function findContentDOM(source, children) {
-    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
-}
-export function useNodeViewDescriptor(ref, constructor, props) {
+export function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = useContext(EditorContext);
-    const { parentRef, siblingsRef } = useContext(ChildDescriptorsContext);
-    const [dom, setDOM] = useState(null);
-    const [nodeDOM, setNodeDOM] = useState(null);
-    const [contentDOM, setContentDOM] = useState(null);
+    const { parentRef, siblingsRef } = useContext(ChildDescriptionsContext);
+    const contentDOMRef = useRef(null);
     const viewDescRef = useRef();
     const childrenRef = useRef([]);
     const create = useEffectEvent(()=>{
         if (!(view instanceof ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -31,12 +26,15 @@ export 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 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(sortViewDescs);
+        contentDOMRef.current = getContentDOM(nodeView);
         return viewDesc;
     });
     const update = useEffectEvent(()=>{
@@ -47,11 +45,11 @@ export 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;
         }
@@ -72,9 +70,7 @@ export function useNodeViewDescriptor(ref, constructor, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
-        setNodeDOM(null);
+        contentDOMRef.current = null;
     });
     useClientLayoutEffect(()=>{
         viewDescRef.current = create();
@@ -85,6 +81,17 @@ export function useNodeViewDescriptor(ref, constructor, props) {
         create,
         destroy
     ]);
+    const refUpdated = useCallback(()=>{
+        if (!viewDescRef.current) return;
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     useClientLayoutEffect(()=>{
         if (!update()) {
             destroy();
@@ -136,9 +143,7 @@ export function useNodeViewDescriptor(ref, constructor, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        nodeDOM,
-        ref
+        contentDOM: contentDOMRef.current,
+        refUpdated
     };
 }

package/dist/esm/index.js

@@ -6,6 +6,7 @@ export { useEditorEffect } from "./hooks/useEditorEffect.js";
 export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
 export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
+export { useNodePos } from "./hooks/useNodePos.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
 export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";
@@ -13,3 +14,4 @@ export { useIsEditorStatic } from "./hooks/useIsEditorStatic.js";
 export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
 export { reactKeys } from "./plugins/reactKeys.js";
 export { widget } from "./decorations/ReactWidgetType.js";
+export { useMergedDOMRefs } from "./refs.js";

package/dist/esm/refs.js

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+export function useMergedDOMRefs() {
+    for(var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++){
+        refs[_key] = arguments[_key];
+    }
+    return 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/esm/viewdesc.js

@@ -711,25 +711,32 @@ 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);
     }
 };
+export class ReactMarkViewDesc extends MarkViewDesc {
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
+    }
+}
 export class ReactNodeViewDesc extends CustomNodeViewDesc {
     updateChildren(_view, _pos) {
     // React has already updated the children.
@@ -744,7 +751,7 @@ export class ReactNodeViewDesc extends CustomNodeViewDesc {
         super.destroy();
     }
 }
-function sameOuterDeco(a, b) {
+export function sameOuterDeco(a, b) {
     if (a.length != b.length) return false;
     // @ts-expect-error ...
     for(let i = 0; i < a.length; i++)if (!a[i].type.eq(b[i].type)) return false;