@handlewithcare/react-prosemirror 2.5.0 → 2.5.2

package/dist/cjs/components/ReactNodeView.js

@@ -11,12 +11,10 @@ Object.defineProperty(exports, "ReactNodeView", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
 const _IgnoreMutationContext = require("../contexts/IgnoreMutationContext.js");
-const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
 const _StopEventContext = require("../contexts/StopEventContext.js");
 const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
-const _OutputSpec = require("./OutputSpec.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -59,23 +57,40 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
-    let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = (0, _react.useRef)(null);
-    const nodeDomRef = (0, _react.useRef)(null);
-    const contentDomRef = (0, _react.useRef)(null);
-    const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
-        node
-    ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPos, domRef, nodeDomRef, innerDeco, outerDeco, contentDomRef);
-    const finalProps = {
-        ...props,
-        ...!hasContentDOM && nodeDomRef.current?.tagName !== "BR" && {
-            contentEditable: false
-        }
-    };
+    let { component: Component, outerDeco, getPos, node, innerDeco } = param;
+    const [controlSelected, setControlSelected] = (0, _react.useState)(false);
+    const [selected, setSelected] = (0, _react.useState)(false);
+    const ref = (0, _react.useRef)(null);
+    const innerRef = (0, _react.useRef)(null);
+    const selectNodeRef = (0, _react.useRef)(null);
+    const deselectNodeRef = (0, _react.useRef)(null);
+    const stopEventRef = (0, _react.useRef)(null);
+    const ignoreMutationRef = (0, _react.useRef)(null);
+    const setSelectNode = (0, _react.useCallback)((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setControlSelected(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setControlSelected(false);
+        };
+    }, []);
+    const setStopEvent = (0, _react.useCallback)((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = (0, _react.useCallback)((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
     const nodeProps = (0, _react.useMemo)(()=>({
             node: node,
             getPos: getPos,
@@ -87,45 +102,68 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         node,
         outerDeco
     ]);
-    if (Component) {
-        element = /*#__PURE__*/ _react.default.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else {
-        if (outputSpec) {
-            element = /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
-    }
-    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.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);
-    const childContextValue = (0, _react.useMemo)(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
+    const { childContextValue, contentDOM, nodeDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, ()=>{
+        setSelected(false);
+        return {
+            dom: innerRef.current ?? ref.current,
+            update () {
+                return true;
+            },
+            multiType: true,
+            selectNode () {
+                const selectNode = selectNodeRef.current;
+                if (selectNode) {
+                    selectNode();
+                }
+                setSelected(true);
+            },
+            deselectNode () {
+                const deselectNode = deselectNodeRef.current;
+                if (deselectNode) {
+                    deselectNode();
+                }
+                setSelected(false);
+            },
+            stopEvent (event) {
+                const stopEvent = stopEventRef.current;
+                if (stopEvent) {
+                    return stopEvent(event);
+                }
+                return false;
+            },
+            ignoreMutation (mutation) {
+                const ignoreMutation = ignoreMutationRef.current;
+                if (ignoreMutation) {
+                    return ignoreMutation(mutation);
+                }
+                return false;
+            }
+        };
+    }, nodeProps);
+    const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const innerProps = {
+        nodeProps,
+        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+            contentEditable: false,
+            suppressContentEditableWarning: true
+        } : null,
+        ...controlSelected && selected ? {
+            className: "ProseMirror-selectednode"
+        } : null,
+        ref: innerRef
+    };
+    const innerElement = /*#__PURE__*/ _react.default.createElement(Component, innerProps, children);
+    const props = {
+        ...controlSelected && selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref
+    };
+    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
     return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {

package/dist/cjs/hooks/useEditor.js

@@ -21,7 +21,7 @@ let didWarnValueDefaultValue = false;
 function useEditor(mount, options) {
     if (process.env.NODE_ENV !== "production") {
         if (options.defaultState !== undefined && options.state !== undefined && !didWarnValueDefaultValue) {
-            console.error("A component contains a ProseMirror editor with both value and defaultValue props. " + "ProseMirror editors must be either controlled or uncontrolled " + "(specify either the state prop, or the defaultState prop, but not both). " + "Decide between using a controlled or uncontrolled ProseMirror editor " + "and remove one of these props. More info: " + "https://reactjs.org/link/controlled-components");
+            console.error("A component contains a ProseMirror editor with both state and defaultState props. " + "ProseMirror editors must be either controlled or uncontrolled " + "(specify either the state prop, or the defaultState prop, but not both). " + "Decide between using a controlled or uncontrolled ProseMirror editor " + "and remove one of these props. More info: " + "https://reactjs.org/link/controlled-components");
             didWarnValueDefaultValue = true;
         }
     }

package/dist/cjs/hooks/useIgnoreMutation.js

@@ -16,7 +16,7 @@ function useIgnoreMutation(ignoreMutation) {
     const register = (0, _react.useContext)(_IgnoreMutationContext.IgnoreMutationContext);
     const ignoreMutationMemo = (0, _useEditorEventCallback.useEditorEventCallback)(ignoreMutation);
     (0, _useEditorEffect.useEditorEffect)(()=>{
-        register(ignoreMutationMemo);
+        return register(ignoreMutationMemo);
     }, [
         register,
         ignoreMutationMemo

package/dist/cjs/hooks/useNodeViewDescriptor.js

@@ -9,111 +9,154 @@ Object.defineProperty(exports, "useNodeViewDescriptor", {
     }
 });
 const _react = require("react");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
-function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, contentDOMRef) {
+function findContentDOM(source, children) {
+    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
+}
+function useNodeViewDescriptor(ref, constructor, props) {
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const [hasContentDOM, setHasContentDOM] = (0, _react.useState)(true);
-    const nodeViewDescRef = (0, _react.useRef)();
-    const stopEvent = (0, _react.useRef)(()=>false);
-    const setStopEvent = (0, _react.useCallback)((newStopEvent)=>{
-        stopEvent.current = newStopEvent;
-    }, []);
-    const ignoreMutation = (0, _react.useRef)(()=>false);
-    const setIgnoreMutation = (0, _react.useCallback)((newIgnoreMutation)=>{
-        ignoreMutation.current = newIgnoreMutation;
-    }, []);
-    const selectNode = (0, _react.useRef)(()=>{
-        if (!nodeDomRef.current) return;
-        if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
-        if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).draggable = true;
-    });
-    const deselectNode = (0, _react.useRef)(()=>{
-        if (!nodeDomRef.current) return;
-        if (nodeDomRef.current.nodeType == 1) {
-            nodeDomRef.current.classList.remove("ProseMirror-selectednode");
-            if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).removeAttribute("draggable");
+    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 viewDescRef = (0, _react.useRef)();
+    const childrenRef = (0, _react.useRef)([]);
+    const create = (0, _react.useCallback)((props)=>{
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
+            return;
         }
-    });
-    const setSelectNode = (0, _react.useCallback)((newSelectNode, newDeselectNode)=>{
-        selectNode.current = newSelectNode;
-        deselectNode.current = newDeselectNode;
-    }, []);
-    const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
-    const childDescriptors = (0, _react.useRef)([]);
-    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        const dom = ref.current;
+        if (!dom) {
+            return;
+        }
+        const { node, getPos, decorations, innerDecorations } = props;
+        const nodeView = constructor(node, view, getPos, decorations, innerDecorations);
+        if (!nodeView) {
+            return;
+        }
+        const parent = parentRef.current;
+        const children = childrenRef.current;
+        const contentDOM = findContentDOM(nodeView, children);
+        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);
+        return viewDesc;
+    }, [
+        ref,
+        parentRef,
+        constructor,
+        view
+    ]);
+    const update = (0, _react.useCallback)((props)=>{
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
+            return false;
+        }
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return false;
+        }
+        const dom = ref.current;
+        if (!dom || dom !== viewDesc.dom) {
+            return false;
+        }
+        const contentDOM = findContentDOM(viewDesc, viewDesc.children);
+        if (contentDOM !== viewDesc.contentDOM) {
+            return false;
+        }
+        if (!dom.contains(viewDesc.nodeDOM)) {
+            return false;
+        }
+        const { node, decorations, innerDecorations } = props;
+        return viewDesc.matchesNode(node, decorations, innerDecorations) || viewDesc.update(node, decorations, innerDecorations, view);
+    }, [
+        ref,
+        view
+    ]);
+    const destroy = (0, _react.useCallback)(()=>{
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return;
+        }
+        viewDesc.destroy();
         const siblings = siblingsRef.current;
-        return ()=>{
-            if (!nodeViewDescRef.current) return;
-            if (siblings.includes(nodeViewDescRef.current)) {
-                const index = siblings.indexOf(nodeViewDescRef.current);
-                siblings.splice(index, 1);
-            }
-        };
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+        setDOM(null);
+        setContentDOM(null);
+        setNodeDOM(null);
     }, [
         siblingsRef
     ]);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!nodeDomRef.current) return;
-        const firstChildDesc = childDescriptors.current[0];
-        if (!nodeViewDescRef.current) {
-            nodeViewDescRef.current = new _viewdesc.NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, contentDOMRef?.current ?? firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current(), (mutation)=>ignoreMutation.current(mutation));
-        } else {
-            nodeViewDescRef.current.parent = parentRef.current;
-            nodeViewDescRef.current.children = childDescriptors.current;
-            nodeViewDescRef.current.node = node;
-            nodeViewDescRef.current.outerDeco = outerDecorations;
-            nodeViewDescRef.current.innerDeco = innerDecorations;
-            nodeViewDescRef.current.dom = domRef?.current ?? nodeDomRef.current;
-            nodeViewDescRef.current.dom.pmViewDesc = nodeViewDescRef.current;
-            nodeViewDescRef.current.contentDOM = // If there's already a contentDOM, we can just
-            // keep it; it won't have changed. This is especially
-            // important during compositions, where the
-            // firstChildDesc might not have a correct dom node set yet.
-            contentDOMRef?.current ?? nodeViewDescRef.current.contentDOM ?? firstChildDesc?.dom.parentElement ?? null;
-            nodeViewDescRef.current.nodeDOM = nodeDomRef.current;
+        if (!update(props)) {
+            destroy();
+            viewDescRef.current = create(props);
+        }
+        const viewDesc = viewDescRef.current;
+        if (!viewDesc) {
+            return;
         }
-        setHasContentDOM(nodeViewDescRef.current.contentDOM !== null);
-        if (!siblingsRef.current.includes(nodeViewDescRef.current)) {
-            siblingsRef.current.push(nodeViewDescRef.current);
+        if (view.dom === viewDesc.dom && view instanceof _ReactEditorView.ReactEditorView) {
+            view.docView = viewDesc;
+        }
+        const parent = parentRef.current;
+        const siblings = siblingsRef.current;
+        const children = childrenRef.current;
+        viewDesc.parent = parent;
+        if (!siblings.includes(viewDesc)) {
+            siblings.push(viewDesc);
         }
-        siblingsRef.current.sort(_viewdesc.sortViewDescs);
-        for (const childDesc of childDescriptors.current){
-            childDesc.parent = nodeViewDescRef.current;
+        siblings.sort(_viewdesc.sortViewDescs);
+        for (const child of children){
+            child.parent = viewDesc;
             // Because TextNodeViews can't locate the DOM nodes
             // for compositions, we need to override them here
-            if (childDesc instanceof _viewdesc.CompositionViewDesc) {
-                const compositionTopDOM = nodeViewDescRef.current.contentDOM?.firstChild;
+            if (child instanceof _viewdesc.CompositionViewDesc) {
+                const compositionTopDOM = viewDesc?.contentDOM?.firstChild;
                 if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
                 let textDOM = compositionTopDOM;
                 while(textDOM.firstChild){
                     textDOM = textDOM.firstChild;
                 }
                 if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-                childDesc.dom = compositionTopDOM;
-                childDesc.textDOM = textDOM;
-                childDesc.text = textDOM.data;
-                childDesc.textDOM.pmViewDesc = childDesc;
+                child.dom = compositionTopDOM;
+                child.textDOM = textDOM;
+                child.text = textDOM.data;
+                child.textDOM.pmViewDesc = child;
                 // It should not be possible to be in a composition because one could
                 // not start between the renders that switch the view type.
-                view.input.compositionNodes.push(childDesc);
+                view.input.compositionNodes.push(child);
             }
         }
+    });
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         return ()=>{
-            if (nodeViewDescRef.current?.children[0] instanceof _viewdesc.CompositionViewDesc && !view.composing) {
-                nodeViewDescRef.current?.children[0].dom.parentNode?.removeChild(nodeViewDescRef.current?.children[0].dom);
-            }
+            destroy();
+            viewDescRef.current = undefined;
         };
-    });
+    }, [
+        destroy
+    ]);
+    const childContextValue = (0, _react.useMemo)(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childrenRef
+        }), [
+        childrenRef,
+        viewDescRef
+    ]);
     return {
-        hasContentDOM,
-        childDescriptors,
-        nodeViewDescRef,
-        setStopEvent,
-        setSelectNode,
-        setIgnoreMutation
+        childContextValue,
+        dom,
+        contentDOM,
+        nodeDOM,
+        ref
     };
 }

package/dist/cjs/hooks/useSelectNode.js

@@ -12,17 +12,19 @@ const _react = require("react");
 const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
 const _useEditorEffect = require("./useEditorEffect.js");
 const _useEditorEventCallback = require("./useEditorEventCallback.js");
-function useSelectNode(selectNode, deselectNode) {
+function noop() {
+// empty
+}
+function useSelectNode(selectNode) {
+    let deselectNode = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : noop;
     const register = (0, _react.useContext)(_SelectNodeContext.SelectNodeContext);
     const selectNodeMemo = (0, _useEditorEventCallback.useEditorEventCallback)(selectNode);
-    const deselectNodeMemo = (0, _useEditorEventCallback.useEditorEventCallback)(deselectNode ?? (()=>{
-    // empty
-    }));
+    const deselectNodeMemo = (0, _useEditorEventCallback.useEditorEventCallback)(deselectNode);
     return (0, _useEditorEffect.useEditorEffect)(()=>{
-        register(selectNodeMemo, deselectNodeMemo);
+        return register(selectNodeMemo, deselectNodeMemo);
     }, [
-        deselectNodeMemo,
         register,
-        selectNodeMemo
+        selectNodeMemo,
+        deselectNodeMemo
     ]);
 }

package/dist/cjs/hooks/useStopEvent.js

@@ -16,7 +16,7 @@ function useStopEvent(stopEvent) {
     const register = (0, _react.useContext)(_StopEventContext.StopEventContext);
     const stopEventMemo = (0, _useEditorEventCallback.useEditorEventCallback)(stopEvent);
     (0, _useEditorEffect.useEditorEffect)(()=>{
-        register(stopEventMemo);
+        return register(stopEventMemo);
     }, [
         register,
         stopEventMemo

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -96,6 +96,14 @@ function beforeInputPlugin(setCursorWrapper) {
                         case "insertParagraph":
                         case "insertLineBreak":
                             {
+                                // ProseMirror-view has a hack that runs the Enter event handlers
+                                // on iOS, to avoid a bug in Safari with calling event.preventDefault() on
+                                // Enter events.
+                                //
+                                // We want to prevent that hack, because we run the Enter event handlers
+                                // here, where there is no such bug. So we set this flag, which prosemirror-view
+                                // uses to check whether it should run the deferred event handlers.
+                                view.input.lastIOSEnter = 0;
                                 // Fire a synthetic keydown event to trigger ProseMirror's keymap
                                 const keyEvent = new KeyboardEvent("keydown", {
                                     bubbles: true,
@@ -129,8 +137,12 @@ function beforeInputPlugin(setCursorWrapper) {
                                 break;
                             }
                         case "deleteWordBackward":
+                        case "deleteHardLineBackward":
+                        case "deleteSoftLineBackward":
                         case "deleteContentBackward":
                         case "deleteWordForward":
+                        case "deleteHardLineForward":
+                        case "deleteSoftLineForward":
                         case "deleteContentForward":
                         case "deleteContent":
                             {

package/dist/cjs/viewdesc.js

@@ -18,6 +18,9 @@ _export(exports, {
     NodeViewDesc: function() {
         return NodeViewDesc;
     },
+    ReactNodeViewDesc: function() {
+        return ReactNodeViewDesc;
+    },
     TextViewDesc: function() {
         return TextViewDesc;
     },
@@ -104,7 +107,9 @@ let ViewDesc = class ViewDesc {
         return 0;
     }
     destroy() {
-    // pass
+        this.parent = undefined;
+        if (this.dom.pmViewDesc == this) this.dom.pmViewDesc = undefined;
+        for(let i = 0; i < this.children.length; i++)this.children[i].destroy();
     }
     posBeforeChild(child) {
         for(let i = 0, pos = this.posAtStart;; i++){
@@ -553,15 +558,8 @@ let NodeViewDesc = class NodeViewDesc extends ViewDesc {
     outerDeco;
     innerDeco;
     nodeDOM;
-    stopEvent;
-    selectNode;
-    deselectNode;
-    ignoreMutation;
-    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, stopEvent, selectNode, deselectNode, ignoreMutation){
-        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM, this.stopEvent = stopEvent, this.selectNode = selectNode, this.deselectNode = deselectNode, this.ignoreMutation = ignoreMutation;
-    }
-    updateOuterDeco() {
-    // pass
+    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM){
+        super(parent, children, getPos, dom, contentDOM), this.node = node, this.outerDeco = outerDeco, this.innerDeco = innerDeco, this.nodeDOM = nodeDOM;
     }
     parseRule() {
         // Experimental kludge to allow opt-in re-parsing of nodes
@@ -605,23 +603,46 @@ let NodeViewDesc = class NodeViewDesc extends ViewDesc {
     get border() {
         return this.node.isLeaf ? 0 : 1;
     }
+    updateChildren(_view, _pos) {
+    // Omitted to avoid reproducing lots of unused code.
+    // Overidden elsewhere in case this is ever vendored.
+    }
     // If this desc must be updated to match the given node decoration,
     // do so and return true.
-    update(_node, _outerDeco, _innerDeco, _view) {
-        this.dirty = NOT_DIRTY;
+    update(node, outerDeco, innerDeco, view) {
+        if (this.dirty == NODE_DIRTY || !node.sameMarkup(this.node)) return false;
+        this.updateInner(node, outerDeco, innerDeco, view);
         return true;
     }
+    updateInner(node, outerDeco, innerDeco, view) {
+        this.updateOuterDeco(outerDeco);
+        this.node = node;
+        this.innerDeco = innerDeco;
+        if (this.contentDOM) this.updateChildren(view, this.posAtStart);
+        this.dirty = NOT_DIRTY;
+    }
+    updateOuterDeco(outerDeco) {
+        this.outerDeco = outerDeco;
+    }
+    // Mark this node as being the selected node.
+    selectNode() {
+        if (this.nodeDOM.nodeType == 1) this.nodeDOM.classList.add("ProseMirror-selectednode");
+        if (this.contentDOM || !this.node.type.spec.draggable) this.dom.draggable = true;
+    }
+    // Remove selected node marking from this node.
+    deselectNode() {
+        if (this.nodeDOM.nodeType == 1) {
+            this.nodeDOM.classList.remove("ProseMirror-selectednode");
+            if (this.contentDOM || !this.node.type.spec.draggable) this.dom.removeAttribute("draggable");
+        }
+    }
     get domAtom() {
         return this.node.isAtom;
     }
 };
 let TextViewDesc = class TextViewDesc extends NodeViewDesc {
     constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, nodeDOM){
-        super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM, ()=>false, ()=>{
-        /* Text nodes can't have node selections */ }, ()=>{
-        /* Text nodes can't have node selections */ }, (mutation)=>{
-            return mutation.type != "characterData" && mutation.type != "selection";
-        });
+        super(parent, children, getPos, node, outerDeco, innerDeco, dom, null, nodeDOM);
     }
     parseRule() {
         let skip = this.nodeDOM.parentNode;
@@ -673,6 +694,63 @@ let TrailingHackViewDesc = class TrailingHackViewDesc extends ViewDesc {
         return this.dom.nodeName == "IMG";
     }
 };
+// A separate subclass is used for customized node views, so that the
+// extra checks only have to be made for nodes that are actually
+// customized.
+let CustomNodeViewDesc = class CustomNodeViewDesc extends NodeViewDesc {
+    spec;
+    constructor(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM, spec){
+        super(parent, children, getPos, node, outerDeco, innerDeco, dom, contentDOM, nodeDOM), this.spec = spec;
+    }
+    // A custom `update` method gets to decide whether the update goes
+    // through. If it does, and there's a `contentDOM` node, our logic
+    // updates the children.
+    update(node, outerDeco, innerDeco, view) {
+        if (this.dirty == NODE_DIRTY) return false;
+        if (this.spec.update && (this.node.type == node.type || this.spec.multiType)) {
+            const result = this.spec.update(node, outerDeco, innerDeco);
+            if (result) this.updateInner(node, outerDeco, innerDeco, view);
+            return result;
+        } else if (!this.contentDOM && !node.isLeaf) {
+            return false;
+        } else {
+            return super.update(node, outerDeco, innerDeco, view);
+        }
+    }
+    selectNode() {
+        this.spec.selectNode ? this.spec.selectNode() : super.selectNode();
+    }
+    deselectNode() {
+        this.spec.deselectNode ? this.spec.deselectNode() : super.deselectNode();
+    }
+    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(event) : false;
+    }
+    ignoreMutation(mutation) {
+        return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
+    }
+};
+let ReactNodeViewDesc = class ReactNodeViewDesc extends CustomNodeViewDesc {
+    updateChildren(_view, _pos) {
+    // React has already updated the children.
+    }
+    updateOuterDeco(outerDeco) {
+        // React has already updated the decorations.
+        this.outerDeco = outerDeco;
+    }
+    destroy() {
+        // React has already destroyed the children (if needed).
+        this.children = [];
+        super.destroy();
+    }
+};
 function sameOuterDeco(a, b) {
     if (a.length != b.length) return false;
     // @ts-expect-error ...