@codemirror/view 0.19.17 → 0.19.21

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 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
+
+Run a measure cycle when the editor's size spontaneously changes.
+
+## 0.19.19 (2021-11-17)
+
+### Bug fixes
+
+Fix a bug that caused the precedence of `editorAttributes` and `contentAttributes` to be inverted, making lower-precedence extensions override higher-precedence ones.
+
+## 0.19.18 (2021-11-16)
+
+### Bug fixes
+
+Fix an issue where the editor wasn't aware it was line-wrapping with its own `lineWrapping` extension enabled.
+
 ## 0.19.17 (2021-11-16)
 
 ### 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;
@@ -1771,11 +1774,17 @@ class PluginInstance {
     }
 }
 PluginInstance.dummy = new PluginInstance(ViewPlugin.define(() => ({})));
+function combineFacetAttrs(values) {
+    let result = {};
+    for (let i = values.length - 1; i >= 0; i--)
+        combineAttrs(values[i], result);
+    return result;
+}
 const editorAttributes = state.Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 const contentAttributes = state.Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 // Provide decorations
 const decorations = state.Facet.define();
@@ -1937,6 +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 = Date.now();
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1969,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;
         }
     }
@@ -1991,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(() => {
@@ -2015,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 = [];
@@ -2102,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);
@@ -3742,7 +3761,7 @@ handlers.beforeinput = (view, event) => {
     }
 };
 
-const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
+const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
     constructor() {
         this.doc = text.Text.empty;
@@ -4476,6 +4495,7 @@ class ViewState {
         this.paddingTop = 0;
         this.paddingBottom = 0;
         this.contentWidth = 0;
+        this.editorHeight = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4575,6 +4595,10 @@ class ViewState {
                 this.contentWidth = contentWidth;
                 result |= 8 /* Geometry */;
             }
+            if (this.editorHeight != docView.view.scrollDOM.clientHeight) {
+                this.editorHeight = docView.view.scrollDOM.clientHeight;
+                result |= 8 /* Geometry */;
+            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -5060,24 +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.
@@ -5102,6 +5132,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.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);
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5122,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) {
@@ -5137,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;
@@ -5153,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;
@@ -5217,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;
@@ -5227,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)
@@ -5275,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);
@@ -5315,15 +5350,16 @@ class DOMObserver {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.stop();
-        if (this.intersection)
-            this.intersection.disconnect();
-        if (this.gapIntersection)
-            this.gapIntersection.disconnect();
+        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         clearTimeout(this.parentCheck);
+        clearTimeout(this.resizeTimeout);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5336,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
@@ -5755,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 */;
@@ -5832,7 +5870,7 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
-        this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.flush();
         let updated = null;
@@ -5872,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 {
@@ -5887,14 +5924,16 @@ 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;
             }
         }
         finally {
             this.updateState = 0 /* Idle */;
+            this.measureScheduled = -1;
         }
-        this.measureScheduled = -1;
         if (updated && !updated.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(updated);
@@ -5911,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",
@@ -5927,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;
@@ -1767,11 +1770,17 @@ class PluginInstance {
     }
 }
 PluginInstance.dummy = /*@__PURE__*/new PluginInstance(/*@__PURE__*/ViewPlugin.define(() => ({})));
+function combineFacetAttrs(values) {
+    let result = {};
+    for (let i = values.length - 1; i >= 0; i--)
+        combineAttrs(values[i], result);
+    return result;
+}
 const editorAttributes = /*@__PURE__*/Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 const contentAttributes = /*@__PURE__*/Facet.define({
-    combine: values => values.reduce((a, b) => combineAttrs(b, a), {})
+    combine: combineFacetAttrs
 });
 // Provide decorations
 const decorations = /*@__PURE__*/Facet.define();
@@ -1933,6 +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 = Date.now();
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1965,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;
         }
     }
@@ -1987,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(() => {
@@ -2011,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 = [];
@@ -2098,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);
@@ -3737,7 +3756,7 @@ handlers.beforeinput = (view, event) => {
     }
 };
 
-const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line"];
+const wrappingWhiteSpace = ["pre-wrap", "normal", "pre-line", "break-spaces"];
 class HeightOracle {
     constructor() {
         this.doc = Text.empty;
@@ -4470,6 +4489,7 @@ class ViewState {
         this.paddingTop = 0;
         this.paddingBottom = 0;
         this.contentWidth = 0;
+        this.editorHeight = 0;
         this.heightOracle = new HeightOracle;
         // See VP.MaxDOMHeight
         this.scaler = IdScaler;
@@ -4569,6 +4589,10 @@ class ViewState {
                 this.contentWidth = contentWidth;
                 result |= 8 /* Geometry */;
             }
+            if (this.editorHeight != docView.view.scrollDOM.clientHeight) {
+                this.editorHeight = docView.view.scrollDOM.clientHeight;
+                result |= 8 /* Geometry */;
+            }
             if (dTop > 0 && dBottom > 0)
                 bias = Math.max(dTop, dBottom);
             else if (dTop < 0 && dBottom < 0)
@@ -5054,24 +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.
@@ -5096,6 +5126,16 @@ class DOMObserver {
                 this.flushSoon();
             };
         this.onSelectionChange = this.onSelectionChange.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);
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5116,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) {
@@ -5131,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;
@@ -5147,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;
@@ -5211,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;
@@ -5221,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)
@@ -5269,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);
@@ -5309,15 +5344,16 @@ class DOMObserver {
         }
     }
     destroy() {
+        var _a, _b, _c;
         this.stop();
-        if (this.intersection)
-            this.intersection.disconnect();
-        if (this.gapIntersection)
-            this.gapIntersection.disconnect();
+        (_a = this.intersection) === null || _a === void 0 ? void 0 : _a.disconnect();
+        (_b = this.gapIntersection) === null || _b === void 0 ? void 0 : _b.disconnect();
+        (_c = this.resize) === null || _c === void 0 ? void 0 : _c.disconnect();
         for (let dom of this.scrollTargets)
             dom.removeEventListener("scroll", this.onScroll);
         window.removeEventListener("scroll", this.onScroll);
         clearTimeout(this.parentCheck);
+        clearTimeout(this.resizeTimeout);
     }
 }
 function findChild(cView, dom, dir) {
@@ -5330,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
@@ -5749,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 */;
@@ -5826,7 +5864,7 @@ class EditorView {
             return;
         if (this.measureScheduled > -1)
             cancelAnimationFrame(this.measureScheduled);
-        this.measureScheduled = -1; // Prevent requestMeasure calls from scheduling another animation frame
+        this.measureScheduled = 0; // Prevent requestMeasure calls from scheduling another animation frame
         if (flush)
             this.observer.flush();
         let updated = null;
@@ -5866,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 {
@@ -5881,14 +5918,16 @@ 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;
             }
         }
         finally {
             this.updateState = 0 /* Idle */;
+            this.measureScheduled = -1;
         }
-        this.measureScheduled = -1;
         if (updated && !updated.empty)
             for (let listener of this.state.facet(updateListener))
                 listener(updated);
@@ -5905,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",
@@ -5921,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.17",
+  "version": "0.19.21",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",