@codemirror/view 0.19.37 → 0.19.41

package/CHANGELOG.md

@@ -1,3 +1,57 @@
+## 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
+
+Make sure the editor signals a `geometryChanged` update when its width changes.
+
+### New features
+
+`EditorView.darkTheme` can now be queried to figure out whether the editor is using a dark theme.
+
+## 0.19.38 (2022-01-05)
+
+### Bug fixes
+
+Fix a bug that caused line decorations with a `class` property to suppress all other line decorations for that line.
+
+Fix a bug that caused scroll effects to be corrupted when further updates came in before they were applied.
+
+Fix an issue where, depending on which way a floating point rounding error fell, `posAtCoords` (and thus vertical cursor motion) for positions outside of the vertical range of the document might or might not return the start/end of the document.
+
 ## 0.19.37 (2021-12-22)
 
 ### 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);
     }
     /**
@@ -1237,7 +1236,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);
@@ -1311,7 +1310,7 @@ class LineView extends ContentView {
         if (attrs)
             this.attrs = combineAttrs(attrs, this.attrs || {});
         if (cls)
-            this.attrs = combineAttrs(attrs, { class: cls });
+            this.attrs = combineAttrs({ class: cls }, this.attrs || {});
     }
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
@@ -1518,7 +1517,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 +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,33 +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) {
+        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);
+            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 +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) {
@@ -2768,51 +2803,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) {
@@ -3005,7 +3046,11 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     var _a;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = Math.max(0, Math.min(y - docTop, docHeight));
+    let yOffset = y - docTop;
+    if (yOffset < 0)
+        return 0;
+    if (yOffset > docHeight)
+        return view.state.doc.length;
     // Scan for a text block near the queried y position
     for (let halfLine = view.defaultLineHeight / 2, bounced = false;;) {
         block = view.elementAtHeight(yOffset);
@@ -3145,7 +3190,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;
@@ -3166,7 +3211,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) {
@@ -4595,6 +4640,7 @@ class ViewState {
         this.contentDOMWidth = 0;
         this.contentDOMHeight = 0;
         this.editorHeight = 0;
+        this.editorWidth = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4677,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;
@@ -4689,7 +4741,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 +4753,16 @@ class ViewState {
         }
         if (!this.inView)
             return 0;
+        let contentWidth = dom.clientWidth;
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
+            this.contentDOMWidth = contentWidth;
+            this.editorHeight = view.scrollDOM.clientHeight;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             let lineHeights = view.docView.measureVisibleLineHeights();
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
-            let contentWidth = dom.clientWidth;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
                 let { lineHeight, charWidth } = view.docView.measureTextSize();
                 refresh = oracle.refresh(whiteSpace, direction, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
@@ -4713,14 +4771,6 @@ class ViewState {
                     result |= 8 /* Geometry */;
                 }
             }
-            if (this.contentDOMWidth != contentWidth) {
-                this.contentDOMWidth = contentWidth;
-                result |= 8 /* Geometry */;
-            }
-            if (this.editorHeight != view.scrollDOM.clientHeight) {
-                this.editorHeight = view.scrollDOM.clientHeight;
-                result |= 8 /* Geometry */;
-            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -4761,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;
@@ -5562,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)
@@ -5573,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;
@@ -5633,19 +5702,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) {
@@ -5860,7 +5957,7 @@ class EditorView {
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
         update = new ViewUpdate(this, state$1, transactions);
-        let scrollTarget = null;
+        let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
@@ -5916,6 +6013,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5933,6 +6031,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -6002,7 +6102,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;
@@ -6029,11 +6129,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;
             }
         }
@@ -6169,7 +6270,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);
@@ -6581,6 +6682,13 @@ mechanism for providing decorations.
 */
 EditorView.decorations = decorations;
 /**
+This facet records whether a dark theme is active. The extension
+returned by [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme) automatically
+includes an instance of this when the `dark` option is set to
+true.
+*/
+EditorView.darkTheme = darkTheme;
+/**
 Facet that provides additional DOM attributes for the editor's
 editable DOM element.
 */
@@ -7007,7 +7115,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;
     /**
@@ -1156,6 +1156,13 @@ declare class EditorView {
         dark?: boolean;
     }): Extension;
     /**
+    This facet records whether a dark theme is active. The extension
+    returned by [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme) automatically
+    includes an instance of this when the `dark` option is set to
+    true.
+    */
+    static darkTheme: Facet<boolean, boolean>;
+    /**
     Create an extension that adds styles to the base theme. Like
     with [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme), use `&` to indicate the
     place of the editor wrapper element when directly targeting

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);
     }
     /**
@@ -1233,7 +1232,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);
@@ -1307,7 +1306,7 @@ class LineView extends ContentView {
         if (attrs)
             this.attrs = combineAttrs(attrs, this.attrs || {});
         if (cls)
-            this.attrs = combineAttrs(attrs, { class: cls });
+            this.attrs = combineAttrs({ class: cls }, this.attrs || {});
     }
     domAtPos(pos) {
         return inlineDOMAtPos(this.dom, this.children, pos);
@@ -1514,7 +1513,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 +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,33 +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) {
+        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);
+            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 +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) {
@@ -2763,51 +2798,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) {
@@ -3000,7 +3041,11 @@ function posAtCoords(view, { x, y }, precise, bias = -1) {
     var _a;
     let content = view.contentDOM.getBoundingClientRect(), docTop = content.top + view.viewState.paddingTop;
     let block, { docHeight } = view.viewState;
-    let yOffset = Math.max(0, Math.min(y - docTop, docHeight));
+    let yOffset = y - docTop;
+    if (yOffset < 0)
+        return 0;
+    if (yOffset > docHeight)
+        return view.state.doc.length;
     // Scan for a text block near the queried y position
     for (let halfLine = view.defaultLineHeight / 2, bounced = false;;) {
         block = view.elementAtHeight(yOffset);
@@ -3140,7 +3185,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;
@@ -3161,7 +3206,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) {
@@ -4589,6 +4634,7 @@ class ViewState {
         this.contentDOMWidth = 0;
         this.contentDOMHeight = 0;
         this.editorHeight = 0;
+        this.editorWidth = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4671,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;
@@ -4683,7 +4735,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;
@@ -4694,11 +4747,16 @@ class ViewState {
         }
         if (!this.inView)
             return 0;
+        let contentWidth = dom.clientWidth;
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
+            this.contentDOMWidth = contentWidth;
+            this.editorHeight = view.scrollDOM.clientHeight;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             let lineHeights = view.docView.measureVisibleLineHeights();
             if (oracle.mustRefreshForHeights(lineHeights))
                 refresh = true;
-            let contentWidth = dom.clientWidth;
             if (refresh || oracle.lineWrapping && Math.abs(contentWidth - this.contentDOMWidth) > oracle.charWidth) {
                 let { lineHeight, charWidth } = view.docView.measureTextSize();
                 refresh = oracle.refresh(whiteSpace, direction, lineHeight, charWidth, contentWidth / charWidth, lineHeights);
@@ -4707,14 +4765,6 @@ class ViewState {
                     result |= 8 /* Geometry */;
                 }
             }
-            if (this.contentDOMWidth != contentWidth) {
-                this.contentDOMWidth = contentWidth;
-                result |= 8 /* Geometry */;
-            }
-            if (this.editorHeight != view.scrollDOM.clientHeight) {
-                this.editorHeight = view.scrollDOM.clientHeight;
-                result |= 8 /* Geometry */;
-            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -4755,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;
@@ -5556,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)
@@ -5567,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;
@@ -5627,19 +5696,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) {
@@ -5854,7 +5951,7 @@ class EditorView {
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
         update = new ViewUpdate(this, state, transactions);
-        let scrollTarget = null;
+        let scrollTarget = this.viewState.scrollTarget;
         try {
             this.updateState = 2 /* Updating */;
             for (let tr of transactions) {
@@ -5910,6 +6007,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5927,6 +6025,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -5996,7 +6096,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;
@@ -6023,11 +6123,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;
             }
         }
@@ -6163,7 +6264,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);
@@ -6575,6 +6676,13 @@ mechanism for providing decorations.
 */
 EditorView.decorations = decorations;
 /**
+This facet records whether a dark theme is active. The extension
+returned by [`theme`](https://codemirror.net/6/docs/ref/#view.EditorView^theme) automatically
+includes an instance of this when the `dark` option is set to
+true.
+*/
+EditorView.darkTheme = darkTheme;
+/**
 Facet that provides additional DOM attributes for the editor's
 editable DOM element.
 */
@@ -7001,7 +7109,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.37",
+  "version": "0.19.41",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",