@codemirror/view 0.19.36 → 0.19.40

package/CHANGELOG.md

@@ -1,3 +1,47 @@
+## 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
+
+Fix regression where plugin replacing decorations that span to the end of the line are ignored.
+
 ## 0.19.36 (2021-12-22)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1237,7 +1237,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 +1311,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 +1518,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;
@@ -1581,7 +1581,7 @@ class ContentBuilder {
             return true;
         if (value.block)
             throw new RangeError("Block decorations may not be specified via plugins");
-        return to < this.doc.lineAt(this.pos).to;
+        return to <= this.doc.lineAt(this.pos).to;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2332,6 +2332,15 @@ class DOMReader {
         this.findPointBefore(parent, end);
         return this;
     }
+    readTextNode(node) {
+        var _a, _b;
+        let text = node.nodeValue;
+        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
+            text = text.slice(1);
+        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
+            text = text.slice(0, text.length - 1);
+        return text;
+    }
     readNode(node) {
         if (node.cmIgnore)
             return;
@@ -2341,7 +2350,7 @@ class DOMReader {
         if (fromView != null)
             text = fromView.sliceString(0, undefined, this.lineBreak);
         else if (node.nodeType == 3)
-            text = node.nodeValue;
+            text = this.readTextNode(node);
         else if (node.nodeName == "BR")
             text = node.nextSibling ? this.lineBreak : "";
         else if (node.nodeType == 1)
@@ -2768,39 +2777,45 @@ 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([], view).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
         if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
             newTo = newFrom + text.length;
@@ -2812,7 +2827,7 @@ function computeCompositionDeco(view, changes) {
     else if (state.sliceDoc(newFrom, newTo) != 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 +3020,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 +3164,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 +3185,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 +4614,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;
@@ -4689,7 +4709,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 +4721,18 @@ 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) {
+            this.contentDOMWidth = contentWidth;
+            this.editorHeight = view.scrollDOM.clientHeight;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            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 +4741,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)
@@ -5633,19 +5653,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 +5908,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 +5964,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5933,6 +5982,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -6002,7 +6053,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 +6080,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 +6221,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 +6633,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 +7066,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

@@ -1233,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);
@@ -1307,7 +1307,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 +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,7 +1577,7 @@ class ContentBuilder {
             return true;
         if (value.block)
             throw new RangeError("Block decorations may not be specified via plugins");
-        return to < this.doc.lineAt(this.pos).to;
+        return to <= this.doc.lineAt(this.pos).to;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2327,6 +2327,15 @@ class DOMReader {
         this.findPointBefore(parent, end);
         return this;
     }
+    readTextNode(node) {
+        var _a, _b;
+        let text = node.nodeValue;
+        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
+            text = text.slice(1);
+        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
+            text = text.slice(0, text.length - 1);
+        return text;
+    }
     readNode(node) {
         if (node.cmIgnore)
             return;
@@ -2336,7 +2345,7 @@ class DOMReader {
         if (fromView != null)
             text = fromView.sliceString(0, undefined, this.lineBreak);
         else if (node.nodeType == 3)
-            text = node.nodeValue;
+            text = this.readTextNode(node);
         else if (node.nodeName == "BR")
             text = node.nextSibling ? this.lineBreak : "";
         else if (node.nodeType == 1)
@@ -2763,39 +2772,45 @@ 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([], view).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
         if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
             newTo = newFrom + text.length;
@@ -2807,7 +2822,7 @@ function computeCompositionDeco(view, changes) {
     else if (state.sliceDoc(newFrom, newTo) != 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 +3015,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 +3159,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 +3180,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 +4608,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;
@@ -4683,7 +4703,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 +4715,18 @@ 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) {
+            this.contentDOMWidth = contentWidth;
+            this.editorHeight = view.scrollDOM.clientHeight;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            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 +4735,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)
@@ -5627,19 +5647,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 +5902,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 +5958,7 @@ class EditorView {
             return;
         }
         this.updateState = 2 /* Updating */;
+        let hadFocus = this.hasFocus;
         try {
             for (let plugin of this.plugins)
                 plugin.destroy(this);
@@ -5927,6 +5976,8 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
+        if (hadFocus)
+            this.focus();
         this.requestMeasure();
     }
     updatePlugins(update) {
@@ -5996,7 +6047,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 +6074,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 +6215,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 +6627,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 +7060,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.36",
+  "version": "0.19.40",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",