@handlewithcare/react-prosemirror 2.5.2 → 2.5.4

package/README.md

@@ -693,15 +693,14 @@ export function SelectionWidget() {
 ### `NodeViewComponentProps`
 
 ```tsx
-type NodeViewComponentProps = {
+interface NodeViewComponentProps extends AllHTMLAttributes<HTMLElement> = {
   nodeProps: {
     decorations: readonly Decoration[];
     innerDecorations: DecorationSource;
     node: Node;
-    children?: ReactNode | ReactNode[];
     getPos: () => number;
   };
-} & HTMLAttributes<HTMLElement>;
+};
 ```
 
 The props that will be passed to all node view components. These props map

package/dist/cjs/ReactEditorView.js

@@ -32,6 +32,7 @@ function changedNodeViews(a, b) {
 let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
     nextProps;
     prevState;
+    _destroyed;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -55,6 +56,16 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
             this.domObserver.stop();
             this.domObserver.observer = null;
             this.domObserver.queue = [];
+            const originalOnSelectionChange = this.domObserver.onSelectionChange;
+            this.domObserver.onSelectionChange = ()=>{
+                // During a composition, we completely pause React-driven
+                // selection and DOM updates. Compositions are "fragile";
+                // in Safari, even updating the selection to the same
+                // position it's already set to will end the current
+                // composition.
+                if (this.composing) return;
+                originalOnSelectionChange();
+            };
         } finally{
             place.mount.replaceChildren(...reactContent);
             for (const attr of place.mount.attributes){
@@ -73,10 +84,22 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         this.docView.destroy();
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
+        this._destroyed = false;
     }
     get props() {
         return this.nextProps;
     }
+    /**
+   * @privateremarks
+   *
+   * We override this getter because the base implementation
+   * relies on checking `docView === null`, but we unconditionally
+   * set view.docView in a layout effect in the DocNodeView.
+   * This has the effect of "un-destroying" the EditorView,
+   * making it impossible to determine whether it's been destroyed.
+   */ get isDestroyed() {
+        return this._destroyed;
+    }
     setProps(props) {
         this.update({
             ...this.props,
@@ -132,6 +155,19 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         }
         return undefined;
     }
+    destroy() {
+        // Prevent the base class from destroying the React-managed nodes.
+        // Restore them below after invoking the base class method.
+        const reactContent = [
+            ...this.dom.childNodes
+        ];
+        try {
+            super.destroy();
+        } finally{
+            this.dom.replaceChildren(...reactContent);
+            this._destroyed = true;
+        }
+    }
     /**
    * Commit effects by appling the pending props and state.
    *

package/dist/cjs/components/CustomNodeView.js

@@ -59,7 +59,6 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
     let { constructor, node, getPos, innerDeco, outerDeco } = param;
     const ref = (0, _react.useRef)(null);
     const innerRef = (0, _react.useRef)(null);
-    const [selected, setSelected] = (0, _react.useState)(false);
     const nodeProps = (0, _react.useMemo)(()=>({
             node,
             getPos,
@@ -89,7 +88,6 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
-        setSelected(false);
         const nodeView = createNodeView(...args);
         const contentDOM = nodeView.contentDOM;
         const nodeDOM = nodeView.dom;
@@ -99,6 +97,9 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
             if (!nodeDOM.hasAttribute("contenteditable")) {
                 nodeDOM.contentEditable = "false";
             }
+            if (node.type.spec.draggable) {
+                nodeDOM.draggable = true;
+            }
         }
         return {
             ...nodeView,
@@ -108,22 +109,16 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
                 }
                 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);
-            }),
+            selectNode: nodeView.selectNode?.bind(nodeView),
+            deselectNode: nodeView.deselectNode?.bind(nodeView),
             stopEvent: nodeView.stopEvent?.bind(nodeView),
             ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
         };
     }, nodeProps);
+    const Component = node.isInline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
     const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
@@ -131,14 +126,7 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
         node: node,
         innerDecorations: innerDeco
     })), contentDOM) : null;
-    const innerElement = /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
-        ref: innerRef
-    }, children);
-    const props = {
-        ...selected || node.type.spec.draggable ? {
-            draggable: true
-        } : null,
+    return /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, /*#__PURE__*/ _react.default.createElement(Component, props, children)), {
         ref
-    };
-    return /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
+    });
 });

package/dist/cjs/components/ReactNodeView.js

@@ -58,7 +58,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
-    const [controlSelected, setControlSelected] = (0, _react.useState)(false);
+    const [hasCustomSelectNode, setHasCustomSelectNode] = (0, _react.useState)(false);
     const [selected, setSelected] = (0, _react.useState)(false);
     const ref = (0, _react.useRef)(null);
     const innerRef = (0, _react.useRef)(null);
@@ -69,11 +69,11 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
     const setSelectNode = (0, _react.useCallback)((selectHandler, deselectHandler)=>{
         selectNodeRef.current = selectHandler;
         deselectNodeRef.current = deselectHandler;
-        setControlSelected(true);
+        setHasCustomSelectNode(true);
         return ()=>{
             selectNodeRef.current = null;
             deselectNodeRef.current = null;
-            setControlSelected(false);
+            setHasCustomSelectNode(false);
         };
     }, []);
     const setStopEvent = (0, _react.useCallback)((handler)=>{
@@ -140,30 +140,28 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
             }
         };
     }, nodeProps);
-    const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-        getPos: getPos,
-        node: node,
-        innerDecorations: innerDeco
-    }) : null;
-    const innerProps = {
+    const props = {
         nodeProps,
         ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,
-        ...controlSelected && selected ? {
+        ...!hasCustomSelectNode && selected ? {
             className: "ProseMirror-selectednode"
         } : null,
-        ref: innerRef
-    };
-    const innerElement = /*#__PURE__*/ _react.default.createElement(Component, innerProps, children);
-    const props = {
-        ...controlSelected && selected || node.type.spec.draggable ? {
+        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
             draggable: true
         } : null,
-        ref
+        ref: innerRef
     };
-    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
+    const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, /*#__PURE__*/ _react.default.createElement(Component, props, children)), {
+        ref
+    });
     return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {
@@ -172,5 +170,5 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         value: setIgnoreMutation
     }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
         value: childContextValue
-    }, decoratedElement))));
+    }, element))));
 });

package/dist/cjs/hooks/useEditor.js

@@ -16,6 +16,7 @@ const _constants = require("../constants.js");
 const _beforeInputPlugin = require("../plugins/beforeInputPlugin.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useComponentEventListeners = require("./useComponentEventListeners.js");
+const _useEffectEvent = require("./useEffectEvent.js");
 const _useForceUpdate = require("./useForceUpdate.js");
 let didWarnValueDefaultValue = false;
 function useEditor(mount, options) {
@@ -77,30 +78,31 @@ function useEditor(mount, options) {
     const [view, setView] = (0, _react.useState)(()=>{
         return new _StaticEditorView.StaticEditorView(directEditorProps);
     });
+    const createEditorView = (0, _useEffectEvent.useEffectEvent)((mount)=>{
+        if (mount) {
+            const view = new _ReactEditorView.ReactEditorView({
+                mount
+            }, directEditorProps);
+            view.dom.addEventListener("compositionend", forceUpdate);
+            return view;
+        }
+        return new _StaticEditorView.StaticEditorView(directEditorProps);
+    });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        const view = createEditorView(mount);
+        setView(view);
         return ()=>{
             view.destroy();
         };
     }, [
-        view
+        createEditorView,
+        mount
     ]);
-    // This rule is concerned about infinite updates due to the
-    // call to setView. These calls are deliberately conditional,
-    // so this is not a concern.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (mount !== view.dom) {
-            if (mount) {
-                const view = new _ReactEditorView.ReactEditorView({
-                    mount
-                }, directEditorProps);
-                view.dom.addEventListener("compositionend", forceUpdate);
-                setView(view);
-            } else {
-                const view = new _StaticEditorView.StaticEditorView(directEditorProps);
-                setView(view);
-            }
-        } else if (view instanceof _ReactEditorView.ReactEditorView) {
+        // Ensure that the EditorView hasn't been destroyed before
+        // running effects. Running effects will reattach selection
+        // change listeners if the EditorView has been destroyed.
+        if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
             view.commitPendingEffects();
         }
     });

package/dist/cjs/hooks/useEffectEvent.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEffectEvent", {
+    enumerable: true,
+    get: function() {
+        return useEffectEvent;
+    }
+});
+const _react = require("react");
+function useEffectEvent(fn) {
+    const ref = (0, _react.useRef)(fn);
+    // Ideally this would be a useInsertionEffect, but
+    // that was introduced in React 18 and we still
+    // support React 17. useLayoutEffect is safe
+    // here as long as the function returned by
+    // useEffectEvent isn't called in a layout effect
+    // that's defined _before_ the useEffectEvent
+    // call, and effect events are never passed
+    // to child components.
+    (0, _react.useLayoutEffect)(()=>{
+        ref.current = fn;
+    }, [
+        fn
+    ]);
+    return (0, _react.useCallback)(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        const f = ref.current;
+        return f(...args);
+    }, []);
+}

package/dist/cjs/hooks/useNodeViewDescriptor.js

@@ -14,6 +14,7 @@ const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js
 const _EditorContext = require("../contexts/EditorContext.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
+const _useEffectEvent = require("./useEffectEvent.js");
 function findContentDOM(source, children) {
     return source?.contentDOM ?? children[0]?.dom?.parentElement ?? null;
 }
@@ -25,7 +26,7 @@ function useNodeViewDescriptor(ref, constructor, props) {
     const [contentDOM, setContentDOM] = (0, _react.useState)(null);
     const viewDescRef = (0, _react.useRef)();
     const childrenRef = (0, _react.useRef)([]);
-    const create = (0, _react.useCallback)((props)=>{
+    const create = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return;
         }
@@ -47,13 +48,8 @@ function useNodeViewDescriptor(ref, constructor, props) {
         setContentDOM(contentDOM);
         setNodeDOM(nodeDOM);
         return viewDesc;
-    }, [
-        ref,
-        parentRef,
-        constructor,
-        view
-    ]);
-    const update = (0, _react.useCallback)((props)=>{
+    });
+    const update = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return false;
         }
@@ -74,11 +70,8 @@ function useNodeViewDescriptor(ref, constructor, props) {
         }
         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 destroy = (0, _useEffectEvent.useEffectEvent)(()=>{
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
             return;
@@ -92,13 +85,20 @@ function useNodeViewDescriptor(ref, constructor, props) {
         setDOM(null);
         setContentDOM(null);
         setNodeDOM(null);
+    });
+    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
+        viewDescRef.current = create();
+        return ()=>{
+            destroy();
+        };
     }, [
-        siblingsRef
+        create,
+        destroy
     ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        if (!update(props)) {
+        if (!update()) {
             destroy();
-            viewDescRef.current = create(props);
+            viewDescRef.current = create();
         }
         const viewDesc = viewDescRef.current;
         if (!viewDesc) {
@@ -137,14 +137,6 @@ function useNodeViewDescriptor(ref, constructor, props) {
             }
         }
     });
-    (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
-        return ()=>{
-            destroy();
-            viewDescRef.current = undefined;
-        };
-    }, [
-        destroy
-    ]);
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
             siblingsRef: childrenRef

package/dist/esm/ReactEditorView.js

@@ -32,6 +32,7 @@ function changedNodeViews(a, b) {
  */ export class ReactEditorView extends EditorView {
     nextProps;
     prevState;
+    _destroyed;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -55,6 +56,16 @@ function changedNodeViews(a, b) {
             this.domObserver.stop();
             this.domObserver.observer = null;
             this.domObserver.queue = [];
+            const originalOnSelectionChange = this.domObserver.onSelectionChange;
+            this.domObserver.onSelectionChange = ()=>{
+                // During a composition, we completely pause React-driven
+                // selection and DOM updates. Compositions are "fragile";
+                // in Safari, even updating the selection to the same
+                // position it's already set to will end the current
+                // composition.
+                if (this.composing) return;
+                originalOnSelectionChange();
+            };
         } finally{
             place.mount.replaceChildren(...reactContent);
             for (const attr of place.mount.attributes){
@@ -73,10 +84,22 @@ function changedNodeViews(a, b) {
         this.docView.destroy();
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
+        this._destroyed = false;
     }
     get props() {
         return this.nextProps;
     }
+    /**
+   * @privateremarks
+   *
+   * We override this getter because the base implementation
+   * relies on checking `docView === null`, but we unconditionally
+   * set view.docView in a layout effect in the DocNodeView.
+   * This has the effect of "un-destroying" the EditorView,
+   * making it impossible to determine whether it's been destroyed.
+   */ get isDestroyed() {
+        return this._destroyed;
+    }
     setProps(props) {
         this.update({
             ...this.props,
@@ -132,6 +155,19 @@ function changedNodeViews(a, b) {
         }
         return undefined;
     }
+    destroy() {
+        // Prevent the base class from destroying the React-managed nodes.
+        // Restore them below after invoking the base class method.
+        const reactContent = [
+            ...this.dom.childNodes
+        ];
+        try {
+            super.destroy();
+        } finally{
+            this.dom.replaceChildren(...reactContent);
+            this._destroyed = true;
+        }
+    }
     /**
    * Commit effects by appling the pending props and state.
    *

package/dist/esm/components/CustomNodeView.js

@@ -1,5 +1,5 @@
 import { DOMSerializer } from "prosemirror-model";
-import React, { cloneElement, createElement, memo, useMemo, useRef, useState } from "react";
+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";
@@ -8,7 +8,6 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
     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,
@@ -38,7 +37,6 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
-        setSelected(false);
         const nodeView = createNodeView(...args);
         const contentDOM = nodeView.contentDOM;
         const nodeDOM = nodeView.dom;
@@ -48,6 +46,9 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
             if (!nodeDOM.hasAttribute("contenteditable")) {
                 nodeDOM.contentEditable = "false";
             }
+            if (node.type.spec.draggable) {
+                nodeDOM.draggable = true;
+            }
         }
         return {
             ...nodeView,
@@ -57,22 +58,16 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
                 }
                 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);
-            }),
+            selectNode: nodeView.selectNode?.bind(nodeView),
+            deselectNode: nodeView.deselectNode?.bind(nodeView),
             stopEvent: nodeView.stopEvent?.bind(nodeView),
             ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
         };
     }, nodeProps);
+    const Component = node.isInline ? "span" : "div";
+    const props = {
+        ref: innerRef
+    };
     const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
@@ -80,14 +75,7 @@ export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param)
         node: node,
         innerDecorations: innerDeco
     })), contentDOM) : null;
-    const innerElement = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
-        ref: innerRef
-    }, children);
-    const props = {
-        ...selected || node.type.spec.draggable ? {
-            draggable: true
-        } : null,
+    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
         ref
-    };
-    return /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
+    });
 });

package/dist/esm/components/ReactNodeView.js

@@ -7,7 +7,7 @@ import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
 import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
-    const [controlSelected, setControlSelected] = useState(false);
+    const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
     const [selected, setSelected] = useState(false);
     const ref = useRef(null);
     const innerRef = useRef(null);
@@ -18,11 +18,11 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     const setSelectNode = useCallback((selectHandler, deselectHandler)=>{
         selectNodeRef.current = selectHandler;
         deselectNodeRef.current = deselectHandler;
-        setControlSelected(true);
+        setHasCustomSelectNode(true);
         return ()=>{
             selectNodeRef.current = null;
             deselectNodeRef.current = null;
-            setControlSelected(false);
+            setHasCustomSelectNode(false);
         };
     }, []);
     const setStopEvent = useCallback((handler)=>{
@@ -89,30 +89,28 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             }
         };
     }, nodeProps);
-    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
-        getPos: getPos,
-        node: node,
-        innerDecorations: innerDeco
-    }) : null;
-    const innerProps = {
+    const props = {
         nodeProps,
         ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,
-        ...controlSelected && selected ? {
+        ...!hasCustomSelectNode && selected ? {
             className: "ProseMirror-selectednode"
         } : null,
-        ref: innerRef
-    };
-    const innerElement = /*#__PURE__*/ React.createElement(Component, innerProps, children);
-    const props = {
-        ...controlSelected && selected || node.type.spec.draggable ? {
+        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
             draggable: true
         } : null,
-        ref
+        ref: innerRef
     };
-    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, innerElement), props);
+    const children = !node.isLeaf ? /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }) : null;
+    const element = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, /*#__PURE__*/ React.createElement(Component, props, children)), {
+        ref
+    });
     return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
         value: setSelectNode
     }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
@@ -121,5 +119,5 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
         value: setIgnoreMutation
     }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
         value: childContextValue
-    }, decoratedElement))));
+    }, element))));
 });