@handlewithcare/react-prosemirror 3.1.0-tiptap.47 → 3.1.0-tiptap.48

package/README.md

@@ -837,10 +837,40 @@ significant contributors help shape our roadmap priorities.
 [Become a Sponsor](https://handlewithcare.dev/pitter-patter/#become-a-sponsor)
 
 <h3>Sponsors</h3>
-<p>
-<a href="https://www.moment.dev/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128"></a>
-<a href="https://www.lingco.io/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Lingco.png" alt="Lingco" height="128"></a>
-<a href="https://dskrpt.de/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="Dskrpt" height="128"></a>
-<a href="https://github.com/fastrepl/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128"></a>
-</p>
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" >
+        <a href="https://moment.dev/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128">
+          <br>
+          Moment
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://www.lingco.io/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Lingco.png" alt="Lingco" height="128">
+          <br>
+          Lingco
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://dskrpt.de/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="dskrpt" height="128">
+          <br>
+          dskrpt
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://char.com/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128">
+          <br>
+          Fastrepl
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 <!--sponsorsend-->

package/dist/cjs/ReactEditorView.js

@@ -33,6 +33,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
     nextProps;
     prevState;
     _destroyed;
+    deferPendingEffects;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -85,6 +86,7 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
+        this.deferPendingEffects = false;
     }
     get props() {
         return this.nextProps;

package/dist/cjs/components/ChildNodeViews.js

@@ -110,13 +110,18 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
-            view: view,
-            node: child.node,
-            getPos: getPos,
-            siblingsRef: siblingsRef,
-            parentRef: parentRef,
-            decorations: child.outerDeco
+        return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Consumer, null, (param)=>{
+            let { registerEventListener, unregisterEventListener } = param;
+            return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
+                view: view,
+                node: child.node,
+                getPos: getPos,
+                siblingsRef: siblingsRef,
+                parentRef: parentRef,
+                decorations: child.outerDeco,
+                registerEventListener: registerEventListener,
+                unregisterEventListener: unregisterEventListener
+            });
         });
     }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
         key: child.key,

package/dist/cjs/components/CursorWrapper.js

@@ -54,6 +54,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
+    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
     const innerRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, ()=>{
         return innerRef.current;
@@ -65,22 +66,20 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         const node = innerRef.current;
-        const img = node.nodeName == "IMG";
-        if (img) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
-        } else {
-            domSel.collapse(node, 0);
-        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
+        setTimeout(()=>{
+            setShouldRender(false);
+        });
     }, []);
-    return /*#__PURE__*/ _react.default.createElement("img", {
+    return shouldRender ? /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    });
+    }) : null;
 });

package/dist/cjs/components/TextNodeView.js

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "TextNodeView", {
         return TextNodeView;
     }
 });
+const _prosemirrorstate = require("prosemirror-state");
 const _prosemirrorview = require("prosemirror-view");
 const _react = require("react");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
@@ -38,72 +40,144 @@ function shallowEqual(objA, objB) {
 let TextNodeView = class TextNodeView extends _react.Component {
     viewDescRef = null;
     renderRef = null;
-    updateEffect() {
+    wasProtecting = false;
+    containsCompositionNodeText = true;
+    // This is basically NodeViewDesc.localCompositionInfo
+    // from prosemirror-view. It's been slightly adjusted so that
+    // it can be used accurately during render, before we've
+    // necessarily found (or even let the browser create)
+    // view.input.compositionNode
+    shouldProtect(props) {
+        const { view, getPos, node } = props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+        if (!view.composing) {
+            return false;
+        }
+        const pos = getPos();
+        const { from, to } = view.state.selection;
+        if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from < pos || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        to > pos + node.nodeSize) {
+            return false;
+        }
+        return this.containsCompositionNodeText;
+    }
+    handleCompositionEnd = ()=>{
+        if (!this.wasProtecting) return;
+        this.forceUpdate();
+        return;
+    };
+    create() {
         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, _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
-        if (!dom) {
-            if (!view.composing) return;
-            this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
-            // actually find the correct DOM nodes from here,
-            // so we let our parent do it.
-            // Passing a valid element here just so that the
-            // ViewDesc constructor doesn't blow up.
-            document.createElement("div"), document.createTextNode(node.text ?? ""), node.text ?? "");
-            return;
-        }
+        if (!dom && !view.composing) return null;
         let textNode = dom;
-        while(textNode.firstChild){
+        while(textNode?.firstChild){
             textNode = textNode.firstChild;
         }
-        if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
-            this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
-        } else {
-            this.viewDescRef.parent = parentRef.current;
-            this.viewDescRef.children = [];
-            this.viewDescRef.node = node;
-            this.viewDescRef.outerDeco = decorations;
-            this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
-            this.viewDescRef.dom = dom;
-            this.viewDescRef.dom.pmViewDesc = this.viewDescRef;
-            this.viewDescRef.nodeDOM = textNode;
+        if (!(textNode instanceof Text)) {
+            textNode = null;
         }
-        if (!siblingsRef.current.includes(this.viewDescRef)) {
-            siblingsRef.current.push(this.viewDescRef);
+        let viewDesc;
+        if (this.shouldProtect(this.props)) {
+            viewDesc = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // If we can't
+            // actually find the correct DOM nodes from here (
+            // which is the case in a composition in a newly
+            // created text node), we let our parent do it.
+            // Passing a valid element here just so that the
+            // ViewDesc constructor doesn't blow up.
+            dom ?? document.createElement("div"), textNode ?? document.createTextNode(node.text ?? ""), node.text ?? "");
+        } else {
+            if (!dom || !textNode) return null;
+            viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
         }
+        siblingsRef.current.push(viewDesc);
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
+        return viewDesc;
+    }
+    update() {
+        const { view, node, decorations } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+        const viewDesc = this.viewDescRef;
+        if (!viewDesc) return false;
+        if (this.shouldProtect(this.props) !== viewDesc instanceof _viewdesc.CompositionViewDesc) {
+            return false;
+        }
+        if (viewDesc instanceof _viewdesc.CompositionViewDesc) return false;
+        const dom = (0, _findDOMNode.findDOMNode)(this);
+        if (!dom || dom !== viewDesc.dom) return false;
+        if (!dom.contains(viewDesc.nodeDOM)) return false;
+        return viewDesc.matchesNode(node, decorations, _prosemirrorview.DecorationSet.empty) || viewDesc.update(node, decorations, _prosemirrorview.DecorationSet.empty, view);
+    }
+    destroy() {
+        const viewDesc = this.viewDescRef;
+        if (!viewDesc) return;
+        viewDesc.destroy();
+        const siblings = this.props.siblingsRef.current;
+        if (siblings.includes(viewDesc)) {
+            const index = siblings.indexOf(viewDesc);
+            siblings.splice(index, 1);
+        }
+    }
+    updateEffect() {
+        if (!this.update()) {
+            this.destroy();
+            this.viewDescRef = this.create();
+        }
+        setTimeout(()=>{
+            const { view, node } = this.props;
+            if (!(view instanceof _ReactEditorView.ReactEditorView)) {
+                this.containsCompositionNodeText = true;
+                return;
+            }
+            const textNode = view.input.compositionNode;
+            if (!textNode) {
+                this.containsCompositionNodeText = true;
+                return;
+            }
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const text = textNode.nodeValue;
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            this.containsCompositionNodeText = node.text === text;
+        });
     }
     shouldComponentUpdate(nextProps) {
+        // When leaving the protected state, force a re-render so React's
+        // virtual DOM resyncs with whatever the IME wrote into the real DOM
+        // while we were returning a stale renderRef.
+        if (this.wasProtecting && !this.shouldProtect(nextProps)) {
+            return true;
+        }
         return !shallowEqual(this.props, nextProps);
     }
     componentDidMount() {
+        this.viewDescRef = null;
+        // After a composition, force an update so that we re-check whether we need
+        // to be protecting our rendered content and allow React to re-sync with the
+        // DOM.
+        const { registerEventListener } = this.props;
+        registerEventListener("compositionend", this.handleCompositionEnd);
         this.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
     }
     componentWillUnmount() {
-        const { siblingsRef } = this.props;
-        if (!this.viewDescRef) return;
-        if (siblingsRef.current.includes(this.viewDescRef)) {
-            const index = siblingsRef.current.indexOf(this.viewDescRef);
-            siblingsRef.current.splice(index, 1);
-        }
+        const { unregisterEventListener } = this.props;
+        unregisterEventListener("compositionend", this.handleCompositionEnd);
+        this.destroy();
     }
     render() {
-        const { view, getPos, node, decorations } = this.props;
+        const { node, decorations } = this.props;
         // During a composition, it's crucial that we don't try to
         // update the DOM that the user is working in. If there's
         // an active composition and the selection is in this node,
         // we freeze the DOM of this element so that it doesn't
         // interrupt the composition
-        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
+        if (this.shouldProtect(this.props)) {
+            this.wasProtecting = true;
             return this.renderRef;
         }
+        this.wasProtecting = false;
         this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
         return this.renderRef;
     }

package/dist/cjs/hooks/useEditor.js

@@ -103,11 +103,19 @@ 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;
+            if (view.deferPendingEffects) {
+                setTimeout(()=>{
+                    flushSyncRef.current = false;
+                    view.commitPendingEffects();
+                    flushSyncRef.current = true;
+                });
+            } else {
+                // 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/useNodeViewDescription.js

@@ -10,8 +10,10 @@ Object.defineProperty(exports, "useNodeViewDescription", {
 });
 const _react = require("react");
 const _ReactEditorView = require("../ReactEditorView.js");
+const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
+const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useEffectEvent = require("./useEffectEvent.js");
@@ -141,25 +143,46 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         children.sort(_viewdesc.sortViewDescs);
         for (const child of children){
             child.parent = viewDesc;
+        }
+        setTimeout(()=>{
             // Because TextNodeViews can't locate the DOM nodes
             // for compositions, we need to override them here
-            if (child instanceof _viewdesc.CompositionViewDesc) {
-                const compositionTopDOM = viewDesc?.contentDOM?.firstChild;
-                if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-                let textDOM = compositionTopDOM;
-                while(textDOM.firstChild){
-                    textDOM = textDOM.firstChild;
+            if (!viewDescRef.current?.contentDOM) return;
+            const children = viewDescRef.current?.children;
+            const compositionChildIndex = children.findIndex((child)=>child instanceof _viewdesc.CompositionViewDesc);
+            if (compositionChildIndex === -1) return;
+            const compositionViewDesc = children[compositionChildIndex];
+            if (!(compositionViewDesc instanceof _viewdesc.CompositionViewDesc)) return;
+            let compositionTopDOM = null;
+            let search = children[compositionChildIndex - 1];
+            while(search instanceof _viewdesc.MarkViewDesc){
+                search = search.children[0];
+            }
+            if (search instanceof _viewdesc.WidgetViewDesc && search.widget.type instanceof _ReactWidgetType.ReactWidgetType && search.widget.type.Component === _CursorWrapper.CursorWrapper) {
+                compositionTopDOM = search.dom.nextSibling;
+            } else {
+                for (const childNode of viewDescRef.current.contentDOM.childNodes){
+                    if (children.every((child)=>child.dom !== childNode)) {
+                        compositionTopDOM = childNode;
+                        break;
+                    }
                 }
-                if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-                child.dom = compositionTopDOM;
-                child.textDOM = textDOM;
-                child.text = textDOM.data;
-                child.textDOM.pmViewDesc = child;
-                // It should not be possible to be in a composition because one could
-                // not start between the renders that switch the view type.
-                view.input.compositionNodes.push(child);
             }
-        }
+            if (!compositionTopDOM) return;
+            let textDOM = compositionTopDOM;
+            while(textDOM.firstChild){
+                textDOM = textDOM.firstChild;
+            }
+            if (!textDOM || !(textDOM instanceof Text)) {
+                console.error(compositionTopDOM, textDOM);
+                throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+            }
+            compositionViewDesc.dom = compositionTopDOM;
+            compositionViewDesc.textDOM = textDOM;
+            compositionViewDesc.text = textDOM.data;
+            compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
+            view.input.compositionNodes.push(compositionViewDesc);
+        });
     });
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -10,6 +10,7 @@ Object.defineProperty(exports, "beforeInputPlugin", {
 });
 const _prosemirrormodel = require("prosemirror-model");
 const _prosemirrorstate = require("prosemirror-state");
+const _ReactEditorView = require("../ReactEditorView.js");
 const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 function insertText(view, eventData) {
@@ -56,31 +57,23 @@ function handleGapCursorComposition(view) {
 }
 function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
-    let precompositionSnapshot = null;
     return new _prosemirrorstate.Plugin({
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    compositionMarks = view.state.storedMarks;
                     view.dispatch(view.state.tr.deleteSelection());
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    const $pos = state.selection.$from;
-                    if (compositionMarks) {
+                    // const $pos = state.selection.$from;
+                    if (compositionMarks?.length) {
                         setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
                             key: "cursor-wrapper",
-                            marks: compositionMarks
+                            marks: compositionMarks,
+                            side: 1
                         }));
                     }
-                    // Snapshot the siblings of the node that contains the
-                    // current cursor. We'll restore this later, so that React
-                    // doesn't panic about unknown DOM nodes.
-                    const { node: parent } = view.domAtPos($pos.pos);
-                    precompositionSnapshot = [];
-                    for (const node of parent.childNodes){
-                        precompositionSnapshot.push(node);
-                    }
-                    // @ts-expect-error Internal property - input
                     view.input.composing = true;
                     return true;
                 },
@@ -88,36 +81,17 @@ function beforeInputPlugin(setCursorWrapper) {
                     return true;
                 },
                 compositionend (view, event) {
-                    // @ts-expect-error Internal property - input
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    if (!view.composing) return false;
                     view.input.composing = false;
-                    const { state } = view;
-                    const { node: parent } = view.domAtPos(state.selection.from);
-                    if (precompositionSnapshot) {
-                        // Restore the snapshot of the parent node's children
-                        // from before the composition started. This gives us a
-                        // clean slate from which to dispatch our transaction
-                        // and trigger a React update.
-                        precompositionSnapshot.forEach((prevNode, i)=>{
-                            if (parent.childNodes.length <= i) {
-                                parent.appendChild(prevNode);
-                                return;
-                            }
-                            parent.replaceChild(prevNode, parent.childNodes.item(i));
-                        });
-                        if (parent.childNodes.length > precompositionSnapshot.length) {
-                            for(let i = precompositionSnapshot.length; i < parent.childNodes.length; i++){
-                                parent.removeChild(parent.childNodes.item(i));
-                            }
-                        }
-                    }
-                    if (event.data) {
-                        insertText(view, event.data, {
-                            marks: compositionMarks
-                        });
-                    }
                     compositionMarks = null;
-                    precompositionSnapshot = null;
                     setCursorWrapper(null);
+                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc && (view.input.compositionNode instanceof Text || view.input.compositionNode instanceof Element)) {
+                        view.input.compositionNode.remove();
+                    }
+                    view.input.compositionEndedAt = event.timeStamp;
+                    view.input.compositionNode = null;
+                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
@@ -166,6 +140,38 @@ function beforeInputPlugin(setCursorWrapper) {
                                 insertText(view, event.data);
                                 break;
                             }
+                        case "insertCompositionText":
+                            {
+                                const { tr } = view.state;
+                                // There's always a range on insertCompositionText beforeinput events
+                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                                const range = event.getTargetRanges()[0];
+                                const start = view.posAtDOM(range.startContainer, range.startOffset);
+                                const end = view.posAtDOM(range.endContainer, range.endOffset, 1);
+                                if (view.state.doc.textBetween(start, end, "**", "*") === event.data) {
+                                    return;
+                                }
+                                if (event.data) {
+                                    if (compositionMarks) tr.ensureMarks(compositionMarks);
+                                    tr.insertText(event.data, start, end);
+                                } else {
+                                    tr.delete(start, end);
+                                }
+                                // When we insert the text that corresponds to an ongoing composition,
+                                // the relevant TextNodeView will pause re-rendering so that React doesn't
+                                // clobber the composition in the DOM. This means that we have to wait for
+                                // the browser to update the DOM itself before attempting to reconcile
+                                // the selection, so we specifically defer pending effects to the next
+                                // macro task
+                                if (view instanceof _ReactEditorView.ReactEditorView) {
+                                    view.deferPendingEffects = true;
+                                }
+                                view.dispatch(tr);
+                                if (view instanceof _ReactEditorView.ReactEditorView) {
+                                    view.deferPendingEffects = false;
+                                }
+                                break;
+                            }
                         case "deleteWordBackward":
                         case "deleteHardLineBackward":
                         case "deleteSoftLineBackward":

package/dist/cjs/viewdesc.js

@@ -266,7 +266,9 @@ let ViewDesc = class ViewDesc {
                 prev = i ? this.children[i - 1] : null;
                 if (!prev || prev.dom.parentNode == this.contentDOM) break;
             }
-            if (prev && side && enter && !prev.border && !prev.domAtom) return prev.domFromPos(prev.size, side);
+            if (prev && side && enter && !prev.border && !prev.domAtom) {
+                return prev.domFromPos(prev.size, side);
+            }
             return {
                 node: this.contentDOM,
                 offset: prev ? (0, _dom.domIndex)(prev.dom) + 1 : 0
@@ -401,7 +403,9 @@ let ViewDesc = class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
+        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.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.
@@ -666,7 +670,10 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(_node, _outerDeco, _innerDeco, _view) {
+    update(node, outerDeco, _innerDeco, _view) {
+        if (this.dirty == NODE_DIRTY || this.dirty != NOT_DIRTY && !this.inParent() || !node.sameMarkup(this.node)) return false;
+        this.updateOuterDeco(outerDeco);
+        this.node = node;
         this.dirty = NOT_DIRTY;
         return true;
     }

package/dist/esm/ReactEditorView.js

@@ -33,6 +33,7 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     _destroyed;
+    deferPendingEffects;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -85,6 +86,7 @@ function changedNodeViews(a, b) {
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
+        this.deferPendingEffects = false;
     }
     get props() {
         return this.nextProps;

package/dist/esm/components/ChildNodeViews.js

@@ -51,13 +51,18 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ React.createElement(TextNodeView, {
-            view: view,
-            node: child.node,
-            getPos: getPos,
-            siblingsRef: siblingsRef,
-            parentRef: parentRef,
-            decorations: child.outerDeco
+        return /*#__PURE__*/ React.createElement(EditorContext.Consumer, null, (param)=>{
+            let { registerEventListener, unregisterEventListener } = param;
+            return /*#__PURE__*/ React.createElement(TextNodeView, {
+                view: view,
+                node: child.node,
+                getPos: getPos,
+                siblingsRef: siblingsRef,
+                parentRef: parentRef,
+                decorations: child.outerDeco,
+                registerEventListener: registerEventListener,
+                unregisterEventListener: unregisterEventListener
+            });
         });
     }) : /*#__PURE__*/ React.createElement(NodeView, {
         key: child.key,