@codemirror/view 6.3.0 → 6.3.1

package/dist/index.cjs

@@ -875,7 +875,7 @@ class WidgetView extends ContentView {
             if (pos > 0 ? i == 0 : i == rects.length - 1 || rect.top < rect.bottom)
                 break;
         }
-        return (pos == 0 && side > 0 || pos == this.length && side <= 0) ? rect : flattenRect(rect, pos == 0);
+        return flattenRect(rect, this.side > 0);
     }
     get isEditable() { return false; }
     destroy() {
@@ -1028,7 +1028,6 @@ function inlineDOMAtPos(parent, pos) {
             break;
         off = end;
     }
-    //  if (i) return DOMPos.after(children[i - 1].dom!)
     for (let j = i; j > 0; j--) {
         let prev = children[j - 1];
         if (prev.dom.parentNode == dom)
@@ -1055,21 +1054,59 @@ function joinInlineInto(parent, view, open) {
     parent.length += view.length;
 }
 function coordsInChildren(view, pos, side) {
-    for (let off = 0, i = 0; i < view.children.length; i++) {
-        let child = view.children[i], end = off + child.length, next;
-        if ((side <= 0 || end == view.length || child.getSide() > 0 ? end >= pos : end > pos) &&
-            (pos < end || i + 1 == view.children.length || (next = view.children[i + 1]).length || next.getSide() > 0)) {
-            let flatten = 0;
-            if (end == off) {
-                if (child.getSide() <= 0)
-                    continue;
-                flatten = side = -child.getSide();
+    if (!view.children.length)
+        return fallbackRect(view);
+    return (side <= 0 ? coordsInChildrenBefore : coordsInChildrenAfter)(view, pos);
+}
+function coordsInChildrenBefore(view, pos) {
+    // Find the last leaf in the tree that touches pos and doesn't have getSide() > 0
+    let found = null, foundPos = -1;
+    function scan(view, pos) {
+        for (let i = 0, off = 0; i < view.children.length && off <= pos; i++) {
+            let child = view.children[i], end = off + child.length;
+            if (end >= pos) {
+                if (child.children.length) {
+                    if (scan(child, pos - off))
+                        return true;
+                }
+                else if (end >= pos) {
+                    if (end == pos && child.getSide() > 0)
+                        return true;
+                    found = child;
+                    foundPos = pos - off;
+                }
+            }
+            off = end;
+        }
+    }
+    scan(view, pos);
+    return found ? found.coordsAt(Math.max(0, foundPos), -1) : coordsInChildrenAfter(view, pos);
+}
+function coordsInChildrenAfter(view, pos) {
+    // Find the first leaf in the tree that touches pos and doesn't have getSide() < 0
+    let found = null, foundPos = -1;
+    function scan(view, pos) {
+        for (let i = view.children.length - 1, off = view.length; i >= 0 && off >= pos; i--) {
+            let child = view.children[i];
+            off -= child.length;
+            if (off <= pos) {
+                if (child.children.length) {
+                    if (scan(child, pos - off))
+                        return true;
+                }
+                else if (off <= pos) {
+                    if (off == pos && child.getSide() < 0)
+                        return true;
+                    found = child;
+                    foundPos = pos - off;
+                }
             }
-            let rect = child.coordsAt(Math.max(0, pos - off), side);
-            return flatten && rect ? flattenRect(rect, side < 0) : rect;
         }
-        off = end;
     }
+    scan(view, pos);
+    return found ? found.coordsAt(Math.max(0, foundPos), 1) : coordsInChildrenBefore(view, pos);
+}
+function fallbackRect(view) {
     let last = view.dom.lastChild;
     if (!last)
         return view.dom.getBoundingClientRect();
@@ -1688,7 +1725,7 @@ class ContentBuilder {
                 this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, type));
             }
             else {
-                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, deco.startSide);
+                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
                 let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length && (from < to || deco.startSide > 0);
                 let cursorAfter = !view.isEditable && (from < to || deco.startSide <= 0);
                 let line = this.getLine();
@@ -4883,7 +4920,7 @@ class ViewState {
                 refresh = true;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
                 let { lineHeight, charWidth } = view.docView.measureTextSize();
-                refresh = oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
+                refresh = lineHeight > 0 && oracle.refresh(whiteSpace, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
                 if (refresh) {
                     view.docView.minWidth = 0;
                     result |= 8 /* UpdateFlag.Geometry */;
@@ -5027,8 +5064,10 @@ class ViewState {
                 let marginHeight = (margin / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
                 let top, bot;
                 if (target != null) {
-                    top = Math.max(line.from, target - margin);
-                    bot = Math.min(line.to, target + margin);
+                    let targetFrac = findFraction(structure, target);
+                    let spaceFrac = ((this.visibleBottom - this.visibleTop) / 2 + marginHeight) / line.height;
+                    top = targetFrac - spaceFrac;
+                    bot = targetFrac + spaceFrac;
                 }
                 else {
                     top = (this.visibleTop - line.top - marginHeight) / line.height;
@@ -5038,14 +5077,16 @@ class ViewState {
                 viewTo = findPosition(structure, bot);
             }
             else {
+                let totalWidth = structure.total * this.heightOracle.charWidth;
+                let marginWidth = margin * this.heightOracle.charWidth;
                 let left, right;
                 if (target != null) {
-                    left = Math.max(line.from, target - doubleMargin);
-                    right = Math.min(line.to, target + doubleMargin);
+                    let targetFrac = findFraction(structure, target);
+                    let spaceFrac = ((this.pixelViewport.right - this.pixelViewport.left) / 2 + marginWidth) / totalWidth;
+                    left = targetFrac - spaceFrac;
+                    right = targetFrac + spaceFrac;
                 }
                 else {
-                    let totalWidth = structure.total * this.heightOracle.charWidth;
-                    let marginWidth = margin * this.heightOracle.charWidth;
                     left = (this.pixelViewport.left - marginWidth) / totalWidth;
                     right = (this.pixelViewport.right + marginWidth) / totalWidth;
                 }
@@ -5452,6 +5493,227 @@ const baseTheme$1 = buildTheme("." + baseThemeID, {
     }
 }, lightDarkIDs);
 
+class DOMChange {
+    constructor(view, start, end, typeOver) {
+        this.typeOver = typeOver;
+        this.bounds = null;
+        this.text = "";
+        let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
+        if (start > -1 && !view.state.readOnly && (this.bounds = view.docView.domBoundsAround(start, end, 0))) {
+            let selPoints = iHead || iAnchor ? [] : selectionPoints(view);
+            let reader = new DOMReader(selPoints, view.state);
+            reader.readRange(this.bounds.startDOM, this.bounds.endDOM);
+            this.text = reader.text;
+            this.newSel = selectionFromPoints(selPoints, this.bounds.from);
+        }
+        else {
+            let domSel = view.observer.selectionRange;
+            let head = iHead && iHead.node == domSel.focusNode && iHead.offset == domSel.focusOffset ||
+                !contains(view.contentDOM, domSel.focusNode)
+                ? view.state.selection.main.head
+                : view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset);
+            let anchor = iAnchor && iAnchor.node == domSel.anchorNode && iAnchor.offset == domSel.anchorOffset ||
+                !contains(view.contentDOM, domSel.anchorNode)
+                ? view.state.selection.main.anchor
+                : view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset);
+            this.newSel = state.EditorSelection.single(anchor, head);
+        }
+    }
+}
+function applyDOMChange(view, domChange) {
+    let change;
+    let { newSel } = domChange, sel = view.state.selection.main;
+    if (domChange.bounds) {
+        let { from, to } = domChange.bounds;
+        let preferredPos = sel.from, preferredSide = null;
+        // Prefer anchoring to end when Backspace is pressed (or, on
+        // Android, when something was deleted)
+        if (view.inputState.lastKeyCode === 8 && view.inputState.lastKeyTime > Date.now() - 100 ||
+            browser.android && domChange.text.length < to - from) {
+            preferredPos = sel.to;
+            preferredSide = "end";
+        }
+        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), domChange.text, preferredPos - from, preferredSide);
+        if (diff) {
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. DomChange drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && domChange.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
+            change = { from: from + diff.from, to: from + diff.toA,
+                insert: state.Text.of(domChange.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+        }
+    }
+    else if (newSel && (!view.hasFocus || !view.state.facet(editable) || newSel.main.eq(sel))) {
+        newSel = null;
+    }
+    if (!change && !newSel)
+        return false;
+    if (!change && domChange.typeOver && !sel.empty && newSel && newSel.main.empty) {
+        // Heuristic to notice typing over a selected character
+        change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
+    }
+    else if (change && change.from >= sel.from && change.to <= sel.to &&
+        (change.from != sel.from || change.to != sel.to) &&
+        (sel.to - sel.from) - (change.to - change.from) <= 4) {
+        // If the change is inside the selection and covers most of it,
+        // assume it is a selection replace (with identical characters at
+        // the start/end not included in the diff)
+        change = {
+            from: sel.from, to: sel.to,
+            insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
+        };
+    }
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
+        /^\. ?$/.test(change.insert.toString())) {
+        // Detect insert-period-on-double-space Mac and Android behavior,
+        // and transform it into a regular space insert.
+        if (newSel && change.insert.length == 2)
+            newSel = state.EditorSelection.single(newSel.main.anchor - 1, newSel.main.head - 1);
+        change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
+    }
+    if (change) {
+        let startState = view.state;
+        if (browser.ios && view.inputState.flushIOSKey(view))
+            return true;
+        // Android browsers don't fire reasonable key events for enter,
+        // backspace, or delete. So this detects changes that look like
+        // they're caused by those keys, and reinterprets them as key
+        // events. (Some of these keys are also handled by beforeinput
+        // events and the pendingAndroidKey mechanism, but that's not
+        // reliable in all situations.)
+        if (browser.android &&
+            ((change.from == sel.from && change.to == sel.to &&
+                change.insert.length == 1 && change.insert.lines == 2 &&
+                dispatchKey(view.contentDOM, "Enter", 13)) ||
+                (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 &&
+                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
+                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
+                    dispatchKey(view.contentDOM, "Delete", 46))))
+            return true;
+        let text = change.insert.toString();
+        if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
+            return true;
+        if (view.inputState.composing >= 0)
+            view.inputState.composing++;
+        let tr;
+        if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
+            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length) &&
+            view.inputState.composing < 0) {
+            let before = sel.from < change.from ? startState.sliceDoc(sel.from, change.from) : "";
+            let after = sel.to > change.to ? startState.sliceDoc(change.to, sel.to) : "";
+            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) + after));
+        }
+        else {
+            let changes = startState.changes(change);
+            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
+                ? newSel.main : undefined;
+            // Try to apply a composition change to all cursors
+            if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
+                change.to <= sel.to && change.to >= sel.to - 10) {
+                let replaced = view.state.sliceDoc(change.from, change.to);
+                let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
+                let offset = sel.to - change.to, size = sel.to - sel.from;
+                tr = startState.changeByRange(range => {
+                    if (range.from == sel.from && range.to == sel.to)
+                        return { changes, range: mainSel || range.map(changes) };
+                    let to = range.to - offset, from = to - replaced.length;
+                    if (range.to - range.from != size || view.state.sliceDoc(from, to) != replaced ||
+                        // Unfortunately, there's no way to make multiple
+                        // changes in the same node work without aborting
+                        // composition, so cursors in the composition range are
+                        // ignored.
+                        compositionRange && range.to >= compositionRange.from && range.from <= compositionRange.to)
+                        return { range };
+                    let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
+                    return {
+                        changes: rangeChanges,
+                        range: !mainSel ? range.map(rangeChanges) :
+                            state.EditorSelection.range(Math.max(0, mainSel.anchor + selOff), Math.max(0, mainSel.head + selOff))
+                    };
+                });
+            }
+            else {
+                tr = {
+                    changes,
+                    selection: mainSel && startState.selection.replaceRange(mainSel)
+                };
+            }
+        }
+        let userEvent = "input.type";
+        if (view.composing) {
+            userEvent += ".compose";
+            if (view.inputState.compositionFirstChange) {
+                userEvent += ".start";
+                view.inputState.compositionFirstChange = false;
+            }
+        }
+        view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
+    }
+    else if (newSel && !newSel.main.eq(sel)) {
+        let scrollIntoView = false, userEvent = "select";
+        if (view.inputState.lastSelectionTime > Date.now() - 50) {
+            if (view.inputState.lastSelectionOrigin == "select")
+                scrollIntoView = true;
+            userEvent = view.inputState.lastSelectionOrigin;
+        }
+        view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
+    }
+}
+function findDiff(a, b, preferredPos, preferredSide) {
+    let minLen = Math.min(a.length, b.length);
+    let from = 0;
+    while (from < minLen && a.charCodeAt(from) == b.charCodeAt(from))
+        from++;
+    if (from == minLen && a.length == b.length)
+        return null;
+    let toA = a.length, toB = b.length;
+    while (toA > 0 && toB > 0 && a.charCodeAt(toA - 1) == b.charCodeAt(toB - 1)) {
+        toA--;
+        toB--;
+    }
+    if (preferredSide == "end") {
+        let adjust = Math.max(0, from - Math.min(toA, toB));
+        preferredPos -= toA + adjust - from;
+    }
+    if (toA < from && a.length < b.length) {
+        let move = preferredPos <= from && preferredPos >= toA ? from - preferredPos : 0;
+        from -= move;
+        toB = from + (toB - toA);
+        toA = from;
+    }
+    else if (toB < from) {
+        let move = preferredPos <= from && preferredPos >= toB ? from - preferredPos : 0;
+        from -= move;
+        toA = from + (toA - toB);
+        toB = from;
+    }
+    return { from, toA, toB };
+}
+function selectionPoints(view) {
+    let result = [];
+    if (view.root.activeElement != view.contentDOM)
+        return result;
+    let { anchorNode, anchorOffset, focusNode, focusOffset } = view.observer.selectionRange;
+    if (anchorNode) {
+        result.push(new DOMPoint(anchorNode, anchorOffset));
+        if (focusNode != anchorNode || focusOffset != anchorOffset)
+            result.push(new DOMPoint(focusNode, focusOffset));
+    }
+    return result;
+}
+function selectionFromPoints(points, base) {
+    if (points.length == 0)
+        return null;
+    let anchor = points[0].pos, head = points.length == 2 ? points[1].pos : anchor;
+    return anchor > -1 && head > -1 ? state.EditorSelection.single(anchor + base, head + base) : null;
+}
+
 const observeOptions = {
     childList: true,
     characterData: true,
@@ -5463,10 +5725,8 @@ const observeOptions = {
 // DOMCharacterDataModified there
 const useCharData = browser.ie && browser.ie_version <= 11;
 class DOMObserver {
-    constructor(view, onChange, onScrollChanged) {
+    constructor(view) {
         this.view = view;
-        this.onChange = onChange;
-        this.onScrollChanged = onScrollChanged;
         this.active = false;
         // The known selection. Kept in our own object, as opposed to just
         // directly accessing the selection because:
@@ -5481,6 +5741,7 @@ class DOMObserver {
         this.resizeTimeout = -1;
         this.queue = [];
         this.delayedAndroidKey = null;
+        this.flushingAndroidKey = -1;
         this.lastChange = 0;
         this.scrollTargets = [];
         this.intersection = null;
@@ -5549,6 +5810,11 @@ class DOMObserver {
         this.listenForScroll();
         this.readSelectionRange();
     }
+    onScrollChanged(e) {
+        this.view.inputState.runScrollHandlers(this.view, e);
+        if (this.intersecting)
+            this.view.measure();
+    }
     onScroll(e) {
         if (this.intersecting)
             this.flush(false);
@@ -5708,14 +5974,17 @@ class DOMObserver {
     // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         var _a;
-        if (!this.delayedAndroidKey)
-            this.view.win.requestAnimationFrame(() => {
+        if (!this.delayedAndroidKey) {
+            let flush = () => {
                 let key = this.delayedAndroidKey;
-                this.delayedAndroidKey = null;
-                this.delayedFlush = -1;
-                if (!this.flush() && key.force)
-                    dispatchKey(this.dom, key.key, key.keyCode);
-            });
+                if (key) {
+                    this.clearDelayedAndroidKey();
+                    if (!this.flush() && key.force)
+                        dispatchKey(this.dom, key.key, key.keyCode);
+                }
+            };
+            this.flushingAndroidKey = this.view.win.requestAnimationFrame(flush);
+        }
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
         if (!this.delayedAndroidKey || key == "Enter")
@@ -5728,6 +5997,11 @@ class DOMObserver {
                 force: this.lastChange < Date.now() - 50 || !!((_a = this.delayedAndroidKey) === null || _a === void 0 ? void 0 : _a.force)
             };
     }
+    clearDelayedAndroidKey() {
+        this.win.cancelAnimationFrame(this.flushingAndroidKey);
+        this.delayedAndroidKey = null;
+        this.flushingAndroidKey = -1;
+    }
     flushSoon() {
         if (this.delayedFlush < 0)
             this.delayedFlush = this.view.win.requestAnimationFrame(() => { this.delayedFlush = -1; this.flush(); });
@@ -5762,6 +6036,17 @@ class DOMObserver {
         }
         return { from, to, typeOver };
     }
+    readChange() {
+        let { from, to, typeOver } = this.processRecords();
+        let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
+        if (from < 0 && !newSel)
+            return null;
+        if (from > -1)
+            this.lastChange = Date.now();
+        this.view.inputState.lastFocusTime = 0;
+        this.selectionChanged = false;
+        return new DOMChange(this.view, from, to, typeOver);
+    }
     // Apply pending changes, if any
     flush(readSelection = true) {
         // Completely hold off flushing when pending keys are set—the code
@@ -5771,16 +6056,11 @@ class DOMObserver {
             return false;
         if (readSelection)
             this.readSelectionRange();
-        let { from, to, typeOver } = this.processRecords();
-        let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
-        if (from < 0 && !newSel)
+        let domChange = this.readChange();
+        if (!domChange)
             return false;
-        if (from > -1)
-            this.lastChange = Date.now();
-        this.view.inputState.lastFocusTime = 0;
-        this.selectionChanged = false;
         let startState = this.view.state;
-        let handled = this.onChange(from, to, typeOver);
+        let handled = applyDOMChange(this.view, domChange);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
@@ -5836,6 +6116,8 @@ class DOMObserver {
         this.removeWindowListeners(this.win);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
+        this.win.cancelAnimationFrame(this.delayedFlush);
+        this.win.cancelAnimationFrame(this.flushingAndroidKey);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5877,218 +6159,6 @@ function safariSelectionRangeHack(view) {
     return { anchorNode, anchorOffset, focusNode, focusOffset };
 }
 
-function applyDOMChange(view, start, end, typeOver) {
-    let change, newSel;
-    let sel = view.state.selection.main;
-    if (start > -1) {
-        let bounds = view.docView.domBoundsAround(start, end, 0);
-        if (!bounds || view.state.readOnly)
-            return false;
-        let { from, to } = bounds;
-        let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
-        let reader = new DOMReader(selPoints, view.state);
-        reader.readRange(bounds.startDOM, bounds.endDOM);
-        let preferredPos = sel.from, preferredSide = null;
-        // Prefer anchoring to end when Backspace is pressed (or, on
-        // Android, when something was deleted)
-        if (view.inputState.lastKeyCode === 8 && view.inputState.lastKeyTime > Date.now() - 100 ||
-            browser.android && reader.text.length < to - from) {
-            preferredPos = sel.to;
-            preferredSide = "end";
-        }
-        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
-        if (diff) {
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
-                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
-                diff.toB--;
-            change = { from: from + diff.from, to: from + diff.toA,
-                insert: state.Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
-        }
-        newSel = selectionFromPoints(selPoints, from);
-    }
-    else if (view.hasFocus || !view.state.facet(editable)) {
-        let domSel = view.observer.selectionRange;
-        let { impreciseHead: iHead, impreciseAnchor: iAnchor } = view.docView;
-        let head = iHead && iHead.node == domSel.focusNode && iHead.offset == domSel.focusOffset ||
-            !contains(view.contentDOM, domSel.focusNode)
-            ? view.state.selection.main.head
-            : view.docView.posFromDOM(domSel.focusNode, domSel.focusOffset);
-        let anchor = iAnchor && iAnchor.node == domSel.anchorNode && iAnchor.offset == domSel.anchorOffset ||
-            !contains(view.contentDOM, domSel.anchorNode)
-            ? view.state.selection.main.anchor
-            : view.docView.posFromDOM(domSel.anchorNode, domSel.anchorOffset);
-        if (head != sel.head || anchor != sel.anchor)
-            newSel = state.EditorSelection.single(anchor, head);
-    }
-    if (!change && !newSel)
-        return false;
-    if (!change && typeOver && !sel.empty && newSel && newSel.main.empty) {
-        // Heuristic to notice typing over a selected character
-        change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
-    }
-    else if (change && change.from >= sel.from && change.to <= sel.to &&
-        (change.from != sel.from || change.to != sel.to) &&
-        (sel.to - sel.from) - (change.to - change.from) <= 4) {
-        // If the change is inside the selection and covers most of it,
-        // assume it is a selection replace (with identical characters at
-        // the start/end not included in the diff)
-        change = {
-            from: sel.from, to: sel.to,
-            insert: view.state.doc.slice(sel.from, change.from).append(change.insert).append(view.state.doc.slice(change.to, sel.to))
-        };
-    }
-    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
-        /^\. ?$/.test(change.insert.toString())) {
-        // Detect insert-period-on-double-space Mac and Android behavior,
-        // and transform it into a regular space insert.
-        if (newSel && change.insert.length == 2)
-            newSel = state.EditorSelection.single(newSel.main.anchor - 1, newSel.main.head - 1);
-        change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
-    }
-    if (change) {
-        let startState = view.state;
-        if (browser.ios && view.inputState.flushIOSKey(view))
-            return true;
-        // Android browsers don't fire reasonable key events for enter,
-        // backspace, or delete. So this detects changes that look like
-        // they're caused by those keys, and reinterprets them as key
-        // events. (Some of these keys are also handled by beforeinput
-        // events and the pendingAndroidKey mechanism, but that's not
-        // reliable in all situations.)
-        if (browser.android &&
-            ((change.from == sel.from && change.to == sel.to &&
-                change.insert.length == 1 && change.insert.lines == 2 &&
-                dispatchKey(view.contentDOM, "Enter", 13)) ||
-                (change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Backspace", 8)) ||
-                (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
-                    dispatchKey(view.contentDOM, "Delete", 46))))
-            return true;
-        let text = change.insert.toString();
-        if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return true;
-        if (view.inputState.composing >= 0)
-            view.inputState.composing++;
-        let tr;
-        if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
-            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length) &&
-            view.inputState.composing < 0) {
-            let before = sel.from < change.from ? startState.sliceDoc(sel.from, change.from) : "";
-            let after = sel.to > change.to ? startState.sliceDoc(change.to, sel.to) : "";
-            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) + after));
-        }
-        else {
-            let changes = startState.changes(change);
-            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
-                ? newSel.main : undefined;
-            // Try to apply a composition change to all cursors
-            if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
-                change.to <= sel.to && change.to >= sel.to - 10) {
-                let replaced = view.state.sliceDoc(change.from, change.to);
-                let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
-                let offset = sel.to - change.to, size = sel.to - sel.from;
-                tr = startState.changeByRange(range => {
-                    if (range.from == sel.from && range.to == sel.to)
-                        return { changes, range: mainSel || range.map(changes) };
-                    let to = range.to - offset, from = to - replaced.length;
-                    if (range.to - range.from != size || view.state.sliceDoc(from, to) != replaced ||
-                        // Unfortunately, there's no way to make multiple
-                        // changes in the same node work without aborting
-                        // composition, so cursors in the composition range are
-                        // ignored.
-                        compositionRange && range.to >= compositionRange.from && range.from <= compositionRange.to)
-                        return { range };
-                    let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
-                    return {
-                        changes: rangeChanges,
-                        range: !mainSel ? range.map(rangeChanges) :
-                            state.EditorSelection.range(Math.max(0, mainSel.anchor + selOff), Math.max(0, mainSel.head + selOff))
-                    };
-                });
-            }
-            else {
-                tr = {
-                    changes,
-                    selection: mainSel && startState.selection.replaceRange(mainSel)
-                };
-            }
-        }
-        let userEvent = "input.type";
-        if (view.composing) {
-            userEvent += ".compose";
-            if (view.inputState.compositionFirstChange) {
-                userEvent += ".start";
-                view.inputState.compositionFirstChange = false;
-            }
-        }
-        view.dispatch(tr, { scrollIntoView: true, userEvent });
-        return true;
-    }
-    else if (newSel && !newSel.main.eq(sel)) {
-        let scrollIntoView = false, userEvent = "select";
-        if (view.inputState.lastSelectionTime > Date.now() - 50) {
-            if (view.inputState.lastSelectionOrigin == "select")
-                scrollIntoView = true;
-            userEvent = view.inputState.lastSelectionOrigin;
-        }
-        view.dispatch({ selection: newSel, scrollIntoView, userEvent });
-        return true;
-    }
-    else {
-        return false;
-    }
-}
-function findDiff(a, b, preferredPos, preferredSide) {
-    let minLen = Math.min(a.length, b.length);
-    let from = 0;
-    while (from < minLen && a.charCodeAt(from) == b.charCodeAt(from))
-        from++;
-    if (from == minLen && a.length == b.length)
-        return null;
-    let toA = a.length, toB = b.length;
-    while (toA > 0 && toB > 0 && a.charCodeAt(toA - 1) == b.charCodeAt(toB - 1)) {
-        toA--;
-        toB--;
-    }
-    if (preferredSide == "end") {
-        let adjust = Math.max(0, from - Math.min(toA, toB));
-        preferredPos -= toA + adjust - from;
-    }
-    if (toA < from && a.length < b.length) {
-        let move = preferredPos <= from && preferredPos >= toA ? from - preferredPos : 0;
-        from -= move;
-        toB = from + (toB - toA);
-        toA = from;
-    }
-    else if (toB < from) {
-        let move = preferredPos <= from && preferredPos >= toB ? from - preferredPos : 0;
-        from -= move;
-        toA = from + (toA - toB);
-        toB = from;
-    }
-    return { from, toA, toB };
-}
-function selectionPoints(view) {
-    let result = [];
-    if (view.root.activeElement != view.contentDOM)
-        return result;
-    let { anchorNode, anchorOffset, focusNode, focusOffset } = view.observer.selectionRange;
-    if (anchorNode) {
-        result.push(new DOMPoint(anchorNode, anchorOffset));
-        if (focusNode != anchorNode || focusOffset != anchorOffset)
-            result.push(new DOMPoint(focusNode, focusOffset));
-    }
-    return result;
-}
-function selectionFromPoints(points, base) {
-    if (points.length == 0)
-        return null;
-    let anchor = points[0].pos, head = points.length == 2 ? points[1].pos : anchor;
-    return anchor > -1 && head > -1 ? state.EditorSelection.single(anchor + base, head + base) : null;
-}
-
 // The editor's update state machine looks something like this:
 //
 //     Idle → Updating ⇆ Idle (unchecked) → Measuring → Idle
@@ -6151,13 +6221,7 @@ class EditorView {
         this.plugins = this.state.facet(viewPlugin).map(spec => new PluginInstance(spec));
         for (let plugin of this.plugins)
             plugin.update(this);
-        this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            return applyDOMChange(this, from, to, typeOver);
-        }, event => {
-            this.inputState.runScrollHandlers(this, event);
-            if (this.observer.intersecting)
-                this.measure();
-        });
+        this.observer = new DOMObserver(this);
         this.inputState = new InputState(this);
         this.inputState.ensureHandlers(this, this.plugins);
         this.docView = new DocView(this);
@@ -6241,7 +6305,20 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
-        this.observer.clear();
+        // If there was a pending DOM change, eagerly read it and try to
+        // apply it after the given transactions.
+        let pendingKey = this.observer.delayedAndroidKey, domChange = null;
+        if (pendingKey) {
+            this.observer.clearDelayedAndroidKey();
+            domChange = this.observer.readChange();
+            // Only try to apply DOM changes if the transactions didn't
+            // change the doc or selection.
+            if (domChange && !this.state.doc.eq(state$1.doc) || !this.state.selection.eq(state$1.selection))
+                domChange = null;
+        }
+        else {
+            this.observer.clear();
+        }
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
@@ -6283,6 +6360,10 @@ class EditorView {
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(update);
+        if (domChange) {
+            if (!applyDOMChange(this, domChange) && pendingKey.force)
+                dispatchKey(this.contentDOM, pendingKey.key, pendingKey.keyCode);
+        }
     }
     /**
     Reset the view to the given state. (This will cause the entire