@codemirror/view 0.19.11 → 0.19.15

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.19.15 (2021-11-09)
+
+### Bug fixes
+
+Fix a bug where the editor would think it was invisible when the document body was given screen height and scroll behavior.
+
+Fix selection reading inside a shadow root on iOS.
+
+## 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

package/dist/index.cjs

@@ -252,24 +252,11 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
-let _plainTextSupported = null;
-function contentEditablePlainTextSupported() {
-    if (_plainTextSupported == null) {
-        _plainTextSupported = false;
-        let dummy = document.createElement("div");
-        try {
-            dummy.contentEditable = "plaintext-only";
-            _plainTextSupported = dummy.contentEditable == "plaintext-only";
-        }
-        catch (_) { }
-    }
-    return _plainTextSupported;
-}
 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;
 }
@@ -321,25 +308,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)
@@ -479,14 +471,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;
@@ -3081,10 +3065,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
@@ -3092,12 +3072,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;
@@ -3209,18 +3188,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);
@@ -3734,18 +3725,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);
+        }
     }
 };
 
@@ -4396,18 +4389,20 @@ function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
     let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
     let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    for (let parent = dom.parentNode; parent;) { // (Cast to any because TypeScript is useless with Node types)
+    let body = dom.ownerDocument.body;
+    for (let parent = dom.parentNode; parent && parent != body;) {
         if (parent.nodeType == 1) {
-            let style = window.getComputedStyle(parent);
-            if ((parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) &&
+            let elt = parent;
+            let style = window.getComputedStyle(elt);
+            if ((elt.scrollHeight > elt.clientHeight || elt.scrollWidth > elt.clientWidth) &&
                 style.overflow != "visible") {
-                let parentRect = parent.getBoundingClientRect();
+                let parentRect = elt.getBoundingClientRect();
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
                 bottom = Math.min(bottom, parentRect.bottom);
             }
-            parent = style.position == "absolute" || style.position == "fixed" ? parent.offsetParent : parent.parentNode;
+            parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
         else if (parent.nodeType == 11) { // Shadow root
             parent = parent.host;
@@ -4533,7 +4528,7 @@ class ViewState {
             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 (scrollTarget)
@@ -4593,7 +4588,7 @@ class ViewState {
             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) {
@@ -4668,52 +4663,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) {
@@ -4807,6 +4800,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))
@@ -4925,7 +4932,10 @@ const baseTheme = buildTheme("." + baseThemeID, {
         wordWrap: "normal",
         boxSizing: "border-box",
         padding: "4px 0",
-        outline: "none"
+        outline: "none",
+        "&[contenteditable=true]": {
+            WebkitUserModify: "read-write-plaintext-only",
+        }
     },
     ".cm-lineWrapping": {
         whiteSpace: "pre-wrap",
@@ -5268,7 +5278,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();
@@ -5355,8 +5365,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);
@@ -5410,16 +5423,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;
@@ -5912,7 +5917,7 @@ class EditorView {
             autocorrect: "off",
             autocapitalize: "off",
             translate: "no",
-            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
+            contenteditable: !this.state.facet(editable) ? "false" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",
@@ -6271,7 +6276,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)));
     }
 }
 /**
@@ -6713,7 +6718,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.js

@@ -249,24 +249,11 @@ function dispatchKey(elt, name, code) {
     elt.dispatchEvent(up);
     return down.defaultPrevented || up.defaultPrevented;
 }
-let _plainTextSupported = null;
-function contentEditablePlainTextSupported() {
-    if (_plainTextSupported == null) {
-        _plainTextSupported = false;
-        let dummy = document.createElement("div");
-        try {
-            dummy.contentEditable = "plaintext-only";
-            _plainTextSupported = dummy.contentEditable == "plaintext-only";
-        }
-        catch (_) { }
-    }
-    return _plainTextSupported;
-}
 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;
 }
@@ -318,25 +305,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)
@@ -476,14 +468,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;
@@ -3076,10 +3060,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
@@ -3087,12 +3067,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;
@@ -3204,18 +3183,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);
@@ -3729,18 +3720,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);
+        }
     }
 };
 
@@ -4390,18 +4383,20 @@ function visiblePixelRange(dom, paddingTop) {
     let rect = dom.getBoundingClientRect();
     let left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right);
     let top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
-    for (let parent = dom.parentNode; parent;) { // (Cast to any because TypeScript is useless with Node types)
+    let body = dom.ownerDocument.body;
+    for (let parent = dom.parentNode; parent && parent != body;) {
         if (parent.nodeType == 1) {
-            let style = window.getComputedStyle(parent);
-            if ((parent.scrollHeight > parent.clientHeight || parent.scrollWidth > parent.clientWidth) &&
+            let elt = parent;
+            let style = window.getComputedStyle(elt);
+            if ((elt.scrollHeight > elt.clientHeight || elt.scrollWidth > elt.clientWidth) &&
                 style.overflow != "visible") {
-                let parentRect = parent.getBoundingClientRect();
+                let parentRect = elt.getBoundingClientRect();
                 left = Math.max(left, parentRect.left);
                 right = Math.min(right, parentRect.right);
                 top = Math.max(top, parentRect.top);
                 bottom = Math.min(bottom, parentRect.bottom);
             }
-            parent = style.position == "absolute" || style.position == "fixed" ? parent.offsetParent : parent.parentNode;
+            parent = style.position == "absolute" || style.position == "fixed" ? elt.offsetParent : elt.parentNode;
         }
         else if (parent.nodeType == 11) { // Shadow root
             parent = parent.host;
@@ -4527,7 +4522,7 @@ class ViewState {
             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 (scrollTarget)
@@ -4587,7 +4582,7 @@ class ViewState {
             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) {
@@ -4662,52 +4657,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) {
@@ -4801,6 +4794,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))
@@ -4919,7 +4926,10 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         wordWrap: "normal",
         boxSizing: "border-box",
         padding: "4px 0",
-        outline: "none"
+        outline: "none",
+        "&[contenteditable=true]": {
+            WebkitUserModify: "read-write-plaintext-only",
+        }
     },
     ".cm-lineWrapping": {
         whiteSpace: "pre-wrap",
@@ -5262,7 +5272,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();
@@ -5349,8 +5359,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);
@@ -5404,16 +5417,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;
@@ -5906,7 +5911,7 @@ class EditorView {
             autocorrect: "off",
             autocapitalize: "off",
             translate: "no",
-            contenteditable: !this.state.facet(editable) ? "false" : contentEditablePlainTextSupported() ? "plaintext-only" : "true",
+            contenteditable: !this.state.facet(editable) ? "false" : "true",
             class: "cm-content",
             style: `${browser.tabSize}: ${this.state.tabSize}`,
             role: "textbox",
@@ -6265,7 +6270,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)));
     }
 }
 /**
@@ -6707,7 +6712,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.11",
+  "version": "0.19.15",
   "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"