@handlewithcare/react-prosemirror 2.9.0-tiptap.25 → 3.0.0

package/dist/cjs/components/marks/{CustomMarkView.js → MarkViewConstructorView.js}

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "CustomMarkView", {
+Object.defineProperty(exports, "MarkViewConstructorView", {
     enumerable: true,
     get: function() {
-        return CustomMarkView;
+        return MarkViewConstructorView;
     }
 });
 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 _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
+const _useForceUpdate = require("../../hooks/useForceUpdate.js");
 const _useMarkViewDescription = require("../../hooks/useMarkViewDescription.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -54,14 +55,18 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const CustomMarkView = /*#__PURE__*/ (0, _react.memo)(function CustomMarkView(param) {
+const MarkViewConstructorView = /*#__PURE__*/ (0, _react.memo)(function MarkViewConstructorView(param) {
     let { constructor, mark, inline, getPos, children } = param;
     const ref = (0, _react.useRef)(null);
     const innerRef = (0, _react.useRef)(null);
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const markProps = (0, _react.useMemo)(()=>({
             mark,
             inline,
-            getPos
+            getPos,
+            contentDOMRef: {
+                current: null
+            }
         }), [
         mark,
         inline,
@@ -81,13 +86,17 @@ const CustomMarkView = /*#__PURE__*/ (0, _react.memo)(function CustomMarkView(pa
         }
         return markView;
     };
-    const { childContextValue, contentDOM } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, function() {
+    const { childContextValue, contentDOM } = (0, _useMarkViewDescription.useMarkViewDescription)(()=>ref.current, (markView)=>markView?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
         const markView = createMarkView(...args);
         const dom = markView.dom;
         const wrapperDOM = innerRef.current ?? ref.current;
+        wrapperDOM.appendChild(dom);
+        // Force a re-render so that we properly create
+        // a portal into the contentDOM/dom
+        forceUpdate();
         return {
             ...markView,
             destroy () {
@@ -101,7 +110,7 @@ const CustomMarkView = /*#__PURE__*/ (0, _react.memo)(function CustomMarkView(pa
     const props = {
         ref: innerRef
     };
-    return /*#__PURE__*/ _react.default.createElement(Component, props, contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+    return /*#__PURE__*/ _react.default.createElement(Component, props, contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, children), contentDOM) : null);
 });

package/dist/cjs/components/marks/ReactMarkView.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "ReactMarkView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
 const _IgnoreMutationContext = require("../../contexts/IgnoreMutationContext.js");
 const _useMarkViewDescription = require("../../hooks/useMarkViewDescription.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -56,6 +56,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(param) {
     let { component: Component, mark, inline, getPos, children } = param;
     const ref = (0, _react.useRef)(null);
+    const contentDOMRef = (0, _react.useRef)(null);
     const ignoreMutationRef = (0, _react.useRef)(null);
     const setIgnoreMutation = (0, _react.useCallback)((handler)=>{
         ignoreMutationRef.current = handler;
@@ -66,7 +67,7 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
             };
         };
     }, []);
-    const markProps = (0, _react.useMemo)(()=>({
+    const markViewDescProps = (0, _react.useMemo)(()=>({
             mark,
             getPos,
             inline
@@ -75,7 +76,7 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
         inline,
         mark
     ]);
-    const { childContextValue } = (0, _useMarkViewDescription.useMarkViewDescription)(ref, ()=>({
+    const { childContextValue, refUpdated } = (0, _useMarkViewDescription.useMarkViewDescription)(()=>ref.current, ()=>contentDOMRef.current ?? ref.current, ()=>({
             dom: ref.current,
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
@@ -84,14 +85,33 @@ const ReactMarkView = /*#__PURE__*/ (0, _react.memo)(function ReactMarkView(para
                 }
                 return false;
             }
-        }), markProps);
+        }), markViewDescProps);
+    const setDOM = (0, _react.useCallback)((el)=>{
+        ref.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setContentDOM = (0, _react.useCallback)((el)=>{
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const markProps = (0, _react.useMemo)(()=>({
+            ...markViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        markViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         markProps,
-        ref
+        ref: setDOM
     };
     return /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
         value: setIgnoreMutation
-    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ _react.default.createElement(Component, props, children)));
 });

package/dist/cjs/components/nodes/DefaultNodeView.js

@@ -52,7 +52,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const DefaultNodeView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultNodeView(param, ref) {
-    let { nodeProps: { node }, children, ...props } = param;
+    let { nodeProps: { node, contentDOMRef }, children, ...props } = param;
     const spec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
         node
     ]);
@@ -62,6 +62,7 @@ const DefaultNodeView = /*#__PURE__*/ (0, _react.forwardRef)(function DefaultNod
     return /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
         ...props,
         outputSpec: spec,
-        ref: ref
+        ref: ref,
+        contentDOMRef: contentDOMRef
     }, children);
 });

package/dist/cjs/components/nodes/DocNodeView.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "DocNodeView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
-const _useNodeViewDescriptor = require("../../hooks/useNodeViewDescriptor.js");
+const _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
+const _useNodeViewDescription = require("../../hooks/useNodeViewDescription.js");
 const _ChildNodeViews = require("../ChildNodeViews.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -62,14 +62,15 @@ const DocNodeView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forw
             node,
             getPos,
             decorations,
-            innerDecorations
+            innerDecorations,
+            contentDOMRef: innerRef
         }), [
         node,
         getPos,
         decorations,
         innerDecorations
     ]);
-    const { childContextValue } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(innerRef, ()=>{
+    const { childContextValue } = (0, _useNodeViewDescription.useNodeViewDescription)(()=>innerRef.current, ()=>innerRef.current, ()=>{
         const dom = innerRef.current;
         return {
             dom,
@@ -78,8 +79,8 @@ const DocNodeView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forw
                 return true;
             }
         };
-    }, ()=>innerRef.current, nodeProps);
-    const children = /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+    }, nodeProps);
+    const children = /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
         getPos: getPos,
@@ -91,6 +92,6 @@ const DocNodeView = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _react.forw
         suppressContentEditableWarning: true,
         ref: innerRef
     };
-    const element = as ? /*#__PURE__*/ (0, _react.cloneElement)(as, props, children) : /*#__PURE__*/ (0, _react.createElement)("div", props, children);
+    const element = as ? /*#__PURE__*/ (0, _react.createElement)(as, props, children) : /*#__PURE__*/ (0, _react.createElement)("div", props, children);
     return nodeProps.decorations.reduce(_ChildNodeViews.wrapInDeco, element);
 }));

package/dist/cjs/components/nodes/NodeView.js

@@ -2,16 +2,24 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "NodeView", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    GetPosContext: function() {
+        return GetPosContext;
+    },
+    NodeView: function() {
         return NodeView;
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _NodeViewContext = require("../../contexts/NodeViewContext.js");
-const _CustomNodeView = require("./CustomNodeView.js");
 const _DefaultNodeView = require("./DefaultNodeView.js");
+const _NodeViewConstructorView = require("./NodeViewConstructorView.js");
 const _ReactNodeView = require("./ReactNodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -65,7 +73,7 @@ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
     const Component = (0, _react.useMemo)(()=>{
         if (constructor) {
             return function NodeView(props) {
-                return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
+                return /*#__PURE__*/ _react.default.createElement(_NodeViewConstructorView.NodeViewConstructorView, {
                     constructor: constructor,
                     ...props
                 });
@@ -82,5 +90,8 @@ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(props) {
         constructor,
         component
     ]);
-    return /*#__PURE__*/ _react.default.createElement(Component, props);
+    return /*#__PURE__*/ _react.default.createElement(GetPosContext.Provider, {
+        value: props.getPos
+    }, /*#__PURE__*/ _react.default.createElement(Component, props));
 });
+const GetPosContext = /*#__PURE__*/ (0, _react.createContext)(null);

package/dist/cjs/components/nodes/{CustomNodeView.js → NodeViewConstructorView.js}

@@ -2,17 +2,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "CustomNodeView", {
+Object.defineProperty(exports, "NodeViewConstructorView", {
     enumerable: true,
     get: function() {
-        return CustomNodeView;
+        return NodeViewConstructorView;
     }
 });
 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 _useNodeViewDescriptor = require("../../hooks/useNodeViewDescriptor.js");
+const _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
+const _useForceUpdate = require("../../hooks/useForceUpdate.js");
+const _useNodeViewDescription = require("../../hooks/useNodeViewDescription.js");
 const _ChildNodeViews = require("../ChildNodeViews.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -55,15 +56,19 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(param) {
+const NodeViewConstructorView = /*#__PURE__*/ (0, _react.memo)(function NodeViewConstructorView(param) {
     let { constructor, node, getPos, innerDeco, outerDeco } = param;
     const ref = (0, _react.useRef)(null);
     const innerRef = (0, _react.useRef)(null);
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const nodeProps = (0, _react.useMemo)(()=>({
             node,
             getPos,
             decorations: outerDeco,
-            innerDecorations: innerDeco
+            innerDecorations: innerDeco,
+            contentDOMRef: {
+                current: null
+            }
         }), [
         node,
         getPos,
@@ -84,7 +89,7 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
         }
         return nodeView;
     };
-    const { childContextValue, contentDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, function() {
+    const { childContextValue, contentDOM } = (0, _useNodeViewDescription.useNodeViewDescription)(()=>ref.current, (source)=>source?.contentDOM ?? null, function() {
         for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
             args[_key] = arguments[_key];
         }
@@ -101,25 +106,33 @@ const CustomNodeView = /*#__PURE__*/ (0, _react.memo)(function CustomNodeView(pa
                 nodeDOM.draggable = true;
             }
         }
+        if (contentDOM) {
+            // Force a re-render if we have a contentDOM,
+            // so that we properly create a portal into it
+            forceUpdate();
+        }
         return {
-            ...nodeView,
             destroy () {
                 if (nodeView.destroy) {
                     nodeView.destroy();
                 }
                 wrapperDOM.removeChild(nodeDOM);
             },
+            dom: nodeView.dom,
+            contentDOM: nodeView.contentDOM,
+            multiType: nodeView.multiType,
+            update: nodeView.update?.bind(nodeView),
             selectNode: nodeView.selectNode?.bind(nodeView),
             deselectNode: nodeView.deselectNode?.bind(nodeView),
             stopEvent: nodeView.stopEvent?.bind(nodeView),
             ignoreMutation: nodeView.ignoreMutation?.bind(nodeView)
         };
-    }, (source)=>source?.contentDOM ?? null, nodeProps);
+    }, 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, {
+    const children = !node.isLeaf && contentDOM ? /*#__PURE__*/ (0, _reactdom.createPortal)(/*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
         getPos: getPos,

package/dist/cjs/components/nodes/ReactNodeView.js

@@ -9,12 +9,12 @@ Object.defineProperty(exports, "ReactNodeView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../../contexts/ChildDescriptorsContext.js");
-const _EditorContext = require("../../contexts/EditorContext.js");
+const _ChildDescriptionsContext = require("../../contexts/ChildDescriptionsContext.js");
 const _IgnoreMutationContext = require("../../contexts/IgnoreMutationContext.js");
 const _SelectNodeContext = require("../../contexts/SelectNodeContext.js");
 const _StopEventContext = require("../../contexts/StopEventContext.js");
-const _useNodeViewDescriptor = require("../../hooks/useNodeViewDescriptor.js");
+const _useForceUpdate = require("../../hooks/useForceUpdate.js");
+const _useNodeViewDescription = require("../../hooks/useNodeViewDescription.js");
 const _ChildNodeViews = require("../ChildNodeViews.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -59,11 +59,12 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
-    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
     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);
+    const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
+    const domRef = (0, _react.useRef)(null);
+    const nodeDOMRef = (0, _react.useRef)(null);
+    const contentDOMRef = (0, _react.useRef)(null);
     const selectNodeRef = (0, _react.useRef)(null);
     const deselectNodeRef = (0, _react.useRef)(null);
     const stopEventRef = (0, _react.useRef)(null);
@@ -93,7 +94,7 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
             };
         };
     }, []);
-    const nodeProps = (0, _react.useMemo)(()=>({
+    const nodeViewDescProps = (0, _react.useMemo)(()=>({
             node: node,
             getPos: getPos,
             decorations: outerDeco,
@@ -104,10 +105,10 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         node,
         outerDeco
     ]);
-    const { childContextValue, contentDOM, nodeDOM } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(ref, ()=>{
+    const { childContextValue, refUpdated } = (0, _useNodeViewDescription.useNodeViewDescription)(()=>domRef.current, ()=>contentDOMRef.current, ()=>{
         setSelected(false);
         return {
-            dom: innerRef.current ?? ref.current,
+            dom: nodeDOMRef.current ?? domRef.current,
             update () {
                 return true;
             },
@@ -115,46 +116,85 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
             selectNode () {
                 const selectNode = selectNodeRef.current;
                 if (selectNode) {
-                    selectNode.call(this);
+                    selectNode();
                 }
                 setSelected(true);
             },
             deselectNode () {
                 const deselectNode = deselectNodeRef.current;
                 if (deselectNode) {
-                    deselectNode.call(this);
+                    deselectNode();
                 }
                 setSelected(false);
             },
             stopEvent (event) {
                 const stopEvent = stopEventRef.current;
                 if (stopEvent) {
-                    return stopEvent.call(this, event);
+                    return stopEvent(event);
                 }
                 return false;
             },
             ignoreMutation (mutation) {
                 const ignoreMutation = ignoreMutationRef.current;
                 if (ignoreMutation) {
-                    return ignoreMutation.call(this, mutation);
+                    return ignoreMutation(mutation);
                 }
                 return false;
             }
         };
-    }, (source, children)=>view.composing ? source?.contentDOM ?? null : children[0]?.dom.parentElement ?? null, nodeProps);
+    }, nodeViewDescProps);
+    const setDOM = (0, _react.useCallback)((el)=>{
+        domRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setNodeDOM = (0, _react.useCallback)((el)=>{
+        if (!!nodeDOMRef.current !== !!el) {
+            // Force a re-render if the existence of nodeDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        nodeDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const setContentDOM = (0, _react.useCallback)((el)=>{
+        if (!!contentDOMRef.current !== !!el) {
+            // Force a re-render if the existence of contentDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const nodeProps = (0, _react.useMemo)(()=>({
+            ...nodeViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        nodeViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         nodeProps,
-        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+        ...!contentDOMRef.current && !nodeProps.node.isText && nodeDOMRef.current?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,
         ...!hasCustomSelectNode && selected ? {
             className: "ProseMirror-selectednode"
         } : null,
-        ...!hasCustomSelectNode && selected || node.type.spec.draggable ? {
+        ...!hasCustomSelectNode && selected || !contentDOMRef.current && !nodeProps.node.isText && domRef.current?.nodeName !== "BR" && node.type.spec.draggable ? {
             draggable: true
         } : null,
-        ref: innerRef
+        ref: setNodeDOM
     };
     const children = !node.isLeaf ? /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
         getPos: getPos,
@@ -162,7 +202,7 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         innerDecorations: innerDeco
     }) : null;
     const element = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, /*#__PURE__*/ _react.default.createElement(Component, props, children)), {
-        ref
+        ref: setDOM
     });
     return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
         value: setSelectNode
@@ -170,7 +210,7 @@ const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(para
         value: setStopEvent
     }, /*#__PURE__*/ _react.default.createElement(_IgnoreMutationContext.IgnoreMutationContext.Provider, {
         value: setIgnoreMutation
-    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: childContextValue
     }, element))));
 });

package/dist/cjs/contexts/{ChildDescriptorsContext.js → ChildDescriptionsContext.js}

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "ChildDescriptorsContext", {
+Object.defineProperty(exports, "ChildDescriptionsContext", {
     enumerable: true,
     get: function() {
-        return ChildDescriptorsContext;
+        return ChildDescriptionsContext;
     }
 });
 const _react = require("react");
-const ChildDescriptorsContext = (0, _react.createContext)({
+const ChildDescriptionsContext = (0, _react.createContext)({
     parentRef: {
         current: undefined
     },

package/dist/cjs/hooks/useEditor.js

@@ -103,11 +103,7 @@ function useEditor(mount, options) {
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
-            // Plugins might dispatch transactions from their
-            // view update lifecycle hooks
-            flushSyncRef.current = false;
             view.commitPendingEffects();
-            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/cjs/hooks/useEditorEventCallback.js

@@ -31,7 +31,7 @@ function useEditorEventCallback(callback) {
             args[_key] = arguments[_key];
         }
         assertIsReactEditorView(view);
-        return ref.current.call(this, view, ...args);
+        return ref.current(view, ...args);
     }, [
         view
     ]);

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -10,26 +10,22 @@ Object.defineProperty(exports, "useMarkViewDescription", {
 });
 const _react = require("react");
 const _ReactEditorView = require("../ReactEditorView.js");
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.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, dom) {
-    return source?.contentDOM ?? children[0]?.dom?.parentElement ?? dom;
-}
-function useMarkViewDescription(ref, constructor, props) {
+function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptorsContext.ChildDescriptorsContext);
-    const [dom, setDOM] = (0, _react.useState)(null);
-    const [contentDOM, setContentDOM] = (0, _react.useState)(null);
+    const { parentRef, siblingsRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
+    const contentDOMRef = (0, _react.useRef)(null);
     const viewDescRef = (0, _react.useRef)();
     const childrenRef = (0, _react.useRef)([]);
     const create = (0, _useEffectEvent.useEffectEvent)(()=>{
         if (!(view instanceof _ReactEditorView.ReactEditorView)) {
             return;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom) {
             return;
         }
@@ -40,10 +36,9 @@ function useMarkViewDescription(ref, constructor, props) {
         }
         const parent = parentRef.current;
         const children = childrenRef.current;
-        const contentDOM = findContentDOM(markView, children, ref.current);
-        const viewDesc = new _viewdesc.MarkViewDesc(parent, children, getPos, mark, dom, contentDOM, markView);
-        setDOM(dom);
-        setContentDOM(contentDOM);
+        const contentDOM = getContentDOM(markView);
+        const viewDesc = new _viewdesc.ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        contentDOMRef.current = contentDOM;
         return viewDesc;
     });
     const update = (0, _useEffectEvent.useEffectEvent)(()=>{
@@ -54,12 +49,12 @@ function useMarkViewDescription(ref, constructor, props) {
         if (!viewDesc) {
             return false;
         }
-        const dom = ref.current;
+        const dom = getDOM();
         if (!dom || dom !== viewDesc.dom) {
             return false;
         }
-        const contentDOM = findContentDOM(viewDesc, viewDesc.children, dom);
-        if (contentDOM !== viewDesc.contentDOM) {
+        const contentDOM = getContentDOM(viewDesc);
+        if (contentDOM !== (viewDesc.contentDOM ?? dom)) {
             return false;
         }
         const { mark } = props;
@@ -76,8 +71,7 @@ function useMarkViewDescription(ref, constructor, props) {
             const index = siblings.indexOf(viewDesc);
             siblings.splice(index, 1);
         }
-        setDOM(null);
-        setContentDOM(null);
+        contentDOMRef.current = null;
     });
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         viewDescRef.current = create();
@@ -88,6 +82,16 @@ function useMarkViewDescription(ref, constructor, props) {
         create,
         destroy
     ]);
+    const refUpdated = (0, _react.useCallback)(()=>{
+        if (!update()) {
+            destroy();
+            viewDescRef.current = create();
+        }
+    }, [
+        create,
+        destroy,
+        update
+    ]);
     (0, _useClientLayoutEffect.useClientLayoutEffect)(()=>{
         if (!update()) {
             destroy();
@@ -118,8 +122,7 @@ function useMarkViewDescription(ref, constructor, props) {
     ]);
     return {
         childContextValue,
-        dom,
-        contentDOM,
-        ref
+        contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,
+        refUpdated
     };
 }