@codemirror/view 0.19.40 → 0.19.41

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+## 0.19.41 (2022-02-04)
+
+### Bug fixes
+
+Fix an issue where the editor's view of its content height could go out of sync with the DOM when a line-wrapping editor had its width changed, causing wrapping to change.
+
+Fix a bug that caused the editor to draw way too much content when scrolling to a position in an editor (much) taller than the window.
+
+Report an error when a replace decoration from a plugin crosses a line break, rather than silently ignoring it.
+
+Fix an issue where reading DOM changes was broken when `lineSeparator` contained more than one character.
+
+Make ordering of replace and mark decorations with the same extent and inclusivness more predictable by giving replace decorations precedence.
+
+Fix a bug where, on Chrome, replacement across line boundaries and next to widgets could cause bogus zero-width characters to appear in the content.
+
 ## 0.19.40 (2022-01-19)
 
 ### Bug fixes

package/dist/index.cjs

@@ -602,9 +602,8 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-let [nav, doc] = typeof navigator != "undefined"
-    ? [navigator, document]
-    : [{ userAgent: "", vendor: "", platform: "" }, { documentElement: { style: {} } }];
+let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
+let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /Edge\/(\d+)/.exec(nav.userAgent);
 const ie_upto10 = /MSIE \d/.test(nav.userAgent);
 const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
@@ -1131,8 +1130,8 @@ class Decoration extends rangeset.RangeValue {
     static replace(spec) {
         let block = !!spec.block;
         let { start, end } = getInclusive(spec, block);
-        let startSide = block ? (start ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */;
-        let endSide = block ? (end ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */;
+        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
+        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1577,11 +1576,13 @@ class ContentBuilder {
             this.openStart = openStart;
     }
     filterPoint(from, to, value, index) {
-        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
-            return true;
-        if (value.block)
-            throw new RangeError("Block decorations may not be specified via plugins");
-        return to <= this.doc.lineAt(this.pos).to;
+        if (index < this.disallowBlockEffectsBelow && value instanceof PointDecoration) {
+            if (value.block)
+                throw new RangeError("Block decorations may not be specified via plugins");
+            if (to > this.doc.lineAt(this.pos).to)
+                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
+        }
+        return true;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2305,12 +2306,18 @@ function moveVisually(line, order, dir, start, forward) {
     return state.EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
 }
 
+const LineBreakPlaceholder = "\uffff";
 class DOMReader {
-    constructor(points, view) {
+    constructor(points, state$1) {
         this.points = points;
-        this.view = view;
         this.text = "";
-        this.lineBreak = view.state.lineBreak;
+        this.lineSeparator = state$1.facet(state.EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
     }
     readRange(start, end) {
         if (!start)
@@ -2326,42 +2333,61 @@ class DOMReader {
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
                     (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
-                this.text += this.lineBreak;
+                this.lineBreak();
             cur = next;
         }
         this.findPointBefore(parent, end);
         return this;
     }
     readTextNode(node) {
-        var _a, _b;
         let text = node.nodeValue;
-        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
-            text = text.slice(1);
-        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
-            text = text.slice(0, text.length - 1);
-        return text;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
     }
     readNode(node) {
         if (node.cmIgnore)
             return;
         let view = ContentView.get(node);
         let fromView = view && view.overrideDOMText;
-        let text;
-        if (fromView != null)
-            text = fromView.sliceString(0, undefined, this.lineBreak);
-        else if (node.nodeType == 3)
-            text = this.readTextNode(node);
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
             this.readRange(node.firstChild, null);
-        if (text != null) {
-            this.findPointIn(node, text.length);
-            this.text += text;
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
-                this.text = this.text.slice(0, -1);
         }
     }
     findPointBefore(node, next) {
@@ -2369,10 +2395,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node) {
         for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, maxLen);
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length;
     }
 }
 function isBlockElement(node) {
@@ -2815,16 +2841,16 @@ function computeCompositionDeco(view, changes) {
     let { from, to, node, text: textNode } = surrounding;
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
-        new DOMReader([], view).readRange(node.firstChild, null).text;
+        new DOMReader([], state).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
-        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
             newTo = newFrom + text.length;
-        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.sliceDoc(newFrom, newTo) != text) {
+    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
     return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
@@ -4697,6 +4723,12 @@ class ViewState {
         let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
         let result = 0, bias = 0;
+        if (this.editorWidth != view.scrollDOM.clientWidth) {
+            if (oracle.lineWrapping)
+                measureContent = true;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             this.mustMeasureContent = false;
             this.contentDOMHeight = dom.clientHeight;
@@ -4722,11 +4754,9 @@ class ViewState {
         if (!this.inView)
             return 0;
         let contentWidth = dom.clientWidth;
-        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight ||
-            this.editorWidth != view.scrollDOM.clientWidth) {
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
             this.contentDOMWidth = contentWidth;
             this.editorHeight = view.scrollDOM.clientHeight;
-            this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
         if (measureContent) {
@@ -4781,8 +4811,9 @@ class ViewState {
         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 scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
-            let { head } = scrollTarget.range, viewHeight = this.editorHeight;
+            let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
+                let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
@@ -5582,9 +5613,8 @@ function applyDOMChange(view, start, end, typeOver) {
             return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
-        let reader = new DOMReader(selPoints, view);
+        let reader = new DOMReader(selPoints, view.state);
         reader.readRange(bounds.startDOM, bounds.endDOM);
-        newSel = selectionFromPoints(selPoints, from);
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
@@ -5593,10 +5623,29 @@ function applyDOMChange(view, start, end, typeOver) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
-        let diff = findDiff(view.state.sliceDoc(from, to), reader.text, preferredPos - from, preferredSide);
-        if (diff)
+        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
+        if (diff) {
+            let orig = diff;
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
+            // Strip leading and trailing zero-width spaces from the inserted
+            // content, to work around widget buffers being moved into text
+            // nodes by the browser.
+            while (diff.from < diff.toB && reader.text[diff.from] == "\u200b") {
+                diff = { from: diff.from + 1, toA: diff.toA, toB: diff.toB };
+                selPoints.forEach(p => p.pos -= p.pos > orig.from ? 1 : 0);
+            }
+            while (diff.toB > diff.from && reader.text[diff.toB - 1] == "\u200b") {
+                diff = { from: diff.from, toA: diff.toA, toB: diff.toB - 1 };
+                selPoints.forEach(p => p.pos -= p.pos > orig.toB ? 1 : 0);
+            }
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: view.state.toText(reader.text.slice(diff.from, diff.toB)) };
+                insert: state.Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+        }
+        newSel = selectionFromPoints(selPoints, from);
     }
     else if (view.hasFocus || !view.state.facet(editable)) {
         let domSel = view.observer.selectionRange;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, CharCategory, EditorState, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
+import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, EditorState, CharCategory, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { RangeSet, RangeValue, RangeSetBuilder } from '@codemirror/rangeset';
 export { Range } from '@codemirror/rangeset';
@@ -599,9 +599,8 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-let [nav, doc] = typeof navigator != "undefined"
-    ? [navigator, document]
-    : [{ userAgent: "", vendor: "", platform: "" }, { documentElement: { style: {} } }];
+let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
+let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
 const ie_upto10 = /*@__PURE__*//MSIE \d/.test(nav.userAgent);
 const ie_11up = /*@__PURE__*//Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
@@ -1127,8 +1126,8 @@ class Decoration extends RangeValue {
     static replace(spec) {
         let block = !!spec.block;
         let { start, end } = getInclusive(spec, block);
-        let startSide = block ? (start ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */;
-        let endSide = block ? (end ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */;
+        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
+        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1573,11 +1572,13 @@ class ContentBuilder {
             this.openStart = openStart;
     }
     filterPoint(from, to, value, index) {
-        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
-            return true;
-        if (value.block)
-            throw new RangeError("Block decorations may not be specified via plugins");
-        return to <= this.doc.lineAt(this.pos).to;
+        if (index < this.disallowBlockEffectsBelow && value instanceof PointDecoration) {
+            if (value.block)
+                throw new RangeError("Block decorations may not be specified via plugins");
+            if (to > this.doc.lineAt(this.pos).to)
+                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
+        }
+        return true;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2300,12 +2301,18 @@ function moveVisually(line, order, dir, start, forward) {
     return EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
 }
 
+const LineBreakPlaceholder = "\uffff";
 class DOMReader {
-    constructor(points, view) {
+    constructor(points, state) {
         this.points = points;
-        this.view = view;
         this.text = "";
-        this.lineBreak = view.state.lineBreak;
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
     }
     readRange(start, end) {
         if (!start)
@@ -2321,42 +2328,61 @@ class DOMReader {
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
                     (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
-                this.text += this.lineBreak;
+                this.lineBreak();
             cur = next;
         }
         this.findPointBefore(parent, end);
         return this;
     }
     readTextNode(node) {
-        var _a, _b;
         let text = node.nodeValue;
-        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
-            text = text.slice(1);
-        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
-            text = text.slice(0, text.length - 1);
-        return text;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
     }
     readNode(node) {
         if (node.cmIgnore)
             return;
         let view = ContentView.get(node);
         let fromView = view && view.overrideDOMText;
-        let text;
-        if (fromView != null)
-            text = fromView.sliceString(0, undefined, this.lineBreak);
-        else if (node.nodeType == 3)
-            text = this.readTextNode(node);
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
             this.readRange(node.firstChild, null);
-        if (text != null) {
-            this.findPointIn(node, text.length);
-            this.text += text;
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
-                this.text = this.text.slice(0, -1);
         }
     }
     findPointBefore(node, next) {
@@ -2364,10 +2390,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node) {
         for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, maxLen);
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length;
     }
 }
 function isBlockElement(node) {
@@ -2810,16 +2836,16 @@ function computeCompositionDeco(view, changes) {
     let { from, to, node, text: textNode } = surrounding;
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
-        new DOMReader([], view).readRange(node.firstChild, null).text;
+        new DOMReader([], state).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
-        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
             newTo = newFrom + text.length;
-        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.sliceDoc(newFrom, newTo) != text) {
+    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
     return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
@@ -4691,6 +4717,12 @@ class ViewState {
         let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
         let result = 0, bias = 0;
+        if (this.editorWidth != view.scrollDOM.clientWidth) {
+            if (oracle.lineWrapping)
+                measureContent = true;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             this.mustMeasureContent = false;
             this.contentDOMHeight = dom.clientHeight;
@@ -4716,11 +4748,9 @@ class ViewState {
         if (!this.inView)
             return 0;
         let contentWidth = dom.clientWidth;
-        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight ||
-            this.editorWidth != view.scrollDOM.clientWidth) {
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
             this.contentDOMWidth = contentWidth;
             this.editorHeight = view.scrollDOM.clientHeight;
-            this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
         if (measureContent) {
@@ -4775,8 +4805,9 @@ class ViewState {
         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 scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
-            let { head } = scrollTarget.range, viewHeight = this.editorHeight;
+            let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
+                let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
@@ -5576,9 +5607,8 @@ function applyDOMChange(view, start, end, typeOver) {
             return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
-        let reader = new DOMReader(selPoints, view);
+        let reader = new DOMReader(selPoints, view.state);
         reader.readRange(bounds.startDOM, bounds.endDOM);
-        newSel = selectionFromPoints(selPoints, from);
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
@@ -5587,10 +5617,29 @@ function applyDOMChange(view, start, end, typeOver) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
-        let diff = findDiff(view.state.sliceDoc(from, to), reader.text, preferredPos - from, preferredSide);
-        if (diff)
+        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
+        if (diff) {
+            let orig = diff;
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
+            // Strip leading and trailing zero-width spaces from the inserted
+            // content, to work around widget buffers being moved into text
+            // nodes by the browser.
+            while (diff.from < diff.toB && reader.text[diff.from] == "\u200b") {
+                diff = { from: diff.from + 1, toA: diff.toA, toB: diff.toB };
+                selPoints.forEach(p => p.pos -= p.pos > orig.from ? 1 : 0);
+            }
+            while (diff.toB > diff.from && reader.text[diff.toB - 1] == "\u200b") {
+                diff = { from: diff.from, toA: diff.toA, toB: diff.toB - 1 };
+                selPoints.forEach(p => p.pos -= p.pos > orig.toB ? 1 : 0);
+            }
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: view.state.toText(reader.text.slice(diff.from, diff.toB)) };
+                insert: Text$1.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+        }
+        newSel = selectionFromPoints(selPoints, from);
     }
     else if (view.hasFocus || !view.state.facet(editable)) {
         let domSel = view.observer.selectionRange;

package/package.json

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