@codemirror/view 0.19.13 → 0.19.17

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+## 0.19.17 (2021-11-16)
+
+### Bug fixes
+
+Avoid an issue where stretches of whitespace on line wrap points could cause the cursor to be placed outside of the content.
+
+## 0.19.16 (2021-11-11)
+
+### Breaking changes
+
+Block replacement decorations now default to inclusive, because non-inclusive block decorations are rarely what you need.
+
+### Bug fixes
+
+Fix an issue that caused block widgets to always have a large side value, making it impossible to show them between to replacement decorations.
+
+Fix a crash that could happen after some types of viewport changes, due to a bug in the block widget view data structure.
+
+## 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

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;
 }
@@ -679,7 +666,7 @@ function textCoords(text, pos, side) {
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
-    return flatten ? flattenRect(rect, flatten < 0) : rect;
+    return flatten ? flattenRect(rect, flatten < 0) : rect || null;
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends InlineView {
@@ -787,7 +774,7 @@ class WidgetBufferView extends InlineView {
     domBoundsAround() { return null; }
     coordsAt(pos) {
         let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1];
+        return rects[rects.length - 1] || null;
     }
     get overrideDOMText() {
         return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
@@ -929,7 +916,7 @@ function coordsInChildren(view, pos, side) {
     if (!last)
         return view.dom.getBoundingClientRect();
     let rects = clientRectsFor(last);
-    return rects[rects.length - 1];
+    return rects[rects.length - 1] || null;
 }
 
 function combineAttrs(source, target) {
@@ -1097,8 +1084,6 @@ class Decoration extends rangeset.RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0;
-        if (spec.block)
-            side += (200000000 /* BigBlock */ + 1) * (side > 0 ? 1 : -1);
         return new PointDecoration(spec, side, side, !!spec.block, spec.widget || null, false);
     }
     /**
@@ -1107,9 +1092,9 @@ class Decoration extends rangeset.RangeValue {
     */
     static replace(spec) {
         let block = !!spec.block;
-        let { start, end } = getInclusive(spec);
-        let startSide = block ? -200000000 /* BigBlock */ * (start ? 2 : 1) : 100000000 /* BigInline */ * (start ? -1 : 1);
-        let endSide = block ? 200000000 /* BigBlock */ * (end ? 2 : 1) : 100000000 /* BigInline */ * (end ? 1 : -1);
+        let { start, end } = getInclusive(spec, block);
+        let startSide = 100000000 /* Big */ * (start ? -1 : 1) * (block ? 2 : 1);
+        let endSide = 100000000 /* Big */ * (end ? 1 : -1) * (block ? 2 : 1);
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1139,7 +1124,7 @@ Decoration.none = rangeset.RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(100000000 /* BigInline */ * (start ? -1 : 1), 100000000 /* BigInline */ * (end ? 1 : -1), null, spec);
+        super(100000000 /* Big */ * (start ? -1 : 1), 100000000 /* Big */ * (end ? 1 : -1), null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1160,7 +1145,7 @@ class MarkDecoration extends Decoration {
 MarkDecoration.prototype.point = false;
 class LineDecoration extends Decoration {
     constructor(spec) {
-        super(-100000000 /* BigInline */, -100000000 /* BigInline */, null, spec);
+        super(-100000000 /* Big */, -100000000 /* Big */, null, spec);
     }
     eq(other) {
         return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
@@ -1201,13 +1186,13 @@ class PointDecoration extends Decoration {
     }
 }
 PointDecoration.prototype.point = true;
-function getInclusive(spec) {
+function getInclusive(spec, block = false) {
     let { inclusiveStart: start, inclusiveEnd: end } = spec;
     if (start == null)
         start = spec.inclusive;
     if (end == null)
         end = spec.inclusive;
-    return { start: start || false, end: end || false };
+    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
 }
 function widgetsEq(a, b) {
     return a == b || !!(a && b && a.compare(b));
@@ -1375,7 +1360,9 @@ class BlockWidgetView extends ContentView {
     split(at) {
         let len = this.length - at;
         this.length = at;
-        return new BlockWidgetView(this.widget, len, this.type);
+        let end = new BlockWidgetView(this.widget, len, this.type);
+        end.breakAfter = this.breakAfter;
+        return end;
     }
     get children() { return none$1; }
     sync() {
@@ -3078,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
@@ -3089,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;
@@ -3206,28 +3188,36 @@ 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;
-        let flush = () => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+    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(() => {
+            let key = this.pendingAndroidKey;
+            if (!key)
+                return;
+            this.pendingAndroidKey = undefined;
             view.observer.processRecords();
             let startState = view.state;
             dispatchKey(view.contentDOM, key.key, key.keyCode);
             if (view.state == startState)
                 view.docView.reset(true);
-        };
-        if (browser.ios)
-            setTimeout(() => requestAnimationFrame(flush), 50);
-        else
-            requestAnimationFrame(flush);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3735,7 +3725,7 @@ 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);
+        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(() => {
@@ -4399,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;
@@ -4940,10 +4932,14 @@ 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",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5283,7 +5279,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();
@@ -5370,8 +5366,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);
@@ -5425,16 +5424,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;
@@ -5927,7 +5918,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",

package/dist/index.d.ts

@@ -91,7 +91,8 @@ interface ReplaceDecorationSpec {
     /**
     Whether this range covers the positions on its sides. This
     influences whether new content becomes part of the range and
-    whether the cursor can be drawn on its sides. Defaults to false.
+    whether the cursor can be drawn on its sides. Defaults to false
+    for inline replacements, and true for block replacements.
     */
     inclusive?: boolean;
     /**

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;
 }
@@ -676,7 +663,7 @@ function textCoords(text, pos, side) {
     let rect = rects[(flatten ? flatten < 0 : side >= 0) ? 0 : rects.length - 1];
     if (browser.safari && !flatten && rect.width == 0)
         rect = Array.prototype.find.call(rects, r => r.width) || rect;
-    return flatten ? flattenRect(rect, flatten < 0) : rect;
+    return flatten ? flattenRect(rect, flatten < 0) : rect || null;
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends InlineView {
@@ -784,7 +771,7 @@ class WidgetBufferView extends InlineView {
     domBoundsAround() { return null; }
     coordsAt(pos) {
         let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1];
+        return rects[rects.length - 1] || null;
     }
     get overrideDOMText() {
         return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
@@ -926,7 +913,7 @@ function coordsInChildren(view, pos, side) {
     if (!last)
         return view.dom.getBoundingClientRect();
     let rects = clientRectsFor(last);
-    return rects[rects.length - 1];
+    return rects[rects.length - 1] || null;
 }
 
 function combineAttrs(source, target) {
@@ -1093,8 +1080,6 @@ class Decoration extends RangeValue {
     */
     static widget(spec) {
         let side = spec.side || 0;
-        if (spec.block)
-            side += (200000000 /* BigBlock */ + 1) * (side > 0 ? 1 : -1);
         return new PointDecoration(spec, side, side, !!spec.block, spec.widget || null, false);
     }
     /**
@@ -1103,9 +1088,9 @@ class Decoration extends RangeValue {
     */
     static replace(spec) {
         let block = !!spec.block;
-        let { start, end } = getInclusive(spec);
-        let startSide = block ? -200000000 /* BigBlock */ * (start ? 2 : 1) : 100000000 /* BigInline */ * (start ? -1 : 1);
-        let endSide = block ? 200000000 /* BigBlock */ * (end ? 2 : 1) : 100000000 /* BigInline */ * (end ? 1 : -1);
+        let { start, end } = getInclusive(spec, block);
+        let startSide = 100000000 /* Big */ * (start ? -1 : 1) * (block ? 2 : 1);
+        let endSide = 100000000 /* Big */ * (end ? 1 : -1) * (block ? 2 : 1);
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1135,7 +1120,7 @@ Decoration.none = RangeSet.empty;
 class MarkDecoration extends Decoration {
     constructor(spec) {
         let { start, end } = getInclusive(spec);
-        super(100000000 /* BigInline */ * (start ? -1 : 1), 100000000 /* BigInline */ * (end ? 1 : -1), null, spec);
+        super(100000000 /* Big */ * (start ? -1 : 1), 100000000 /* Big */ * (end ? 1 : -1), null, spec);
         this.tagName = spec.tagName || "span";
         this.class = spec.class || "";
         this.attrs = spec.attributes || null;
@@ -1156,7 +1141,7 @@ class MarkDecoration extends Decoration {
 MarkDecoration.prototype.point = false;
 class LineDecoration extends Decoration {
     constructor(spec) {
-        super(-100000000 /* BigInline */, -100000000 /* BigInline */, null, spec);
+        super(-100000000 /* Big */, -100000000 /* Big */, null, spec);
     }
     eq(other) {
         return other instanceof LineDecoration && attrsEq(this.spec.attributes, other.spec.attributes);
@@ -1197,13 +1182,13 @@ class PointDecoration extends Decoration {
     }
 }
 PointDecoration.prototype.point = true;
-function getInclusive(spec) {
+function getInclusive(spec, block = false) {
     let { inclusiveStart: start, inclusiveEnd: end } = spec;
     if (start == null)
         start = spec.inclusive;
     if (end == null)
         end = spec.inclusive;
-    return { start: start || false, end: end || false };
+    return { start: start !== null && start !== void 0 ? start : block, end: end !== null && end !== void 0 ? end : block };
 }
 function widgetsEq(a, b) {
     return a == b || !!(a && b && a.compare(b));
@@ -1371,7 +1356,9 @@ class BlockWidgetView extends ContentView {
     split(at) {
         let len = this.length - at;
         this.length = at;
-        return new BlockWidgetView(this.widget, len, this.type);
+        let end = new BlockWidgetView(this.widget, len, this.type);
+        end.breakAfter = this.breakAfter;
+        return end;
     }
     get children() { return none$1; }
     sync() {
@@ -3073,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
@@ -3084,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;
@@ -3201,28 +3183,36 @@ 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;
-        let flush = () => {
-            if (!this.pendingKey)
-                return false;
-            let key = this.pendingKey;
-            this.pendingKey = undefined;
+    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(() => {
+            let key = this.pendingAndroidKey;
+            if (!key)
+                return;
+            this.pendingAndroidKey = undefined;
             view.observer.processRecords();
             let startState = view.state;
             dispatchKey(view.contentDOM, key.key, key.keyCode);
             if (view.state == startState)
                 view.docView.reset(true);
-        };
-        if (browser.ios)
-            setTimeout(() => requestAnimationFrame(flush), 50);
-        else
-            requestAnimationFrame(flush);
+        });
     }
     ignoreDuringComposition(event) {
         if (!/^key/.test(event.type))
@@ -3730,7 +3720,7 @@ 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);
+        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(() => {
@@ -4393,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;
@@ -4934,10 +4926,14 @@ 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",
+        whiteSpace_fallback: "pre-wrap",
+        whiteSpace: "break-spaces",
         wordBreak: "break-word",
         overflowWrap: "anywhere"
     },
@@ -5277,7 +5273,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();
@@ -5364,8 +5360,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);
@@ -5419,16 +5418,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;
@@ -5921,7 +5912,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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "0.19.13",
+  "version": "0.19.17",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",