@codemirror/view 0.19.42 → 0.19.45

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## 0.19.45 (2022-02-23)
+
+### Bug fixes
+
+Fix an issue where the library failed to call `WidgetType.destroy` on the old widget when replacing a widget with a different widget of the same type.
+
+Fix an issue where the editor would compute DOM positions inside composition contexts incorrectly in some cases, causing the selection to be put in the wrong place and needlessly interrupting compositions.
+
+Fix leaking of resize event handlers.
+
+## 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
@@ -88,7 +118,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

@@ -781,6 +781,7 @@ class WidgetView extends ContentView {
         this.widget = widget;
         this.length = length;
         this.side = side;
+        this.prevWidget = null;
     }
     static create(widget, length, side) {
         return new (widget.customView || WidgetView)(widget, length, side);
@@ -792,6 +793,9 @@ class WidgetView extends ContentView {
     }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -809,6 +813,8 @@ class WidgetView extends ContentView {
             if (this.widget.constructor == other.widget.constructor) {
                 if (!this.widget.eq(other.widget))
                     this.markDirty(true);
+                if (this.dom && !this.prevWidget)
+                    this.prevWidget = this.widget;
                 this.widget = other.widget;
                 return true;
             }
@@ -849,7 +855,12 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView } = this.widget;
+        if (!topView)
+            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
+        return posInCompositionTree(pos, topView, this.widget.text);
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
@@ -857,11 +868,34 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     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";
+// Uses the old structure of a chunk of content view frozen for
+// composition to try and find a reasonable DOM location for the given
+// offset.
+function posInCompositionTree(pos, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+            pos -= len;
+        }
+        return view.domAtPos(view.length);
+    }
+    else if (view.dom == text) {
+        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+    }
+    else {
+        return view.domAtPos(pos);
+    }
+}
 // 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.
@@ -877,21 +911,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;
@@ -938,7 +972,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;
@@ -1391,6 +1425,7 @@ class BlockWidgetView extends ContentView {
         this.length = length;
         this.type = type;
         this.breakAfter = 0;
+        this.prevWidget = null;
     }
     merge(from, to, source, _takeDeco, openStart, openEnd) {
         if (source && (!(source instanceof BlockWidgetView) || !this.widget.compare(source.widget) ||
@@ -1412,6 +1447,9 @@ class BlockWidgetView extends ContentView {
     get children() { return noChildren; }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -1425,6 +1463,8 @@ class BlockWidgetView extends ContentView {
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.eq(this.widget))
                 this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
             this.breakAfter = other.breakAfter;
@@ -2853,13 +2893,19 @@ function computeCompositionDeco(view, changes) {
     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));
+    let topView = ContentView.get(node);
+    if (topView instanceof CompositionView)
+        topView = topView.widget.topView;
+    else if (topView)
+        topView.parent = null;
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
-    constructor(top, text) {
+    constructor(top, text, topView) {
         super();
         this.top = top;
         this.text = text;
+        this.topView = topView;
     }
     eq(other) { return this.top == other.top && this.text == other.text; }
     toDOM() { return this.top; }
@@ -5199,6 +5245,11 @@ const baseTheme = buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-top",
+        height: "1em",
+        display: "inline"
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5306,19 +5357,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
-                    this.resizeTimeout = setTimeout(() => {
-                        this.resizeTimeout = -1;
-                        this.view.requestMeasure();
-                    }, 50);
+                if (this.view.docView.lastUpdate < Date.now() - 75)
+                    this.onResize();
             });
             this.resize.observe(view.scrollDOM);
         }
         this.start();
-        this.onScroll = this.onScroll.bind(this);
-        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5344,6 +5392,13 @@ class DOMObserver {
             this.flush(false);
         this.onScrollChanged(e);
     }
+    onResize() {
+        if (this.resizeTimeout < 0)
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = -1;
+                this.view.requestMeasure();
+            }, 50);
+    }
     updateGaps(gaps) {
         if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
             this.gapIntersection.disconnect();
@@ -5447,7 +5502,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5560,6 +5615,7 @@ class DOMObserver {
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onResize);
         this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
@@ -5625,23 +5681,11 @@ function applyDOMChange(view, start, end, typeOver) {
         }
         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: state.Text.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
@@ -5891,7 +5935,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -5924,9 +5967,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));
@@ -5992,7 +6043,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))
@@ -6718,22 +6771,6 @@ const MaxBidiLine = 4096;
 function ensureTop(given, view) {
     return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
 }
-let resizeDebounce = -1;
-function ensureGlobalHandler() {
-    window.addEventListener("resize", () => {
-        if (resizeDebounce == -1)
-            resizeDebounce = setTimeout(handleResize, 50);
-    });
-}
-function handleResize() {
-    resizeDebounce = -1;
-    let found = document.querySelectorAll(".cm-content");
-    for (let i = 0; i < found.length; i++) {
-        let docView = ContentView.get(found[i]);
-        if (docView)
-            docView.editorView.requestMeasure();
-    }
-}
 const BadMeasure = {};
 class CachedOrder {
     constructor(from, to, dir, order) {

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

@@ -778,6 +778,7 @@ class WidgetView extends ContentView {
         this.widget = widget;
         this.length = length;
         this.side = side;
+        this.prevWidget = null;
     }
     static create(widget, length, side) {
         return new (widget.customView || WidgetView)(widget, length, side);
@@ -789,6 +790,9 @@ class WidgetView extends ContentView {
     }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -806,6 +810,8 @@ class WidgetView extends ContentView {
             if (this.widget.constructor == other.widget.constructor) {
                 if (!this.widget.eq(other.widget))
                     this.markDirty(true);
+                if (this.dom && !this.prevWidget)
+                    this.prevWidget = this.widget;
                 this.widget = other.widget;
                 return true;
             }
@@ -846,7 +852,12 @@ class WidgetView extends ContentView {
     }
 }
 class CompositionView extends WidgetView {
-    domAtPos(pos) { return new DOMPos(this.widget.text, pos); }
+    domAtPos(pos) {
+        let { topView } = this.widget;
+        if (!topView)
+            return new DOMPos(this.widget.text, Math.min(pos, this.widget.text.nodeValue.length));
+        return posInCompositionTree(pos, topView, this.widget.text);
+    }
     sync() { this.setDOM(this.widget.toDOM()); }
     localPosFromDOM(node, offset) {
         return !offset ? 0 : node.nodeType == 3 ? Math.min(offset, this.length) : this.length;
@@ -854,11 +865,34 @@ class CompositionView extends WidgetView {
     ignoreMutation() { return false; }
     get overrideDOMText() { return null; }
     coordsAt(pos, side) { return textCoords(this.widget.text, pos, side); }
+    destroy() {
+        var _a;
+        super.destroy();
+        (_a = this.widget.topView) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
     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";
+// Uses the old structure of a chunk of content view frozen for
+// composition to try and find a reasonable DOM location for the given
+// offset.
+function posInCompositionTree(pos, view, text) {
+    if (view instanceof MarkView) {
+        for (let child of view.children) {
+            let hasComp = child.dom == text || child.dom.contains(text.parentNode);
+            let len = hasComp ? text.nodeValue.length : child.length;
+            if (pos < len || pos == len && child.getSide() <= 0)
+                return hasComp ? posInCompositionTree(pos, child, text) : child.domAtPos(pos);
+            pos -= len;
+        }
+        return view.domAtPos(view.length);
+    }
+    else if (view.dom == text) {
+        return new DOMPos(text, Math.min(pos, text.nodeValue.length));
+    }
+    else {
+        return view.domAtPos(pos);
+    }
+}
 // 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.
@@ -874,21 +908,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;
@@ -935,7 +969,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;
@@ -1387,6 +1421,7 @@ class BlockWidgetView extends ContentView {
         this.length = length;
         this.type = type;
         this.breakAfter = 0;
+        this.prevWidget = null;
     }
     merge(from, to, source, _takeDeco, openStart, openEnd) {
         if (source && (!(source instanceof BlockWidgetView) || !this.widget.compare(source.widget) ||
@@ -1408,6 +1443,9 @@ class BlockWidgetView extends ContentView {
     get children() { return noChildren; }
     sync() {
         if (!this.dom || !this.widget.updateDOM(this.dom)) {
+            if (this.dom && this.prevWidget)
+                this.prevWidget.destroy(this.dom);
+            this.prevWidget = null;
             this.setDOM(this.widget.toDOM(this.editorView));
             this.dom.contentEditable = "false";
         }
@@ -1421,6 +1459,8 @@ class BlockWidgetView extends ContentView {
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.eq(this.widget))
                 this.markDirty(true);
+            if (this.dom && !this.prevWidget)
+                this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
             this.breakAfter = other.breakAfter;
@@ -2848,13 +2888,19 @@ function computeCompositionDeco(view, changes) {
     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));
+    let topView = ContentView.get(node);
+    if (topView instanceof CompositionView)
+        topView = topView.widget.topView;
+    else if (topView)
+        topView.parent = null;
+    return Decoration.set(Decoration.replace({ widget: new CompositionWidget(node, textNode, topView) }).range(newFrom, newTo));
 }
 class CompositionWidget extends WidgetType {
-    constructor(top, text) {
+    constructor(top, text, topView) {
         super();
         this.top = top;
         this.text = text;
+        this.topView = topView;
     }
     eq(other) { return this.top == other.top && this.text == other.text; }
     toDOM() { return this.top; }
@@ -5193,6 +5239,11 @@ const baseTheme = /*@__PURE__*/buildTheme("." + baseThemeID, {
         overflow: "hidden",
         verticalAlign: "bottom"
     },
+    ".cm-widgetBuffer": {
+        verticalAlign: "text-top",
+        height: "1em",
+        display: "inline"
+    },
     ".cm-placeholder": {
         color: "#888",
         display: "inline-block",
@@ -5300,19 +5351,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.bind(this);
+        window.addEventListener("resize", this.onResize = this.onResize.bind(this));
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
-                    this.resizeTimeout = setTimeout(() => {
-                        this.resizeTimeout = -1;
-                        this.view.requestMeasure();
-                    }, 50);
+                if (this.view.docView.lastUpdate < Date.now() - 75)
+                    this.onResize();
             });
             this.resize.observe(view.scrollDOM);
         }
         this.start();
-        this.onScroll = this.onScroll.bind(this);
-        window.addEventListener("scroll", this.onScroll);
+        window.addEventListener("scroll", this.onScroll = this.onScroll.bind(this));
         if (typeof IntersectionObserver == "function") {
             this.intersection = new IntersectionObserver(entries => {
                 if (this.parentCheck < 0)
@@ -5338,6 +5386,13 @@ class DOMObserver {
             this.flush(false);
         this.onScrollChanged(e);
     }
+    onResize() {
+        if (this.resizeTimeout < 0)
+            this.resizeTimeout = setTimeout(() => {
+                this.resizeTimeout = -1;
+                this.view.requestMeasure();
+            }, 50);
+    }
     updateGaps(gaps) {
         if (this.gapIntersection && (gaps.length != this.gaps.length || this.gaps.some((g, i) => g != gaps[i]))) {
             this.gapIntersection.disconnect();
@@ -5441,7 +5496,7 @@ class DOMObserver {
     }
     // Throw away any pending changes
     clear() {
-        this.observer.takeRecords();
+        this.processRecords();
         this.queue.length = 0;
         this.selectionChanged = false;
     }
@@ -5554,6 +5609,7 @@ class DOMObserver {
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
+        window.removeEventListener("resize", this.onResize);
         this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         clearTimeout(this.parentCheck);
         clearTimeout(this.resizeTimeout);
@@ -5619,23 +5675,11 @@ function applyDOMChange(view, start, end, typeOver) {
         }
         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: Text$1.of(reader.text.slice(diff.from, diff.toB).split(LineBreakPlaceholder)) };
         }
@@ -5885,7 +5929,6 @@ class EditorView {
         this.mountStyles();
         this.updateAttrs();
         this.updateState = 0 /* Idle */;
-        ensureGlobalHandler();
         this.requestMeasure();
         if (config.parent)
             config.parent.appendChild(this.dom);
@@ -5918,9 +5961,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));
@@ -5986,7 +6037,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))
@@ -6712,22 +6765,6 @@ const MaxBidiLine = 4096;
 function ensureTop(given, view) {
     return (given == null ? view.contentDOM.getBoundingClientRect().top : given) + view.viewState.paddingTop;
 }
-let resizeDebounce = -1;
-function ensureGlobalHandler() {
-    window.addEventListener("resize", () => {
-        if (resizeDebounce == -1)
-            resizeDebounce = setTimeout(handleResize, 50);
-    });
-}
-function handleResize() {
-    resizeDebounce = -1;
-    let found = document.querySelectorAll(".cm-content");
-    for (let i = 0; i < found.length; i++) {
-        let docView = ContentView.get(found[i]);
-        if (docView)
-            docView.editorView.requestMeasure();
-    }
-}
 const BadMeasure = {};
 class CachedOrder {
     constructor(from, to, dir, order) {

package/package.json

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