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

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -120,12 +120,70 @@ 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
+            siblingsRef: childrenRef,
+            findCompositionDOM
         }), [
-        childrenRef,
-        viewDescRef
+        findCompositionDOM
     ]);
     return {
         childContextValue,

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -141,32 +141,75 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         children.sort(_viewdesc.sortViewDescs);
         for (const child of children){
             child.parent = viewDesc;
-            // 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 (!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);
-            }
         }
     });
+    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
+            siblingsRef: childrenRef,
+            findCompositionDOM
         }), [
-        childrenRef,
-        viewDescRef
+        findCompositionDOM
     ]);
     return {
         childContextValue,

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -10,8 +10,11 @@ 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");
+const _viewdesc = require("../viewdesc.js");
+const _reactKeys = require("./reactKeys.js");
 function insertText(view, eventData) {
     let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
     if (eventData === null) return false;
@@ -54,33 +57,63 @@ function handleGapCursorComposition(view) {
     tr.setSelection(_prosemirrorstate.TextSelection.near(tr.doc.resolve($from.pos + 1)));
     view.dispatch(tr);
 }
-function beforeInputPlugin(setCursorWrapper) {
+function beforeInputPlugin() {
     let compositionMarks = null;
-    let precompositionSnapshot = null;
     return new _prosemirrorstate.Plugin({
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
-                    view.dispatch(view.state.tr.deleteSelection());
-                    handleGapCursorComposition(view);
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    view.compositionStarting = true;
                     const { state } = view;
-                    const $pos = state.selection.$from;
+                    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);
+                    handleGapCursorComposition(view);
                     if (compositionMarks) {
-                        setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
-                            key: "cursor-wrapper",
-                            marks: compositionMarks
+                        view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                            cursorWrapper: (0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
+                                key: "cursor-wrapper",
+                                marks: compositionMarks,
+                                side: 0,
+                                raw: true
+                            })
                         }));
+                    // Pin the DOM cursor to PM's canonical position before the IME
+                    // captures wherever the browser happened to leave it. Without this,
+                    // a cursor at a mark boundary lands in either the left or right text
+                    // 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();
+                        }
                     }
-                    // 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.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.
                     view.input.composing = true;
                     return true;
                 },
@@ -88,40 +121,44 @@ 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));
-                            }
+                    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;
                         }
                     }
-                    if (event.data) {
-                        insertText(view, event.data, {
-                            marks: compositionMarks
-                        });
+                    view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                        cursorWrapper: null
+                    }));
+                    if (view.input.compositionNode && isCompositionNodeOrphaned(view.input.compositionNode)) {
+                        view.input.compositionNode.remove();
                     }
-                    compositionMarks = null;
-                    precompositionSnapshot = null;
-                    setCursorWrapper(null);
+                    view.input.compositionEndedAt = event.timeStamp;
+                    view.input.compositionNode = null;
+                    view.input.compositionNodes = [];
+                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
-                    event.preventDefault();
+                    if (event.inputType !== "insertFromComposition") {
+                        event.preventDefault();
+                    }
                     switch(event.inputType){
                         case "insertParagraph":
                         case "insertLineBreak":
@@ -166,6 +203,63 @@ function beforeInputPlugin(setCursorWrapper) {
                                 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":
@@ -199,3 +293,11 @@ function beforeInputPlugin(setCursorWrapper) {
         }
     });
 }
+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;
+    }
+    return true;
+}

package/dist/cjs/plugins/reactKeys.js

@@ -20,20 +20,22 @@ _export(exports, {
     }
 });
 const _prosemirrorstate = require("prosemirror-state");
+const _prosemirrorview = require("prosemirror-view");
+const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 function createNodeKey() {
     const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
     return key;
 }
 const reactKeysPluginKey = new _prosemirrorstate.PluginKey("@handlewithcare/react-prosemirror/reactKeys");
 function reactKeys() {
-    let composing = false;
     return new _prosemirrorstate.Plugin({
         key: reactKeysPluginKey,
         state: {
             init (_, state) {
                 const next = {
                     posToKey: new Map(),
-                    keyToPos: new Map()
+                    keyToPos: new Map(),
+                    cursorWrapper: null
                 };
                 state.doc.descendants((_, pos)=>{
                     const key = createNodeKey();
@@ -51,14 +53,20 @@ function reactKeys() {
        * and assign its key to that new position, dropping it if the
        * node was deleted.
        */ apply (tr, value, _, newState) {
-                if (!tr.docChanged || composing) {
-                    return value;
-                }
-                const overrides = tr.getMeta(reactKeysPluginKey)?.overrides;
+                const meta = tr.getMeta(reactKeysPluginKey);
+                const overrides = meta && "overrides" in meta ? meta.overrides : {};
+                const cursorWrapper = meta && "cursorWrapper" in meta ? meta.cursorWrapper : undefined;
                 const next = {
                     posToKey: new Map(),
-                    keyToPos: 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
                 };
+                if (!tr.docChanged) {
+                    return {
+                        ...value,
+                        cursorWrapper: next.cursorWrapper
+                    };
+                }
                 const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{
                     let [a] = param, [b] = param1;
                     return a - b;
@@ -84,13 +92,12 @@ function reactKeys() {
             }
         },
         props: {
-            handleDOMEvents: {
-                compositionstart: ()=>{
-                    composing = true;
-                },
-                compositionend: ()=>{
-                    composing = false;
-                }
+            decorations (state) {
+                const deco = reactKeysPluginKey.getState(state)?.cursorWrapper;
+                if (!deco) return _prosemirrorview.DecorationSet.empty;
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    deco
+                ]);
             }
         }
     });

package/dist/cjs/viewdesc.js

@@ -36,6 +36,9 @@ _export(exports, {
     WidgetViewDesc: function() {
         return WidgetViewDesc;
     },
+    findTextInFragment: function() {
+        return findTextInFragment;
+    },
     sameOuterDeco: function() {
         return sameOuterDeco;
     },
@@ -49,7 +52,17 @@ const _dom = require("./dom.js");
 function sortViewDescs(a, b) {
     if (a instanceof TrailingHackViewDesc) return 1;
     if (b instanceof TrailingHackViewDesc) return -1;
-    return a.getPos() - b.getPos();
+    const posDiff = a.getPos() - b.getPos();
+    if (posDiff !== 0) return posDiff;
+    // When two descs share the same PM position (e.g. a zero-width widget
+    // and a text node that starts at the same position), fall back to DOM
+    // order so that the viewdesc children match the actual DOM layout.
+    // Without this, position computations like `posBeforeChild` can return
+    // the wrong PM position for the widget's container.
+    const cmp = a.dom.compareDocumentPosition(b.dom);
+    if (cmp & 4 /* DOCUMENT_POSITION_FOLLOWING */ ) return -1;
+    if (cmp & 2 /* DOCUMENT_POSITION_PRECEDING */ ) return 1;
+    return 0;
 }
 const NOT_DIRTY = 0, CHILD_DIRTY = 1, CONTENT_DIRTY = 2, NODE_DIRTY = 3;
 let ViewDesc = class ViewDesc {
@@ -266,7 +279,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 +416,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 (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)) {
+            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 +683,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;
     }
@@ -782,3 +802,31 @@ function sameOuterDeco(a, b) {
     for(let i = 0; i < a.length; i++)if (!a[i].type.eq(b[i].type)) return false;
     return true;
 }
+function findTextInFragment(frag, text, from, to) {
+    for(let i = 0, pos = 0; i < frag.childCount && pos <= to;){
+        const child = frag.child(i++);
+        const childStart = pos;
+        pos += child.nodeSize;
+        if (!child.isText) continue;
+        let str = child.text;
+        while(i < frag.childCount){
+            const next = frag.child(i++);
+            pos += next.nodeSize;
+            if (!next.isText) break;
+            str += next.text;
+        }
+        if (pos >= from) {
+            if (pos >= to && str.slice(to - text.length - childStart, to - childStart) === text) {
+                return to - text.length;
+            }
+            const found = childStart < to ? str.lastIndexOf(text, to - childStart - 1) : -1;
+            if (found >= 0 && found + text.length + childStart >= from) {
+                return childStart + found;
+            }
+            if (from === to && str.length >= to + text.length - childStart && str.slice(to - childStart, to - childStart + text.length) === text) {
+                return to;
+            }
+        }
+    }
+    return -1;
+}

package/dist/esm/ReactEditorView.js

@@ -33,6 +33,10 @@ 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;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -85,6 +89,8 @@ 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 = [];
     }
     get props() {
         return this.nextProps;

package/dist/esm/components/ChildNodeViews.js

@@ -7,7 +7,7 @@ import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
 import { sameOuterDeco } from "../viewdesc.js";
 import { NativeWidgetView } from "./NativeWidgetView.js";
 import { SeparatorHackView } from "./SeparatorHackView.js";
-import { TextNodeView } from "./TextNodeView.js";
+import { RemountableTextNodeView } from "./TextNodeView.js";
 import { TrailingHackView } from "./TrailingHackView.js";
 import { WidgetView } from "./WidgetView.js";
 import { MarkView } from "./marks/MarkView.js";
@@ -50,14 +50,20 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
     }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Consumer, {
         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
+        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
+            });
         });
     }) : /*#__PURE__*/ React.createElement(NodeView, {
         key: child.key,
@@ -340,14 +346,14 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
                 component: SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-br"
             });
         }