@codemirror/view 0.19.40 → 0.19.44

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## 0.19.44 (2022-02-17)
+
+### Bug fixes
+
+Fix a crash that occasionally occurred when drag-selecting in a way that scrolled the editor.
+
+### New features
+
+The new `EditorView.compositionStarted` property indicates whether a composition is starting.
+
+## 0.19.43 (2022-02-16)
+
+### Bug fixes
+
+Fix several issues where editing or composition went wrong due to our zero-width space kludge characters ending up in unexpected places.
+
+Make sure the editor re-measures its dimensions whenever its theme changes.
+
+Fix an issue where some keys on Android phones could leave the editor DOM unsynced with the actual document.
+
+## 0.19.42 (2022-02-05)
+
+### Bug fixes
+
+Fix a regression in cursor position determination after making an edit next to a widget.
+
+## 0.19.41 (2022-02-04)
+
+### Bug fixes
+
+Fix an issue where the editor's view of its content height could go out of sync with the DOM when a line-wrapping editor had its width changed, causing wrapping to change.
+
+Fix a bug that caused the editor to draw way too much content when scrolling to a position in an editor (much) taller than the window.
+
+Report an error when a replace decoration from a plugin crosses a line break, rather than silently ignoring it.
+
+Fix an issue where reading DOM changes was broken when `lineSeparator` contained more than one character.
+
+Make ordering of replace and mark decorations with the same extent and inclusivness more predictable by giving replace decorations precedence.
+
+Fix a bug where, on Chrome, replacement across line boundaries and next to widgets could cause bogus zero-width characters to appear in the content.
+
 ## 0.19.40 (2022-01-19)
 
 ### Bug fixes
@@ -66,7 +108,7 @@ Fix an issue where backspacing out a selection on Chrome Android would sometimes
 
 ### Bug fixes
 
-Fix a bug where content line elements would in some cases lose their `cm-line` class. Move test to scrollIntoView
+Fix a bug where content line elements would in some cases lose their `cm-line` class.
 
 ## 0.19.33 (2021-12-16)
 

package/dist/index.cjs

@@ -602,9 +602,8 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-let [nav, doc] = typeof navigator != "undefined"
-    ? [navigator, document]
-    : [{ userAgent: "", vendor: "", platform: "" }, { documentElement: { style: {} } }];
+let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
+let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /Edge\/(\d+)/.exec(nav.userAgent);
 const ie_upto10 = /MSIE \d/.test(nav.userAgent);
 const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
@@ -860,9 +859,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -878,21 +874,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return text.Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return text.Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -939,7 +935,7 @@ function coordsInChildren(view, pos, side) {
                     continue;
                 flatten = side = -child.getSide();
             }
-            let rect = child.coordsAt(pos - off, side);
+            let rect = child.coordsAt(Math.max(0, pos - off), side);
             return flatten && rect ? flattenRect(rect, side < 0) : rect;
         }
         off = end;
@@ -1131,8 +1127,8 @@ class Decoration extends rangeset.RangeValue {
     static replace(spec) {
         let block = !!spec.block;
         let { start, end } = getInclusive(spec, block);
-        let startSide = block ? (start ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */;
-        let endSide = block ? (end ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */;
+        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
+        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1577,11 +1573,13 @@ class ContentBuilder {
             this.openStart = openStart;
     }
     filterPoint(from, to, value, index) {
-        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
-            return true;
-        if (value.block)
-            throw new RangeError("Block decorations may not be specified via plugins");
-        return to <= this.doc.lineAt(this.pos).to;
+        if (index < this.disallowBlockEffectsBelow && value instanceof PointDecoration) {
+            if (value.block)
+                throw new RangeError("Block decorations may not be specified via plugins");
+            if (to > this.doc.lineAt(this.pos).to)
+                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
+        }
+        return true;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2305,12 +2303,18 @@ function moveVisually(line, order, dir, start, forward) {
     return state.EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
 }
 
+const LineBreakPlaceholder = "\uffff";
 class DOMReader {
-    constructor(points, view) {
+    constructor(points, state$1) {
         this.points = points;
-        this.view = view;
         this.text = "";
-        this.lineBreak = view.state.lineBreak;
+        this.lineSeparator = state$1.facet(state.EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
     }
     readRange(start, end) {
         if (!start)
@@ -2326,42 +2330,61 @@ class DOMReader {
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
                     (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
-                this.text += this.lineBreak;
+                this.lineBreak();
             cur = next;
         }
         this.findPointBefore(parent, end);
         return this;
     }
     readTextNode(node) {
-        var _a, _b;
         let text = node.nodeValue;
-        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
-            text = text.slice(1);
-        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
-            text = text.slice(0, text.length - 1);
-        return text;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
     }
     readNode(node) {
         if (node.cmIgnore)
             return;
         let view = ContentView.get(node);
         let fromView = view && view.overrideDOMText;
-        let text;
-        if (fromView != null)
-            text = fromView.sliceString(0, undefined, this.lineBreak);
-        else if (node.nodeType == 3)
-            text = this.readTextNode(node);
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
             this.readRange(node.firstChild, null);
-        if (text != null) {
-            this.findPointIn(node, text.length);
-            this.text += text;
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
-                this.text = this.text.slice(0, -1);
         }
     }
     findPointBefore(node, next) {
@@ -2369,10 +2392,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node, maxLen) {
         for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, maxLen);
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
     }
 }
 function isBlockElement(node) {
@@ -2815,16 +2838,16 @@ function computeCompositionDeco(view, changes) {
     let { from, to, node, text: textNode } = surrounding;
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
-        new DOMReader([], view).readRange(node.firstChild, null).text;
+        new DOMReader([], state).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
-        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
             newTo = newFrom + text.length;
-        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.sliceDoc(newFrom, newTo) != text) {
+    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
     return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
@@ -4697,6 +4720,12 @@ class ViewState {
         let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
         let result = 0, bias = 0;
+        if (this.editorWidth != view.scrollDOM.clientWidth) {
+            if (oracle.lineWrapping)
+                measureContent = true;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             this.mustMeasureContent = false;
             this.contentDOMHeight = dom.clientHeight;
@@ -4722,11 +4751,9 @@ class ViewState {
         if (!this.inView)
             return 0;
         let contentWidth = dom.clientWidth;
-        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight ||
-            this.editorWidth != view.scrollDOM.clientWidth) {
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
             this.contentDOMWidth = contentWidth;
             this.editorHeight = view.scrollDOM.clientHeight;
-            this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
         if (measureContent) {
@@ -4781,8 +4808,9 @@ class ViewState {
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
         // If scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
-            let { head } = scrollTarget.range, viewHeight = this.editorHeight;
+            let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
+                let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
@@ -5168,6 +5196,10 @@ const baseTheme = buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5416,7 +5448,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5582,9 +5614,8 @@ function applyDOMChange(view, start, end, typeOver) {
             return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
-        let reader = new DOMReader(selPoints, view);
+        let reader = new DOMReader(selPoints, view.state);
         reader.readRange(bounds.startDOM, bounds.endDOM);
-        newSel = selectionFromPoints(selPoints, from);
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
@@ -5593,10 +5624,17 @@ function applyDOMChange(view, start, end, typeOver) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
-        let diff = findDiff(view.state.sliceDoc(from, to), reader.text, preferredPos - from, preferredSide);
-        if (diff)
+        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
+        if (diff) {
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: view.state.toText(reader.text.slice(diff.from, diff.toB)) };
+                insert: state.Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+        }
+        newSel = selectionFromPoints(selPoints, from);
     }
     else if (view.hasFocus || !view.state.facet(editable)) {
         let domSel = view.observer.selectionRange;
@@ -5875,9 +5913,17 @@ class EditorView {
     get inView() { return this.viewState.inView; }
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
             : this.state.update(...input));
@@ -5943,7 +5989,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))

package/dist/index.d.ts

@@ -676,9 +676,17 @@ declare class EditorView {
     get inView(): boolean;
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing(): boolean;
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted(): boolean;
     private _dispatch;
     /**
     The document or shadow root that the view lives in.

package/dist/index.js

@@ -1,4 +1,4 @@
-import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, CharCategory, EditorState, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
+import { MapMode, Text as Text$1, Facet, StateEffect, ChangeSet, EditorSelection, EditorState, CharCategory, Transaction, Prec, combineConfig, StateField } from '@codemirror/state';
 import { StyleModule } from 'style-mod';
 import { RangeSet, RangeValue, RangeSetBuilder } from '@codemirror/rangeset';
 export { Range } from '@codemirror/rangeset';
@@ -599,9 +599,8 @@ function mergeChildrenInto(parent, from, to, insert, openStart, openEnd) {
     replaceRange(parent, fromI, fromOff, toI, toOff, insert, 0, openStart, openEnd);
 }
 
-let [nav, doc] = typeof navigator != "undefined"
-    ? [navigator, document]
-    : [{ userAgent: "", vendor: "", platform: "" }, { documentElement: { style: {} } }];
+let nav = typeof navigator != "undefined" ? navigator : { userAgent: "", vendor: "", platform: "" };
+let doc = typeof document != "undefined" ? document : { documentElement: { style: {} } };
 const ie_edge = /*@__PURE__*//Edge\/(\d+)/.exec(nav.userAgent);
 const ie_upto10 = /*@__PURE__*//MSIE \d/.test(nav.userAgent);
 const ie_11up = /*@__PURE__*//Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(nav.userAgent);
@@ -857,9 +856,6 @@ class CompositionView extends WidgetView {
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
     get isEditable() { return true; }
 }
-// Use two characters on Android, to prevent Chrome from closing the
-// virtual keyboard when backspacing after a widget (#602).
-const ZeroWidthSpace = browser.android ? "\u200b\u200b" : "\u200b";
 // These are drawn around uneditable widgets to avoid a number of
 // browser bugs that show up when the cursor is directly next to
 // uneditable inline content.
@@ -875,21 +871,21 @@ class WidgetBufferView extends ContentView {
     }
     split() { return new WidgetBufferView(this.side); }
     sync() {
-        if (!this.dom)
-            this.setDOM(document.createTextNode(ZeroWidthSpace));
-        else if (this.dirty && this.dom.nodeValue != ZeroWidthSpace)
-            this.dom.nodeValue = ZeroWidthSpace;
+        if (!this.dom) {
+            let dom = document.createElement("img");
+            dom.className = "cm-widgetBuffer";
+            this.setDOM(dom);
+        }
     }
     getSide() { return this.side; }
     domAtPos(pos) { return DOMPos.before(this.dom); }
     localPosFromDOM() { return 0; }
     domBoundsAround() { return null; }
     coordsAt(pos) {
-        let rects = clientRectsFor(this.dom);
-        return rects[rects.length - 1] || null;
+        return this.dom.getBoundingClientRect();
     }
     get overrideDOMText() {
-        return Text.of([this.dom.nodeValue.replace(/\u200b/g, "")]);
+        return Text.empty;
     }
 }
 TextView.prototype.children = WidgetView.prototype.children = WidgetBufferView.prototype.children = noChildren;
@@ -936,7 +932,7 @@ function coordsInChildren(view, pos, side) {
                     continue;
                 flatten = side = -child.getSide();
             }
-            let rect = child.coordsAt(pos - off, side);
+            let rect = child.coordsAt(Math.max(0, pos - off), side);
             return flatten && rect ? flattenRect(rect, side < 0) : rect;
         }
         off = end;
@@ -1127,8 +1123,8 @@ class Decoration extends RangeValue {
     static replace(spec) {
         let block = !!spec.block;
         let { start, end } = getInclusive(spec, block);
-        let startSide = block ? (start ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */;
-        let endSide = block ? (end ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */;
+        let startSide = (start ? (block ? -300000000 /* BlockIncStart */ : -1 /* InlineIncStart */) : 400000000 /* NonIncStart */) - 1;
+        let endSide = (end ? (block ? 200000000 /* BlockIncEnd */ : 1 /* InlineIncEnd */) : -500000000 /* NonIncEnd */) + 1;
         return new PointDecoration(spec, startSide, endSide, block, spec.widget || null, true);
     }
     /**
@@ -1573,11 +1569,13 @@ class ContentBuilder {
             this.openStart = openStart;
     }
     filterPoint(from, to, value, index) {
-        if (index >= this.disallowBlockEffectsBelow || !(value instanceof PointDecoration))
-            return true;
-        if (value.block)
-            throw new RangeError("Block decorations may not be specified via plugins");
-        return to <= this.doc.lineAt(this.pos).to;
+        if (index < this.disallowBlockEffectsBelow && value instanceof PointDecoration) {
+            if (value.block)
+                throw new RangeError("Block decorations may not be specified via plugins");
+            if (to > this.doc.lineAt(this.pos).to)
+                throw new RangeError("Decorations that replace line breaks may not be specified via plugins");
+        }
+        return true;
     }
     static build(text, from, to, decorations, pluginDecorationLength) {
         let builder = new ContentBuilder(text, from, to, pluginDecorationLength);
@@ -2300,12 +2298,18 @@ function moveVisually(line, order, dir, start, forward) {
     return EditorSelection.cursor(nextIndex + line.from, forward ? -1 : 1, span.level);
 }
 
+const LineBreakPlaceholder = "\uffff";
 class DOMReader {
-    constructor(points, view) {
+    constructor(points, state) {
         this.points = points;
-        this.view = view;
         this.text = "";
-        this.lineBreak = view.state.lineBreak;
+        this.lineSeparator = state.facet(EditorState.lineSeparator);
+    }
+    append(text) {
+        this.text += text;
+    }
+    lineBreak() {
+        this.text += LineBreakPlaceholder;
     }
     readRange(start, end) {
         if (!start)
@@ -2321,42 +2325,61 @@ class DOMReader {
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
                     (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
-                this.text += this.lineBreak;
+                this.lineBreak();
             cur = next;
         }
         this.findPointBefore(parent, end);
         return this;
     }
     readTextNode(node) {
-        var _a, _b;
         let text = node.nodeValue;
-        if (/^\u200b/.test(text) && ((_a = node.previousSibling) === null || _a === void 0 ? void 0 : _a.contentEditable) == "false")
-            text = text.slice(1);
-        if (/\u200b$/.test(text) && ((_b = node.nextSibling) === null || _b === void 0 ? void 0 : _b.contentEditable) == "false")
-            text = text.slice(0, text.length - 1);
-        return text;
+        for (let point of this.points)
+            if (point.node == node)
+                point.pos = this.text.length + Math.min(point.offset, text.length);
+        for (let off = 0, re = this.lineSeparator ? null : /\r\n?|\n/g;;) {
+            let nextBreak = -1, breakSize = 1, m;
+            if (this.lineSeparator) {
+                nextBreak = text.indexOf(this.lineSeparator, off);
+                breakSize = this.lineSeparator.length;
+            }
+            else if (m = re.exec(text)) {
+                nextBreak = m.index;
+                breakSize = m[0].length;
+            }
+            this.append(text.slice(off, nextBreak < 0 ? text.length : nextBreak));
+            if (nextBreak < 0)
+                break;
+            this.lineBreak();
+            if (breakSize > 1)
+                for (let point of this.points)
+                    if (point.node == node && point.pos > this.text.length)
+                        point.pos -= breakSize - 1;
+            off = nextBreak + breakSize;
+        }
     }
     readNode(node) {
         if (node.cmIgnore)
             return;
         let view = ContentView.get(node);
         let fromView = view && view.overrideDOMText;
-        let text;
-        if (fromView != null)
-            text = fromView.sliceString(0, undefined, this.lineBreak);
-        else if (node.nodeType == 3)
-            text = this.readTextNode(node);
-        else if (node.nodeName == "BR")
-            text = node.nextSibling ? this.lineBreak : "";
-        else if (node.nodeType == 1)
+        if (fromView != null) {
+            this.findPointInside(node, fromView.length);
+            for (let i = fromView.iter(); !i.next().done;) {
+                if (i.lineBreak)
+                    this.lineBreak();
+                else
+                    this.append(i.value);
+            }
+        }
+        else if (node.nodeType == 3) {
+            this.readTextNode(node);
+        }
+        else if (node.nodeName == "BR") {
+            if (node.nextSibling)
+                this.lineBreak();
+        }
+        else if (node.nodeType == 1) {
             this.readRange(node.firstChild, null);
-        if (text != null) {
-            this.findPointIn(node, text.length);
-            this.text += text;
-            // Chrome inserts two newlines when pressing shift-enter at the
-            // end of a line. This drops one of those.
-            if (browser.chrome && this.view.inputState.lastKeyCode == 13 && !node.nextSibling && /\n\n$/.test(this.text))
-                this.text = this.text.slice(0, -1);
         }
     }
     findPointBefore(node, next) {
@@ -2364,10 +2387,10 @@ class DOMReader {
             if (point.node == node && node.childNodes[point.offset] == next)
                 point.pos = this.text.length;
     }
-    findPointIn(node, maxLen) {
+    findPointInside(node, maxLen) {
         for (let point of this.points)
-            if (point.node == node)
-                point.pos = this.text.length + Math.min(point.offset, maxLen);
+            if (node.nodeType == 3 ? point.node == node : node.contains(point.node))
+                point.pos = this.text.length + Math.min(maxLen, point.offset);
     }
 }
 function isBlockElement(node) {
@@ -2810,16 +2833,16 @@ function computeCompositionDeco(view, changes) {
     let { from, to, node, text: textNode } = surrounding;
     let newFrom = changes.mapPos(from, 1), newTo = Math.max(newFrom, changes.mapPos(to, -1));
     let { state } = view, text = node.nodeType == 3 ? node.nodeValue :
-        new DOMReader([], view).readRange(node.firstChild, null).text;
+        new DOMReader([], state).readRange(node.firstChild, null).text;
     if (newTo - newFrom < text.length) {
-        if (state.sliceDoc(newFrom, Math.min(state.doc.length, newFrom + text.length)) == text)
+        if (state.doc.sliceString(newFrom, Math.min(state.doc.length, newFrom + text.length), LineBreakPlaceholder) == text)
             newTo = newFrom + text.length;
-        else if (state.sliceDoc(Math.max(0, newTo - text.length), newTo) == text)
+        else if (state.doc.sliceString(Math.max(0, newTo - text.length), newTo, LineBreakPlaceholder) == text)
             newFrom = newTo - text.length;
         else
             return Decoration.none;
     }
-    else if (state.sliceDoc(newFrom, newTo) != text) {
+    else if (state.doc.sliceString(newFrom, newTo, LineBreakPlaceholder) != text) {
         return Decoration.none;
     }
     return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode) }).range(newFrom, newTo));
@@ -4691,6 +4714,12 @@ class ViewState {
         let refresh = this.heightOracle.mustRefreshForStyle(whiteSpace, direction);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
         let result = 0, bias = 0;
+        if (this.editorWidth != view.scrollDOM.clientWidth) {
+            if (oracle.lineWrapping)
+                measureContent = true;
+            this.editorWidth = view.scrollDOM.clientWidth;
+            result |= 8 /* Geometry */;
+        }
         if (measureContent) {
             this.mustMeasureContent = false;
             this.contentDOMHeight = dom.clientHeight;
@@ -4716,11 +4745,9 @@ class ViewState {
         if (!this.inView)
             return 0;
         let contentWidth = dom.clientWidth;
-        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight ||
-            this.editorWidth != view.scrollDOM.clientWidth) {
+        if (this.contentDOMWidth != contentWidth || this.editorHeight != view.scrollDOM.clientHeight) {
             this.contentDOMWidth = contentWidth;
             this.editorHeight = view.scrollDOM.clientHeight;
-            this.editorWidth = view.scrollDOM.clientWidth;
             result |= 8 /* Geometry */;
         }
         if (measureContent) {
@@ -4775,8 +4802,9 @@ class ViewState {
         let viewport = new Viewport(map.lineAt(visibleTop - marginTop * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).from, map.lineAt(visibleBottom + (1 - marginTop) * 1000 /* Margin */, QueryType.ByHeight, doc, 0, 0).to);
         // If scrollTarget is given, make sure the viewport includes that position
         if (scrollTarget) {
-            let { head } = scrollTarget.range, viewHeight = this.editorHeight;
+            let { head } = scrollTarget.range;
             if (head < viewport.from || head > viewport.to) {
+                let viewHeight = Math.min(this.editorHeight, this.pixelViewport.bottom - this.pixelViewport.top);
                 let block = map.lineAt(head, QueryType.ByPos, doc, 0, 0), topPos;
                 if (scrollTarget.y == "center")
                     topPos = (block.top + block.bottom) / 2 - viewHeight / 2;
@@ -5162,6 +5190,10 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-bottom",
+        height: "1em",
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5410,7 +5442,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5576,9 +5608,8 @@ function applyDOMChange(view, start, end, typeOver) {
             return;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
-        let reader = new DOMReader(selPoints, view);
+        let reader = new DOMReader(selPoints, view.state);
         reader.readRange(bounds.startDOM, bounds.endDOM);
-        newSel = selectionFromPoints(selPoints, from);
         let preferredPos = sel.from, preferredSide = null;
         // Prefer anchoring to end when Backspace is pressed (or, on
         // Android, when something was deleted)
@@ -5587,10 +5618,17 @@ function applyDOMChange(view, start, end, typeOver) {
             preferredPos = sel.to;
             preferredSide = "end";
         }
-        let diff = findDiff(view.state.sliceDoc(from, to), reader.text, preferredPos - from, preferredSide);
-        if (diff)
+        let diff = findDiff(view.state.doc.sliceString(from, to, LineBreakPlaceholder), reader.text, preferredPos - from, preferredSide);
+        if (diff) {
+            // Chrome inserts two newlines when pressing shift-enter at the
+            // end of a line. This drops one of those.
+            if (browser.chrome && view.inputState.lastKeyCode == 13 &&
+                diff.toB == diff.from + 2 && reader.text.slice(diff.from, diff.toB) == LineBreakPlaceholder + LineBreakPlaceholder)
+                diff.toB--;
             change = { from: from + diff.from, to: from + diff.toA,
-                insert: view.state.toText(reader.text.slice(diff.from, diff.toB)) };
+                insert: Text$1.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
+        }
+        newSel = selectionFromPoints(selPoints, from);
     }
     else if (view.hasFocus || !view.state.facet(editable)) {
         let domSel = view.observer.selectionRange;
@@ -5869,9 +5907,17 @@ class EditorView {
     get inView() { return this.viewState.inView; }
     /**
     Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method).
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
     */
     get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
     dispatch(...input) {
         this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
             : this.state.update(...input));
@@ -5937,7 +5983,9 @@ class EditorView {
         finally {
             this.updateState = 0 /* Idle */;
         }
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc)
+        if (update.startState.facet(theme) != update.state.facet(theme))
+            this.viewState.mustMeasureContent = true;
+        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))

package/package.json

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