@handlewithcare/react-prosemirror 2.4.12 → 2.5.1

package/dist/esm/ReactEditorView.js

@@ -0,0 +1,156 @@
+import { EditorView } from "prosemirror-view";
+import { EMPTY_STATE } from "./constants.js";
+function buildNodeViews(view) {
+    const result = Object.create(null);
+    function add(obj) {
+        for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        result[prop] = obj[prop];
+    }
+    view.someProp("nodeViews", add);
+    view.someProp("markViews", add);
+    return result;
+}
+function changedNodeViews(a, b) {
+    let nA = 0, nB = 0;
+    for(const prop in a){
+        if (a[prop] != b[prop]) return true;
+        nA++;
+    }
+    for(const _ in b)nB++;
+    return nA != nB;
+}
+/**
+ * Extends EditorView to make prop and state updates pure, remove the DOM
+ * Mutation Observer, and use a custom document view managed by React.
+ *
+ * @privateRemarks
+ *
+ * The implementation relies on the base class using a private member to store
+ * the committed props and having a public getter that we override to return the
+ * latest, uncommitted props. The base class can then be told to update when the
+ * React effects are commit an update, applying the pending, uncommitted props.
+ */ export class ReactEditorView extends EditorView {
+    nextProps;
+    prevState;
+    constructor(place, props){
+        // Prevent the base class from destroying the React-managed nodes.
+        // Restore them below after invoking the base class constructor.
+        const reactContent = [
+            ...place.mount.childNodes
+        ];
+        // Prevent the base class from mutating the React-managed attributes.
+        // Restore them below after invoking the base class constructor.
+        const reactAttrs = [
+            ...place.mount.attributes
+        ];
+        for (const attr of reactAttrs){
+            place.mount.removeAttributeNode(attr);
+        }
+        try {
+            // Call the superclass constructor with only a state and no plugins.
+            // We'll set everything else ourselves and apply props during layout.
+            super(place, {
+                state: EMPTY_STATE
+            });
+            this.domObserver.stop();
+            this.domObserver.observer = null;
+            this.domObserver.queue = [];
+        } finally{
+            place.mount.replaceChildren(...reactContent);
+            for (const attr of place.mount.attributes){
+                place.mount.removeAttributeNode(attr);
+            }
+            for (const attr of reactAttrs){
+                place.mount.setAttributeNode(attr);
+            }
+        }
+        this.prevState = EMPTY_STATE;
+        this.nextProps = props;
+        this.state = props.state;
+        this.nodeViews = buildNodeViews(this);
+        // Destroy the document view description that the base class makes.
+        // A React document view will assign itself to this attribute later.
+        this.docView.destroy();
+        // @ts-expect-error this violates the typing but class does it, too.
+        this.docView = null;
+    }
+    get props() {
+        return this.nextProps;
+    }
+    setProps(props) {
+        this.update({
+            ...this.props,
+            ...props
+        });
+    }
+    update(props) {
+        const prevProps = this.nextProps;
+        this.nextProps = props;
+        this.state = props.state;
+        if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins || prevProps.nodeViews !== props.nodeViews) {
+            const nodeViews = buildNodeViews(this);
+            if (changedNodeViews(this.nodeViews, nodeViews)) {
+                this.nodeViews = nodeViews;
+            }
+        }
+        this.editable = !this.someProp("editable", (value)=>value(this.state) === false);
+    }
+    updateState(state) {
+        this.setProps({
+            state
+        });
+    }
+    someProp(propName, f) {
+        if (!this.props) {
+            // The base class constructor calls this method before props are set.
+            return undefined;
+        }
+        const prop = this.props[propName];
+        if (prop) {
+            const result = f ? f(prop) : prop;
+            if (result) {
+                return result;
+            }
+        }
+        for (const plugin of this.props.plugins ?? []){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        for (const plugin of this.state.plugins){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+   * Commit effects by appling the pending props and state.
+   *
+   * Ensures the DOM selection is correct and updates plugin views.
+   *
+   * @privateRemarks
+   *
+   * The correctness of this depends on the pure update function ensuring that
+   * the node view set is up to date so that it does not try to redraw.
+   */ commitPendingEffects() {
+        // This class tracks state eagerly but the base class does it lazily.
+        // Temporarily roll it back so the base class can handle the updates.
+        this.state = this.prevState;
+        // Force the base class to try to update the document. React updated it, but
+        // this ensures that the base class validates the DOM selection and invokes
+        // node view selection callbacks.
+        this.docView.markDirty(-1, -1);
+        super.update(this.nextProps);
+        // Store the new previous state.
+        this.prevState = this.state;
+    }
+}

package/dist/esm/StaticEditorView.js

@@ -0,0 +1,76 @@
+export class StaticEditorView {
+    props;
+    nodeViews;
+    constructor(props){
+        this.props = props;
+        this.nodeViews = {};
+    }
+    get composing() {
+        return false;
+    }
+    get dom() {
+        return null;
+    }
+    get editable() {
+        return false;
+    }
+    get state() {
+        return this.props.state;
+    }
+    setProps(props) {
+        return this.update({
+            ...this.props,
+            ...props
+        });
+    }
+    update(props) {
+        this.props = props;
+    }
+    updateState(state) {
+        this.setProps({
+            state
+        });
+    }
+    someProp(propName, f) {
+        const prop = this.props[propName];
+        if (prop) {
+            const result = f ? f(prop) : prop;
+            if (result) {
+                return result;
+            }
+        }
+        for (const plugin of this.props.plugins ?? []){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        for (const plugin of this.state.plugins){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    destroy() {
+    // pass
+    }
+    domSelectionRange() {
+        return {
+            anchorNode: null,
+            anchorOffset: 0,
+            focusNode: null,
+            focusOffset: 0
+        };
+    }
+    domSelection() {
+        return null;
+    }
+}

package/dist/esm/components/ChildNodeViews.js

@@ -1,8 +1,7 @@
-import React, { cloneElement, createElement, memo, useContext, useRef } from "react";
+import React, { cloneElement, createElement, memo, useCallback, useContext, useRef } from "react";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { iterDeco } from "../decorations/iterDeco.js";
-// import { useEditorState } from "../hooks/useEditorState.js";
 import { useReactKeys } from "../hooks/useReactKeys.js";
 import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
 import { MarkView } from "./MarkView.js";
@@ -24,21 +23,30 @@ 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 && 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" ? 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;
 }
 const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     let { child, getInnerPos } = param;
     const { view } = useContext(EditorContext);
-    const getChildPos = useRef(()=>getInnerPos.current() + child.offset);
-    getChildPos.current = ()=>getInnerPos.current() + child.offset;
+    const childRef = useRef(child);
+    childRef.current = child;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     return child.type === "widget" ? /*#__PURE__*/ React.createElement(WidgetView, {
         key: child.key,
         widget: child.widget,
-        getPos: getChildPos
+        getPos: getPos
     }) : child.type === "native-widget" ? /*#__PURE__*/ React.createElement(NativeWidgetView, {
         key: child.key,
         widget: child.widget,
-        getPos: getChildPos
+        getPos: getPos
+    }) : child.type === "hack" ? /*#__PURE__*/ React.createElement(child.component, {
+        key: child.key,
+        getPos: getPos
     }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Consumer, {
         key: child.key
     }, (param)=>{
@@ -46,7 +54,7 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
         return /*#__PURE__*/ React.createElement(TextNodeView, {
             view: view,
             node: child.node,
-            getPos: getChildPos,
+            getPos: getPos,
             siblingsRef: siblingsRef,
             parentRef: parentRef,
             decorations: child.outerDeco
@@ -54,7 +62,7 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     }) : /*#__PURE__*/ React.createElement(NodeView, {
         key: child.key,
         node: child.node,
-        getPos: getChildPos,
+        getPos: getPos,
         outerDeco: child.outerDeco,
         innerDeco: child.innerDeco
     });
@@ -62,8 +70,13 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
 const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
     let { childViews, getInnerPos } = param;
     const firstChild = childViews[0];
-    const getFirstChildPos = useRef(()=>getInnerPos.current() + firstChild.offset);
-    getFirstChildPos.current = ()=>getInnerPos.current() + firstChild.offset;
+    const firstChildRef = useRef(firstChild);
+    firstChildRef.current = firstChild;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + firstChildRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     const firstMark = firstChild.marks[0];
     if (!firstMark) {
         return /*#__PURE__*/ React.createElement(React.Fragment, null, childViews.map((child)=>{
@@ -75,9 +88,9 @@ const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
         }));
     }
     return /*#__PURE__*/ React.createElement(MarkView, {
-        getPos: getFirstChildPos,
         key: firstChild.key,
-        mark: firstMark
+        mark: firstMark,
+        getPos: getPos
     }, /*#__PURE__*/ React.createElement(InlineView, {
         key: firstChild.key,
         getInnerPos: getInnerPos,
@@ -135,7 +148,7 @@ const InlineView = /*#__PURE__*/ memo(function InlineView(param) {
         });
     }));
 });
-function createKey(innerPos, offset, type, posToKey, widget, index) {
+function createKey(innerPos, offset, index, type, posToKey, widget) {
     const pos = innerPos + offset;
     const key = posToKey?.get(pos);
     if (type === "widget" || type === "native-widget") {
@@ -179,18 +192,23 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
 }
 const ChildElement = /*#__PURE__*/ memo(function ChildElement(param) {
     let { child, getInnerPos } = param;
-    const getNodePos = useRef(()=>getInnerPos.current() + child.offset);
-    getNodePos.current = ()=>getInnerPos.current() + child.offset;
+    const childRef = useRef(child);
+    childRef.current = child;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     if (child.type === "node") {
         return child.marks.reduce((element, mark)=>/*#__PURE__*/ React.createElement(MarkView, {
-                getPos: getNodePos,
-                mark: mark
+                mark: mark,
+                getPos: getPos
             }, element), /*#__PURE__*/ React.createElement(NodeView, {
             key: child.key,
             outerDeco: child.outerDeco,
             node: child.node,
             innerDeco: child.innerDeco,
-            getPos: getNodePos
+            getPos: getPos
         }));
     } else {
         return /*#__PURE__*/ React.createElement(InlineView, {
@@ -224,9 +242,10 @@ function createChildElements(children, getInnerPos) {
 }
 export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param) {
     let { getPos, node, innerDecorations } = param;
-    // const editorState = useEditorState();
     const reactKeys = useReactKeys();
-    const getInnerPos = useRef(()=>getPos.current() + 1);
+    const getInnerPos = useCallback(()=>getPos() + 1, [
+        getPos
+    ]);
     const childMap = useRef(new Map()).current;
     if (!node) return null;
     const keysSeen = new Map();
@@ -237,7 +256,7 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
         const widgetMarks = widget.type.spec.marks ?? [];
         let key;
         if (isNative) {
-            key = createKey(getInnerPos.current(), offset, "native-widget", reactKeys?.posToKey, widget, index);
+            key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys?.posToKey, widget);
             const child = {
                 type: "native-widget",
                 widget,
@@ -254,7 +273,7 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
             }
             keysSeen.set(key, keysSeen.size);
         } else {
-            key = createKey(getInnerPos.current(), offset, "widget", reactKeys?.posToKey, widget, index);
+            key = createKey(getInnerPos(), offset, index, "widget", reactKeys?.posToKey, widget);
             const child = {
                 type: "widget",
                 widget: widget,
@@ -274,8 +293,8 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
         const child = childMap.get(key);
         widgetChildren.push(child);
         adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
-    }, (childNode, outerDeco, innerDeco, offset)=>{
-        const key = createKey(getInnerPos.current(), offset, "node", reactKeys?.posToKey);
+    }, (childNode, outerDeco, innerDeco, offset, index)=>{
+        const key = createKey(getInnerPos(), offset, index, "node", reactKeys?.posToKey);
         const child = {
             type: "node",
             node: childNode,
@@ -283,6 +302,7 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
             innerDeco,
             outerDeco,
             offset,
+            index,
             key
         };
         const prevChild = childMap.get(key);
@@ -306,20 +326,28 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
     // step
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     (a, b)=>keysSeen.get(a.key) - keysSeen.get(b.key));
-    const childElements = createChildElements(children, getInnerPos);
     if (node.isTextblock) {
         const lastChild = children[children.length - 1];
         if (!lastChild || lastChild.type !== "node" || lastChild.node.isInline && !lastChild.node.isText || // RegExp.test actually handles undefined just fine
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         /\n$/.test(lastChild.node.text)) {
-            childElements.push(/*#__PURE__*/ React.createElement(SeparatorHackView, {
-                getPos: getInnerPos,
+            children.push({
+                type: "hack",
+                component: SeparatorHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-img"
-            }), /*#__PURE__*/ React.createElement(TrailingHackView, {
-                getPos: getInnerPos,
+            }, {
+                type: "hack",
+                component: TrailingHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-br"
-            }));
+            });
         }
     }
+    const childElements = createChildElements(children, getInnerPos);
     return /*#__PURE__*/ React.createElement(React.Fragment, null, childElements);
 });

package/dist/esm/components/CustomNodeView.js

@@ -1,153 +1,93 @@
-import { NodeSelection } from "prosemirror-state";
-import React, { cloneElement, createElement, memo, useContext, useMemo, useRef } from "react";
+import { DOMSerializer } from "prosemirror-model";
+import React, { cloneElement, createElement, memo, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
-import { EditorContext } from "../contexts/EditorContext.js";
-import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
-import { useClientOnly } from "../hooks/useClientOnly.js";
-import { useForceUpdate } from "../hooks/useForceUpdate.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param) {
-    let { customNodeView, node, getPos, innerDeco, outerDeco } = param;
-    const { view } = useContext(EditorContext);
-    const domRef = useRef(null);
-    const nodeDomRef = useRef(null);
-    const contentDomRef = useRef(null);
-    const getPosFunc = useRef(()=>getPos.current()).current;
-    const nodeRef = useRef(node);
-    nodeRef.current = node;
-    const outerDecoRef = useRef(outerDeco);
-    outerDecoRef.current = outerDeco;
-    const innerDecoRef = useRef(innerDeco);
-    innerDecoRef.current = innerDeco;
-    const customNodeViewRootRef = useRef(null);
-    const customNodeViewRef = useRef(null);
-    const forceUpdate = useForceUpdate();
-    const isOnClient = useClientOnly();
-    // In Strict/Concurrent mode, layout effects can be destroyed/re-run
-    // independently of renders. We need to ensure that if the
-    // destructor that destroys the node view is called, we then recreate
-    // the node view when the layout effect is re-run.
-    useClientLayoutEffect(()=>{
-        if (!customNodeViewRef.current) {
-            customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
-            // this line if customNodeView is set
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
-            if (customNodeViewRef.current.stopEvent) {
-                setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
-            }
-            if (customNodeViewRef.current.selectNode) {
-                setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
-            }
-            if (customNodeViewRef.current.ignoreMutation) {
-                setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
-            }
-            // If we've reconstructed the nodeview, then we need to
-            // recreate the portal into its contentDOM, which happens
-            // during the render. So we need to trigger a re-render!
-            forceUpdate();
-        }
-        if (!customNodeViewRootRef.current) return;
-        const { dom } = customNodeViewRef.current;
-        if (customNodeViewRootRef.current.firstChild === dom) {
-            return;
-        }
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-        // Layout effects can run multiple times — if this effect
-        // destroyed and recreated this node view, then we need to
-        // resync the selectNode state
-        if (view?.state.selection instanceof NodeSelection && view.state.selection.node === nodeRef.current) {
-            customNodeViewRef.current.selectNode?.();
-        }
-        const nodeView = customNodeViewRef.current;
-        return ()=>{
-            nodeView.destroy?.();
-            customNodeViewRef.current = null;
-        };
-    // setStopEvent, setSelectNodee, and setIgnoreMutation are all stable
-    // functions and don't need to be added to the dependencies. They also
-    // can't be, because they come from useNodeViewDescriptor, which
-    // _has_ to be called after this hook, so that the effects run
-    // in the correct order
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [
-        customNodeView,
-        getPosFunc,
-        view
-    ]);
-    useClientLayoutEffect(()=>{
-        if (!customNodeView || !customNodeViewRef.current) return;
-        const { destroy, update } = customNodeViewRef.current;
-        const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
-        if (updated) return;
-        destroy?.call(customNodeViewRef.current);
-        if (!customNodeViewRootRef.current) return;
-        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
-        // this line if customNodeView is set
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, getPosFunc, outerDecoRef.current, innerDecoRef.current);
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-    }, [
-        customNodeView,
-        view,
-        innerDeco,
+    let { constructor, node, getPos, innerDeco, outerDeco } = param;
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const [selected, setSelected] = useState(false);
+    const nodeProps = useMemo(()=>({
+            node,
+            getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
         node,
-        outerDeco,
         getPos,
-        getPosFunc
-    ]);
-    const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = useNodeViewDescriptor(node, getPosFunc, domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
+        outerDeco,
+        innerDeco
     ]);
-    if (!isOnClient) return null;
-    // In order to render the correct element with the correct
-    // props below, we have to call the customNodeView in the
-    // render function here. We only do this once, and the
-    // results are stored in a ref but not actually appended
-    // to the DOM until a client effect
-    if (!customNodeViewRef.current) {
-        customNodeViewRef.current = customNodeView(nodeRef.current, // customNodeView will only be set if view is set, and we can only reach
-        // this line if customNodeView is set
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        view, ()=>getPos.current(), outerDecoRef.current, innerDecoRef.current);
-        if (customNodeViewRef.current.stopEvent) {
-            setStopEvent(customNodeViewRef.current.stopEvent.bind(customNodeViewRef.current));
+    const createNodeView = function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
         }
-        if (customNodeViewRef.current.selectNode) {
-            setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+        const nodeView = constructor(...args);
+        if (!nodeView || !nodeView.dom) {
+            const spec = node.type.spec.toDOM?.(node);
+            if (!spec) {
+                throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+            }
+            return DOMSerializer.renderSpec(document, spec, null);
         }
-        if (customNodeViewRef.current.ignoreMutation) {
-            setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+        return nodeView;
+    };
+    const { childContextValue, contentDOM } = useNodeViewDescriptor(ref, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
         }
-    }
-    const { contentDOM } = customNodeViewRef.current;
-    contentDomRef.current = contentDOM ?? null;
-    const element = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
-        ref: customNodeViewRootRef,
-        contentEditable: !!contentDOM,
-        suppressContentEditableWarning: true
-    }, contentDOM && /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildNodeViews, {
+        setSelected(false);
+        const nodeView = createNodeView(...args);
+        const contentDOM = nodeView.contentDOM;
+        const nodeDOM = nodeView.dom;
+        const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(nodeDOM);
+        if (!contentDOM && nodeDOM instanceof HTMLElement && nodeDOM.tagName !== "BR") {
+            if (!nodeDOM.hasAttribute("contenteditable")) {
+                nodeDOM.contentEditable = "false";
+            }
+        }
+        return {
+            ...nodeView,
+            destroy () {
+                if (nodeView.destroy) {
+                    nodeView.destroy();
+                }
+                wrapperDOM.removeChild(nodeDOM);
+            },
+            selectNode: nodeView.selectNode?.bind(nodeView) ?? (()=>{
+                if (nodeDOM instanceof HTMLElement) {
+                    nodeDOM.classList.add("ProseMirror-selectednode");
+                }
+                setSelected(true);
+            }),
+            deselectNode: nodeView.deselectNode?.bind(nodeView) ?? (()=>{
+                if (nodeDOM instanceof HTMLElement) {
+                    nodeDOM.classList.remove("ProseMirror-selectednode");
+                }
+                setSelected(false);
+            }),
+            stopEvent: nodeView.stopEvent?.bind(nodeView),
+            ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
+        };
+    }, nodeProps);
+    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
         getPos: getPos,
         node: node,
         innerDecorations: innerDeco
-    }), contentDOM));
-    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
-        ref: domRef
-    } : // we've already passed the domRef to the NodeView component
-    // as a prop
-    undefined);
-    return /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement);
+    })), contentDOM) : null;
+    const innerElement = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
+        ref: innerRef
+    }, children);
+    const props = {
+        ...selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref
+    };
+    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
 });