@codemirror/view 0.19.39 → 0.19.43

package/CHANGELOG.md

@@ -1,3 +1,53 @@
+## 0.19.43 (2022-02-16)
+
+### Bug fixes
+
+Fix several issues where editing or composition went wrong due to our zero-width space kludge characters ending up in unexpected places.
+
+Make sure the editor re-measures its dimensions whenever its theme changes.
+
+Fix an issue where some keys on Android phones could leave the editor DOM unsynced with the actual document.
+
+## 0.19.42 (2022-02-05)
+
+### Bug fixes
+
+Fix a regression in cursor position determination after making an edit next to a widget.
+
+## 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
+
+Make composition input properly appear at secondary cursors (except when those are in the DOM node with the composition, in which case the browser won't allow us to intervene without aborting the composition).
+
+Fix a bug that cause the editor to get confused about which content was visible after scrolling something into view.
+
+Fix a bug where the dummy elements rendered around widgets could end up in a separate set of wrapping marks, and thus become visible.
+
+`EditorView.moveVertically` now preserves the `assoc` property of the input range.
+
+Get rid of gaps between selection elements drawn by `drawSelection`.
+
+Fix an issue where replacing text next to a widget might leak bogus zero-width spaces into the document.
+
+Avoid browser selection mishandling when a focused view has `setState` called by eagerly refocusing it.
+
 ## 0.19.39 (2022-01-06)
 
 ### Bug fixes
@@ -48,7 +98,7 @@ Fix an issue where backspacing out a selection on Chrome Android would sometimes
 
 ### Bug fixes
 
-Fix a bug where content line elements would in some cases lose their `cm-line` class. Move test to scrollIntoView
+Fix a bug where content line elements would in some cases lose their `cm-line` class.
 
 ## 0.19.33 (2021-12-16)
 

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);
@@ -860,9 +859,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -878,21 +874,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return text.Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -1131,8 +1127,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);
     }
     /**
@@ -1237,7 +1233,7 @@ function widgetsEq(a, b) {
 }
 function addRange(from, to, ranges, margin = 0) {
     let last = ranges.length - 1;
-    if (last >= 0 && ranges[last] + margin > from)
+    if (last >= 0 && ranges[last] + margin >= from)
         ranges[last] = Math.max(ranges[last], to);
     else
         ranges.push(from, to);
@@ -1518,7 +1514,7 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* Chunk */);
-            this.flushBuffer(active);
+            this.flushBuffer(active.slice(0, openStart));
             this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
             this.atCursorPos = true;
             this.textOff += take;
@@ -1577,11 +1573,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 +2303,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,33 +2330,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) {
+        let text = node.nodeValue;
+        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 = node.nodeValue;
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            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) {
@@ -2360,10 +2392,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node, maxLen) {
         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 + Math.min(maxLen, point.offset);
     }
 }
 function isBlockElement(node) {
@@ -2768,51 +2800,57 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function computeCompositionDeco(view, changes) {
+function compositionSurroundingNode(view) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
-        return Decoration.none;
+        return null;
     let cView = view.docView.nearest(textNode);
     if (!cView)
-        return Decoration.none;
-    let from, to, topNode = textNode;
+        return null;
     if (cView instanceof LineView) {
+        let topNode = textNode;
         while (topNode.parentNode != cView.dom)
             topNode = topNode.parentNode;
         let prev = topNode.previousSibling;
         while (prev && !ContentView.get(prev))
             prev = prev.previousSibling;
-        from = to = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
+        let pos = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
+        return { from: pos, to: pos, node: topNode, text: textNode };
     }
     else {
         for (;;) {
             let { parent } = cView;
             if (!parent)
-                return Decoration.none;
+                return null;
             if (parent instanceof LineView)
                 break;
             cView = parent;
         }
-        from = cView.posAtStart;
-        to = from + cView.length;
-        topNode = cView.dom;
+        let from = cView.posAtStart;
+        return { from, to: from + cView.length, node: cView.dom, text: textNode };
     }
+}
+function computeCompositionDeco(view, changes) {
+    let surrounding = compositionSurroundingNode(view);
+    if (!surrounding)
+        return Decoration.none;
+    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 = topNode.nodeType == 3 ? topNode.nodeValue :
-        new DOMReader([], view).readRange(topNode.firstChild, null).text;
+    let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
+        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(topNode, textNode) }).range(newFrom, newTo));
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
     constructor(top, text) {
@@ -3149,7 +3187,7 @@ function byGroup(view, pos, start) {
 function moveVertically(view, start, forward, distance) {
     let startPos = start.head, dir = forward ? 1 : -1;
     if (startPos == (forward ? view.state.doc.length : 0))
-        return state.EditorSelection.cursor(startPos);
+        return state.EditorSelection.cursor(startPos, start.assoc);
     let goal = start.goalColumn, startY;
     let rect = view.contentDOM.getBoundingClientRect();
     let startCoords = view.coordsAtPos(startPos), docTop = view.documentTop;
@@ -3170,7 +3208,7 @@ function moveVertically(view, start, forward, distance) {
         let curY = startY + (dist + extra) * dir;
         let pos = posAtCoords(view, { x: resolvedGoal, y: curY }, false, dir);
         if (curY < rect.top || curY > rect.bottom || (dir < 0 ? pos < startPos : pos > startPos))
-            return state.EditorSelection.cursor(pos, undefined, undefined, goal);
+            return state.EditorSelection.cursor(pos, start.assoc, undefined, goal);
     }
 }
 function skipAtoms(view, oldPos, pos) {
@@ -4682,6 +4720,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;
@@ -4694,7 +4738,8 @@ class ViewState {
             }
         }
         // Pixel viewport
-        let pixelViewport = this.printing ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 } : visiblePixelRange(dom, this.paddingTop);
+        let pixelViewport = this.printing ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 }
+            : visiblePixelRange(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
         this.pixelViewport = pixelViewport;
         let inView = this.pixelViewport.bottom > this.pixelViewport.top && this.pixelViewport.right > this.pixelViewport.left;
@@ -4706,11 +4751,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) {
@@ -4765,8 +4808,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;
@@ -5152,6 +5196,10 @@ const baseTheme = buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5400,7 +5448,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5566,9 +5614,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)
@@ -5577,10 +5624,17 @@ 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) {
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: 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;
@@ -5637,19 +5691,47 @@ function applyDOMChange(view, start, end, typeOver) {
             view.inputState.composing++;
         let tr;
         if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
-            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length)) {
+            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length) &&
+            view.inputState.composing < 0) {
             let before = sel.from < change.from ? startState.sliceDoc(sel.from, change.from) : "";
             let after = sel.to > change.to ? startState.sliceDoc(change.to, sel.to) : "";
-            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) +
-                after));
+            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) + after));
         }
         else {
             let changes = startState.changes(change);
-            tr = {
-                changes,
-                selection: newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
-                    ? startState.selection.replaceRange(newSel.main) : undefined
-            };
+            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
+                ? newSel.main : undefined;
+            // Try to apply a composition change to all cursors
+            if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
+                change.to <= sel.to && change.to >= sel.to - 10) {
+                let replaced = view.state.sliceDoc(change.from, change.to);
+                let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
+                let offset = sel.to - change.to, size = sel.to - sel.from;
+                tr = startState.changeByRange(range => {
+                    if (range.from == sel.from && range.to == sel.to)
+                        return { changes, range: mainSel || range.map(changes) };
+                    let to = range.to - offset, from = to - replaced.length;
+                    if (range.to - range.from != size || view.state.sliceDoc(from, to) != replaced ||
+                        // Unfortunately, there's no way to make multiple
+                        // changes in the same node work without aborting
+                        // composition, so cursors in the composition range are
+                        // ignored.
+                        compositionRange && range.to >= compositionRange.from && range.from <= compositionRange.to)
+                        return { range };
+                    let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
+                    return {
+                        changes: rangeChanges,
+                        range: !mainSel ? range.map(rangeChanges) :
+                            state.EditorSelection.range(Math.max(0, mainSel.anchor + selOff), Math.max(0, mainSel.head + selOff))
+                    };
+                });
+            }
+            else {
+                tr = {
+                    changes,
+                    selection: mainSel && startState.selection.replaceRange(mainSel)
+                };
+            }
         }
         let userEvent = "input.type";
         if (view.composing) {
@@ -5899,7 +5981,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5920,6 +6004,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5937,6 +6022,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -6006,7 +6093,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false;
+                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6033,11 +6120,12 @@ class EditorView {
                 if (this.viewState.scrollTarget) {
                     this.docView.scrollIntoView(this.viewState.scrollTarget);
                     this.viewState.scrollTarget = null;
+                    scrolled = true;
                 }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
-                    this.measureRequests.length == 0)
+                    !scrolled && this.measureRequests.length == 0)
                     break;
             }
         }
@@ -6173,7 +6261,7 @@ class EditorView {
     (`view.contentDOM.getBoundingClientRect().top`) to limit layout
     queries.
     
-    *Deprecated: use `blockAtHeight` instead.*
+    *Deprecated: use `elementAtHeight` instead.*
     */
     blockAtHeight(height, docTop) {
         let top = ensureTop(docTop, this);
@@ -7018,7 +7106,7 @@ function measureRange(view, range) {
         return pieces(top).concat(between).concat(pieces(bottom));
     }
     function piece(left, top, right, bottom) {
-        return new Piece(left - base.left, top - base.top, right - left, bottom - top, "cm-selectionBackground");
+        return new Piece(left - base.left, top - base.top - 0.01 /* Epsilon */, right - left, bottom - top + 0.01 /* Epsilon */, "cm-selectionBackground");
     }
     function pieces({ top, bottom, horizontal }) {
         let pieces = [];

package/dist/index.d.ts

@@ -802,7 +802,7 @@ declare class EditorView {
     (`view.contentDOM.getBoundingClientRect().top`) to limit layout
     queries.
     
-    *Deprecated: use `blockAtHeight` instead.*
+    *Deprecated: use `elementAtHeight` instead.*
     */
     blockAtHeight(height: number, docTop?: number): BlockInfo;
     /**

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);
@@ -857,9 +856,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -875,21 +871,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -1127,8 +1123,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);
     }
     /**
@@ -1233,7 +1229,7 @@ function widgetsEq(a, b) {
 }
 function addRange(from, to, ranges, margin = 0) {
     let last = ranges.length - 1;
-    if (last >= 0 && ranges[last] + margin > from)
+    if (last >= 0 && ranges[last] + margin >= from)
         ranges[last] = Math.max(ranges[last], to);
     else
         ranges.push(from, to);
@@ -1514,7 +1510,7 @@ class ContentBuilder {
                 }
             }
             let take = Math.min(this.text.length - this.textOff, length, 512 /* Chunk */);
-            this.flushBuffer(active);
+            this.flushBuffer(active.slice(0, openStart));
             this.getLine().append(wrapMarks(new TextView(this.text.slice(this.textOff, this.textOff + take)), active), openStart);
             this.atCursorPos = true;
             this.textOff += take;
@@ -1573,11 +1569,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 +2298,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,33 +2325,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) {
+        let text = node.nodeValue;
+        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 = node.nodeValue;
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            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) {
@@ -2355,10 +2387,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node, maxLen) {
         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 + Math.min(maxLen, point.offset);
     }
 }
 function isBlockElement(node) {
@@ -2763,51 +2795,57 @@ class BlockGapWidget extends WidgetType {
     }
     get estimatedHeight() { return this.height; }
 }
-function computeCompositionDeco(view, changes) {
+function compositionSurroundingNode(view) {
     let sel = view.observer.selectionRange;
     let textNode = sel.focusNode && nearbyTextNode(sel.focusNode, sel.focusOffset, 0);
     if (!textNode)
-        return Decoration.none;
+        return null;
     let cView = view.docView.nearest(textNode);
     if (!cView)
-        return Decoration.none;
-    let from, to, topNode = textNode;
+        return null;
     if (cView instanceof LineView) {
+        let topNode = textNode;
         while (topNode.parentNode != cView.dom)
             topNode = topNode.parentNode;
         let prev = topNode.previousSibling;
         while (prev && !ContentView.get(prev))
             prev = prev.previousSibling;
-        from = to = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
+        let pos = prev ? ContentView.get(prev).posAtEnd : cView.posAtStart;
+        return { from: pos, to: pos, node: topNode, text: textNode };
     }
     else {
         for (;;) {
             let { parent } = cView;
             if (!parent)
-                return Decoration.none;
+                return null;
             if (parent instanceof LineView)
                 break;
             cView = parent;
         }
-        from = cView.posAtStart;
-        to = from + cView.length;
-        topNode = cView.dom;
+        let from = cView.posAtStart;
+        return { from, to: from + cView.length, node: cView.dom, text: textNode };
     }
+}
+function computeCompositionDeco(view, changes) {
+    let surrounding = compositionSurroundingNode(view);
+    if (!surrounding)
+        return Decoration.none;
+    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 = topNode.nodeType == 3 ? topNode.nodeValue :
-        new DOMReader([], view).readRange(topNode.firstChild, null).text;
+    let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
+        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(topNode, textNode) }).range(newFrom, newTo));
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
     constructor(top, text) {
@@ -3144,7 +3182,7 @@ function byGroup(view, pos, start) {
 function moveVertically(view, start, forward, distance) {
     let startPos = start.head, dir = forward ? 1 : -1;
     if (startPos == (forward ? view.state.doc.length : 0))
-        return EditorSelection.cursor(startPos);
+        return EditorSelection.cursor(startPos, start.assoc);
     let goal = start.goalColumn, startY;
     let rect = view.contentDOM.getBoundingClientRect();
     let startCoords = view.coordsAtPos(startPos), docTop = view.documentTop;
@@ -3165,7 +3203,7 @@ function moveVertically(view, start, forward, distance) {
         let curY = startY + (dist + extra) * dir;
         let pos = posAtCoords(view, { x: resolvedGoal, y: curY }, false, dir);
         if (curY < rect.top || curY > rect.bottom || (dir < 0 ? pos < startPos : pos > startPos))
-            return EditorSelection.cursor(pos, undefined, undefined, goal);
+            return EditorSelection.cursor(pos, start.assoc, undefined, goal);
     }
 }
 function skipAtoms(view, oldPos, pos) {
@@ -4676,6 +4714,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;
@@ -4688,7 +4732,8 @@ class ViewState {
             }
         }
         // Pixel viewport
-        let pixelViewport = this.printing ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 } : visiblePixelRange(dom, this.paddingTop);
+        let pixelViewport = this.printing ? { top: -1e8, bottom: 1e8, left: -1e8, right: 1e8 }
+            : visiblePixelRange(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
         this.pixelViewport = pixelViewport;
         let inView = this.pixelViewport.bottom > this.pixelViewport.top && this.pixelViewport.right > this.pixelViewport.left;
@@ -4700,11 +4745,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) {
@@ -4759,8 +4802,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;
@@ -5146,6 +5190,10 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5394,7 +5442,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5560,9 +5608,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)
@@ -5571,10 +5618,17 @@ 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) {
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: 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;
@@ -5631,19 +5685,47 @@ function applyDOMChange(view, start, end, typeOver) {
             view.inputState.composing++;
         let tr;
         if (change.from >= sel.from && change.to <= sel.to && change.to - change.from >= (sel.to - sel.from) / 3 &&
-            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length)) {
+            (!newSel || newSel.main.empty && newSel.main.from == change.from + change.insert.length) &&
+            view.inputState.composing < 0) {
             let before = sel.from < change.from ? startState.sliceDoc(sel.from, change.from) : "";
             let after = sel.to > change.to ? startState.sliceDoc(change.to, sel.to) : "";
-            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) +
-                after));
+            tr = startState.replaceSelection(view.state.toText(before + change.insert.sliceString(0, undefined, view.state.lineBreak) + after));
         }
         else {
             let changes = startState.changes(change);
-            tr = {
-                changes,
-                selection: newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
-                    ? startState.selection.replaceRange(newSel.main) : undefined
-            };
+            let mainSel = newSel && !startState.selection.main.eq(newSel.main) && newSel.main.to <= changes.newLength
+                ? newSel.main : undefined;
+            // Try to apply a composition change to all cursors
+            if (startState.selection.ranges.length > 1 && view.inputState.composing >= 0 &&
+                change.to <= sel.to && change.to >= sel.to - 10) {
+                let replaced = view.state.sliceDoc(change.from, change.to);
+                let compositionRange = compositionSurroundingNode(view) || view.state.doc.lineAt(sel.head);
+                let offset = sel.to - change.to, size = sel.to - sel.from;
+                tr = startState.changeByRange(range => {
+                    if (range.from == sel.from && range.to == sel.to)
+                        return { changes, range: mainSel || range.map(changes) };
+                    let to = range.to - offset, from = to - replaced.length;
+                    if (range.to - range.from != size || view.state.sliceDoc(from, to) != replaced ||
+                        // Unfortunately, there's no way to make multiple
+                        // changes in the same node work without aborting
+                        // composition, so cursors in the composition range are
+                        // ignored.
+                        compositionRange && range.to >= compositionRange.from && range.from <= compositionRange.to)
+                        return { range };
+                    let rangeChanges = startState.changes({ from, to, insert: change.insert }), selOff = range.to - sel.to;
+                    return {
+                        changes: rangeChanges,
+                        range: !mainSel ? range.map(rangeChanges) :
+                            EditorSelection.range(Math.max(0, mainSel.anchor + selOff), Math.max(0, mainSel.head + selOff))
+                    };
+                });
+            }
+            else {
+                tr = {
+                    changes,
+                    selection: mainSel && startState.selection.replaceRange(mainSel)
+                };
+            }
         }
         let userEvent = "input.type";
         if (view.composing) {
@@ -5893,7 +5975,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -5914,6 +5998,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5931,6 +6016,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -6000,7 +6087,7 @@ class EditorView {
                         return BadMeasure;
                     }
                 });
-                let update = new ViewUpdate(this, this.state), redrawn = false;
+                let update = new ViewUpdate(this, this.state), redrawn = false, scrolled = false;
                 update.flags |= changed;
                 if (!updated)
                     updated = update;
@@ -6027,11 +6114,12 @@ class EditorView {
                 if (this.viewState.scrollTarget) {
                     this.docView.scrollIntoView(this.viewState.scrollTarget);
                     this.viewState.scrollTarget = null;
+                    scrolled = true;
                 }
                 if (redrawn)
                     this.docView.updateSelection(true);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to &&
-                    this.measureRequests.length == 0)
+                    !scrolled && this.measureRequests.length == 0)
                     break;
             }
         }
@@ -6167,7 +6255,7 @@ class EditorView {
     (`view.contentDOM.getBoundingClientRect().top`) to limit layout
     queries.
     
-    *Deprecated: use `blockAtHeight` instead.*
+    *Deprecated: use `elementAtHeight` instead.*
     */
     blockAtHeight(height, docTop) {
         let top = ensureTop(docTop, this);
@@ -7012,7 +7100,7 @@ function measureRange(view, range) {
         return pieces(top).concat(between).concat(pieces(bottom));
     }
     function piece(left, top, right, bottom) {
-        return new Piece(left - base.left, top - base.top, right - left, bottom - top, "cm-selectionBackground");
+        return new Piece(left - base.left, top - base.top - 0.01 /* Epsilon */, right - left, bottom - top + 0.01 /* Epsilon */, "cm-selectionBackground");
     }
     function pieces({ top, bottom, horizontal }) {
         let pieces = [];

package/package.json

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