@handlewithcare/react-prosemirror 2.4.12 → 2.5.1

package/dist/cjs/components/CustomNodeView.js

@@ -8,14 +8,10 @@ Object.defineProperty(exports, "CustomNodeView", {
         return CustomNodeView;
     }
 });
-const _prosemirrorstate = require("prosemirror-state");
+const _prosemirrormodel = require("prosemirror-model");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _reactdom = require("react-dom");
 const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
-const _EditorContext = require("../contexts/EditorContext.js");
-const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
-const _useClientOnly = require("../hooks/useClientOnly.js");
-const _useForceUpdate = require("../hooks/useForceUpdate.js");
 const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -60,145 +56,89 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(param) {
-    let { customNodeView, node, getPos, innerDeco, outerDeco } = param;
-    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const domRef = (0, _react.useRef)(null);
-    const nodeDomRef = (0, _react.useRef)(null);
-    const contentDomRef = (0, _react.useRef)(null);
-    const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
-    const nodeRef = (0, _react.useRef)(node);
-    nodeRef.current = node;
-    const outerDecoRef = (0, _react.useRef)(outerDeco);
-    outerDecoRef.current = outerDeco;
-    const innerDecoRef = (0, _react.useRef)(innerDeco);
-    innerDecoRef.current = innerDeco;
-    const customNodeViewRootRef = (0, _react.useRef)(null);
-    const customNodeViewRef = (0, _react.useRef)(null);
-    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
-    const isOnClient = (0, _useClientOnly.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.
-    (0, _useClientLayoutEffect.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 _prosemirrorstate.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
-    ]);
-    (0, _useClientLayoutEffect.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 = (0, _react.useRef)(null);
+    const innerRef = (0, _react.useRef)(null);
+    const [selected, setSelected] = (0, _react.useState)(false);
+    const nodeProps = (0, _react.useMemo)(()=>({
+            node,
+            getPos,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
         node,
-        outerDeco,
         getPos,
-        getPosFunc
-    ]);
-    const { childDescriptors, nodeViewDescRef, setStopEvent, setSelectNode, setIgnoreMutation } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, getPosFunc, domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const childContextValue = (0, _react.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];
+        }
+        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 _prosemirrormodel.DOMSerializer.renderSpec(document, spec, null);
         }
-        if (customNodeViewRef.current.selectNode) {
-            setSelectNode(customNodeViewRef.current.selectNode.bind(customNodeViewRef.current), customNodeViewRef.current.deselectNode?.bind(customNodeViewRef.current) ?? (()=>{}));
+        return nodeView;
+    };
+    const { childContextValue, contentDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
         }
-        if (customNodeViewRef.current.ignoreMutation) {
-            setIgnoreMutation(customNodeViewRef.current.ignoreMutation.bind(customNodeViewRef.current));
+        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";
+            }
         }
-    }
-    const { contentDOM } = customNodeViewRef.current;
-    contentDomRef.current = contentDOM ?? null;
-    const element = /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
-        ref: customNodeViewRootRef,
-        contentEditable: !!contentDOM,
-        suppressContentEditableWarning: true
-    }, contentDOM && /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+        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__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
         getPos: getPos,
         node: node,
         innerDecorations: innerDeco
-    }), contentDOM));
-    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);
-    return /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement);
+    })), 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,
+        ref
+    };
+    return /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, innerElement), props);
 });

package/dist/cjs/{hooks/useNodePos.js → components/DefaultNodeView.js}

@@ -2,19 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    NodePosProvider: ()=>NodePosProvider,
-    useNodePos: ()=>useNodePos
+Object.defineProperty(exports, "DefaultNodeView", {
+    enumerable: true,
+    get: function() {
+        return DefaultNodeView;
+    }
 });
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _reactJs = require("../plugins/react.js");
-const _useEditorStateJs = require("./useEditorState.js");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _OutputSpec = require("./OutputSpec.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -23,7 +18,7 @@ function _getRequireWildcardCache(nodeInterop) {
         return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
     })(nodeInterop);
 }
-function _interopRequireWildcard(obj, nodeInterop) {
+function _interop_require_wildcard(obj, nodeInterop) {
     if (!nodeInterop && obj && obj.__esModule) {
         return obj;
     }
@@ -36,7 +31,9 @@ function _interopRequireWildcard(obj, nodeInterop) {
     if (cache && cache.has(obj)) {
         return cache.get(obj);
     }
-    var newObj = {};
+    var newObj = {
+        __proto__: null
+    };
     var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
     for(var key in obj){
         if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -54,16 +51,17 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const NodePosContext = /*#__PURE__*/ (0, _react.createContext)(null);
-function NodePosProvider(param) {
-    let { nodeKey , children  } = param;
-    const editorState = (0, _useEditorStateJs.useEditorState)();
-    const pluginState = _reactJs.reactPluginKey.getState(editorState);
-    if (!pluginState) return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children);
-    return /*#__PURE__*/ _react.default.createElement(NodePosContext.Provider, {
-        value: pluginState.keyToPos.get(nodeKey) ?? 0
+const DefaultNodeView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultNodeView(param, ref) {
+    let { nodeProps: { node }, children, ...props } = param;
+    const spec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    if (!spec) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
+        ...props,
+        outputSpec: spec,
+        ref: ref
     }, children);
-}
-function useNodePos() {
-    return (0, _react.useContext)(NodePosContext);
-}
+});

package/dist/cjs/components/DocNodeView.js

@@ -1,6 +1,4 @@
-// TODO: I must be missing something, but I do not know why
-// this linting rule is only broken in this file
-/* eslint-disable react/prop-types */ "use strict";
+"use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
@@ -55,50 +53,44 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const getPos = {
-    current () {
-        return -1;
-    }
-};
 const DocNodeView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forwardRef)(function DocNodeView(param, ref) {
-    let { className, node, innerDeco, outerDeco, as, viewDesc, ...elementProps } = param;
+    let { as, node, getPos, decorations, innerDecorations, setMount, ...elementProps } = param;
     const innerRef = (0, _react.useRef)(null);
-    (0, _react.useImperativeHandle)(ref, ()=>{
-        return innerRef.current;
-    }, []);
-    const { childDescriptors, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), innerRef, innerRef, innerDeco, outerDeco, viewDesc);
-    const childContextValue = (0, _react.useMemo)(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
+    (0, _react.useImperativeHandle)(ref, ()=>innerRef.current);
+    (0, _react.useImperativeHandle)(setMount, ()=>innerRef.current);
+    const nodeProps = (0, _react.useMemo)(()=>({
+            node,
+            getPos,
+            decorations,
+            innerDecorations
         }), [
-        childDescriptors,
-        nodeViewDescRef
+        node,
+        getPos,
+        decorations,
+        innerDecorations
     ]);
-    const props = {
-        ...elementProps,
-        ref: innerRef,
-        className,
-        suppressContentEditableWarning: true
-    };
-    const element = as ? /*#__PURE__*/ (0, _react.cloneElement)(as, props, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-        getPos: getPos,
-        node: node,
-        innerDecorations: innerDeco
-    }))) : /*#__PURE__*/ (0, _react.createElement)("div", props, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+    const { childContextValue } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(innerRef, ()=>{
+        const dom = innerRef.current;
+        return {
+            dom,
+            contentDOM: dom,
+            update () {
+                return true;
+            }
+        };
+    }, nodeProps);
+    const children = /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
         getPos: getPos,
         node: node,
-        innerDecorations: innerDeco
-    })));
-    if (!node) return element;
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const nodeDecorations = outerDeco.filter((deco)=>!deco.inline);
-    if (!nodeDecorations.length) {
-        return element;
-    }
-    const wrapped = nodeDecorations.reduce(_ChildNodeViews.wrapInDeco, element);
-    return wrapped;
+        innerDecorations: innerDecorations
+    }));
+    const props = {
+        ...elementProps,
+        suppressContentEditableWarning: true,
+        ref: innerRef
+    };
+    const element = as ? /*#__PURE__*/ (0, _react.cloneElement)(as, props, children) : /*#__PURE__*/ (0, _react.createElement)("div", props, children);
+    return nodeProps.decorations.reduce(_ChildNodeViews.wrapInDeco, element);
 }));

package/dist/cjs/components/MarkView.js

@@ -83,7 +83,7 @@ const MarkView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forward
         if (!domRef.current) return;
         const firstChildDesc = childDescriptors.current[0];
         if (!viewDescRef.current) {
-            viewDescRef.current = new _viewdesc.MarkViewDesc(parentRef.current, childDescriptors.current, ()=>getPos.current(), mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current, {
+            viewDescRef.current = new _viewdesc.MarkViewDesc(parentRef.current, childDescriptors.current, getPos, mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current, {
                 dom: domRef.current,
                 contentDOM: firstChildDesc?.dom.parentElement ?? domRef.current
             });
@@ -93,7 +93,6 @@ const MarkView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forward
             viewDescRef.current.children = childDescriptors.current;
             viewDescRef.current.spec.contentDOM = viewDescRef.current.contentDOM = firstChildDesc?.dom.parentElement ?? domRef.current;
             viewDescRef.current.mark = mark;
-            viewDescRef.current.getPos = ()=>getPos.current();
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/cjs/components/NativeWidgetView.js

@@ -75,7 +75,7 @@ function NativeWidgetView(param) {
         if (!rootDomRef.current) return;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const toDOM = widget.type.toDOM;
-        let dom = typeof toDOM === "function" ? toDOM(view, ()=>getPos.current()) : toDOM;
+        let dom = typeof toDOM === "function" ? toDOM(view, getPos) : toDOM;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         if (!widget.type.spec.raw) {
             if (dom.nodeType != 1) {
@@ -92,11 +92,10 @@ function NativeWidgetView(param) {
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!rootDomRef.current) return;
         if (!viewDescRef.current) {
-            viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, ()=>getPos.current(), widget, rootDomRef.current);
+            viewDescRef.current = new _viewdesc.WidgetViewDesc(parentRef.current, getPos, widget, rootDomRef.current);
         } else {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
-            viewDescRef.current.getPos = ()=>getPos.current();
             viewDescRef.current.dom = rootDomRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {

package/dist/cjs/components/NodeView.js

@@ -9,8 +9,9 @@ Object.defineProperty(exports, "NodeView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _EditorContext = require("../contexts/EditorContext.js");
+const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _CustomNodeView = require("./CustomNodeView.js");
+const _DefaultNodeView = require("./DefaultNodeView.js");
 const _ReactNodeView = require("./ReactNodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -53,24 +54,33 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
-    let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const customNodeView = view?.someProp("nodeViews", (nodeViews)=>nodeViews?.[node.type.name]);
-    if (customNodeView) {
-        return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
-            customNodeView: customNodeView,
-            node: node,
-            innerDeco: innerDeco,
-            outerDeco: outerDeco,
-            getPos: getPos
-        });
-    }
-    return /*#__PURE__*/ _react.default.createElement(_ReactNodeView.ReactNodeView, {
-        node: node,
-        innerDeco: innerDeco,
-        outerDeco: outerDeco,
-        getPos: getPos,
-        ...props
-    });
+const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
+    const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
+    const component = components[props.node.type.name] ?? _DefaultNodeView.DefaultNodeView;
+    const constructor = constructors[props.node.type.name];
+    // Construct a wrapper component so that the node view remounts when either
+    // its component or constructor changes. A React node view would remount if
+    // its underlying component changed without this wrapper, but a custom node
+    // view otherwise uses the same React components for all custom node views.
+    const Component = (0, _react.useMemo)(()=>{
+        if (constructor) {
+            return function NodeView(props) {
+                return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
+                    constructor: constructor,
+                    ...props
+                });
+            };
+        } else {
+            return function NodeView(props) {
+                return /*#__PURE__*/ _react.default.createElement(_ReactNodeView.ReactNodeView, {
+                    component: component,
+                    ...props
+                });
+            };
+        }
+    }, [
+        constructor,
+        component
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(Component, props);
 });

package/dist/cjs/components/ProseMirror.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "ProseMirror", {
         return ProseMirror;
     }
 });
-const _prosemirrorview = require("prosemirror-view");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _EditorContext = require("../contexts/EditorContext.js");
 const _EditorStateContext = require("../contexts/EditorStateContext.js");
@@ -59,7 +58,9 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const EMPTY_OUTER_DECOS = [];
+function getPos() {
+    return -1;
+}
 function ProseMirrorInner(param) {
     let { className, children, nodeViews, customNodeViews, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
@@ -67,26 +68,33 @@ function ProseMirrorInner(param) {
         ...props,
         nodeViews: customNodeViews
     });
-    const innerDecos = editor.view ? (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper) : _prosemirrorview.DecorationSet.empty;
-    const outerDecos = editor.view ? (0, _computeDocDeco.computeDocDeco)(editor.view) : EMPTY_OUTER_DECOS;
-    const nodeViewContextValue = (0, _react.useMemo)(()=>({
-            nodeViews: nodeViews ?? {}
-        }), [
+    const nodeViewConstructors = editor.view.nodeViews;
+    const nodeViewContextValue = (0, _react.useMemo)(()=>{
+        return {
+            components: {
+                ...nodeViews
+            },
+            constructors: nodeViewConstructors
+        };
+    }, [
+        nodeViewConstructors,
         nodeViews
     ]);
+    const node = state.doc;
+    const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
+    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
     const docNodeViewContextValue = (0, _react.useMemo)(()=>({
-            className: className,
-            setMount: setMount,
-            node: editor.view?.state.doc,
-            innerDeco: innerDecos,
-            outerDeco: outerDecos,
-            viewDesc: editor.docViewDescRef.current
+            className,
+            setMount,
+            node,
+            getPos,
+            decorations,
+            innerDecorations
         }), [
         className,
-        editor.docViewDescRef,
-        editor.view?.state.doc,
-        innerDecos,
-        outerDecos
+        node,
+        decorations,
+        innerDecorations
     ]);
     return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
         value: editor

package/dist/cjs/components/ProseMirrorDoc.js

@@ -13,11 +13,10 @@ _export(exports, {
         return DocNodeViewContext;
     },
     ProseMirrorDoc: function() {
-        return ForwardedProseMirrorDoc;
+        return ProseMirrorDoc;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
 const _DocNodeView = require("./DocNodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -61,32 +60,13 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DocNodeViewContext = /*#__PURE__*/ (0, _react.createContext)(null);
-function ProseMirrorDoc(param, ref) {
+const ProseMirrorDoc = /*#__PURE__*/ (0, _react.forwardRef)(function ProseMirrorDoc(param, ref) {
     let { as, ...props } = param;
-    const childDescriptors = (0, _react.useRef)([]);
-    const innerRef = (0, _react.useRef)(null);
-    const { setMount, ...docProps } = (0, _react.useContext)(DocNodeViewContext);
-    const viewDescRef = (0, _react.useRef)(undefined);
-    (0, _react.useImperativeHandle)(ref, ()=>{
-        return innerRef.current;
-    }, []);
-    const childContextValue = (0, _react.useMemo)(()=>({
-            parentRef: viewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        viewDescRef
-    ]);
-    return /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, /*#__PURE__*/ _react.default.createElement(_DocNodeView.DocNodeView, {
-        ref: (el)=>{
-            innerRef.current = el;
-            setMount(el);
-        },
+    const docProps = (0, _react.useContext)(DocNodeViewContext);
+    return /*#__PURE__*/ _react.default.createElement(_DocNodeView.DocNodeView, {
+        ref: ref,
         ...props,
         ...docProps,
         as: as
-    }));
-}
-const ForwardedProseMirrorDoc = /*#__PURE__*/ (0, _react.forwardRef)(ProseMirrorDoc);
+    });
+});