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

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,74 +57,127 @@ function handleGapCursorComposition(view) {
     tr.setSelection(_prosemirrorstate.TextSelection.near(tr.doc.resolve($from.pos + 1)));
     view.dispatch(tr);
 }
-function beforeInputPlugin(setCursorWrapper) {
-    let compositionMarks = null;
-    let precompositionSnapshot = null;
+const observeOptions = {
+    childList: true,
+    characterData: true,
+    characterDataOldValue: true,
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true
+};
+function beforeInputPlugin() {
+    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) {
-                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
-                    view.dispatch(view.state.tr.deleteSelection());
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    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);
-                    const { state } = view;
-                    const $pos = state.selection.$from;
-                    if (compositionMarks) {
-                        setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
-                            key: "cursor-wrapper",
-                            marks: compositionMarks
+                    if (storedMarks) {
+                        view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                            cursorWrapper: (0, _ReactWidgetType.widget)(view.state.selection.from, _CursorWrapper.CursorWrapper, {
+                                key: "cursor-wrapper",
+                                marks: storedMarks,
+                                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) {
+                        view.domObserver.disconnectSelection();
+                        try {
+                            view.docView.setSelection(view.state.selection.anchor, view.state.selection.head, view, true // force — skip the isEquivalentPosition early-return
+                            );
+                        } finally{
+                            view.domObserver.setCurSelection();
+                            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);
+                    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;
                     }
-                    // @ts-expect-error Internal property - input
+                    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 () {
                     return true;
                 },
                 compositionend (view, event) {
-                    // @ts-expect-error Internal property - input
-                    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 instanceof _ReactEditorView.ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownComposition(view, event.timeStamp);
+                    view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+                        cursorWrapper: null,
+                        freezeFrom: null
+                    }));
                     return true;
                 },
                 beforeinput (view, event) {
-                    event.preventDefault();
+                    if (event.inputType !== "insertFromComposition") {
+                        event.preventDefault();
+                    }
                     switch(event.inputType){
                         case "insertParagraph":
                         case "insertLineBreak":
@@ -199,3 +255,59 @@ function beforeInputPlugin(setCursorWrapper) {
         }
     });
 }
+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;
+    }
+    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

@@ -20,20 +20,23 @@ _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,
+                    freezeFrom: null
                 };
                 state.doc.descendants((_, pos)=>{
                     const key = createNodeKey();
@@ -50,15 +53,32 @@ 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) {
-                if (!tr.docChanged || composing) {
-                    return value;
-                }
-                const overrides = tr.getMeta(reactKeysPluginKey)?.overrides;
+       */ 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()
+                    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,
+                    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,
+                        freezeFrom: next.freezeFrom
+                    };
+                }
                 const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{
                     let [a] = param, [b] = param1;
                     return a - b;
@@ -84,13 +104,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/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

@@ -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.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
         // (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;
     }
@@ -695,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() {
@@ -782,3 +805,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,7 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     _destroyed;
+    cursorWrapped;
     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.cursorWrapped = false;
     }
     get props() {
         return this.nextProps;
@@ -185,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

@@ -11,7 +11,7 @@ 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);
@@ -59,7 +59,7 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
             parentRef: parentRef,
             decorations: child.outerDeco
         });
-    }) : /*#__PURE__*/ React.createElement(NodeView, {
+    }) : /*#__PURE__*/ React.createElement(RemountableNodeView, {
         key: child.key,
         node: child.node,
         getPos: getPos,
@@ -207,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,
@@ -340,14 +340,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"
             });
         }

package/dist/esm/components/CursorWrapper.js

@@ -1,4 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
 import { domIndex } from "../dom.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
@@ -8,21 +9,18 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         return innerRef.current;
     }, []);
     useEditorEffect((view)=>{
-        if (!view || !innerRef.current) return;
-        // @ts-expect-error Internal property - domObserver
+        if (!(view instanceof ReactEditorView) || !innerRef.current) return;
         view.domObserver.disconnectSelection();
-        // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
+        if (!domSel.isCollapsed) return;
         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, domIndex(node) + 1);
-        } else {
-            domSel.collapse(node, 0);
-        }
-        // @ts-expect-error Internal property - domObserver
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, domIndex(node) + 1);
+        view.cursorWrapped = true;
         view.domObserver.connectSelection();
+        return ()=>{
+            view.cursorWrapped = false;
+        };
     }, []);
     return /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,

package/dist/esm/components/ProseMirror.js

@@ -1,11 +1,13 @@
 import React, { useMemo, useState } from "react";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { CompositionContext } from "../contexts/CompositionContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { EditorStateContext } from "../contexts/EditorStateContext.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { computeDocDeco } from "../decorations/computeDocDeco.js";
 import { viewDecorations } from "../decorations/viewDecorations.js";
 import { useEditor } from "../hooks/useEditor.js";
+import { reactKeysPluginKey } from "../plugins/reactKeys.js";
 import { LayoutGroup } from "./LayoutGroup.js";
 import { DocNodeViewContext } from "./ProseMirrorDoc.js";
 function getPos() {
@@ -22,7 +24,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = useState(null);
-    const { editor, cursorWrapper, state } = useEditor(mount, props);
+    const { editor, state } = useEditor(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = useMemo(()=>{
         return {
@@ -39,7 +41,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = computeDocDeco(editor.view);
-    const innerDecorations = viewDecorations(editor.view, cursorWrapper);
+    const innerDecorations = viewDecorations(editor.view);
     const docNodeViewContextValue = useMemo(()=>({
             setMount,
             node,
@@ -51,6 +53,12 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
+    const freezeFrom = reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
+    const compositionContextValue = useMemo(()=>({
+            freezeFrom
+        }), [
+        freezeFrom
+    ]);
     return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
@@ -59,9 +67,11 @@ function ProseMirrorInner(param) {
         value: nodeViewContextValue
     }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
+    }, /*#__PURE__*/ React.createElement(CompositionContext.Provider, {
+        value: compositionContextValue
     }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
-    }, children)))));
+    }, children))))));
 }
 export function ProseMirror(props) {
     return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props));