@codemirror/view 0.20.4 → 0.20.7

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## 0.20.7 (2022-05-30)
+
+### Bug fixes
+
+Fix an issue on Chrome Android where the DOM could fail to display the actual document after backspace.
+
+Avoid an issue on Chrome Android where DOM changes were sometimes inappropriately replace by a backspace key effect due to spurious beforeinput events.
+
+Fix a problem where the content element's width didn't cover the width of the actual content.
+
+Work around a bug in Chrome 102 which caused wheel scrolling of the editor to be interrupted every few lines.
+
+## 0.20.6 (2022-05-20)
+
+### Bug fixes
+
+Make sure the editor re-measures itself when its attributes are updated.
+
+## 0.20.5 (2022-05-18)
+
+### Bug fixes
+
+Fix an issue where gutter elements without any markers in them would not get the `cm-gutterElement` class assigned.
+
+Fix an issue where DOM event handlers registered by plugins were retained indefinitely, even after the editor was reconfigured.
+
 ## 0.20.4 (2022-05-03)
 
 ### Bug fixes

package/dist/index.cjs

@@ -754,7 +754,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -763,7 +763,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1063,14 +1063,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1377,6 +1379,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2508,7 +2511,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -3266,6 +3269,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3306,6 +3310,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -3319,6 +3338,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         for (let plugin of plugins)
             if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
                 this.customHandlers.push({ plugin: plugin.value, handlers });
@@ -4746,24 +4766,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         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;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5563,21 +5581,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5633,10 +5646,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5719,7 +5733,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5759,7 +5773,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = state.EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5775,13 +5789,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: state.Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5796,10 +5810,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5855,6 +5869,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5864,6 +5879,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5982,7 +6001,7 @@ class EditorView {
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6052,7 +6071,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state$1 = this.state;
         for (let tr of transactions) {
             if (tr.startState != state$1)
@@ -6063,6 +6082,7 @@ class EditorView {
             this.viewState.state = state$1;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state$1.facet(state.EditorState.phrases) != this.state.facet(state.EditorState.phrases))
             return this.setState(state$1);
@@ -6090,7 +6110,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6099,7 +6119,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6279,12 +6299,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -8181,7 +8203,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8195,7 +8216,7 @@ class HoverPlugin {
         let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
         let rtl = bidi && bidi.dir == exports.Direction.RTL ? -1 : 1;
         let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
-        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8795,6 +8816,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/dist/index.js

@@ -750,7 +750,7 @@ function textCoords(text, pos, side) {
                 from--;
                 flatten = 1;
             } // FIXME this is wrong in RTL text
-            else {
+            else if (to < length) {
                 to++;
                 flatten = -1;
             }
@@ -759,7 +759,7 @@ function textCoords(text, pos, side) {
     else {
         if (side < 0)
             from--;
-        else
+        else if (to < length)
             to++;
     }
     let rects = textRange(text, from, to).getClientRects();
@@ -1059,14 +1059,16 @@ function attrsEq(a, b) {
     return true;
 }
 function updateAttrs(dom, prev, attrs) {
+    let changed = null;
     if (prev)
         for (let name in prev)
             if (!(attrs && name in attrs))
-                dom.removeAttribute(name);
+                dom.removeAttribute(changed = name);
     if (attrs)
         for (let name in attrs)
             if (!(prev && prev[name] == attrs[name]))
-                dom.setAttribute(name, attrs[name]);
+                dom.setAttribute(changed = name, attrs[name]);
+    return !!changed;
 }
 
 /**
@@ -1372,6 +1374,7 @@ class LineView extends ContentView {
     transferDOM(other) {
         if (!this.dom)
             return;
+        this.markDirty();
         other.setDOM(this.dom);
         other.prevAttrs = this.prevAttrs === undefined ? this.attrs : this.prevAttrs;
         this.prevAttrs = undefined;
@@ -2502,7 +2505,7 @@ class DocView extends ContentView {
             // no relayout is triggered and I cannot imagine how it can
             // recompute the scroll position without a layout)
             this.dom.style.height = this.view.viewState.contentHeight + "px";
-            this.dom.style.minWidth = this.minWidth ? this.minWidth + "px" : "";
+            this.dom.style.flexBasis = this.minWidth ? this.minWidth + "px" : "";
             // Chrome will sometimes, when DOM mutations occur directly
             // around the selection, get confused and report a different
             // selection from the one it displays (issue #218). This tries
@@ -3260,6 +3263,7 @@ class InputState {
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
+        this.chromeScrollHack = -1;
         // On iOS, some keys need to have their default behavior happen
         // (after which we retroactively handle them and reset the DOM) to
         // avoid messing up the virtual keyboard state.
@@ -3300,6 +3304,21 @@ class InputState {
             });
             this.registeredEvents.push(type);
         }
+        if (browser.chrome && browser.chrome_version >= 102) {
+            // On Chrome 102, viewport updates somehow stop wheel-based
+            // scrolling. Turning off pointer events during the scroll seems
+            // to avoid the issue.
+            view.scrollDOM.addEventListener("wheel", () => {
+                if (this.chromeScrollHack < 0)
+                    view.contentDOM.style.pointerEvents = "none";
+                else
+                    window.clearTimeout(this.chromeScrollHack);
+                this.chromeScrollHack = setTimeout(() => {
+                    this.chromeScrollHack = -1;
+                    view.contentDOM.style.pointerEvents = "";
+                }, 100);
+            }, { passive: true });
+        }
         this.notifiedFocused = view.hasFocus;
         // On Safari adding an input event handler somehow prevents an
         // issue where the composition vanishes when you press enter.
@@ -3313,6 +3332,7 @@ class InputState {
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
+        this.customHandlers = [];
         for (let plugin of plugins)
             if (handlers = (_a = plugin.update(view).spec) === null || _a === void 0 ? void 0 : _a.domEventHandlers) {
                 this.customHandlers.push({ plugin: plugin.value, handlers });
@@ -4739,24 +4759,22 @@ class ViewState {
         this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
         let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != dom.clientHeight;
+        this.contentDOMHeight = dom.clientHeight;
+        this.mustMeasureContent = false;
         let result = 0, bias = 0;
+        // Vertical padding
+        let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
+        if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
+            this.paddingTop = paddingTop;
+            this.paddingBottom = paddingBottom;
+            result |= 8 /* Geometry */ | 2 /* Height */;
+        }
         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;
-            // Vertical padding
-            let paddingTop = parseInt(style.paddingTop) || 0, paddingBottom = parseInt(style.paddingBottom) || 0;
-            if (this.paddingTop != paddingTop || this.paddingBottom != paddingBottom) {
-                result |= 8 /* Geometry */;
-                this.paddingTop = paddingTop;
-                this.paddingBottom = paddingBottom;
-            }
-        }
         // Pixel viewport
         let pixelViewport = (this.printing ? fullPixelRange : visiblePixelRange)(dom, this.paddingTop);
         let dTop = pixelViewport.top - this.pixelViewport.top, dBottom = pixelViewport.bottom - this.pixelViewport.bottom;
@@ -5556,21 +5574,16 @@ class DOMObserver {
     // composition events that, when interrupted, cause text duplication
     // or other kinds of corruption. This hack makes the editor back off
     // from handling DOM changes for a moment when such a key is
-    // detected (via beforeinput or keydown), and then dispatches the
-    // key event, throwing away the DOM changes if it gets handled.
+    // detected (via beforeinput or keydown), and then tries to flush
+    // them or, if that has no effect, dispatches the given key.
     delayAndroidKey(key, keyCode) {
         if (!this.delayedAndroidKey)
             requestAnimationFrame(() => {
                 let key = this.delayedAndroidKey;
                 this.delayedAndroidKey = null;
-                let startState = this.view.state;
-                this.readSelectionRange();
-                if (dispatchKey(this.view.contentDOM, key.key, key.keyCode))
-                    this.processRecords();
-                else
-                    this.flush();
-                if (this.view.state == startState)
-                    this.view.update([]);
+                this.delayedFlush = -1;
+                if (!this.flush())
+                    dispatchKey(this.view.contentDOM, key.key, key.keyCode);
             });
         // Since backspace beforeinput is sometimes signalled spuriously,
         // Enter always takes precedence.
@@ -5626,10 +5639,11 @@ class DOMObserver {
             return;
         this.selectionChanged = false;
         let startState = this.view.state;
-        this.onChange(from, to, typeOver);
+        let handled = this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.update([]);
+        return handled;
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5712,7 +5726,7 @@ function applyDOMChange(view, start, end, typeOver) {
     if (start > -1) {
         let bounds = view.docView.domBoundsAround(start, end, 0);
         if (!bounds || view.state.readOnly)
-            return;
+            return false;
         let { from, to } = bounds;
         let selPoints = view.docView.impreciseHead || view.docView.impreciseAnchor ? [] : selectionPoints(view);
         let reader = new DOMReader(selPoints, view.state);
@@ -5752,7 +5766,7 @@ function applyDOMChange(view, start, end, typeOver) {
             newSel = EditorSelection.single(anchor, head);
     }
     if (!change && !newSel)
-        return;
+        return false;
     // Heuristic to notice typing over a selected character
     if (!change && typeOver && !sel.empty && newSel && newSel.main.empty)
         change = { from: sel.from, to: sel.to, insert: view.state.doc.slice(sel.from, sel.to) };
@@ -5768,13 +5782,13 @@ function applyDOMChange(view, start, end, typeOver) {
         };
     // Detect insert-period-on-double-space Mac behavior, and transform
     // it into a regular space insert.
-    else if (browser.mac && change && change.from == change.to && change.from == sel.head - 1 &&
+    else if ((browser.mac || browser.android) && change && change.from == change.to && change.from == sel.head - 1 &&
         change.insert.toString() == ".")
         change = { from: sel.from, to: sel.to, insert: Text.of([" "]) };
     if (change) {
         let startState = view.state;
         if (browser.ios && view.inputState.flushIOSKey(view))
-            return;
+            return true;
         // Android browsers don't fire reasonable key events for enter,
         // backspace, or delete. So this detects changes that look like
         // they're caused by those keys, and reinterprets them as key
@@ -5789,10 +5803,10 @@ function applyDOMChange(view, start, end, typeOver) {
                     dispatchKey(view.contentDOM, "Backspace", 8)) ||
                 (change.from == sel.from && change.to == sel.to + 1 && change.insert.length == 0 &&
                     dispatchKey(view.contentDOM, "Delete", 46))))
-            return;
+            return true;
         let text = change.insert.toString();
         if (view.state.facet(inputHandler).some(h => h(view, change.from, change.to, text)))
-            return;
+            return true;
         if (view.inputState.composing >= 0)
             view.inputState.composing++;
         let tr;
@@ -5848,6 +5862,7 @@ function applyDOMChange(view, start, end, typeOver) {
             }
         }
         view.dispatch(tr, { scrollIntoView: true, userEvent });
+        return true;
     }
     else if (newSel && !newSel.main.eq(sel)) {
         let scrollIntoView = false, userEvent = "select";
@@ -5857,6 +5872,10 @@ function applyDOMChange(view, start, end, typeOver) {
             userEvent = view.inputState.lastSelectionOrigin;
         }
         view.dispatch({ selection: newSel, scrollIntoView, userEvent });
+        return true;
+    }
+    else {
+        return false;
     }
 }
 function findDiff(a, b, preferredPos, preferredSide) {
@@ -5975,7 +5994,7 @@ class EditorView {
         for (let plugin of this.plugins)
             plugin.update(this);
         this.observer = new DOMObserver(this, (from, to, typeOver) => {
-            applyDOMChange(this, from, to, typeOver);
+            return applyDOMChange(this, from, to, typeOver);
         }, event => {
             this.inputState.runScrollHandlers(this, event);
             if (this.observer.intersecting)
@@ -6045,7 +6064,7 @@ class EditorView {
     update(transactions) {
         if (this.updateState != 0 /* Idle */)
             throw new Error("Calls to EditorView.update are not allowed while an update is in progress");
-        let redrawn = false, update;
+        let redrawn = false, attrsChanged = false, update;
         let state = this.state;
         for (let tr of transactions) {
             if (tr.startState != state)
@@ -6056,6 +6075,7 @@ class EditorView {
             this.viewState.state = state;
             return;
         }
+        this.observer.clear();
         // When the phrases change, redraw the editor
         if (state.facet(EditorState.phrases) != this.state.facet(EditorState.phrases))
             return this.setState(state);
@@ -6083,7 +6103,7 @@ class EditorView {
             redrawn = this.docView.update(update);
             if (this.state.facet(styleModule) != this.styleModules)
                 this.mountStyles();
-            this.updateAttrs();
+            attrsChanged = this.updateAttrs();
             this.showAnnouncements(transactions);
             this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
@@ -6092,7 +6112,7 @@ class EditorView {
         }
         if (update.startState.facet(theme) != update.state.facet(theme))
             this.viewState.mustMeasureContent = true;
-        if (redrawn || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
+        if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener))
@@ -6272,12 +6292,14 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         attrsFromFacet(this, contentAttributes, contentAttrs);
-        this.observer.ignore(() => {
-            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
-            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        let changed = this.observer.ignore(() => {
+            let changedContent = updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            let changedEditor = updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+            return changedContent || changedEditor;
         });
         this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
+        return changed;
     }
     showAnnouncements(trs) {
         let first = true;
@@ -8174,7 +8196,6 @@ class HoverPlugin {
             this.startHover();
     }
     startHover() {
-        var _a;
         clearTimeout(this.restartTimeout);
         let { lastMove } = this;
         let pos = this.view.contentDOM.contains(lastMove.target) ? this.view.posAtCoords(lastMove) : null;
@@ -8188,7 +8209,7 @@ class HoverPlugin {
         let bidi = this.view.bidiSpans(this.view.state.doc.lineAt(pos)).find(s => s.from <= pos && s.to >= pos);
         let rtl = bidi && bidi.dir == Direction.RTL ? -1 : 1;
         let open = this.source(this.view, pos, (lastMove.x < posCoords.left ? -rtl : rtl));
-        if ((_a = open) === null || _a === void 0 ? void 0 : _a.then) {
+        if (open === null || open === void 0 ? void 0 : open.then) {
             let pending = this.pending = { pos };
             open.then(result => {
                 if (this.pending == pending) {
@@ -8788,6 +8809,7 @@ class GutterElement {
         this.above = 0;
         this.markers = [];
         this.dom = document.createElement("div");
+        this.dom.className = "cm-gutterElement";
         this.update(view, height, above, markers);
     }
     update(view, height, above, markers) {

package/package.json

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