@codemirror/view 0.19.19 → 0.19.20

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 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

package/dist/index.cjs

@@ -1943,6 +1943,9 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = 0;
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1956,6 +1959,7 @@ 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)) {
@@ -4482,6 +4486,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;
@@ -4581,6 +4586,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)
@@ -5072,6 +5081,7 @@ class DOMObserver {
         this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
+        this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5108,6 +5118,13 @@ 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() - 100)
+                    this.view.requestMeasure();
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5321,11 +5338,11 @@ 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);
@@ -5838,7 +5855,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;
@@ -5899,8 +5916,8 @@ class EditorView {
         }
         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);

package/dist/index.js

@@ -1939,6 +1939,9 @@ class DocView extends ContentView {
         // we don't mess it up when reading it back it
         this.impreciseAnchor = null;
         this.impreciseHead = null;
+        // Used by the resize observer to ignore resizes that we caused
+        // ourselves
+        this.lastUpdate = 0;
         this.setDOM(view.contentDOM);
         this.children = [new LineView];
         this.children[0].setParent(this);
@@ -1952,6 +1955,7 @@ 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)) {
@@ -4476,6 +4480,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 +4580,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)
@@ -5066,6 +5075,7 @@ class DOMObserver {
         this.lastFlush = 0;
         this.scrollTargets = [];
         this.intersection = null;
+        this.resize = null;
         this.intersecting = false;
         this.gapIntersection = null;
         this.gaps = [];
@@ -5102,6 +5112,13 @@ 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() - 100)
+                    this.view.requestMeasure();
+            });
+            this.resize.observe(view.scrollDOM);
+        }
         this.start();
         this.onScroll = this.onScroll.bind(this);
         window.addEventListener("scroll", this.onScroll);
@@ -5315,11 +5332,11 @@ 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);
@@ -5832,7 +5849,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;
@@ -5893,8 +5910,8 @@ class EditorView {
         }
         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);

package/package.json

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