@handlewithcare/react-prosemirror 3.1.0-tiptap.53 → 3.1.0

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -120,71 +120,10 @@ function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
             child.parent = viewDesc;
         }
     });
-    const findCompositionDOM = (0, _react.useCallback)((compositionViewDesc)=>{
-        const children = childrenRef.current;
-        // Because TextNodeViews can't locate the DOM nodes
-        // for compositions, we need to override them here
-        if (!viewDescRef.current?.contentDOM) return;
-        let compositionTopDOM = null;
-        for (const childNode of viewDescRef.current.contentDOM.childNodes){
-            if (children.every((child)=>child.dom !== childNode)) {
-                compositionTopDOM = childNode;
-                break;
-            }
-        }
-        if (!compositionTopDOM) {
-            // Otherwise the IME extended an existing tracked text node. Take it over.
-            const reactView = view;
-            const imeTextNode = reactView.input.compositionNode;
-            if (!imeTextNode || !viewDescRef.current.contentDOM.contains(imeTextNode.parentNode)) {
-                return;
-            }
-            const claimedDesc = imeTextNode.pmViewDesc;
-            if (!(claimedDesc instanceof _viewdesc.TextViewDesc)) return;
-            if (claimedDesc.node.text === imeTextNode.nodeValue) return; // not extended
-            // Walk up to the direct child of contentDOM that contains the IME text node
-            // (could be the text node itself, could be wrapped in a mark span).
-            let topDOM = imeTextNode;
-            while(topDOM.parentNode !== viewDescRef.current.contentDOM){
-                const next = topDOM.parentNode;
-                if (!next) return;
-                topDOM = next;
-            }
-            // Detach the displaced TextViewDesc from the sibling list so sibling-size
-            // accounting (used by posBeforeChild) doesn't double-count this text node.
-            const displacedIdx = children.indexOf(claimedDesc);
-            if (displacedIdx >= 0) children.splice(displacedIdx, 1);
-            compositionViewDesc.dom = topDOM;
-            compositionViewDesc.textDOM = imeTextNode;
-            compositionViewDesc.text = imeTextNode.data;
-            imeTextNode.pmViewDesc = compositionViewDesc;
-            compositionViewDesc._displacedDesc = claimedDesc;
-            reactView.input.compositionNodes.push(compositionViewDesc);
-            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);
-    }, [
-        view
-    ]);
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
-            siblingsRef: childrenRef,
-            findCompositionDOM
-        }), [
-        findCompositionDOM
-    ]);
+            siblingsRef: childrenRef
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current ?? viewDescRef.current?.dom,

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -143,74 +143,10 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
             child.parent = viewDesc;
         }
     });
-    const findCompositionDOM = (0, _react.useCallback)((compositionViewDesc)=>{
-        if (!props.node.isTextblock) return;
-        const children = childrenRef.current;
-        // Because TextNodeViews can't locate the DOM nodes
-        // for compositions, we need to override them here
-        if (!viewDescRef.current?.contentDOM) return;
-        let compositionTopDOM = null;
-        for (const childNode of viewDescRef.current.contentDOM.childNodes){
-            if (children.every((child)=>child.dom !== childNode)) {
-                compositionTopDOM = childNode;
-                break;
-            }
-        }
-        if (!compositionTopDOM) {
-            // Otherwise the IME extended an existing tracked text node. Take it over.
-            const reactView = view;
-            const imeTextNode = reactView.input.compositionNode;
-            if (!imeTextNode || !viewDescRef.current.contentDOM.contains(imeTextNode.parentNode)) {
-                return;
-            }
-            const claimedDesc = imeTextNode.pmViewDesc;
-            if (!(claimedDesc instanceof _viewdesc.TextViewDesc)) return;
-            if (claimedDesc.node.text === imeTextNode.nodeValue) return; // not extended
-            // Walk up to the direct child of contentDOM that contains the IME text node
-            // (could be the text node itself, could be wrapped in a mark span).
-            let topDOM = imeTextNode;
-            while(topDOM.parentNode !== viewDescRef.current.contentDOM){
-                const next = topDOM.parentNode;
-                if (!next) return;
-                topDOM = next;
-            }
-            // Detach the displaced TextViewDesc from the sibling list so sibling-size
-            // accounting (used by posBeforeChild) doesn't double-count this text node.
-            const displacedIdx = children.indexOf(claimedDesc);
-            if (displacedIdx >= 0) children.splice(displacedIdx, 1);
-            reactView.displacedNodes.push(claimedDesc);
-            compositionViewDesc.dom = topDOM;
-            compositionViewDesc.textDOM = imeTextNode;
-            compositionViewDesc.text = imeTextNode.data;
-            imeTextNode.pmViewDesc = compositionViewDesc;
-            compositionViewDesc._displacedDesc = claimedDesc;
-            reactView.input.compositionNodes.push(compositionViewDesc);
-            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);
-    }, [
-        props.node.isTextblock,
-        view
-    ]);
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,
-            siblingsRef: childrenRef,
-            findCompositionDOM
-        }), [
-        findCompositionDOM
-    ]);
+            siblingsRef: childrenRef
+        }), []);
     return {
         childContextValue,
         contentDOM: contentDOMRef.current,

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -57,36 +57,66 @@ function handleGapCursorComposition(view) {
     tr.setSelection(_prosemirrorstate.TextSelection.near(tr.doc.resolve($from.pos + 1)));
     view.dispatch(tr);
 }
+const observeOptions = {
+    childList: true,
+    characterData: true,
+    characterDataOldValue: true,
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true
+};
 function beforeInputPlugin() {
-    let compositionMarks = null;
+    let observer = null;
+    let preCompositionSnapshot = null;
+    function teardownComposition(view, endedAt) {
+        view.input.composing = false;
+        if (observer) {
+            if (view.input.compositionNode && view.dom.contains(view.input.compositionNode)) {
+                view.domObserver.queue.push(...observer.takeRecords());
+                view.domObserver.flush();
+            } else {
+                const freezeFrom = _reactKeys.reactKeysPluginKey.getState(view.state)?.freezeFrom;
+                const frozenNode = freezeFrom == null ? null : view.state.doc.nodeAt(freezeFrom);
+                if (freezeFrom != null && frozenNode != null && preCompositionSnapshot) {
+                    // This is a little hacky — it only works because we always abort
+                    // compositions if the node after freezeFrom changes, so we can
+                    // be sure that if a composition was canceled by the user/browser,
+                    // the content hasn't changed since the composition started
+                    view.dispatch(view.state.tr.replaceWith(freezeFrom + 1, freezeFrom + 1 + frozenNode.content.size, preCompositionSnapshot));
+                }
+            }
+            observer.disconnect();
+            observer = null;
+        }
+        view.input.compositionEndedAt = endedAt;
+        view.input.compositionNode = null;
+        view.input.compositionNodes = [];
+        view.input.compositionID++;
+    }
     return new _prosemirrorstate.Plugin({
+        view () {
+            return {
+                update (view) {
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return;
+                    const frozen = _reactKeys.reactKeysPluginKey.getState(view.state)?.freezeFrom != null;
+                    if (observer && view.composing && !frozen) {
+                        teardownComposition(view, Date.now());
+                    }
+                }
+            };
+        },
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
                     if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-                    view.compositionStarting = true;
-                    const { state } = view;
-                    const { selection } = state;
-                    const isEmptyTr = state.tr.delete(selection.from, selection.to);
-                    const $from = isEmptyTr.doc.resolve(isEmptyTr.mapping.map(selection.from));
-                    const isEmptyTextblock = $from.parent.isTextblock && $from.parent.childCount === 0;
-                    compositionMarks = view.state.storedMarks;
-                    // Render a CursorWrapper with empty marks if starting a composition in an
-                    // empty textblock with no marks. This prevents the browser from adding a
-                    // <br> to the text block when it becomes empty (either via canceling the
-                    // composition with the escape key or deleting all composition text when
-                    // the composition node is the only text node in the text block)
-                    if (compositionMarks === null && isEmptyTextblock) {
-                        compositionMarks = [];
-                    }
-                    const tr = view.state.tr.setStoredMarks(null);
-                    view.dispatch(tr);
+                    const storedMarks = view.state.selection.empty ? view.state.storedMarks : view.state.storedMarks ?? (view.state.selection instanceof _prosemirrorstate.TextSelection ? view.state.selection.$from.marksAcross(view.state.selection.$to) : null);
+                    view.dispatch(view.state.tr.deleteSelection().setStoredMarks(storedMarks));
                     handleGapCursorComposition(view);
-                    if (compositionMarks) {
+                    if (storedMarks) {
                         view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
-                            cursorWrapper: (0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
+                            cursorWrapper: (0, _ReactWidgetType.widget)(view.state.selection.from, _CursorWrapper.CursorWrapper, {
                                 key: "cursor-wrapper",
-                                marks: compositionMarks,
+                                marks: storedMarks,
                                 side: 0,
                                 raw: true
                             })
@@ -97,24 +127,38 @@ function beforeInputPlugin() {
                     // node depending on the user's last navigation direction, and the
                     // IME composes into whichever one it found.
                     } else if (view.state.selection.empty) {
-                        // @ts-expect-error internal method
                         view.domObserver.disconnectSelection();
                         try {
                             view.docView.setSelection(view.state.selection.anchor, view.state.selection.head, view, true // force — skip the isEquivalentPosition early-return
                             );
                         } finally{
-                            // @ts-expect-error internal method
                             view.domObserver.setCurSelection();
-                            // @ts-expect-error internal method
                             view.domObserver.connectSelection();
                         }
                     }
-                    view.compositionStarting = false;
-                    // We set composing to true after creating the cursor wrapper
-                    // so that no existing text nodes try to protect themselves
-                    // while we're creating the cursor wrapper, which may need
-                    // to split a text node.
+                    const freezeFrom = view.state.selection.$from.before();
+                    view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                        freezeFrom
+                    }));
+                    const frozenDom = view.nodeDOM(freezeFrom);
+                    if (!frozenDom) {
+                        view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                            cursorWrapper: null,
+                            freezeFrom: null
+                        }));
+                        return false;
+                    }
+                    preCompositionSnapshot = view.state.doc.nodeAt(freezeFrom)?.content ?? null;
                     view.input.composing = true;
+                    observer = new MutationObserver((records)=>{
+                        if (_reactKeys.reactKeysPluginKey.getState(view.state)?.freezeFrom == null) {
+                            return;
+                        }
+                        view.domObserver.queue.push(...records);
+                        view.domObserver.flush();
+                        syncCompositionViewDescs(view);
+                    });
+                    observer.observe(frozenDom, observeOptions);
                     return true;
                 },
                 compositionupdate () {
@@ -123,36 +167,11 @@ function beforeInputPlugin() {
                 compositionend (view, event) {
                     if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
                     if (!view.composing) return false;
-                    view.input.composing = false;
-                    compositionMarks = null;
-                    for (const displaced of view.displacedNodes){
-                        // Put the displaced TextViewDesc back into its parent's child list.
-                        const parent = displaced.parent;
-                        if (parent && !parent.children.includes(displaced)) {
-                            parent.children.push(displaced);
-                            parent.children.sort(_viewdesc.sortViewDescs);
-                        }
-                        // Restore pmViewDesc claim on the text node.
-                        displaced.dom.pmViewDesc = displaced;
-                        // Truncate the IME text node back to what the displaced PM node says it
-                        // is. The composed content lives in PM state; the next React render will
-                        // mount a sibling TextNodeView that inserts its own DOM (e.g.
-                        // `<span class="word">k</span>`) right after this node.
-                        const claimedText = displaced.node.text ?? "";
-                        if (displaced.nodeDOM.nodeValue !== claimedText) {
-                            displaced.nodeDOM.nodeValue = claimedText;
-                        }
-                    }
+                    teardownComposition(view, event.timeStamp);
                     view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
-                        cursorWrapper: null
+                        cursorWrapper: null,
+                        freezeFrom: null
                     }));
-                    if (view.input.compositionNode && isCompositionNodeOrphaned(view.input.compositionNode)) {
-                        view.input.compositionNode.remove();
-                    }
-                    view.input.compositionEndedAt = event.timeStamp;
-                    view.input.compositionNode = null;
-                    view.input.compositionNodes = [];
-                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
@@ -203,63 +222,6 @@ function beforeInputPlugin() {
                                 insertText(view, event.data);
                                 break;
                             }
-                        case "insertCompositionText":
-                        case "deleteCompositionText":
-                        case "insertFromComposition":
-                            {
-                                if (!(view instanceof _ReactEditorView.ReactEditorView)) break;
-                                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 updating a composition within an existing text node,
-                                // we need to avoid remounting it. If the composition is at
-                                // the very beginning of the text node, the start position of
-                                // that node will either be mapped forward (if inserting new
-                                // content) or deleted (if replacing existing content).
-                                //
-                                // This will cause the reactKeys plugin to mint a new key for
-                                // that node, which triggers a remount. So we check to see whether
-                                // we're working on a composition at the very beginning of a text
-                                // node, and if so, tell the react keys plugin not to change the
-                                // key for that node.
-                                //
-                                // We need to check that the marks are the same — if they're not,
-                                // then we're inserting text _before_ this text node, not at the
-                                // start of it, so we actually _do_ want to map the exsting node
-                                // forward.
-                                const $start = view.state.doc.resolve(start);
-                                const $end = view.state.doc.resolve(end);
-                                const marks = compositionMarks ?? $start.marksAcross($end) ?? [];
-                                if ($start.textOffset === 0 && $end.nodeAfter?.marks.every((m)=>m.isInSet(marks))) {
-                                    tr.setMeta(_reactKeys.reactKeysPluginKey, {
-                                        overrides: {
-                                            [start]: start
-                                        }
-                                    });
-                                }
-                                view.dom.addEventListener("input", ()=>{
-                                    const sel = view.domSelectionRange();
-                                    if (sel.focusNode && sel.focusNode.nodeType === 3) {
-                                        view.input.compositionNode = sel.focusNode;
-                                    }
-                                    view.dispatch(tr);
-                                }, {
-                                    once: true
-                                });
-                                break;
-                            }
                         case "deleteWordBackward":
                         case "deleteHardLineBackward":
                         case "deleteSoftLineBackward":
@@ -293,11 +255,59 @@ function beforeInputPlugin() {
         }
     });
 }
-function isCompositionNodeOrphaned(tn) {
-    if (tn.pmViewDesc) return false;
-    for(let parent = tn.parentNode; parent; parent = parent.parentNode){
-        const desc = parent.pmViewDesc;
-        if (desc instanceof _viewdesc.TextViewDesc && desc.nodeDOM === tn) return false;
+function syncCompositionViewDescs(view) {
+    const compositionNode = view.domObserver.lastChangedTextNode;
+    if (!compositionNode) return;
+    const freezeFrom = _reactKeys.reactKeysPluginKey.getState(view.state)?.freezeFrom;
+    if (freezeFrom == null) return;
+    const compositionBlock = view.state.doc.nodeAt(freezeFrom);
+    if (!compositionBlock) return;
+    const compositionBlockDesc = view.docView.descAt(freezeFrom);
+    if (!compositionBlockDesc) return;
+    const desc = view.docView.nearestDesc(compositionNode);
+    compositionBlockDesc.node = compositionBlock;
+    if (desc instanceof _viewdesc.TextViewDesc) {
+        if (compositionNode.nodeValue && desc.node.text !== compositionNode.nodeValue) {
+            desc.node = view.state.schema.text(compositionNode.nodeValue, desc.node.marks);
+            desc.nodeDOM = compositionNode;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
     }
-    return true;
+    if (desc instanceof _viewdesc.CompositionViewDesc) {
+        if (compositionNode.nodeValue != null && desc.text !== compositionNode.nodeValue) {
+            desc.dom = compositionNode;
+            desc.textDOM = compositionNode;
+            desc.text = compositionNode.nodeValue;
+            compositionNode.pmViewDesc = desc;
+        }
+        return;
+    }
+    const parentDesc = desc?.contentDOM ? desc : compositionBlockDesc;
+    const children = parentDesc.children;
+    // Drop any text or composition desc in this container whose DOM the
+    // IME has detached. This covers two cases: a TextViewDesc the IME subsumed
+    // into the composition node, and (on Safari, which replaces the whole text
+    // node on each composition update) any orphaned composition view
+    // desc(s) left over from the previous composition steps.
+    for(let i = children.length - 1; i >= 0; i--){
+        const c = children[i];
+        if (!(c instanceof _viewdesc.TextViewDesc) && !(c instanceof _viewdesc.CompositionViewDesc)) {
+            continue;
+        }
+        const dom = c.dom;
+        if (view.dom.contains(dom)) continue;
+        children.splice(i, 1);
+    }
+    const contentStart = freezeFrom + 1;
+    const { from, to } = view.state.selection;
+    const textPos = (0, _viewdesc.findTextInFragment)(compositionBlock.content, compositionNode.nodeValue ?? "", from - contentStart, to - contentStart);
+    if (textPos < 0) return;
+    const startPos = contentStart + textPos;
+    let topDOM = compositionNode;
+    while(topDOM.parentNode && topDOM.parentNode !== parentDesc.contentDOM){
+        topDOM = topDOM.parentNode;
+    }
+    const insertIndex = children.findLastIndex((c)=>c.posBefore <= startPos) + 1;
+    children.splice(insertIndex, 0, new _viewdesc.CompositionViewDesc(parentDesc, ()=>startPos, topDOM, compositionNode, compositionNode.nodeValue ?? ""));
 }

package/dist/cjs/plugins/reactKeys.js

@@ -35,7 +35,8 @@ function reactKeys() {
                 const next = {
                     posToKey: new Map(),
                     keyToPos: new Map(),
-                    cursorWrapper: null
+                    cursorWrapper: null,
+                    freezeFrom: null
                 };
                 state.doc.descendants((_, pos)=>{
                     const key = createNodeKey();
@@ -52,19 +53,30 @@ function reactKeys() {
        * through the transaction to identify its current position,
        * and assign its key to that new position, dropping it if the
        * node was deleted.
-       */ apply (tr, value, _, newState) {
+       */ apply (tr, value, oldState, newState) {
                 const meta = tr.getMeta(reactKeysPluginKey);
                 const overrides = meta && "overrides" in meta ? meta.overrides : {};
                 const cursorWrapper = meta && "cursorWrapper" in meta ? meta.cursorWrapper : undefined;
+                const freezeFrom = meta && "freezeFrom" in meta ? meta.freezeFrom : undefined;
                 const next = {
                     posToKey: new Map(),
                     keyToPos: new Map(),
-                    cursorWrapper: cursorWrapper === undefined ? value.cursorWrapper ? (0, _ReactWidgetType.widget)(tr.mapping.map(value.cursorWrapper.from, -1), value.cursorWrapper.type.Component, value.cursorWrapper.spec) : null : cursorWrapper
+                    cursorWrapper: cursorWrapper === undefined ? value.cursorWrapper ? (0, _ReactWidgetType.widget)(tr.mapping.map(value.cursorWrapper.from, -1), value.cursorWrapper.type.Component, value.cursorWrapper.spec) : null : cursorWrapper,
+                    freezeFrom: freezeFrom === undefined ? value.freezeFrom !== null ? tr.mapping.map(value.freezeFrom, -1) : null : freezeFrom
                 };
+                if (value.freezeFrom !== null && next.freezeFrom !== null && tr.getMeta("composition") == null) {
+                    const oldBlock = oldState.doc.nodeAt(value.freezeFrom);
+                    const newBlock = newState.doc.nodeAt(next.freezeFrom);
+                    if (newBlock && !oldBlock?.eq(newBlock)) {
+                        next.freezeFrom = null;
+                        next.cursorWrapper = null;
+                    }
+                }
                 if (!tr.docChanged) {
                     return {
                         ...value,
-                        cursorWrapper: next.cursorWrapper
+                        cursorWrapper: next.cursorWrapper,
+                        freezeFrom: next.freezeFrom
                     };
                 }
                 const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{

package/dist/cjs/tiptap/tiptapNodeView.js

@@ -116,15 +116,6 @@ function tiptapNodeView(param) {
             return result;
         });
         (0, _useIgnoreMutation.useIgnoreMutation)(function(_, mutation) {
-            if (ignoreMutation) {
-                return ignoreMutation.call({
-                    name: extension.name,
-                    editor,
-                    type: node.type
-                }, {
-                    mutation
-                });
-            }
             if (!editor || !(this.dom instanceof HTMLElement)) return false;
             const nodeView = new _ReactProseMirrorNodeView.ReactProseMirrorNodeView(WrappedComponent, {
                 extension,
@@ -136,6 +127,16 @@ function tiptapNodeView(param) {
                 node,
                 view: editor.view
             }, this.dom, this.contentDOM);
+            if (ignoreMutation) {
+                return ignoreMutation.call({
+                    name: extension.name,
+                    editor,
+                    type: node.type
+                }, {
+                    mutation,
+                    defaultIgnoreMutation: nodeView.ignoreMutation.bind(nodeView)
+                });
+            }
             return nodeView.ignoreMutation(mutation) ?? false;
         });
         const { extraClassName, htmlProps } = (0, _react1.useMemo)(()=>{

package/dist/cjs/viewdesc.js

@@ -416,7 +416,7 @@ let ViewDesc = class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (view.composing || !(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)) {
+        if (view.cursorWrapped || !(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
@@ -715,6 +715,9 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
     isText(text) {
         return this.node.text == text;
     }
+    ignoreMutation(mutation) {
+        return mutation.type !== "characterData" && mutation.type !== "selection";
+    }
 };
 let TrailingHackViewDesc = class TrailingHackViewDesc extends ViewDesc {
     parseRule() {

package/dist/esm/ReactEditorView.js

@@ -33,10 +33,7 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     _destroyed;
-    // TODO: Probably refactor? It's used in TrailingHackView to detect
-    // whether it was mounted during a compositionstart event handler
-    compositionStarting;
-    displacedNodes;
+    cursorWrapped;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -89,8 +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.compositionStarting = false;
-        this.displacedNodes = [];
+        this.cursorWrapped = false;
     }
     get props() {
         return this.nextProps;
@@ -191,7 +187,22 @@ function changedNodeViews(a, b) {
         // this ensures that the base class validates the DOM selection and invokes
         // node view selection callbacks.
         this.docView.markDirty(-1, -1);
-        super.update(this.nextProps);
+        const selectionChanged = !this.state.selection.eq(this.prevState.selection);
+        if (selectionChanged) {
+            super.update(this.nextProps);
+        } else {
+            // If the selection hasn't changed between renders, force prosemirror-view to
+            // skip the selectionToDOM call. If a render happens after a DOM selection change
+            // but before the "selectionchange" event fired, calling selectionToDOM will cause
+            // the selection to be reset its the previous position.
+            this.domObserver.setCurSelection();
+            this.input.mouseDown = {
+                allowDefault: false,
+                delayedSelectionSync: false
+            };
+            super.update(this.nextProps);
+            this.input.mouseDown = null;
+        }
         // Store the new previous state.
         this.prevState = this.state;
     }

package/dist/esm/components/ChildNodeViews.js

@@ -7,11 +7,11 @@ import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
 import { sameOuterDeco } from "../viewdesc.js";
 import { NativeWidgetView } from "./NativeWidgetView.js";
 import { SeparatorHackView } from "./SeparatorHackView.js";
-import { RemountableTextNodeView } from "./TextNodeView.js";
+import { TextNodeView } from "./TextNodeView.js";
 import { TrailingHackView } from "./TrailingHackView.js";
 import { WidgetView } from "./WidgetView.js";
 import { MarkView } from "./marks/MarkView.js";
-import { NodeView } from "./nodes/NodeView.js";
+import { RemountableNodeView } from "./nodes/NodeView.js";
 export function wrapInDeco(reactNode, deco) {
     const { nodeName, ...attrs } = deco.type.attrs;
     const props = htmlAttrsToReactProps(attrs);
@@ -50,22 +50,16 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Consumer, {
         key: child.key
     }, (param)=>{
-        let { siblingsRef, parentRef, findCompositionDOM } = param;
-        return /*#__PURE__*/ React.createElement(EditorContext.Consumer, null, (param)=>{
-            let { registerEventListener, unregisterEventListener } = param;
-            return /*#__PURE__*/ React.createElement(RemountableTextNodeView, {
-                view: view,
-                node: child.node,
-                getPos: getPos,
-                siblingsRef: siblingsRef,
-                parentRef: parentRef,
-                findCompositionDOM: findCompositionDOM,
-                decorations: child.outerDeco,
-                registerEventListener: registerEventListener,
-                unregisterEventListener: unregisterEventListener
-            });
+        let { siblingsRef, parentRef } = param;
+        return /*#__PURE__*/ React.createElement(TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
         });
-    }) : /*#__PURE__*/ React.createElement(NodeView, {
+    }) : /*#__PURE__*/ React.createElement(RemountableNodeView, {
         key: child.key,
         node: child.node,
         getPos: getPos,
@@ -213,7 +207,7 @@ const ChildElement = /*#__PURE__*/ memo(function ChildElement(param) {
                 mark: mark,
                 getPos: getPos,
                 inline: false
-            }, element), /*#__PURE__*/ React.createElement(NodeView, {
+            }, element), /*#__PURE__*/ React.createElement(RemountableNodeView, {
             key: child.key,
             outerDeco: child.outerDeco,
             node: child.node,