@handlewithcare/react-prosemirror 2.0.0 → 2.2.0

package/dist/cjs/hooks/useIsNodeSelected.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsNodeSelected", {
+    enumerable: true,
+    get: function() {
+        return useIsNodeSelected;
+    }
+});
+const _react = require("react");
+const _useSelectNode = require("./useSelectNode.js");
+function useIsNodeSelected() {
+    const [isSelected, setIsSelected] = (0, _react.useState)(false);
+    (0, _useSelectNode.useSelectNode)(()=>{
+        setIsSelected(true);
+    }, ()=>{
+        setIsSelected(false);
+    });
+    return isSelected;
+}

package/dist/cjs/index.js

@@ -31,6 +31,9 @@ _export(exports, {
     useEditorState: function() {
         return _useEditorState.useEditorState;
     },
+    useIsNodeSelected: function() {
+        return _useIsNodeSelected.useIsNodeSelected;
+    },
     useSelectNode: function() {
         return _useSelectNode.useSelectNode;
     },
@@ -49,5 +52,6 @@ const _useEditorEventListener = require("./hooks/useEditorEventListener.js");
 const _useEditorState = require("./hooks/useEditorState.js");
 const _useStopEvent = require("./hooks/useStopEvent.js");
 const _useSelectNode = require("./hooks/useSelectNode.js");
+const _useIsNodeSelected = require("./hooks/useIsNodeSelected.js");
 const _reactKeys = require("./plugins/reactKeys.js");
 const _ReactWidgetType = require("./decorations/ReactWidgetType.js");

package/dist/cjs/plugins/componentEventListeners.js

@@ -26,7 +26,7 @@ function componentEventListeners(eventHandlerRegistry) {
         domEventHandlers[eventType] = handleEvent;
     }
     const plugin = new _prosemirrorstate.Plugin({
-        key: new _prosemirrorstate.PluginKey("@nytimes/react-prosemirror/componentEventListeners"),
+        key: new _prosemirrorstate.PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
         props: {
             handleDOMEvents: domEventHandlers
         }

package/dist/cjs/plugins/reactKeys.js

@@ -24,7 +24,7 @@ function createNodeKey() {
     const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
     return key;
 }
-const reactKeysPluginKey = new _prosemirrorstate.PluginKey("@nytimes/react-prosemirror/reactKeys");
+const reactKeysPluginKey = new _prosemirrorstate.PluginKey("@handlewithcare/react-prosemirror/reactKeys");
 function reactKeys() {
     let composing = false;
     return new _prosemirrorstate.Plugin({

package/dist/cjs/selection/SelectionDOMObserver.js

@@ -145,9 +145,6 @@ let SelectionDOMObserver = class SelectionDOMObserver {
             this.currentSelection.set(sel);
         }
     }
-    selectionChanged(sel) {
-        return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && (0, _hasFocusAndSelection.hasFocusAndSelection)(this.view) && !this.ignoreSelectionChange(sel);
-    }
     forceFlush() {
         if (this.flushingSoon > -1) {
             window.clearTimeout(this.flushingSoon);

package/dist/cjs/selection/selectionToDOM.js

@@ -209,7 +209,7 @@ function selectionToDOM(view) {
             if (!sel.$from.parent.inlineContent) resetEditableFrom = temporarilyEditableNear(v, sel.from);
             if (!sel.empty && !sel.$from.parent.inlineContent) resetEditableTo = temporarilyEditableNear(v, sel.to);
         }
-        v.docView.setSelection(anchor, head, v.root, force);
+        v.docView.setSelection(anchor, head, v, force);
         if (brokenSelectBetweenUneditable) {
             if (resetEditableFrom) resetEditable(resetEditableFrom);
             if (resetEditableTo) resetEditable(resetEditableTo);

package/dist/cjs/viewdesc.js

@@ -336,18 +336,20 @@ let ViewDesc = class ViewDesc {
     // custom things with the selection. Note that this falls apart when
     // a selection starts in such a node and ends in another, in which
     // case we just use whatever domFromPos produces as a best effort.
-    setSelection(anchor, head, root) {
+    setSelection(anchor, head, view) {
         let force = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
         // If the selection falls entirely in a child, give it to that child
         const from = Math.min(anchor, head), to = Math.max(anchor, head);
         for(let i = 0, offset = 0; i < this.children.length; i++){
             const child = this.children[i], end = offset + child.size;
-            if (from > offset && to < end) return child.setSelection(anchor - offset - child.border, head - offset - child.border, root, force);
+            if (from > offset && to < end) return child.setSelection(anchor - offset - child.border, head - offset - child.border, view, force);
             offset = end;
         }
         let anchorDOM = this.domFromPos(anchor, anchor ? -1 : 1);
         let headDOM = head == anchor ? anchorDOM : this.domFromPos(head, head ? -1 : 1);
-        const domSel = root.getSelection();
+        const domSel = view.root.getSelection();
+        // @ts-expect-error - Internal method domSelectionRange
+        const selRange = view.domSelectionRange();
         let brKludge = false;
         // On Firefox, using Selection.collapse to put the cursor after a
         // BR node for some reason doesn't always work (#1073). On Safari,
@@ -379,11 +381,11 @@ let ViewDesc = class ViewDesc {
         }
         // Firefox can act strangely when the selection is in front of an
         // uneditable node. See #1163 and https://bugzilla.mozilla.org/show_bug.cgi?id=1709536
-        if (_browser.browser.gecko && domSel.focusNode && domSel.focusNode != headDOM.node && domSel.focusNode.nodeType == 1) {
-            const after = domSel.focusNode.childNodes[domSel.focusOffset];
+        if (_browser.browser.gecko && selRange.focusNode && selRange.focusNode != headDOM.node && selRange.focusNode.nodeType == 1) {
+            const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (!(force || brKludge && _browser.browser.safari) && (0, _selectionToDOM.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, domSel.anchorNode, domSel.anchorOffset) && (0, _selectionToDOM.isEquivalentPosition)(headDOM.node, headDOM.offset, domSel.focusNode, domSel.focusOffset)) return;
+        if (!(force || brKludge && _browser.browser.safari) && (0, _selectionToDOM.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _selectionToDOM.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
         // Selection.extend can be used to create an 'inverted' selection
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
@@ -508,8 +510,9 @@ let CompositionViewDesc = class CompositionViewDesc extends ViewDesc {
 };
 let MarkViewDesc = class MarkViewDesc extends ViewDesc {
     mark;
-    constructor(parent, children, getPos, mark, dom, contentDOM){
-        super(parent, children, getPos, dom, contentDOM), this.mark = mark;
+    spec;
+    constructor(parent, children, getPos, mark, dom, contentDOM, spec){
+        super(parent, children, getPos, dom, contentDOM), this.mark = mark, this.spec = spec;
     }
     parseRule() {
         if (this.dirty & NODE_DIRTY || this.mark.type.spec.reparseInView) return null;
@@ -532,6 +535,13 @@ let MarkViewDesc = class MarkViewDesc extends ViewDesc {
             this.dirty = NOT_DIRTY;
         }
     }
+    ignoreMutation(mutation) {
+        return this.spec.ignoreMutation ? this.spec.ignoreMutation(mutation) : super.ignoreMutation(mutation);
+    }
+    destroy() {
+        if (this.spec.destroy) this.spec.destroy();
+        super.destroy();
+    }
 };
 let NodeViewDesc = class NodeViewDesc extends ViewDesc {
     node;

package/dist/esm/components/CustomNodeView.js

@@ -1,12 +1,79 @@
-import React, { createElement, useContext } from "react";
+import React, { cloneElement, createElement, memo, useContext, useLayoutEffect, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { useClientOnly } from "../hooks/useClientOnly.js";
-import { ChildNodeViews } from "./ChildNodeViews.js";
-export function CustomNodeView(param) {
-    let { contentDomRef, customNodeViewRef, customNodeViewRootRef, customNodeView, initialNode, node, getPos, initialOuterDeco, initialInnerDeco, innerDeco } = param;
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+export const CustomNodeView = /*#__PURE__*/ memo(function CustomNodeView(param) {
+    let { customNodeView, node, getPos, innerDeco, outerDeco } = param;
     const { view } = useContext(EditorContext);
+    const domRef = useRef(null);
+    const nodeDomRef = useRef(null);
+    const contentDomRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    // this is ill-conceived; should revisit
+    const initialNode = useRef(node);
+    const initialOuterDeco = useRef(outerDeco);
+    const initialInnerDeco = useRef(innerDeco);
+    const customNodeViewRootRef = useRef(null);
+    const customNodeViewRef = useRef(null);
     const shouldRender = useClientOnly();
+    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
+    ]);
+    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 } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const childContextValue = 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
@@ -16,7 +83,7 @@ export function CustomNodeView(param) {
     }
     const { contentDOM } = customNodeViewRef.current;
     contentDomRef.current = contentDOM ?? null;
-    return /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
+    const element = /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
         ref: customNodeViewRootRef,
         contentEditable: !!contentDOM,
         suppressContentEditableWarning: true
@@ -25,4 +92,13 @@ export function CustomNodeView(param) {
         node: node,
         innerDecorations: innerDeco
     }), contentDOM));
-}
+    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
+        ref: domRef
+    } : // we've already passed the domRef to the NodeView component
+    // as a prop
+    undefined);
+    return /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, decoratedElement);
+});

package/dist/esm/components/MarkView.js

@@ -31,12 +31,15 @@ export const MarkView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function Mar
         if (!domRef.current) return;
         const firstChildDesc = childDescriptors.current[0];
         if (!viewDescRef.current) {
-            viewDescRef.current = new MarkViewDesc(parentRef.current, childDescriptors.current, ()=>getPos.current(), mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current);
+            viewDescRef.current = new 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/esm/components/NodeView.js

@@ -1,145 +1,25 @@
-import React, { cloneElement, memo, useContext, useLayoutEffect, useMemo, useRef } from "react";
-import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import React, { memo, useContext } from "react";
 import { EditorContext } from "../contexts/EditorContext.js";
-import { NodeViewContext } from "../contexts/NodeViewContext.js";
-import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
-import { StopEventContext } from "../contexts/StopEventContext.js";
-import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
-import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
 import { CustomNodeView } from "./CustomNodeView.js";
-import { OutputSpec } from "./OutputSpec.js";
+import { ReactNodeView } from "./ReactNodeView.js";
 export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
     let { outerDeco, getPos, node, innerDeco, ...props } = param;
-    const domRef = useRef(null);
-    const nodeDomRef = useRef(null);
-    const contentDomRef = useRef(null);
-    const getPosFunc = useRef(()=>getPos.current()).current;
-    // this is ill-conceived; should revisit
-    const initialNode = useRef(node);
-    const initialOuterDeco = useRef(outerDeco);
-    const initialInnerDeco = useRef(innerDeco);
-    const customNodeViewRootRef = useRef(null);
-    const customNodeViewRef = useRef(null);
-    // const state = useEditorState();
-    const { nodeViews } = useContext(NodeViewContext);
     const { view } = useContext(EditorContext);
-    let element = null;
-    const Component = nodeViews[node.type.name];
-    const outputSpec = 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]);
-    useLayoutEffect(()=>{
-        if (!customNodeViewRef.current || !customNodeViewRootRef.current) return;
-        const { dom } = customNodeViewRef.current;
-        nodeDomRef.current = customNodeViewRootRef.current;
-        customNodeViewRootRef.current.appendChild(dom);
-        return ()=>{
-            customNodeViewRef.current?.destroy?.();
-        };
-    }, []);
-    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 } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
-    const finalProps = {
-        ...props,
-        ...!hasContentDOM && {
-            contentEditable: false
-        }
-    };
-    const nodeProps = useMemo(()=>({
-            node: node,
-            getPos: getPosFunc,
-            decorations: outerDeco,
-            innerDecorations: innerDeco
-        }), [
-        getPosFunc,
-        innerDeco,
-        node,
-        outerDeco
-    ]);
-    if (Component) {
-        element = /*#__PURE__*/ React.createElement(Component, {
-            ...finalProps,
-            ref: nodeDomRef,
-            nodeProps: nodeProps
-        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-            getPos: getPos,
-            node: node,
-            innerDecorations: innerDeco
-        }));
-    } else if (customNodeView) {
-        element = /*#__PURE__*/ React.createElement(CustomNodeView, {
-            contentDomRef: contentDomRef,
+    if (customNodeView) {
+        return /*#__PURE__*/ React.createElement(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.createElement(OutputSpec, {
-                ...finalProps,
-                ref: nodeDomRef,
-                outputSpec: outputSpec
-            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
-                getPos: getPos,
-                node: node,
-                innerDecorations: innerDeco
-            }));
-        }
-    }
-    if (!element) {
-        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
     }
-    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
-        ref: domRef
-    } : // we've already passed the domRef to the NodeView component
-    // as a prop
-    undefined);
-    const childContextValue = useMemo(()=>({
-            parentRef: nodeViewDescRef,
-            siblingsRef: childDescriptors
-        }), [
-        childDescriptors,
-        nodeViewDescRef
-    ]);
-    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
-        value: setSelectNode
-    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
-        value: setStopEvent
-    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
-        value: childContextValue
-    }, decoratedElement)));
+    return /*#__PURE__*/ React.createElement(ReactNodeView, {
+        node: node,
+        innerDeco: innerDeco,
+        outerDeco: outerDeco,
+        getPos: getPos,
+        ...props
+    });
 });

package/dist/esm/components/OutputSpec.js

@@ -6,7 +6,7 @@ const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function
         return /*#__PURE__*/ React.createElement(React.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/esm/components/ReactNodeView.js

@@ -0,0 +1,85 @@
+import React, { cloneElement, memo, useContext, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
+import { StopEventContext } from "../contexts/StopEventContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+import { OutputSpec } from "./OutputSpec.js";
+export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
+    let { outerDeco, getPos, node, innerDeco, ...props } = param;
+    const domRef = useRef(null);
+    const nodeDomRef = useRef(null);
+    const contentDomRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    const { nodeViews } = useContext(NodeViewContext);
+    let element = null;
+    const Component = nodeViews[node.type.name];
+    const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const finalProps = {
+        ...props,
+        ...!hasContentDOM && {
+            contentEditable: false
+        }
+    };
+    const nodeProps = useMemo(()=>({
+            node: node,
+            getPos: getPosFunc,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPosFunc,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    if (Component) {
+        element = /*#__PURE__*/ React.createElement(Component, {
+            ...finalProps,
+            ref: nodeDomRef,
+            nodeProps: nodeProps
+        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+            getPos: getPos,
+            node: node,
+            innerDecorations: innerDeco
+        }));
+    } else {
+        if (outputSpec) {
+            element = /*#__PURE__*/ React.createElement(OutputSpec, {
+                ...finalProps,
+                ref: nodeDomRef,
+                outputSpec: outputSpec
+            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+                getPos: getPos,
+                node: node,
+                innerDecorations: innerDeco
+            }));
+        }
+    }
+    if (!element) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
+        ref: domRef
+    } : // we've already passed the domRef to the NodeView component
+    // as a prop
+    undefined);
+    const childContextValue = useMemo(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, decoratedElement)));
+});

package/dist/esm/components/TextNodeView.js

@@ -1,6 +1,6 @@
 import { DecorationSet } from "prosemirror-view";
 import { Component } from "react";
-import { findDOMNode } from "react-dom";
+import { findDOMNode } from "../findDOMNode.js";
 import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
 import { wrapInDeco } from "./ChildNodeViews.js";
 function shallowEqual(objA, objB) {

package/dist/esm/findDOMNode.js

@@ -0,0 +1,31 @@
+//@ts-expect-error This module isn't typed
+import { findCurrentHostFiber } from "react-reconciler/reflection";
+// https://github.com/facebook/react/blob/main/packages/shared/ReactInstanceMap.js#L18
+export 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 = findCurrentHostFiber(fiber);
+    if (hostFiber === null) {
+        return null;
+    }
+    return getPublicInstance(hostFiber.stateNode);
+}
+// https://github.com/facebook/react/blob/main/packages/react-dom/src/client/ReactDOMClient.js#L43
+export function findDOMNode(componentOrElement) {
+    return findHostInstance(componentOrElement);
+}

package/dist/esm/hooks/useEditor.js

@@ -171,6 +171,7 @@ let didWarnValueDefaultValue = false;
             didWarnValueDefaultValue = true;
         }
     }
+    const flushSyncRef = useRef(true);
     const [cursorWrapper, _setCursorWrapper] = useState(null);
     const forceUpdate = useForceUpdate();
     const defaultState = options.defaultState ?? EMPTY_STATE;
@@ -192,14 +193,23 @@ let didWarnValueDefaultValue = false;
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
-        flushSync(()=>{
+        if (flushSyncRef.current) {
+            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
@@ -264,7 +274,8 @@ let didWarnValueDefaultValue = false;
             registerEventListener,
             unregisterEventListener,
             cursorWrapper,
-            docViewDescRef
+            docViewDescRef,
+            flushSyncRef
         }), [
         view,
         registerEventListener,

package/dist/esm/hooks/useEditorEffect.js

@@ -15,7 +15,7 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
  * _after_ the EditorView has been updated, even when the
  * EditorView lives in an ancestor component.
  */ export function useEditorEffect(effect, dependencies) {
-    const { view } = useContext(EditorContext);
+    const { view, flushSyncRef } = useContext(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
@@ -25,7 +25,10 @@ import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
     // be defined inline and run on every re-render.
     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

package/dist/esm/hooks/useIsNodeSelected.js

@@ -0,0 +1,11 @@
+import { useState } from "react";
+import { useSelectNode } from "./useSelectNode.js";
+export function useIsNodeSelected() {
+    const [isSelected, setIsSelected] = useState(false);
+    useSelectNode(()=>{
+        setIsSelected(true);
+    }, ()=>{
+        setIsSelected(false);
+    });
+    return isSelected;
+}

package/dist/esm/index.js

@@ -7,5 +7,6 @@ export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
+export { useIsNodeSelected } from "./hooks/useIsNodeSelected.js";
 export { reactKeys } from "./plugins/reactKeys.js";
 export { widget } from "./decorations/ReactWidgetType.js";