@codemirror/view 0.19.10 → 0.19.14

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## 0.19.14 (2021-11-07)
+
+### Bug fixes
+
+Fix an issue where typing into a read-only editor would move the selection.
+
+Fix slowness when backspace is held down on iOS.
+
+## 0.19.13 (2021-11-06)
+
+### Bug fixes
+
+Fix a bug where backspace, enter, and delete would get applied twice on iOS.
+
+## 0.19.12 (2021-11-04)
+
+### Bug fixes
+
+Make sure the workaround for the lost virtual keyboard on Chrome Android also works on slower phones. Slight style change in beforeinput handler
+
+Avoid failure cases in viewport-based rendering of very long lines.
+
+## 0.19.11 (2021-11-03)
+
+### Breaking changes
+
+`EditorView.scrollPosIntoView` has been deprecated. Use the `EditorView.scrollTo` effect instead.
+
+### New features
+
+The new `EditorView.centerOn` effect can be used to scroll a given range to the center of the view.
+
 ## 0.19.10 (2021-11-02)
 
 ### Bug fixes

package/dist/index.cjs

@@ -102,9 +102,9 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side) {
+function scrollRectIntoView(dom, rect, side, center) {
     let doc = dom.ownerDocument, win = doc.defaultView;
-    for (let cur = dom.parentNode; cur;) {
+    for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
@@ -121,7 +121,20 @@ function scrollRectIntoView(dom, rect, side) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (rect.top < bounding.top) {
+            if (center) {
+                let rectHeight = rect.bottom - rect.top, boundingHeight = bounding.bottom - bounding.top;
+                let targetTop;
+                if (rectHeight <= boundingHeight)
+                    targetTop = rect.top + rectHeight / 2 - boundingHeight / 2;
+                else if (side < 0)
+                    targetTop = rect.top - ScrollSpace;
+                else
+                    targetTop = rect.bottom + ScrollSpace - boundingHeight;
+                moveY = targetTop - bounding.top;
+                if (Math.abs(moveY) <= 1)
+                    moveY = 0;
+            }
+            else if (rect.top < bounding.top) {
                 moveY = -(bounding.top - rect.top + ScrollSpace);
                 if (side > 0 && rect.bottom > bounding.bottom + moveY)
                     moveY = rect.bottom - bounding.bottom + moveY + ScrollSpace;
@@ -163,6 +176,7 @@ function scrollRectIntoView(dom, rect, side) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
+            center = false;
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -253,9 +267,9 @@ function contentEditablePlainTextSupported() {
 }
 function getRoot(node) {
     while (node) {
-        node = node.assignedSlot || node.parentNode;
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
             return node;
+        node = node.assignedSlot || node.parentNode;
     }
     return null;
 }
@@ -307,25 +321,30 @@ class ContentView {
     sync(track) {
         var _a;
         if (this.dirty & 2 /* Node */) {
-            let parent = this.dom, pos = null;
+            let parent = this.dom;
+            let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    let next = pos ? pos.nextSibling : parent.firstChild;
-                    if (!child.dom && next && !((_a = ContentView.get(next)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(next);
+                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
+                        child.reuseDOM(pos);
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && track.node == parent && pos != child.dom)
+                if (track && !track.written && track.node == parent && pos != child.dom)
                     track.written = true;
-                syncNodeInto(parent, pos, child.dom);
-                pos = child.dom;
+                if (child.dom.parentNode == parent) {
+                    while (pos && pos != child.dom)
+                        pos = rm(pos);
+                    pos = child.dom.nextSibling;
+                }
+                else {
+                    parent.insertBefore(child.dom, pos);
+                }
             }
-            let next = pos ? pos.nextSibling : parent.firstChild;
-            if (next && track && track.node == parent)
+            if (pos && track && track.node == parent)
                 track.written = true;
-            while (next)
-                next = rm(next);
+            while (pos)
+                pos = rm(pos);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -465,14 +484,6 @@ function rm(dom) {
     dom.parentNode.removeChild(dom);
     return next;
 }
-function syncNodeInto(parent, after, dom) {
-    let next = after ? after.nextSibling : parent.firstChild;
-    if (dom.parentNode == parent)
-        while (next != dom)
-            next = rm(next);
-    else
-        parent.insertBefore(dom, next);
-}
 class ChildCursor {
     constructor(children, pos, i) {
         this.children = children;
@@ -1560,6 +1571,9 @@ const inputHandler = state.Facet.define();
 const scrollTo = state.StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+const centerOn = state.StateEffect.define({
+    map: (range, changes) => range.map(changes)
+});
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2304,7 +2318,7 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollRangeIntoView(range) {
+    scrollIntoView({ range, center }) {
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2324,10 +2338,10 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.dom, {
+        scrollRectIntoView(this.view.scrollDOM, {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1);
+        }, range.head < range.anchor ? -1 : 1, center);
     }
 }
 function betweenUneditable(pos) {
@@ -3064,10 +3078,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // On iOS, some keys need to have their default behavior happen
-        // (after which we retroactively handle them and reset the DOM) to
-        // avoid messing up the virtual keyboard state.
-        //
         // On Chrome Android, backspace near widgets is just completely
         // broken, and there are no key events, so we need to handle the
         // beforeinput event. Deleting stuff will often create a flurry of
@@ -3075,12 +3085,11 @@ class InputState {
         // subsequent events even more broken, so again, we hold off doing
         // anything until the browser is finished with whatever it is trying
         // to do.
-        //
-        // setPendingKey sets this, causing the DOM observer to pause for a
-        // bit, and setting an animation frame (which seems the most
-        // reliable way to detect 'browser is done flailing') to fire a fake
-        // key event and re-sync the view again.
-        this.pendingKey = undefined;
+        this.pendingAndroidKey = undefined;
+        // On iOS, some keys need to have their default behavior happen
+        // (after which we retroactively handle them and reset the DOM) to
+        // avoid messing up the virtual keyboard state.
+        this.pendingIOSKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3192,18 +3201,30 @@ class InputState {
         let pending;
         if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.setPendingKey(view, pending);
+            this.pendingIOSKey = pending;
+            setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
         return false;
     }
-    setPendingKey(view, pending) {
-        this.pendingKey = pending;
+    flushIOSKey(view) {
+        let key = this.pendingIOSKey;
+        if (!key)
+            return false;
+        this.pendingIOSKey = undefined;
+        return dispatchKey(view.contentDOM, key.key, key.keyCode);
+    }
+    // This causes the DOM observer to pause for a bit, and sets an
+    // animation frame (which seems the most reliable way to detect
+    // 'Chrome is done flailing about messing with the DOM') to fire a
+    // fake key event and re-sync the view again.
+    setPendingAndroidKey(view, pending) {
+        this.pendingAndroidKey = pending;
         requestAnimationFrame(() => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+            let key = this.pendingAndroidKey;
+            if (!key)
+                return;
+            this.pendingAndroidKey = undefined;
             view.observer.processRecords();
             let startState = view.state;
             dispatchKey(view.contentDOM, key.key, key.keyCode);
@@ -3717,18 +3738,20 @@ handlers.beforeinput = (view, event) => {
     // seems to do nothing at all on Chrome).
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
-        view.inputState.setPendingKey(view, pending);
-        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
-        setTimeout(() => {
-            var _a;
-            // Backspacing near uneditable nodes on Chrome Android sometimes
-            // closes the virtual keyboard. This tries to crudely detect
-            // that and refocus to get it back.
-            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
-                view.contentDOM.blur();
-                view.focus();
-            }
-        }, 50);
+        view.inputState.setPendingAndroidKey(view, pending);
+        if (pending.key == "Backspace" || pending.key == "Delete") {
+            let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+            setTimeout(() => {
+                var _a;
+                // Backspacing near uneditable nodes on Chrome Android sometimes
+                // closes the virtual keyboard. This tries to crudely detect
+                // that and refocus to get it back.
+                if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                    view.contentDOM.blur();
+                    view.focus();
+                }
+            }, 100);
+        }
     }
 };
 
@@ -4446,6 +4469,15 @@ class LineGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.vertical ? this.size : -1; }
 }
+class ScrollTarget {
+    constructor(range, center = false) {
+        this.range = range;
+        this.center = center;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.center);
+    }
+}
 class ViewState {
     constructor(state) {
         this.state = state;
@@ -4458,7 +4490,7 @@ class ViewState {
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
-        this.scrollTo = null;
+        this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
         this.visibleRanges = [];
@@ -4491,7 +4523,7 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
-    update(update, scrollTo = null) {
+    update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
         let newDeco = this.state.facet(decorations);
@@ -4502,15 +4534,16 @@ class ViewState {
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
-        if (scrollTo && (scrollTo.head < viewport.from || scrollTo.head > viewport.to) || !this.viewportIsAppropriate(viewport))
-            viewport = this.getViewport(0, scrollTo);
+        if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
+            !this.viewportIsAppropriate(viewport))
+            viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+        if (scrollTarget)
+            this.scrollTarget = scrollTarget;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
@@ -4563,10 +4596,10 @@ class ViewState {
         if (oracle.heightChanged)
             result |= 2 /* Height */;
         if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to))
-            this.viewport = this.getViewport(bias, this.scrollTo);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
         result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
@@ -4581,22 +4614,25 @@ class ViewState {
     }
     get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
     get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
-    getViewport(bias, scrollTo) {
+    getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* Margin */ / 2));
         let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
-        // If scrollTo is given, make sure the viewport includes that position
-        if (scrollTo) {
-            if (scrollTo.head < viewport.from) {
-                let { top: newTop } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newTop - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newTop + (visibleBottom - visibleTop) + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
-            }
-            else if (scrollTo.head > viewport.to) {
-                let { bottom: newBottom } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newBottom - (visibleBottom - visibleTop) - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newBottom + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+        // If scrollTarget is given, make sure the viewport includes that position
+        if (scrollTarget) {
+            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            if (head < viewport.from || head > viewport.to) {
+                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                if (scrollTarget.center)
+                    topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
+                else if (head < viewport.from)
+                    topPos = block.top;
+                else
+                    topPos = block.bottom - viewHeight;
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
             }
         }
         return viewport;
@@ -4638,52 +4674,50 @@ class ViewState {
         if (this.heightOracle.direction != exports.Direction.LTR)
             return gaps;
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
-            if (line.length < 10000 /* Margin */)
+            if (line.length < 4000 /* DoubleMargin */)
                 return;
             let structure = lineStructure(line.from, line.to, this.state);
-            if (structure.total < 10000 /* Margin */)
+            if (structure.total < 4000 /* DoubleMargin */)
                 return;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
-                if (line.from != this.viewport.from)
-                    viewFrom = line.from;
-                else
-                    viewFrom = findPosition(structure, (this.visibleTop - line.top) / line.height);
-                if (line.to != this.viewport.to)
-                    viewTo = line.to;
-                else
-                    viewTo = findPosition(structure, (this.visibleBottom - line.top) / line.height);
+                let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
+                viewFrom = findPosition(structure, (this.visibleTop - line.top - marginHeight) / line.height);
+                viewTo = findPosition(structure, (this.visibleBottom - line.top + marginHeight) / line.height);
             }
             else {
                 let totalWidth = structure.total * this.heightOracle.charWidth;
-                viewFrom = findPosition(structure, this.pixelViewport.left / totalWidth);
-                viewTo = findPosition(structure, this.pixelViewport.right / totalWidth);
+                let marginWidth = 2000 /* Margin */ * this.heightOracle.charWidth;
+                viewFrom = findPosition(structure, (this.pixelViewport.left - marginWidth) / totalWidth);
+                viewTo = findPosition(structure, (this.pixelViewport.right + marginWidth) / totalWidth);
             }
+            let outside = [];
+            if (viewFrom > line.from)
+                outside.push({ from: line.from, to: viewFrom });
+            if (viewTo < line.to)
+                outside.push({ from: viewTo, to: line.to });
             let sel = this.state.selection.main;
-            // Make sure the gap doesn't cover a selection end
-            if (sel.from <= viewFrom && sel.to >= line.from)
-                viewFrom = sel.from;
-            if (sel.from <= line.to && sel.to >= viewTo)
-                viewTo = sel.to;
-            let gapTo = viewFrom - 10000 /* Margin */, gapFrom = viewTo + 10000 /* Margin */;
-            if (gapTo > line.from + 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.from == line.from && gap.to > gapTo - 5000 /* HalfMargin */ && gap.to < gapTo + 5000 /* HalfMargin */) ||
-                    new LineGap(line.from, gapTo, this.gapSize(line, gapTo, true, structure)));
-            if (gapFrom < line.to - 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.to == line.to && gap.from > gapFrom - 5000 /* HalfMargin */ &&
-                    gap.from < gapFrom + 5000 /* HalfMargin */) ||
-                    new LineGap(gapFrom, line.to, this.gapSize(line, gapFrom, false, structure)));
+            // Make sure the gaps don't cover a selection end
+            if (sel.from >= line.from && sel.from <= line.to)
+                cutRange(outside, sel.from - 10 /* SelectionMargin */, sel.from + 10 /* SelectionMargin */);
+            if (!sel.empty && sel.to >= line.from && sel.to <= line.to)
+                cutRange(outside, sel.to - 10 /* SelectionMargin */, sel.to + 10 /* SelectionMargin */);
+            for (let { from, to } of outside)
+                if (to - from > 1000 /* HalfMargin */) {
+                    gaps.push(find(current, gap => gap.from >= line.from && gap.to <= line.to &&
+                        Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
+                        new LineGap(from, to, this.gapSize(line, from, to, structure)));
+                }
         });
         return gaps;
     }
-    gapSize(line, pos, start, structure) {
+    gapSize(line, from, to, structure) {
+        let fraction = findFraction(structure, to) - findFraction(structure, from);
         if (this.heightOracle.lineWrapping) {
-            let height = line.height * findFraction(structure, pos);
-            return start ? height : line.height - height;
+            return line.height * fraction;
         }
         else {
-            let ratio = findFraction(structure, pos);
-            return structure.total * this.heightOracle.charWidth * (start ? ratio : 1 - ratio);
+            return structure.total * this.heightOracle.charWidth * fraction;
         }
     }
     updateLineGaps(gaps) {
@@ -4777,6 +4811,20 @@ function findFraction(structure, pos) {
     }
     return counted / structure.total;
 }
+function cutRange(ranges, from, to) {
+    for (let i = 0; i < ranges.length; i++) {
+        let r = ranges[i];
+        if (r.from < to && r.to > from) {
+            let pieces = [];
+            if (r.from < from)
+                pieces.push({ from: r.from, to: from });
+            if (r.to > to)
+                pieces.push({ from: to, to: r.to });
+            ranges.splice(i, 1, ...pieces);
+            i += pieces.length - 1;
+        }
+    }
+}
 function find(array, f) {
     for (let val of array)
         if (f(val))
@@ -5238,7 +5286,7 @@ class DOMObserver {
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
-        if (this.delayedFlush >= 0 || this.view.inputState.pendingKey)
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
         this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
@@ -5325,8 +5373,11 @@ function safariSelectionRangeHack(view) {
 
 function applyDOMChange(view, start, end, typeOver) {
     let change, newSel;
-    let sel = view.state.selection.main, bounds;
-    if (start > -1 && !view.state.readOnly && (bounds = view.docView.domBoundsAround(start, end, 0))) {
+    let sel = view.state.selection.main;
+    if (start > -1) {
+        let bounds = view.docView.domBoundsAround(start, end, 0);
+        if (!bounds || view.state.readOnly)
+            return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view);
@@ -5380,16 +5431,8 @@ function applyDOMChange(view, start, end, typeOver) {
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
         // events.
-        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)))) {
+        if (browser.ios && view.inputState.flushIOSKey(view))
             return;
-        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;
@@ -5691,21 +5734,24 @@ class EditorView {
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
         update = new ViewUpdate(this, state$1, transactions);
-        let scrollPos = null;
+        let scrollTarget = null;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
-                if (scrollPos)
-                    scrollPos = scrollPos.map(tr.changes);
+                if (scrollTarget)
+                    scrollTarget = scrollTarget.map(tr.changes);
                 if (tr.scrollIntoView) {
                     let { main } = tr.state.selection;
-                    scrollPos = main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1);
+                    scrollTarget = new ScrollTarget(main.empty ? main : state.EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects)
+                for (let e of tr.effects) {
                     if (e.is(scrollTo))
-                        scrollPos = e.value;
+                        scrollTarget = new ScrollTarget(e.value);
+                    else if (e.is(centerOn))
+                        scrollTarget = new ScrollTarget(e.value, true);
+                }
             }
-            this.viewState.update(update, scrollPos);
+            this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
             if (!update.empty) {
                 this.updatePlugins(update);
@@ -5720,7 +5766,7 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollPos || this.viewState.mustEnforceCursorAssoc)
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5802,7 +5848,7 @@ class EditorView {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                if (!changed && !this.measureRequests.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
@@ -5844,9 +5890,9 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.scrollTo) {
-                    this.docView.scrollRangeIntoView(this.viewState.scrollTo);
-                    this.viewState.scrollTo = null;
+                if (this.viewState.scrollTarget) {
+                    this.docView.scrollIntoView(this.viewState.scrollTarget);
+                    this.viewState.scrollTarget = null;
                 }
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
@@ -6069,12 +6115,9 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    /**
-    Scroll the given document position into view.
-    */
+    // FIXME remove on next major version
     scrollPosIntoView(pos) {
-        this.viewState.scrollTo = state.EditorSelection.cursor(pos);
-        this.requestMeasure();
+        this.dispatch({ effects: scrollTo.of(state.EditorSelection.cursor(pos)) });
     }
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -6241,7 +6284,7 @@ class EditorView {
     target editors with a dark or light theme.
     */
     static baseTheme(spec) {
-        return state.Prec.fallback(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
+        return state.Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
 }
 /**
@@ -6250,6 +6293,11 @@ transaction to make it scroll the given range into view.
 */
 EditorView.scrollTo = scrollTo;
 /**
+Effect that makes the editor scroll the given range to the
+center of the visible view.
+*/
+EditorView.centerOn = centerOn;
+/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is
@@ -6678,7 +6726,7 @@ const themeSpec = {
 };
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
-const hideNativeSelection = state.Prec.override(EditorView.theme(themeSpec));
+const hideNativeSelection = state.Prec.highest(EditorView.theme(themeSpec));
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == exports.Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;

package/dist/index.d.ts

@@ -856,9 +856,6 @@ declare class EditorView {
     used.
     */
     moveVertically(start: SelectionRange, forward: boolean, distance?: number): SelectionRange;
-    /**
-    Scroll the given document position into view.
-    */
     scrollPosIntoView(pos: number): void;
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -949,6 +946,11 @@ declare class EditorView {
     */
     static scrollTo: _codemirror_state.StateEffectType<SelectionRange>;
     /**
+    Effect that makes the editor scroll the given range to the
+    center of the visible view.
+    */
+    static centerOn: _codemirror_state.StateEffectType<SelectionRange>;
+    /**
     Facet to add a [style
     module](https://github.com/marijnh/style-mod#documentation) to
     an editor view. The view will ensure that the module is

package/dist/index.js

@@ -99,9 +99,9 @@ function windowRect(win) {
         top: 0, bottom: win.innerHeight };
 }
 const ScrollSpace = 5;
-function scrollRectIntoView(dom, rect, side) {
+function scrollRectIntoView(dom, rect, side, center) {
     let doc = dom.ownerDocument, win = doc.defaultView;
-    for (let cur = dom.parentNode; cur;) {
+    for (let cur = dom; cur;) {
         if (cur.nodeType == 1) { // Element
             let bounding, top = cur == doc.body;
             if (top) {
@@ -118,7 +118,20 @@ function scrollRectIntoView(dom, rect, side) {
                     top: rect.top, bottom: rect.top + cur.clientHeight };
             }
             let moveX = 0, moveY = 0;
-            if (rect.top < bounding.top) {
+            if (center) {
+                let rectHeight = rect.bottom - rect.top, boundingHeight = bounding.bottom - bounding.top;
+                let targetTop;
+                if (rectHeight <= boundingHeight)
+                    targetTop = rect.top + rectHeight / 2 - boundingHeight / 2;
+                else if (side < 0)
+                    targetTop = rect.top - ScrollSpace;
+                else
+                    targetTop = rect.bottom + ScrollSpace - boundingHeight;
+                moveY = targetTop - bounding.top;
+                if (Math.abs(moveY) <= 1)
+                    moveY = 0;
+            }
+            else if (rect.top < bounding.top) {
                 moveY = -(bounding.top - rect.top + ScrollSpace);
                 if (side > 0 && rect.bottom > bounding.bottom + moveY)
                     moveY = rect.bottom - bounding.bottom + moveY + ScrollSpace;
@@ -160,6 +173,7 @@ function scrollRectIntoView(dom, rect, side) {
             if (top)
                 break;
             cur = cur.assignedSlot || cur.parentNode;
+            center = false;
         }
         else if (cur.nodeType == 11) { // A shadow root
             cur = cur.host;
@@ -250,9 +264,9 @@ function contentEditablePlainTextSupported() {
 }
 function getRoot(node) {
     while (node) {
-        node = node.assignedSlot || node.parentNode;
         if (node && (node.nodeType == 9 || node.nodeType == 11 && node.host))
             return node;
+        node = node.assignedSlot || node.parentNode;
     }
     return null;
 }
@@ -304,25 +318,30 @@ class ContentView {
     sync(track) {
         var _a;
         if (this.dirty & 2 /* Node */) {
-            let parent = this.dom, pos = null;
+            let parent = this.dom;
+            let pos = parent.firstChild;
             for (let child of this.children) {
                 if (child.dirty) {
-                    let next = pos ? pos.nextSibling : parent.firstChild;
-                    if (!child.dom && next && !((_a = ContentView.get(next)) === null || _a === void 0 ? void 0 : _a.parent))
-                        child.reuseDOM(next);
+                    if (!child.dom && pos && !((_a = ContentView.get(pos)) === null || _a === void 0 ? void 0 : _a.parent))
+                        child.reuseDOM(pos);
                     child.sync(track);
                     child.dirty = 0 /* Not */;
                 }
-                if (track && track.node == parent && pos != child.dom)
+                if (track && !track.written && track.node == parent && pos != child.dom)
                     track.written = true;
-                syncNodeInto(parent, pos, child.dom);
-                pos = child.dom;
+                if (child.dom.parentNode == parent) {
+                    while (pos && pos != child.dom)
+                        pos = rm(pos);
+                    pos = child.dom.nextSibling;
+                }
+                else {
+                    parent.insertBefore(child.dom, pos);
+                }
             }
-            let next = pos ? pos.nextSibling : parent.firstChild;
-            if (next && track && track.node == parent)
+            if (pos && track && track.node == parent)
                 track.written = true;
-            while (next)
-                next = rm(next);
+            while (pos)
+                pos = rm(pos);
         }
         else if (this.dirty & 1 /* Child */) {
             for (let child of this.children)
@@ -462,14 +481,6 @@ function rm(dom) {
     dom.parentNode.removeChild(dom);
     return next;
 }
-function syncNodeInto(parent, after, dom) {
-    let next = after ? after.nextSibling : parent.firstChild;
-    if (dom.parentNode == parent)
-        while (next != dom)
-            next = rm(next);
-    else
-        parent.insertBefore(dom, next);
-}
 class ChildCursor {
     constructor(children, pos, i) {
         this.children = children;
@@ -1556,6 +1567,9 @@ const inputHandler = /*@__PURE__*/Facet.define();
 const scrollTo = /*@__PURE__*/StateEffect.define({
     map: (range, changes) => range.map(changes)
 });
+const centerOn = /*@__PURE__*/StateEffect.define({
+    map: (range, changes) => range.map(changes)
+});
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -2300,7 +2314,7 @@ class DocView extends ContentView {
             this.view.viewState.lineGapDeco
         ];
     }
-    scrollRangeIntoView(range) {
+    scrollIntoView({ range, center }) {
         let rect = this.coordsAt(range.head, range.empty ? range.assoc : range.head > range.anchor ? -1 : 1), other;
         if (!rect)
             return;
@@ -2320,10 +2334,10 @@ class DocView extends ContentView {
                 if (bottom != null)
                     mBottom = Math.max(mBottom, bottom);
             }
-        scrollRectIntoView(this.dom, {
+        scrollRectIntoView(this.view.scrollDOM, {
             left: rect.left - mLeft, top: rect.top - mTop,
             right: rect.right + mRight, bottom: rect.bottom + mBottom
-        }, range.head < range.anchor ? -1 : 1);
+        }, range.head < range.anchor ? -1 : 1, center);
     }
 }
 function betweenUneditable(pos) {
@@ -3059,10 +3073,6 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
-        // On iOS, some keys need to have their default behavior happen
-        // (after which we retroactively handle them and reset the DOM) to
-        // avoid messing up the virtual keyboard state.
-        //
         // On Chrome Android, backspace near widgets is just completely
         // broken, and there are no key events, so we need to handle the
         // beforeinput event. Deleting stuff will often create a flurry of
@@ -3070,12 +3080,11 @@ class InputState {
         // subsequent events even more broken, so again, we hold off doing
         // anything until the browser is finished with whatever it is trying
         // to do.
-        //
-        // setPendingKey sets this, causing the DOM observer to pause for a
-        // bit, and setting an animation frame (which seems the most
-        // reliable way to detect 'browser is done flailing') to fire a fake
-        // key event and re-sync the view again.
-        this.pendingKey = undefined;
+        this.pendingAndroidKey = undefined;
+        // On iOS, some keys need to have their default behavior happen
+        // (after which we retroactively handle them and reset the DOM) to
+        // avoid messing up the virtual keyboard state.
+        this.pendingIOSKey = undefined;
         this.lastSelectionOrigin = null;
         this.lastSelectionTime = 0;
         this.lastEscPress = 0;
@@ -3187,18 +3196,30 @@ class InputState {
         let pending;
         if (browser.ios && (pending = PendingKeys.find(key => key.keyCode == event.keyCode)) &&
             !(event.ctrlKey || event.altKey || event.metaKey) && !event.synthetic) {
-            this.setPendingKey(view, pending);
+            this.pendingIOSKey = pending;
+            setTimeout(() => this.flushIOSKey(view), 250);
             return true;
         }
         return false;
     }
-    setPendingKey(view, pending) {
-        this.pendingKey = pending;
+    flushIOSKey(view) {
+        let key = this.pendingIOSKey;
+        if (!key)
+            return false;
+        this.pendingIOSKey = undefined;
+        return dispatchKey(view.contentDOM, key.key, key.keyCode);
+    }
+    // This causes the DOM observer to pause for a bit, and sets an
+    // animation frame (which seems the most reliable way to detect
+    // 'Chrome is done flailing about messing with the DOM') to fire a
+    // fake key event and re-sync the view again.
+    setPendingAndroidKey(view, pending) {
+        this.pendingAndroidKey = pending;
         requestAnimationFrame(() => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+            let key = this.pendingAndroidKey;
+            if (!key)
+                return;
+            this.pendingAndroidKey = undefined;
             view.observer.processRecords();
             let startState = view.state;
             dispatchKey(view.contentDOM, key.key, key.keyCode);
@@ -3712,18 +3733,20 @@ handlers.beforeinput = (view, event) => {
     // seems to do nothing at all on Chrome).
     let pending;
     if (browser.chrome && browser.android && (pending = PendingKeys.find(key => key.inputType == event.inputType))) {
-        view.inputState.setPendingKey(view, pending);
-        let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
-        setTimeout(() => {
-            var _a;
-            // Backspacing near uneditable nodes on Chrome Android sometimes
-            // closes the virtual keyboard. This tries to crudely detect
-            // that and refocus to get it back.
-            if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
-                view.contentDOM.blur();
-                view.focus();
-            }
-        }, 50);
+        view.inputState.setPendingAndroidKey(view, pending);
+        if (pending.key == "Backspace" || pending.key == "Delete") {
+            let startViewHeight = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0;
+            setTimeout(() => {
+                var _a;
+                // Backspacing near uneditable nodes on Chrome Android sometimes
+                // closes the virtual keyboard. This tries to crudely detect
+                // that and refocus to get it back.
+                if ((((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || 0) > startViewHeight + 10 && view.hasFocus) {
+                    view.contentDOM.blur();
+                    view.focus();
+                }
+            }, 100);
+        }
     }
 };
 
@@ -4440,6 +4463,15 @@ class LineGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.vertical ? this.size : -1; }
 }
+class ScrollTarget {
+    constructor(range, center = false) {
+        this.range = range;
+        this.center = center;
+    }
+    map(changes) {
+        return changes.empty ? this : new ScrollTarget(this.range.map(changes), this.center);
+    }
+}
 class ViewState {
     constructor(state) {
         this.state = state;
@@ -4452,7 +4484,7 @@ class ViewState {
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
-        this.scrollTo = null;
+        this.scrollTarget = null;
         // Briefly set to true when printing, to disable viewport limiting
         this.printing = false;
         this.visibleRanges = [];
@@ -4485,7 +4517,7 @@ class ViewState {
         this.scaler = this.heightMap.height <= 7000000 /* MaxDOMHeight */ ? IdScaler :
             new BigScaler(this.heightOracle.doc, this.heightMap, this.viewports);
     }
-    update(update, scrollTo = null) {
+    update(update, scrollTarget = null) {
         let prev = this.state;
         this.state = update.state;
         let newDeco = this.state.facet(decorations);
@@ -4496,15 +4528,16 @@ class ViewState {
         if (this.heightMap.height != prevHeight)
             update.flags |= 2 /* Height */;
         let viewport = heightChanges.length ? this.mapViewport(this.viewport, update.changes) : this.viewport;
-        if (scrollTo && (scrollTo.head < viewport.from || scrollTo.head > viewport.to) || !this.viewportIsAppropriate(viewport))
-            viewport = this.getViewport(0, scrollTo);
+        if (scrollTarget && (scrollTarget.range.head < viewport.from || scrollTarget.range.head > viewport.to) ||
+            !this.viewportIsAppropriate(viewport))
+            viewport = this.getViewport(0, scrollTarget);
         this.viewport = viewport;
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(this.mapLineGaps(this.lineGaps, update.changes)));
         update.flags |= this.computeVisibleRanges();
-        if (scrollTo)
-            this.scrollTo = scrollTo;
+        if (scrollTarget)
+            this.scrollTarget = scrollTarget;
         if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc)
             this.mustEnforceCursorAssoc = true;
@@ -4557,10 +4590,10 @@ class ViewState {
         if (oracle.heightChanged)
             result |= 2 /* Height */;
         if (!this.viewportIsAppropriate(this.viewport, bias) ||
-            this.scrollTo && (this.scrollTo.head < this.viewport.from || this.scrollTo.head > this.viewport.to))
-            this.viewport = this.getViewport(bias, this.scrollTo);
+            this.scrollTarget && (this.scrollTarget.range.head < this.viewport.from || this.scrollTarget.range.head > this.viewport.to))
+            this.viewport = this.getViewport(bias, this.scrollTarget);
         this.updateForViewport();
-        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 15000 /* MinViewPort */)
+        if (this.lineGaps.length || this.viewport.to - this.viewport.from > 4000 /* DoubleMargin */)
             this.updateLineGaps(this.ensureLineGaps(refresh ? [] : this.lineGaps));
         result |= this.computeVisibleRanges();
         if (this.mustEnforceCursorAssoc) {
@@ -4575,22 +4608,25 @@ class ViewState {
     }
     get visibleTop() { return this.scaler.fromDOM(this.pixelViewport.top, 0); }
     get visibleBottom() { return this.scaler.fromDOM(this.pixelViewport.bottom, 0); }
-    getViewport(bias, scrollTo) {
+    getViewport(bias, scrollTarget) {
         // This will divide VP.Margin between the top and the
         // bottom, depending on the bias (the change in viewport position
         // since the last update). It'll hold a number between 0 and 1
         let marginTop = 0.5 - Math.max(-0.5, Math.min(0.5, bias / 1000 /* Margin */ / 2));
         let map = this.heightMap, doc = this.state.doc, { visibleTop, visibleBottom } = this;
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
-        // If scrollTo is given, make sure the viewport includes that position
-        if (scrollTo) {
-            if (scrollTo.head < viewport.from) {
-                let { top: newTop } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newTop - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newTop + (visibleBottom - visibleTop) + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
-            }
-            else if (scrollTo.head > viewport.to) {
-                let { bottom: newBottom } = map.lineAt(scrollTo.head, QueryType.ByPos, doc, 0, 0);
-                viewport = new Viewport(map.lineAt(newBottom - (visibleBottom - visibleTop) - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(newBottom + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
+        // If scrollTarget is given, make sure the viewport includes that position
+        if (scrollTarget) {
+            let { head } = scrollTarget.range, viewHeight = visibleBottom - visibleTop;
+            if (head < viewport.from || head > viewport.to) {
+                let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
+                if (scrollTarget.center)
+                    topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
+                else if (head < viewport.from)
+                    topPos = block.top;
+                else
+                    topPos = block.bottom - viewHeight;
+                viewport = new Viewport(map.lineAt(topPos - 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(topPos + viewHeight + 1000 /* Margin */ / 2, QueryType.ByHeight, doc, 0, 0).to);
             }
         }
         return viewport;
@@ -4632,52 +4668,50 @@ class ViewState {
         if (this.heightOracle.direction != Direction.LTR)
             return gaps;
         this.heightMap.forEachLine(this.viewport.from, this.viewport.to, this.state.doc, 0, 0, line => {
-            if (line.length < 10000 /* Margin */)
+            if (line.length < 4000 /* DoubleMargin */)
                 return;
             let structure = lineStructure(line.from, line.to, this.state);
-            if (structure.total < 10000 /* Margin */)
+            if (structure.total < 4000 /* DoubleMargin */)
                 return;
             let viewFrom, viewTo;
             if (this.heightOracle.lineWrapping) {
-                if (line.from != this.viewport.from)
-                    viewFrom = line.from;
-                else
-                    viewFrom = findPosition(structure, (this.visibleTop - line.top) / line.height);
-                if (line.to != this.viewport.to)
-                    viewTo = line.to;
-                else
-                    viewTo = findPosition(structure, (this.visibleBottom - line.top) / line.height);
+                let marginHeight = (2000 /* Margin */ / this.heightOracle.lineLength) * this.heightOracle.lineHeight;
+                viewFrom = findPosition(structure, (this.visibleTop - line.top - marginHeight) / line.height);
+                viewTo = findPosition(structure, (this.visibleBottom - line.top + marginHeight) / line.height);
             }
             else {
                 let totalWidth = structure.total * this.heightOracle.charWidth;
-                viewFrom = findPosition(structure, this.pixelViewport.left / totalWidth);
-                viewTo = findPosition(structure, this.pixelViewport.right / totalWidth);
+                let marginWidth = 2000 /* Margin */ * this.heightOracle.charWidth;
+                viewFrom = findPosition(structure, (this.pixelViewport.left - marginWidth) / totalWidth);
+                viewTo = findPosition(structure, (this.pixelViewport.right + marginWidth) / totalWidth);
             }
+            let outside = [];
+            if (viewFrom > line.from)
+                outside.push({ from: line.from, to: viewFrom });
+            if (viewTo < line.to)
+                outside.push({ from: viewTo, to: line.to });
             let sel = this.state.selection.main;
-            // Make sure the gap doesn't cover a selection end
-            if (sel.from <= viewFrom && sel.to >= line.from)
-                viewFrom = sel.from;
-            if (sel.from <= line.to && sel.to >= viewTo)
-                viewTo = sel.to;
-            let gapTo = viewFrom - 10000 /* Margin */, gapFrom = viewTo + 10000 /* Margin */;
-            if (gapTo > line.from + 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.from == line.from && gap.to > gapTo - 5000 /* HalfMargin */ && gap.to < gapTo + 5000 /* HalfMargin */) ||
-                    new LineGap(line.from, gapTo, this.gapSize(line, gapTo, true, structure)));
-            if (gapFrom < line.to - 5000 /* HalfMargin */)
-                gaps.push(find(current, gap => gap.to == line.to && gap.from > gapFrom - 5000 /* HalfMargin */ &&
-                    gap.from < gapFrom + 5000 /* HalfMargin */) ||
-                    new LineGap(gapFrom, line.to, this.gapSize(line, gapFrom, false, structure)));
+            // Make sure the gaps don't cover a selection end
+            if (sel.from >= line.from && sel.from <= line.to)
+                cutRange(outside, sel.from - 10 /* SelectionMargin */, sel.from + 10 /* SelectionMargin */);
+            if (!sel.empty && sel.to >= line.from && sel.to <= line.to)
+                cutRange(outside, sel.to - 10 /* SelectionMargin */, sel.to + 10 /* SelectionMargin */);
+            for (let { from, to } of outside)
+                if (to - from > 1000 /* HalfMargin */) {
+                    gaps.push(find(current, gap => gap.from >= line.from && gap.to <= line.to &&
+                        Math.abs(gap.from - from) < 1000 /* HalfMargin */ && Math.abs(gap.to - to) < 1000 /* HalfMargin */) ||
+                        new LineGap(from, to, this.gapSize(line, from, to, structure)));
+                }
         });
         return gaps;
     }
-    gapSize(line, pos, start, structure) {
+    gapSize(line, from, to, structure) {
+        let fraction = findFraction(structure, to) - findFraction(structure, from);
         if (this.heightOracle.lineWrapping) {
-            let height = line.height * findFraction(structure, pos);
-            return start ? height : line.height - height;
+            return line.height * fraction;
         }
         else {
-            let ratio = findFraction(structure, pos);
-            return structure.total * this.heightOracle.charWidth * (start ? ratio : 1 - ratio);
+            return structure.total * this.heightOracle.charWidth * fraction;
         }
     }
     updateLineGaps(gaps) {
@@ -4771,6 +4805,20 @@ function findFraction(structure, pos) {
     }
     return counted / structure.total;
 }
+function cutRange(ranges, from, to) {
+    for (let i = 0; i < ranges.length; i++) {
+        let r = ranges[i];
+        if (r.from < to && r.to > from) {
+            let pieces = [];
+            if (r.from < from)
+                pieces.push({ from: r.from, to: from });
+            if (r.to > to)
+                pieces.push({ from: to, to: r.to });
+            ranges.splice(i, 1, ...pieces);
+            i += pieces.length - 1;
+        }
+    }
+}
 function find(array, f) {
     for (let val of array)
         if (f(val))
@@ -5232,7 +5280,7 @@ class DOMObserver {
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
-        if (this.delayedFlush >= 0 || this.view.inputState.pendingKey)
+        if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
         this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
@@ -5319,8 +5367,11 @@ function safariSelectionRangeHack(view) {
 
 function applyDOMChange(view, start, end, typeOver) {
     let change, newSel;
-    let sel = view.state.selection.main, bounds;
-    if (start > -1 && !view.state.readOnly && (bounds = view.docView.domBoundsAround(start, end, 0))) {
+    let sel = view.state.selection.main;
+    if (start > -1) {
+        let bounds = view.docView.domBoundsAround(start, end, 0);
+        if (!bounds || view.state.readOnly)
+            return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view);
@@ -5374,16 +5425,8 @@ function applyDOMChange(view, start, end, typeOver) {
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
         // events.
-        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)))) {
+        if (browser.ios && view.inputState.flushIOSKey(view))
             return;
-        }
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
             return;
@@ -5685,21 +5728,24 @@ class EditorView {
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
         update = new ViewUpdate(this, state, transactions);
-        let scrollPos = null;
+        let scrollTarget = null;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
-                if (scrollPos)
-                    scrollPos = scrollPos.map(tr.changes);
+                if (scrollTarget)
+                    scrollTarget = scrollTarget.map(tr.changes);
                 if (tr.scrollIntoView) {
                     let { main } = tr.state.selection;
-                    scrollPos = main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1);
+                    scrollTarget = new ScrollTarget(main.empty ? main : EditorSelection.cursor(main.head, main.head > main.anchor ? -1 : 1));
                 }
-                for (let e of tr.effects)
+                for (let e of tr.effects) {
                     if (e.is(scrollTo))
-                        scrollPos = e.value;
+                        scrollTarget = new ScrollTarget(e.value);
+                    else if (e.is(centerOn))
+                        scrollTarget = new ScrollTarget(e.value, true);
+                }
             }
-            this.viewState.update(update, scrollPos);
+            this.viewState.update(update, scrollTarget);
             this.bidiCache = CachedOrder.update(this.bidiCache, update.changes);
             if (!update.empty) {
                 this.updatePlugins(update);
@@ -5714,7 +5760,7 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollPos || this.viewState.mustEnforceCursorAssoc)
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5796,7 +5842,7 @@ class EditorView {
                 this.updateState = 1 /* Measuring */;
                 let oldViewport = this.viewport;
                 let changed = this.viewState.measure(this.docView, i > 0);
-                if (!changed && !this.measureRequests.length && this.viewState.scrollTo == null)
+                if (!changed && !this.measureRequests.length && this.viewState.scrollTarget == null)
                     break;
                 if (i > 5) {
                     console.warn("Viewport failed to stabilize");
@@ -5838,9 +5884,9 @@ class EditorView {
                             logException(this.state, e);
                         }
                     }
-                if (this.viewState.scrollTo) {
-                    this.docView.scrollRangeIntoView(this.viewState.scrollTo);
-                    this.viewState.scrollTo = null;
+                if (this.viewState.scrollTarget) {
+                    this.docView.scrollIntoView(this.viewState.scrollTarget);
+                    this.viewState.scrollTarget = null;
                 }
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
@@ -6063,12 +6109,9 @@ class EditorView {
     moveVertically(start, forward, distance) {
         return skipAtoms(this, start, moveVertically(this, start, forward, distance));
     }
-    /**
-    Scroll the given document position into view.
-    */
+    // FIXME remove on next major version
     scrollPosIntoView(pos) {
-        this.viewState.scrollTo = EditorSelection.cursor(pos);
-        this.requestMeasure();
+        this.dispatch({ effects: scrollTo.of(EditorSelection.cursor(pos)) });
     }
     /**
     Find the DOM parent node and offset (child offset if `node` is
@@ -6235,7 +6278,7 @@ class EditorView {
     target editors with a dark or light theme.
     */
     static baseTheme(spec) {
-        return Prec.fallback(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
+        return Prec.lowest(styleModule.of(buildTheme("." + baseThemeID, spec, lightDarkIDs)));
     }
 }
 /**
@@ -6244,6 +6287,11 @@ transaction to make it scroll the given range into view.
 */
 EditorView.scrollTo = scrollTo;
 /**
+Effect that makes the editor scroll the given range to the
+center of the visible view.
+*/
+EditorView.centerOn = centerOn;
+/**
 Facet to add a [style
 module](https://github.com/marijnh/style-mod#documentation) to
 an editor view. The view will ensure that the module is
@@ -6672,7 +6720,7 @@ const themeSpec = {
 };
 if (CanHidePrimary)
     themeSpec[".cm-line"].caretColor = "transparent !important";
-const hideNativeSelection = /*@__PURE__*/Prec.override(/*@__PURE__*/EditorView.theme(themeSpec));
+const hideNativeSelection = /*@__PURE__*/Prec.highest(/*@__PURE__*/EditorView.theme(themeSpec));
 function getBase(view) {
     let rect = view.scrollDOM.getBoundingClientRect();
     let left = view.textDirection == Direction.LTR ? rect.left : rect.right - view.scrollDOM.clientWidth;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.10",
+  "version": "0.19.14",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -27,7 +27,7 @@
   "license": "MIT",
   "dependencies": {
     "@codemirror/rangeset": "^0.19.0",
-    "@codemirror/state": "^0.19.2",
+    "@codemirror/state": "^0.19.3",
     "@codemirror/text": "^0.19.0",
     "style-mod": "^4.0.0",
     "w3c-keyname": "^2.2.4"