@handlewithcare/react-prosemirror 2.5.0 → 2.5.2

package/dist/esm/components/ReactNodeView.js

@@ -1,30 +1,45 @@
-import React, { cloneElement, memo, useContext, useMemo, useRef } from "react";
+import React, { cloneElement, memo, useCallback, useMemo, useRef, useState } from "react";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { IgnoreMutationContext } from "../contexts/IgnoreMutationContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
 import { StopEventContext } from "../contexts/StopEventContext.js";
 import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
-import { OutputSpec } from "./OutputSpec.js";
 export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
-    let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = useRef(null);
-    const nodeDomRef = useRef(null);
-    const contentDomRef = useRef(null);
-    const { nodeViews } = useContext(NodeViewContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
-        node
-    ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, setIgnoreMutation, nodeViewDescRef } = 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] = useState(false);
+    const [selected, setSelected] = useState(false);
+    const ref = useRef(null);
+    const innerRef = useRef(null);
+    const selectNodeRef = useRef(null);
+    const deselectNodeRef = useRef(null);
+    const stopEventRef = useRef(null);
+    const ignoreMutationRef = useRef(null);
+    const setSelectNode = useCallback((selectHandler, deselectHandler)=>{
+        selectNodeRef.current = selectHandler;
+        deselectNodeRef.current = deselectHandler;
+        setControlSelected(true);
+        return ()=>{
+            selectNodeRef.current = null;
+            deselectNodeRef.current = null;
+            setControlSelected(false);
+        };
+    }, []);
+    const setStopEvent = useCallback((handler)=>{
+        stopEventRef.current = handler;
+        return ()=>{
+            stopEventRef.current = null;
+        };
+    }, []);
+    const setIgnoreMutation = useCallback((handler)=>{
+        ignoreMutationRef.current = handler;
+        return ()=>{
+            ignoreMutationRef.current = null;
+            return ()=>{
+                ignoreMutationRef.current = null;
+            };
+        };
+    }, []);
     const nodeProps = useMemo(()=>({
             node: node,
             getPos: getPos,
@@ -36,45 +51,68 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         node,
         outerDeco
     ]);
-    if (Component) {
-        element = /*#__PURE__*/ React.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else {
-        if (outputSpec) {
-            element = /*#__PURE__*/ React.createElement(OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
-    }
-    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);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
+    const { childContextValue, contentDOM, nodeDOM } = 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.createElement(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.createElement(Component, innerProps, children);
+    const props = {
+        ...controlSelected && selected || node.type.spec.draggable ? {
+            draggable: true
+        } : null,
+        ref
+    };
+    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
     return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {

package/dist/esm/hooks/useEditor.js

@@ -19,7 +19,7 @@ let didWarnValueDefaultValue = false;
  */ export 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/esm/hooks/useIgnoreMutation.js

@@ -6,7 +6,7 @@ export function useIgnoreMutation(ignoreMutation) {
     const register = useContext(IgnoreMutationContext);
     const ignoreMutationMemo = useEditorEventCallback(ignoreMutation);
     useEditorEffect(()=>{
-        register(ignoreMutationMemo);
+        return register(ignoreMutationMemo);
     }, [
         register,
         ignoreMutationMemo

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -1,109 +1,152 @@
-import { useCallback, useContext, useRef, useState } from "react";
+import { useCallback, useContext, useMemo, useRef, useState } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { CompositionViewDesc, NodeViewDesc, sortViewDescs } from "../viewdesc.js";
+import { CompositionViewDesc, ReactNodeViewDesc, sortViewDescs } from "../viewdesc.js";
 import { useClientLayoutEffect } from "./useClientLayoutEffect.js";
-export function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, contentDOMRef) {
+function findContentDOM(source, children) {
+    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
+}
+export function useNodeViewDescriptor(ref, constructor, props) {
     const { view } = useContext(EditorContext);
-    const [hasContentDOM, setHasContentDOM] = useState(true);
-    const nodeViewDescRef = useRef();
-    const stopEvent = useRef(()=>false);
-    const setStopEvent = useCallback((newStopEvent)=>{
-        stopEvent.current = newStopEvent;
-    }, []);
-    const ignoreMutation = useRef(()=>false);
-    const setIgnoreMutation = useCallback((newIgnoreMutation)=>{
-        ignoreMutation.current = newIgnoreMutation;
-    }, []);
-    const selectNode = 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 = 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 } = useContext(ChildDescriptorsContext);
+    const [dom, setDOM] = useState(null);
+    const [nodeDOM, setNodeDOM] = useState(null);
+    const [contentDOM, setContentDOM] = useState(null);
+    const viewDescRef = useRef();
+    const childrenRef = useRef([]);
+    const create = useCallback((props)=>{
+        if (!(view instanceof ReactEditorView)) {
+            return;
         }
-    });
-    const setSelectNode = useCallback((newSelectNode, newDeselectNode)=>{
-        selectNode.current = newSelectNode;
-        deselectNode.current = newDeselectNode;
-    }, []);
-    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
-    const childDescriptors = useRef([]);
-    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 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 = useCallback((props)=>{
+        if (!(view instanceof 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 = 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
     useClientLayoutEffect(()=>{
-        if (!nodeDomRef.current) return;
-        const firstChildDesc = childDescriptors.current[0];
-        if (!nodeViewDescRef.current) {
-            nodeViewDescRef.current = new 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) {
+            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(sortViewDescs);
-        for (const childDesc of childDescriptors.current){
-            childDesc.parent = nodeViewDescRef.current;
+        siblings.sort(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 CompositionViewDesc) {
-                const compositionTopDOM = nodeViewDescRef.current.contentDOM?.firstChild;
+            if (child instanceof 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);
             }
         }
+    });
+    useClientLayoutEffect(()=>{
         return ()=>{
-            if (nodeViewDescRef.current?.children[0] instanceof CompositionViewDesc && !view.composing) {
-                nodeViewDescRef.current?.children[0].dom.parentNode?.removeChild(nodeViewDescRef.current?.children[0].dom);
-            }
+            destroy();
+            viewDescRef.current = undefined;
         };
-    });
+    }, [
+        destroy
+    ]);
+    const childContextValue = useMemo(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childrenRef
+        }), [
+        childrenRef,
+        viewDescRef
+    ]);
     return {
-        hasContentDOM,
-        childDescriptors,
-        nodeViewDescRef,
-        setStopEvent,
-        setSelectNode,
-        setIgnoreMutation
+        childContextValue,
+        dom,
+        contentDOM,
+        nodeDOM,
+        ref
     };
 }

package/dist/esm/hooks/useSelectNode.js

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

package/dist/esm/hooks/useStopEvent.js

@@ -6,7 +6,7 @@ export function useStopEvent(stopEvent) {
     const register = useContext(StopEventContext);
     const stopEventMemo = useEditorEventCallback(stopEvent);
     useEditorEffect(()=>{
-        register(stopEventMemo);
+        return register(stopEventMemo);
     }, [
         register,
         stopEventMemo

package/dist/esm/plugins/beforeInputPlugin.js

@@ -86,6 +86,14 @@ export 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,
@@ -119,8 +127,12 @@ export function beforeInputPlugin(setCursorWrapper) {
                                 break;
                             }
                         case "deleteWordBackward":
+                        case "deleteHardLineBackward":
+                        case "deleteSoftLineBackward":
                         case "deleteContentBackward":
                         case "deleteWordForward":
+                        case "deleteHardLineForward":
+                        case "deleteSoftLineForward":
                         case "deleteContentForward":
                         case "deleteContent":
                             {

package/dist/esm/viewdesc.js

@@ -82,7 +82,9 @@ export 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++){
@@ -541,15 +543,8 @@ export 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
@@ -593,23 +588,46 @@ export 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;
     }
 }
 export 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;
@@ -663,6 +681,63 @@ export 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);
+    }
+};
+export 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 ...