@codemirror/view 0.20.5 → 0.20.6

package/CHANGELOG.md

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

package/dist/index.cjs

@@ -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;
 }
 
 /**
@@ -4747,24 +4749,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;
@@ -6053,7 +6053,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)
@@ -6091,7 +6091,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")));
         }
@@ -6100,7 +6100,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))
@@ -6280,12 +6280,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;

package/dist/index.js

@@ -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;
 }
 
 /**
@@ -4740,24 +4742,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;
@@ -6046,7 +6046,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)
@@ -6084,7 +6084,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")));
         }
@@ -6093,7 +6093,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))
@@ -6273,12 +6273,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;

package/package.json

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