@handlewithcare/react-prosemirror 2.0.0 → 2.2.0

package/README.md

@@ -22,16 +22,21 @@ ProseMirror renderer will happen in this repository, published as
 
 ## Installation
 
+_Note_: React ProseMirror releases are coupled to specific prosemirror-view
+releases, and are not guaranteed to work with other versions of
+prosemirror-view. Ensure that your version of prosemirror-view matches the
+version in React ProseMirror's peer dependencies!
+
 npm:
 
 ```sh
-npm install @handlewithcare/react-prosemirror
+npm install @handlewithcare/react-prosemirror prosemirror-view@1.37.1 prosemirror-state prosemirror-model
 ```
 
 yarn:
 
 ```sh
-yarn add @handlewithcare/react-prosemirror
+yarn add @handlewithcare/react-prosemirror prosemirror-view@1.37.1 prosemirror-state prosemirror-model
 ```
 
 <!-- toc -->
@@ -43,7 +48,7 @@ yarn add @handlewithcare/react-prosemirror
     - [`useEditorEventCallback`](#useeditoreventcallback)
     - [`useEditorEventListener`](#useeditoreventlistener)
   - [Building node views with React](#building-node-views-with-react)
-- [What's changing in v2?](#whats-changing-in-v2)
+- [What's new in v2?](#whats-new-in-v2)
   - [API changes](#api-changes)
 - [API](#api)
   - [`ProseMirror`](#prosemirror)
@@ -55,7 +60,9 @@ yarn add @handlewithcare/react-prosemirror
   - [`NodeViewComponentProps`](#nodeviewcomponentprops)
   - [`useStopEvent`](#usestopevent)
   - [`useSelectNode`](#useselectnode)
+  - [`useIsNodeSelected`](#useisnodeselected)
   - [`widget`](#widget)
+- [Looking for someone to collaborate with?](#looking-for-someone-to-collaborate-with)
 
 <!-- tocstop -->
 
@@ -416,9 +423,9 @@ function ProseMirrorEditor() {
 }
 ```
 
-## What's changing in v2?
+## What's new in v2?
 
-The upcoming v2 release constitutes a significant re-write of the library.
+The v2 release constitutes a significant re-write of the library.
 
 Previously, React ProseMirror relied on ProseMirror's EditorView to manage the
 DOM for the editor. To integrate it with React, we used React
@@ -689,6 +696,16 @@ This hook can be used within a node view component to register
 The selectNode handler will only be called when a NodeSelection is created whose
 node is this one.
 
+### `useIsNodeSelected`
+
+```tsx
+type useIsNodeSelected = (): boolean
+```
+
+This hook can be used within a node view component to subscribe to a boolean
+value determining whether this node is selected. The hook will return true when
+a NodeSelection is created whose node is this one.
+
 ### `widget`
 
 ```tsx
@@ -703,3 +720,10 @@ type widget = (
 
 Like ProseMirror View's `Decoration.widget`, but with support for React
 components.
+
+## Looking for someone to collaborate with?
+
+Reach out to [Handle with Care](https://handlewithcare.dev/#get-in-touch)! We're
+a product development collective with years of experience bringing excellent
+ideas to life. We love React and ProseMirror, and we're always looking for new
+folks to work with!

package/dist/cjs/components/CustomNodeView.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, "CustomNodeView", {
 });
 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 _useClientOnly = require("../hooks/useClientOnly.js");
+const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -54,10 +56,75 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-function CustomNodeView(param) {
-    let { contentDomRef, customNodeViewRef, customNodeViewRootRef, customNodeView, initialNode, node, getPos, initialOuterDeco, initialInnerDeco, innerDeco } = param;
+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;
+    // this is ill-conceived; should revisit
+    const initialNode = (0, _react.useRef)(node);
+    const initialOuterDeco = (0, _react.useRef)(outerDeco);
+    const initialInnerDeco = (0, _react.useRef)(innerDeco);
+    const customNodeViewRootRef = (0, _react.useRef)(null);
+    const customNodeViewRef = (0, _react.useRef)(null);
     const shouldRender = (0, _useClientOnly.useClientOnly)();
+    (0, _react.useLayoutEffect)(()=>{
+        if (!customNodeViewRef.current || !customNodeViewRootRef.current || !shouldRender) return;
+        const { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+        return ()=>{
+            customNodeViewRef.current?.destroy?.();
+        };
+    }, [
+        customNodeViewRef,
+        customNodeViewRootRef,
+        nodeDomRef,
+        shouldRender
+    ]);
+    (0, _react.useLayoutEffect)(()=>{
+        if (!customNodeView || !customNodeViewRef.current || !shouldRender) 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;
+        initialNode.current = node;
+        initialOuterDeco.current = outerDeco;
+        initialInnerDeco.current = innerDeco;
+        customNodeViewRef.current = customNodeView(initialNode.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, initialOuterDeco.current, initialInnerDeco.current);
+        const { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+    }, [
+        customNodeView,
+        view,
+        innerDeco,
+        node,
+        outerDeco,
+        getPos,
+        customNodeViewRef,
+        customNodeViewRootRef,
+        initialNode,
+        initialOuterDeco,
+        initialInnerDeco,
+        nodeDomRef,
+        shouldRender,
+        getPosFunc
+    ]);
+    const { childDescriptors, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const childContextValue = (0, _react.useMemo)(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
     if (!shouldRender) return null;
     if (!customNodeViewRef.current) {
         customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
@@ -67,7 +134,7 @@ function CustomNodeView(param) {
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;
-    return /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
+    const element = /*#__PURE__*/ (0, _react.createElement)(node.isInline ? "span" : "div", {
         ref: customNodeViewRootRef,
         contentEditable: !!contentDOM,
         suppressContentEditableWarning: true
@@ -76,4 +143,13 @@ function CustomNodeView(param) {
         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);
+});

package/dist/cjs/components/MarkView.js

@@ -82,12 +82,15 @@ 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.current(), mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current, {
+                dom: domRef.current,
+                contentDOM: firstChildDesc?.dom.parentElement ?? domRef.current
+            });
         } else {
             viewDescRef.current.parent = parentRef.current;
-            viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.spec.dom = viewDescRef.current.dom = domRef.current;
             viewDescRef.current.children = childDescriptors.current;
-            viewDescRef.current.contentDOM = firstChildDesc?.dom.parentElement ?? domRef.current;
+            viewDescRef.current.spec.contentDOM = viewDescRef.current.contentDOM = firstChildDesc?.dom.parentElement ?? domRef.current;
             viewDescRef.current.mark = mark;
             viewDescRef.current.getPos = ()=>getPos.current();
         }

package/dist/cjs/components/NodeView.js

@@ -9,15 +9,9 @@ Object.defineProperty(exports, "NodeView", {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
-const _NodeViewContext = require("../contexts/NodeViewContext.js");
-const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
-const _StopEventContext = require("../contexts/StopEventContext.js");
-const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
-const _ChildNodeViews = require("./ChildNodeViews.js");
 const _CustomNodeView = require("./CustomNodeView.js");
-const _OutputSpec = require("./OutputSpec.js");
+const _ReactNodeView = require("./ReactNodeView.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -61,136 +55,22 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
     let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = (0, _react.useRef)(null);
-    const nodeDomRef = (0, _react.useRef)(null);
-    const contentDomRef = (0, _react.useRef)(null);
-    const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
-    // this is ill-conceived; should revisit
-    const initialNode = (0, _react.useRef)(node);
-    const initialOuterDeco = (0, _react.useRef)(outerDeco);
-    const initialInnerDeco = (0, _react.useRef)(innerDeco);
-    const customNodeViewRootRef = (0, _react.useRef)(null);
-    const customNodeViewRef = (0, _react.useRef)(null);
-    // const state = useEditorState();
-    const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
-        node
-    ]);
-    // TODO: Would be great to pull all of the custom node view stuff into
-    // a hook
     const customNodeView = view?.someProp("nodeViews", (nodeViews)=>nodeViews?.[node.type.name]);
-    (0, _react.useLayoutEffect)(()=>{
-        if (!customNodeViewRef.current || !customNodeViewRootRef.current) return;
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-        return ()=>{
-            customNodeViewRef.current?.destroy?.();
-        };
-    }, []);
-    (0, _react.useLayoutEffect)(()=>{
-        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;
-        initialNode.current = node;
-        initialOuterDeco.current = outerDeco;
-        initialInnerDeco.current = innerDeco;
-        customNodeViewRef.current = customNodeView(initialNode.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(), initialOuterDeco.current, initialInnerDeco.current);
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-    }, [
-        customNodeView,
-        view,
-        innerDeco,
-        node,
-        outerDeco,
-        getPos
-    ]);
-    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const finalProps = {
-        ...props,
-        ...!hasContentDOM && {
-            contentEditable: false
-        }
-    };
-    const nodeProps = (0, _react.useMemo)(()=>({
-            node: node,
-            getPos: getPosFunc,
-            decorations: outerDeco,
-            innerDecorations: innerDeco
-        }), [
-        getPosFunc,
-        innerDeco,
-        node,
-        outerDeco
-    ]);
-    if (Component) {
-        element = /*#__PURE__*/ _react.default.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else if (customNodeView) {
-        element = /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
-            contentDomRef: contentDomRef,
+    if (customNodeView) {
+        return /*#__PURE__*/ _react.default.createElement(_CustomNodeView.CustomNodeView, {
             customNodeView: customNodeView,
-            customNodeViewRef: customNodeViewRef,
-            customNodeViewRootRef: customNodeViewRootRef,
-            initialInnerDeco: initialInnerDeco,
-            initialNode: initialNode,
-            initialOuterDeco: initialOuterDeco,
             node: node,
-            getPos: getPos,
-            innerDeco: innerDeco
+            innerDeco: innerDeco,
+            outerDeco: outerDeco,
+            getPos: getPos
         });
-    } else {
-        if (outputSpec) {
-            element = /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
     }
-    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
-        ref: domRef
-    } : // we've already passed the domRef to the NodeView component
-    // as a prop
-    undefined);
-    const childContextValue = (0, _react.useMemo)(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
-    return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
-        value: setSelectNode
-    }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {
-        value: setStopEvent
-    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement)));
+    return /*#__PURE__*/ _react.default.createElement(_ReactNodeView.ReactNodeView, {
+        node: node,
+        innerDeco: innerDeco,
+        outerDeco: outerDeco,
+        getPos: getPos,
+        ...props
+    });
 });

package/dist/cjs/components/OutputSpec.js

@@ -57,7 +57,7 @@ const ForwardedOutputSpec = /*#__PURE__*/ (0, _react.memo)(/*#__PURE__*/ (0, _re
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, outputSpec);
     }
     if (!Array.isArray(outputSpec)) {
-        throw new Error("@nytimes/react-prosemirror only supports strings and arrays in toDOM");
+        throw new Error("@handlewithcare/react-prosemirror only supports strings and arrays in toDOM");
     }
     const tagSpec = outputSpec[0];
     const tagName = tagSpec.replace(" ", ":");

package/dist/cjs/components/ReactNodeView.js

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactNodeView", {
+    enumerable: true,
+    get: function() {
+        return ReactNodeView;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _ChildDescriptorsContext = require("../contexts/ChildDescriptorsContext.js");
+const _NodeViewContext = require("../contexts/NodeViewContext.js");
+const _SelectNodeContext = require("../contexts/SelectNodeContext.js");
+const _StopEventContext = require("../contexts/StopEventContext.js");
+const _useNodeViewDescriptor = require("../hooks/useNodeViewDescriptor.js");
+const _ChildNodeViews = require("./ChildNodeViews.js");
+const _OutputSpec = require("./OutputSpec.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const ReactNodeView = /*#__PURE__*/ (0, _react.memo)(function ReactNodeView(param) {
+    let { outerDeco, getPos, node, innerDeco, ...props } = param;
+    const domRef = (0, _react.useRef)(null);
+    const nodeDomRef = (0, _react.useRef)(null);
+    const contentDomRef = (0, _react.useRef)(null);
+    const getPosFunc = (0, _react.useRef)(()=>getPos.current()).current;
+    const { nodeViews } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
+    let element = null;
+    const Component = nodeViews[node.type.name];
+    const outputSpec = (0, _react.useMemo)(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = (0, _useNodeViewDescriptor.useNodeViewDescriptor)(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const finalProps = {
+        ...props,
+        ...!hasContentDOM && {
+            contentEditable: false
+        }
+    };
+    const nodeProps = (0, _react.useMemo)(()=>({
+            node: node,
+            getPos: getPosFunc,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPosFunc,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    if (Component) {
+        element = /*#__PURE__*/ _react.default.createElement(Component, {
+            ...finalProps,
+            ref: nodeDomRef,
+            nodeProps: nodeProps
+        }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+            getPos: getPos,
+            node: node,
+            innerDecorations: innerDeco
+        }));
+    } else {
+        if (outputSpec) {
+            element = /*#__PURE__*/ _react.default.createElement(_OutputSpec.OutputSpec, {
+                ...finalProps,
+                ref: nodeDomRef,
+                outputSpec: outputSpec
+            }, /*#__PURE__*/ _react.default.createElement(_ChildNodeViews.ChildNodeViews, {
+                getPos: getPos,
+                node: node,
+                innerDecorations: innerDeco
+            }));
+        }
+    }
+    if (!element) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    const decoratedElement = /*#__PURE__*/ (0, _react.cloneElement)(outerDeco.reduce(_ChildNodeViews.wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
+        ref: domRef
+    } : // we've already passed the domRef to the NodeView component
+    // as a prop
+    undefined);
+    const childContextValue = (0, _react.useMemo)(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
+    return /*#__PURE__*/ _react.default.createElement(_SelectNodeContext.SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ _react.default.createElement(_StopEventContext.StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, decoratedElement)));
+});

package/dist/cjs/components/TextNodeView.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "TextNodeView", {
 });
 const _prosemirrorview = require("prosemirror-view");
 const _react = require("react");
-const _reactdom = require("react-dom");
+const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
 function shallowEqual(objA, objB) {
@@ -42,7 +42,7 @@ let TextNodeView = class TextNodeView extends _react.Component {
         const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
         // There simply is no other way to ref a text node
         // eslint-disable-next-line react/no-find-dom-node
-        const dom = (0, _reactdom.findDOMNode)(this);
+        const dom = (0, _findDOMNode.findDOMNode)(this);
         // We only need to explicitly create a CompositionViewDesc
         // when a composition was started that produces a new text node.
         // Otherwise we just rely on re-rendering the renderRef

package/dist/cjs/findDOMNode.js

@@ -0,0 +1,46 @@
+"use strict";
+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, {
+    findDOMNode: function() {
+        return findDOMNode;
+    },
+    getInstance: function() {
+        return getInstance;
+    }
+});
+const _reflection = require("react-reconciler/reflection");
+function getInstance(key) {
+    return key._reactInternals;
+}
+// https://github.com/facebook/react/blob/main/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js#L322
+function getPublicInstance(instance) {
+    return instance;
+}
+// https://github.com/facebook/react/blob/main/packages/react-reconciler/src/ReactFiberReconciler.js#L153
+function findHostInstance(component) {
+    const fiber = getInstance(component);
+    if (fiber === undefined) {
+        if (typeof component.render === "function") {
+            throw new Error("Unable to find node on an unmounted component.");
+        } else {
+            const keys = Object.keys(component).join(",");
+            throw new Error(`Argument appears to not be a ReactComponent. Keys: ${keys}`);
+        }
+    }
+    const hostFiber = (0, _reflection.findCurrentHostFiber)(fiber);
+    if (hostFiber === null) {
+        return null;
+    }
+    return getPublicInstance(hostFiber.stateNode);
+}
+function findDOMNode(componentOrElement) {
+    return findHostInstance(componentOrElement);
+}

package/dist/cjs/hooks/useEditor.js

@@ -180,6 +180,7 @@ function useEditor(mount, options) {
             didWarnValueDefaultValue = true;
         }
     }
+    const flushSyncRef = (0, _react.useRef)(true);
     const [cursorWrapper, _setCursorWrapper] = (0, _react.useState)(null);
     const forceUpdate = (0, _useForceUpdate.useForceUpdate)();
     const defaultState = options.defaultState ?? EMPTY_STATE;
@@ -201,14 +202,23 @@ function useEditor(mount, options) {
         setCursorWrapper
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
-        (0, _reactdom.flushSync)(()=>{
+        if (flushSyncRef.current) {
+            (0, _reactdom.flushSync)(()=>{
+                if (!options.state) {
+                    setState((s)=>s.apply(tr));
+                }
+                if (options.dispatchTransaction) {
+                    options.dispatchTransaction.call(this, tr);
+                }
+            });
+        } else {
             if (!options.state) {
                 setState((s)=>s.apply(tr));
             }
             if (options.dispatchTransaction) {
                 options.dispatchTransaction.call(this, tr);
             }
-        });
+        }
     }, [
         options.dispatchTransaction,
         options.state
@@ -273,7 +283,8 @@ function useEditor(mount, options) {
             registerEventListener,
             unregisterEventListener,
             cursorWrapper,
-            docViewDescRef
+            docViewDescRef,
+            flushSyncRef
         }), [
         view,
         registerEventListener,

package/dist/cjs/hooks/useEditorEffect.js

@@ -12,7 +12,7 @@ const _react = require("react");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _useLayoutGroupEffect = require("./useLayoutGroupEffect.js");
 function useEditorEffect(effect, dependencies) {
-    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
+    const { view, flushSyncRef } = (0, _react.useContext)(_EditorContext.EditorContext);
     // The rules of hooks want `effect` to be included in the
     // dependency list, but dependency issues for `effect` will
     // be caught by the linter at the call-site for
@@ -22,7 +22,10 @@ function useEditorEffect(effect, dependencies) {
     // be defined inline and run on every re-render.
     (0, _useLayoutGroupEffect.useLayoutGroupEffect)(()=>{
         if (view) {
-            return effect(view);
+            flushSyncRef.current = false;
+            const result = effect(view);
+            flushSyncRef.current = true;
+            return result;
         }
     }, // The rules of hooks want to be able to statically
     // verify the dependencies for the effect, but this will