@codemirror/view 0.19.20 → 0.19.21

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.19.21 (2021-11-26)
+
+### Bug fixes
+
+Fix a problem where the DOM update would unnecessarily trigger browser relayouts.
+
 ## 0.19.20 (2021-11-19)
 
 ### Bug fixes

package/dist/index.cjs

@@ -186,7 +186,7 @@ function scrollRectIntoView(dom, rect, side, center) {
         }
     }
 }
-class DOMSelection {
+class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
         this.anchorOffset = 0;
@@ -197,11 +197,14 @@ class DOMSelection {
         return this.anchorNode == domSel.anchorNode && this.anchorOffset == domSel.anchorOffset &&
             this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
     }
-    set(domSel) {
-        this.anchorNode = domSel.anchorNode;
-        this.anchorOffset = domSel.anchorOffset;
-        this.focusNode = domSel.focusNode;
-        this.focusOffset = domSel.focusOffset;
+    setRange(range) {
+        this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+    }
+    set(anchorNode, anchorOffset, focusNode, focusOffset) {
+        this.anchorNode = anchorNode;
+        this.anchorOffset = anchorOffset;
+        this.focusNode = focusNode;
+        this.focusOffset = focusOffset;
     }
 }
 let preventScrollSupported = null;
@@ -1943,9 +1946,10 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        this.forceSelection = false;
         // Used by the resize observer to ignore resizes that we caused
         // ourselves
-        this.lastUpdate = 0;
+        this.lastUpdate = Date.now();
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1959,7 +1963,6 @@ class DocView extends ContentView {
     // position, if we know the editor is going to scroll that position
     // into view.
     update(update) {
-        this.lastUpdate = Date.now();
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -1979,21 +1982,22 @@ class DocView extends ContentView {
         // getSelection than the one that it actually shows to the user.
         // This forces a selection update when lines are joined to work
         // around that. Issue #54
-        let forceSelection = (browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
-            update.state.doc.lines != update.startState.doc.lines;
+        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
+            update.state.doc.lines != update.startState.doc.lines)
+            this.forceSelection = true;
         let prevDeco = this.decorations, deco = this.updateDeco();
         let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
         changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
-        let pointerSel = update.transactions.some(tr => tr.isUserEvent("select.pointer"));
         if (this.dirty == 0 /* Not */ && changedRanges.length == 0 &&
             !(update.flags & 4 /* Viewport */) &&
             update.state.selection.main.from >= this.view.viewport.from &&
             update.state.selection.main.to <= this.view.viewport.to) {
-            this.updateSelection(forceSelection, pointerSel);
             return false;
         }
         else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length, forceSelection, pointerSel);
+            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            if (update.transactions.length)
+                this.lastUpdate = Date.now();
             return true;
         }
     }
@@ -2001,13 +2005,15 @@ class DocView extends ContentView {
         if (this.dirty) {
             this.view.observer.ignore(() => this.view.docView.sync());
             this.dirty = 0 /* Not */;
+            this.updateSelection(true);
         }
-        if (sel)
+        else {
             this.updateSelection();
+        }
     }
     // Used both by update and checkLayout do perform the actual DOM
     // update
-    updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
+    updateInner(changes, deco, oldLength) {
         this.updateChildren(changes, deco, oldLength);
         let { observer } = this.view;
         observer.ignore(() => {
@@ -2025,8 +2031,7 @@ class DocView extends ContentView {
             this.sync(track);
             this.dirty = 0 /* Not */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
-                forceSelection = true;
-            this.updateSelection(forceSelection, pointerSel);
+                this.forceSelection = true;
             this.dom.style.height = "";
         });
         let gaps = [];
@@ -2112,10 +2117,14 @@ class DocView extends ContentView {
             this.replaceChildren(fromI, toI, content);
     }
     // Sync the DOM selection to this.state.selection
-    updateSelection(force = false, fromPointer = false) {
+    updateSelection(mustRead = false, fromPointer = false) {
+        if (mustRead)
+            this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
             return;
+        let force = this.forceSelection;
+        this.forceSelection = false;
         let main = this.view.state.selection.main;
         // FIXME need to handle the case where the selection falls inside a block range
         let anchor = this.domAtPos(main.anchor);
@@ -5075,25 +5084,30 @@ class DOMObserver {
         this.onChange = onChange;
         this.onScrollChanged = onScrollChanged;
         this.active = false;
-        this.ignoreSelection = new DOMSelection;
+        // The known selection. Kept in our own object, as opposed to just
+        // directly accessing the selection because:
+        //  - Safari doesn't report the right selection in shadow DOM
+        //  - Reading from the selection forces a DOM layout
+        //  - This way, we can ignore selectionchange events if we have
+        //    already seen the 'new' selection
+        this.selectionRange = new DOMSelectionState;
+        // Set when a selection change is detected, cleared on flush
+        this.selectionChanged = false;
         this.delayedFlush = -1;
+        this.resizeTimeout = -1;
         this.queue = [];
-        this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
         this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
-        // Used to work around a Safari Selection/shadow DOM bug (#414)
-        this._selectionRange = null;
         // Timeout for scheduling check of the parents that need scroll handlers
         this.parentCheck = -1;
         this.dom = view.contentDOM;
         this.observer = new MutationObserver(mutations => {
             for (let mut of mutations)
                 this.queue.push(mut);
-            this._selectionRange = null;
             // IE11 will sometimes (on typing over a selection or
             // backspacing out a single character text node) call the
             // observer callback before actually updating the DOM.
@@ -5120,8 +5134,11 @@ class DOMObserver {
         this.onSelectionChange = this.onSelectionChange.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 100)
-                    this.view.requestMeasure();
+                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
+                    this.resizeTimeout = setTimeout(() => {
+                        this.resizeTimeout = -1;
+                        this.view.requestMeasure();
+                    }, 50);
             });
             this.resize.observe(view.scrollDOM);
         }
@@ -5145,10 +5162,12 @@ class DOMObserver {
             }, {});
         }
         this.listenForScroll();
+        this.readSelectionRange();
+        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
-            this.flush();
+            this.flush(false);
         this.onScrollChanged(e);
     }
     updateGaps(gaps) {
@@ -5160,8 +5179,8 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (this.lastFlush < Date.now() - 50)
-            this._selectionRange = null;
+        if (!this.readSelectionRange())
+            return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
             return;
@@ -5176,24 +5195,22 @@ class DOMObserver {
             sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset))
             this.flushSoon();
         else
-            this.flush();
-    }
-    get selectionRange() {
-        if (!this._selectionRange) {
-            let { root } = this.view, sel = getSelection(root);
-            // The Selection object is broken in shadow roots in Safari. See
-            // https://github.com/codemirror/codemirror.next/issues/414
-            if (browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM)
-                sel = safariSelectionRangeHack(this.view) || sel;
-            this._selectionRange = sel;
-        }
-        return this._selectionRange;
+            this.flush(false);
+    }
+    readSelectionRange() {
+        let { root } = this.view, domSel = getSelection(root);
+        // The Selection object is broken in shadow roots in Safari. See
+        // https://github.com/codemirror/codemirror.next/issues/414
+        let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
+            safariSelectionRangeHack(this.view) || domSel;
+        if (this.selectionRange.eq(range))
+            return false;
+        this.selectionRange.setRange(range);
+        return this.selectionChanged = true;
     }
     setSelectionRange(anchor, head) {
-        var _a;
-        if (!((_a = this._selectionRange) === null || _a === void 0 ? void 0 : _a.type))
-            this._selectionRange = { anchorNode: anchor.node, anchorOffset: anchor.offset,
-                focusNode: head.node, focusOffset: head.offset };
+        this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
+        this.selectionChanged = false;
     }
     listenForScroll() {
         this.parentCheck = -1;
@@ -5240,7 +5257,6 @@ class DOMObserver {
         if (this.active)
             return;
         this.observer.observe(this.dom, observeOptions);
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
         this.active = true;
@@ -5250,18 +5266,14 @@ class DOMObserver {
             return;
         this.active = false;
         this.observer.disconnect();
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.removeEventListener("DOMCharacterDataModified", this.onCharData);
     }
-    clearSelection() {
-        this.ignoreSelection.set(this.selectionRange);
-    }
     // Throw away any pending changes
     clear() {
         this.observer.takeRecords();
         this.queue.length = 0;
-        this.clearSelection();
+        this.selectionChanged = false;
     }
     flushSoon() {
         if (this.delayedFlush < 0)
@@ -5298,24 +5310,24 @@ class DOMObserver {
         return { from, to, typeOver };
     }
     // Apply pending changes, if any
-    flush() {
+    flush(readSelection = true) {
+        if (readSelection)
+            this.readSelectionRange();
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
         if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
-        this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.selectionChanged = false;
         let startState = this.view.state;
         this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.docView.reset(newSel);
-        this.clearSelection();
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5347,6 +5359,7 @@ class DOMObserver {
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         clearTimeout(this.parentCheck);
+        clearTimeout(this.resizeTimeout);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5359,6 +5372,7 @@ function findChild(cView, dom, dir) {
     }
     return null;
 }
+// Used to work around a Safari Selection/shadow DOM bug (#414)
 function safariSelectionRangeHack(view) {
     let found = null;
     // Because Safari (at least in 2018-2021) doesn't provide regular
@@ -5778,6 +5792,7 @@ class EditorView {
                 this.mountStyles();
             this.updateAttrs();
             this.showAnnouncements(transactions);
+            this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
         finally {
             this.updateState = 0 /* Idle */;
@@ -5895,8 +5910,7 @@ class EditorView {
                     this.inputState.update(update);
                 }
                 this.updateAttrs();
-                if (changed)
-                    this.docView.update(update);
+                let redrawn = changed > 0 && this.docView.update(update);
                 for (let i = 0; i < measuring.length; i++)
                     if (measured[i] != BadMeasure) {
                         try {
@@ -5910,6 +5924,8 @@ class EditorView {
                     this.docView.scrollIntoView(this.viewState.scrollTarget);
                     this.viewState.scrollTarget = null;
                 }
+                if (changed)
+                    this.docView.updateSelection(redrawn);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
             }
@@ -5934,8 +5950,6 @@ class EditorView {
         let editorAttrs = combineAttrs(this.state.facet(editorAttributes), {
             class: "cm-editor" + (this.hasFocus ? " cm-focused " : " ") + this.themeClasses
         });
-        updateAttrs(this.dom, this.editorAttrs, editorAttrs);
-        this.editorAttrs = editorAttrs;
         let contentAttrs = {
             spellcheck: "false",
             autocorrect: "off",
@@ -5950,7 +5964,11 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         combineAttrs(this.state.facet(contentAttributes), contentAttrs);
-        updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+        this.observer.ignore(() => {
+            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        });
+        this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
     }
     showAnnouncements(trs) {

package/dist/index.js

@@ -183,7 +183,7 @@ function scrollRectIntoView(dom, rect, side, center) {
         }
     }
 }
-class DOMSelection {
+class DOMSelectionState {
     constructor() {
         this.anchorNode = null;
         this.anchorOffset = 0;
@@ -194,11 +194,14 @@ class DOMSelection {
         return this.anchorNode == domSel.anchorNode && this.anchorOffset == domSel.anchorOffset &&
             this.focusNode == domSel.focusNode && this.focusOffset == domSel.focusOffset;
     }
-    set(domSel) {
-        this.anchorNode = domSel.anchorNode;
-        this.anchorOffset = domSel.anchorOffset;
-        this.focusNode = domSel.focusNode;
-        this.focusOffset = domSel.focusOffset;
+    setRange(range) {
+        this.set(range.anchorNode, range.anchorOffset, range.focusNode, range.focusOffset);
+    }
+    set(anchorNode, anchorOffset, focusNode, focusOffset) {
+        this.anchorNode = anchorNode;
+        this.anchorOffset = anchorOffset;
+        this.focusNode = focusNode;
+        this.focusOffset = focusOffset;
     }
 }
 let preventScrollSupported = null;
@@ -1939,9 +1942,10 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        this.forceSelection = false;
         // Used by the resize observer to ignore resizes that we caused
         // ourselves
-        this.lastUpdate = 0;
+        this.lastUpdate = Date.now();
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1955,7 +1959,6 @@ class DocView extends ContentView {
     // position, if we know the editor is going to scroll that position
     // into view.
     update(update) {
-        this.lastUpdate = Date.now();
         let changedRanges = update.changedRanges;
         if (this.minWidth > 0 && changedRanges.length) {
             if (!changedRanges.every(({ fromA, toA }) => toA < this.minWidthFrom || fromA > this.minWidthTo)) {
@@ -1975,21 +1978,22 @@ class DocView extends ContentView {
         // getSelection than the one that it actually shows to the user.
         // This forces a selection update when lines are joined to work
         // around that. Issue #54
-        let forceSelection = (browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
-            update.state.doc.lines != update.startState.doc.lines;
+        if ((browser.ie || browser.chrome) && !this.compositionDeco.size && update &&
+            update.state.doc.lines != update.startState.doc.lines)
+            this.forceSelection = true;
         let prevDeco = this.decorations, deco = this.updateDeco();
         let decoDiff = findChangedDeco(prevDeco, deco, update.changes);
         changedRanges = ChangedRange.extendWithRanges(changedRanges, decoDiff);
-        let pointerSel = update.transactions.some(tr => tr.isUserEvent("select.pointer"));
         if (this.dirty == 0 /* Not */ && changedRanges.length == 0 &&
             !(update.flags & 4 /* Viewport */) &&
             update.state.selection.main.from >= this.view.viewport.from &&
             update.state.selection.main.to <= this.view.viewport.to) {
-            this.updateSelection(forceSelection, pointerSel);
             return false;
         }
         else {
-            this.updateInner(changedRanges, deco, update.startState.doc.length, forceSelection, pointerSel);
+            this.updateInner(changedRanges, deco, update.startState.doc.length);
+            if (update.transactions.length)
+                this.lastUpdate = Date.now();
             return true;
         }
     }
@@ -1997,13 +2001,15 @@ class DocView extends ContentView {
         if (this.dirty) {
             this.view.observer.ignore(() => this.view.docView.sync());
             this.dirty = 0 /* Not */;
+            this.updateSelection(true);
         }
-        if (sel)
+        else {
             this.updateSelection();
+        }
     }
     // Used both by update and checkLayout do perform the actual DOM
     // update
-    updateInner(changes, deco, oldLength, forceSelection = false, pointerSel = false) {
+    updateInner(changes, deco, oldLength) {
         this.updateChildren(changes, deco, oldLength);
         let { observer } = this.view;
         observer.ignore(() => {
@@ -2021,8 +2027,7 @@ class DocView extends ContentView {
             this.sync(track);
             this.dirty = 0 /* Not */;
             if (track && (track.written || observer.selectionRange.focusNode != track.node))
-                forceSelection = true;
-            this.updateSelection(forceSelection, pointerSel);
+                this.forceSelection = true;
             this.dom.style.height = "";
         });
         let gaps = [];
@@ -2108,10 +2113,14 @@ class DocView extends ContentView {
             this.replaceChildren(fromI, toI, content);
     }
     // Sync the DOM selection to this.state.selection
-    updateSelection(force = false, fromPointer = false) {
+    updateSelection(mustRead = false, fromPointer = false) {
+        if (mustRead)
+            this.view.observer.readSelectionRange();
         if (!(fromPointer || this.mayControlSelection()) ||
             browser.ios && this.view.inputState.rapidCompositionStart)
             return;
+        let force = this.forceSelection;
+        this.forceSelection = false;
         let main = this.view.state.selection.main;
         // FIXME need to handle the case where the selection falls inside a block range
         let anchor = this.domAtPos(main.anchor);
@@ -5069,25 +5078,30 @@ class DOMObserver {
         this.onChange = onChange;
         this.onScrollChanged = onScrollChanged;
         this.active = false;
-        this.ignoreSelection = new DOMSelection;
+        // The known selection. Kept in our own object, as opposed to just
+        // directly accessing the selection because:
+        //  - Safari doesn't report the right selection in shadow DOM
+        //  - Reading from the selection forces a DOM layout
+        //  - This way, we can ignore selectionchange events if we have
+        //    already seen the 'new' selection
+        this.selectionRange = new DOMSelectionState;
+        // Set when a selection change is detected, cleared on flush
+        this.selectionChanged = false;
         this.delayedFlush = -1;
+        this.resizeTimeout = -1;
         this.queue = [];
-        this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
         this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
-        // Used to work around a Safari Selection/shadow DOM bug (#414)
-        this._selectionRange = null;
         // Timeout for scheduling check of the parents that need scroll handlers
         this.parentCheck = -1;
         this.dom = view.contentDOM;
         this.observer = new MutationObserver(mutations => {
             for (let mut of mutations)
                 this.queue.push(mut);
-            this._selectionRange = null;
             // IE11 will sometimes (on typing over a selection or
             // backspacing out a single character text node) call the
             // observer callback before actually updating the DOM.
@@ -5114,8 +5128,11 @@ class DOMObserver {
         this.onSelectionChange = this.onSelectionChange.bind(this);
         if (typeof ResizeObserver == "function") {
             this.resize = new ResizeObserver(() => {
-                if (this.view.docView.lastUpdate < Date.now() - 100)
-                    this.view.requestMeasure();
+                if (this.view.docView.lastUpdate < Date.now() - 75 && this.resizeTimeout < 0)
+                    this.resizeTimeout = setTimeout(() => {
+                        this.resizeTimeout = -1;
+                        this.view.requestMeasure();
+                    }, 50);
             });
             this.resize.observe(view.scrollDOM);
         }
@@ -5139,10 +5156,12 @@ class DOMObserver {
             }, {});
         }
         this.listenForScroll();
+        this.readSelectionRange();
+        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
     }
     onScroll(e) {
         if (this.intersecting)
-            this.flush();
+            this.flush(false);
         this.onScrollChanged(e);
     }
     updateGaps(gaps) {
@@ -5154,8 +5173,8 @@ class DOMObserver {
         }
     }
     onSelectionChange(event) {
-        if (this.lastFlush < Date.now() - 50)
-            this._selectionRange = null;
+        if (!this.readSelectionRange())
+            return;
         let { view } = this, sel = this.selectionRange;
         if (view.state.facet(editable) ? view.root.activeElement != this.dom : !hasSelection(view.dom, sel))
             return;
@@ -5170,24 +5189,22 @@ class DOMObserver {
             sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset))
             this.flushSoon();
         else
-            this.flush();
-    }
-    get selectionRange() {
-        if (!this._selectionRange) {
-            let { root } = this.view, sel = getSelection(root);
-            // The Selection object is broken in shadow roots in Safari. See
-            // https://github.com/codemirror/codemirror.next/issues/414
-            if (browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM)
-                sel = safariSelectionRangeHack(this.view) || sel;
-            this._selectionRange = sel;
-        }
-        return this._selectionRange;
+            this.flush(false);
+    }
+    readSelectionRange() {
+        let { root } = this.view, domSel = getSelection(root);
+        // The Selection object is broken in shadow roots in Safari. See
+        // https://github.com/codemirror/codemirror.next/issues/414
+        let range = browser.safari && root.nodeType == 11 && deepActiveElement() == this.view.contentDOM &&
+            safariSelectionRangeHack(this.view) || domSel;
+        if (this.selectionRange.eq(range))
+            return false;
+        this.selectionRange.setRange(range);
+        return this.selectionChanged = true;
     }
     setSelectionRange(anchor, head) {
-        var _a;
-        if (!((_a = this._selectionRange) === null || _a === void 0 ? void 0 : _a.type))
-            this._selectionRange = { anchorNode: anchor.node, anchorOffset: anchor.offset,
-                focusNode: head.node, focusOffset: head.offset };
+        this.selectionRange.set(anchor.node, anchor.offset, head.node, head.offset);
+        this.selectionChanged = false;
     }
     listenForScroll() {
         this.parentCheck = -1;
@@ -5234,7 +5251,6 @@ class DOMObserver {
         if (this.active)
             return;
         this.observer.observe(this.dom, observeOptions);
-        this.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.addEventListener("DOMCharacterDataModified", this.onCharData);
         this.active = true;
@@ -5244,18 +5260,14 @@ class DOMObserver {
             return;
         this.active = false;
         this.observer.disconnect();
-        this.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
         if (useCharData)
             this.dom.removeEventListener("DOMCharacterDataModified", this.onCharData);
     }
-    clearSelection() {
-        this.ignoreSelection.set(this.selectionRange);
-    }
     // Throw away any pending changes
     clear() {
         this.observer.takeRecords();
         this.queue.length = 0;
-        this.clearSelection();
+        this.selectionChanged = false;
     }
     flushSoon() {
         if (this.delayedFlush < 0)
@@ -5292,24 +5304,24 @@ class DOMObserver {
         return { from, to, typeOver };
     }
     // Apply pending changes, if any
-    flush() {
+    flush(readSelection = true) {
+        if (readSelection)
+            this.readSelectionRange();
         // Completely hold off flushing when pending keys are set—the code
         // managing those will make sure processRecords is called and the
         // view is resynchronized after
         if (this.delayedFlush >= 0 || this.view.inputState.pendingAndroidKey)
             return;
-        this.lastFlush = Date.now();
         let { from, to, typeOver } = this.processRecords();
-        let selection = this.selectionRange;
-        let newSel = !this.ignoreSelection.eq(selection) && hasSelection(this.dom, selection);
+        let newSel = this.selectionChanged && hasSelection(this.dom, this.selectionRange);
         if (from < 0 && !newSel)
             return;
+        this.selectionChanged = false;
         let startState = this.view.state;
         this.onChange(from, to, typeOver);
         // The view wasn't updated
         if (this.view.state == startState)
             this.view.docView.reset(newSel);
-        this.clearSelection();
     }
     readMutation(rec) {
         let cView = this.view.docView.nearest(rec.target);
@@ -5341,6 +5353,7 @@ class DOMObserver {
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         clearTimeout(this.parentCheck);
+        clearTimeout(this.resizeTimeout);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5353,6 +5366,7 @@ function findChild(cView, dom, dir) {
     }
     return null;
 }
+// Used to work around a Safari Selection/shadow DOM bug (#414)
 function safariSelectionRangeHack(view) {
     let found = null;
     // Because Safari (at least in 2018-2021) doesn't provide regular
@@ -5772,6 +5786,7 @@ class EditorView {
                 this.mountStyles();
             this.updateAttrs();
             this.showAnnouncements(transactions);
+            this.docView.updateSelection(redrawn, transactions.some(tr => tr.isUserEvent("select.pointer")));
         }
         finally {
             this.updateState = 0 /* Idle */;
@@ -5889,8 +5904,7 @@ class EditorView {
                     this.inputState.update(update);
                 }
                 this.updateAttrs();
-                if (changed)
-                    this.docView.update(update);
+                let redrawn = changed > 0 && this.docView.update(update);
                 for (let i = 0; i < measuring.length; i++)
                     if (measured[i] != BadMeasure) {
                         try {
@@ -5904,6 +5918,8 @@ class EditorView {
                     this.docView.scrollIntoView(this.viewState.scrollTarget);
                     this.viewState.scrollTarget = null;
                 }
+                if (changed)
+                    this.docView.updateSelection(redrawn);
                 if (this.viewport.from == oldViewport.from && this.viewport.to == oldViewport.to && this.measureRequests.length == 0)
                     break;
             }
@@ -5928,8 +5944,6 @@ class EditorView {
         let editorAttrs = combineAttrs(this.state.facet(editorAttributes), {
             class: "cm-editor" + (this.hasFocus ? " cm-focused " : " ") + this.themeClasses
         });
-        updateAttrs(this.dom, this.editorAttrs, editorAttrs);
-        this.editorAttrs = editorAttrs;
         let contentAttrs = {
             spellcheck: "false",
             autocorrect: "off",
@@ -5944,7 +5958,11 @@ class EditorView {
         if (this.state.readOnly)
             contentAttrs["aria-readonly"] = "true";
         combineAttrs(this.state.facet(contentAttributes), contentAttrs);
-        updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+        this.observer.ignore(() => {
+            updateAttrs(this.contentDOM, this.contentAttrs, contentAttrs);
+            updateAttrs(this.dom, this.editorAttrs, editorAttrs);
+        });
+        this.editorAttrs = editorAttrs;
         this.contentAttrs = contentAttrs;
     }
     showAnnouncements(trs) {

package/package.json

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