@codemirror/view 6.39.9 → 6.39.10

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 6.39.10 (2026-01-13)
+
+### Bug fixes
+
+Fix a regression in the way widget are reused when content next to them changes.
+
+Make sure font metrics get recomputed on `fonts.ready` even if the line height doesn't change.
+
+Fix an issue where compositions next to a widget that create a new text node could get needlessly interrupted during an editor update.
+
 ## 6.39.9 (2026-01-06)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2502,8 +2502,6 @@ class TileCache {
     }
     // Put a tile in the cache.
     add(tile) {
-        if (tile.demo)
-            console.log("Add widget to cache");
         let i = tile.constructor.bucket, bucket = this.buckets[i];
         if (bucket.length < 6 /* C.Bucket */)
             bucket.push(tile);
@@ -2528,8 +2526,6 @@ class TileCache {
     }
     findWidget(widget, length, flags) {
         let widgets = this.buckets[0];
-        if (widget.demo)
-            console.log("looking for widget", widget, "in cache", widgets.slice());
         if (widgets.length)
             for (let i = 0, pass = 0;; i++) {
                 if (i == widgets.length) {
@@ -2545,7 +2541,7 @@ class TileCache {
                     widgets.splice(i, 1);
                     if (i < this.index[0])
                         this.index[0]--;
-                    if (tile.length == length && (tile.flags & (496 /* TileFlag.Widget */ | 1 /* TileFlag.BreakAfter */)) == flags) {
+                    if (tile.widget == widget && tile.length == length && (tile.flags & (496 /* TileFlag.Widget */ | 1 /* TileFlag.BreakAfter */)) == flags) {
                         this.reused.set(tile, 1 /* Reused.Full */);
                         return tile;
                     }
@@ -2616,7 +2612,7 @@ class TileUpdate {
             // focused text node and its parent nodes to remain stable at
             // that point in the document.
             if (composition && next.fromA <= composition.range.fromA && next.toA >= composition.range.toA) {
-                this.forward(next.fromA, composition.range.fromA);
+                this.forward(next.fromA, composition.range.fromA, composition.range.fromA < composition.range.toA ? 1 : -1);
                 this.emit(posB, composition.range.fromB);
                 this.cache.clear(); // Must not reuse DOM across composition
                 this.builder.addComposition(composition, compositionContext);
@@ -2775,14 +2771,14 @@ class TileUpdate {
         this.openWidget = openEnd > markCount;
         this.openMarks = openEnd;
     }
-    forward(from, to) {
+    forward(from, to, side = 1) {
         if (to - from <= 10) {
-            this.old.advance(to - from, 1, this.reuseWalker);
+            this.old.advance(to - from, side, this.reuseWalker);
         }
         else {
             this.old.advance(5, -1, this.reuseWalker);
             this.old.advance(to - from - 10, -1);
-            this.old.advance(5, 1, this.reuseWalker);
+            this.old.advance(5, side, this.reuseWalker);
         }
     }
     getCompositionContext(text) {
@@ -5204,7 +5200,8 @@ class HeightOracle {
     }
     refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
-        let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
+        let changed = Math.abs(lineHeight - this.lineHeight) > 0.3 || this.lineWrapping != lineWrapping ||
+            Math.abs(charWidth - this.charWidth) > 0.1;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
@@ -6118,7 +6115,7 @@ class ViewState {
         let oracle = this.heightOracle;
         let whiteSpace = style.whiteSpace;
         this.defaultTextDirection = style.direction == "rtl" ? exports.Direction.RTL : exports.Direction.LTR;
-        let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
+        let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace) || this.mustMeasureContent;
         let domRect = dom.getBoundingClientRect();
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
         this.contentDOMHeight = domRect.height;
@@ -7694,7 +7691,10 @@ class EditorView {
         this.updateState = 0 /* UpdateState.Idle */;
         this.requestMeasure();
         if ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)
-            document.fonts.ready.then(() => this.requestMeasure());
+            document.fonts.ready.then(() => {
+                this.viewState.mustMeasureContent = true;
+                this.requestMeasure();
+            });
     }
     dispatch(...input) {
         let trs = input.length == 1 && input[0] instanceof state.Transaction ? input

package/dist/index.js

@@ -2498,8 +2498,6 @@ class TileCache {
     }
     // Put a tile in the cache.
     add(tile) {
-        if (tile.demo)
-            console.log("Add widget to cache");
         let i = tile.constructor.bucket, bucket = this.buckets[i];
         if (bucket.length < 6 /* C.Bucket */)
             bucket.push(tile);
@@ -2524,8 +2522,6 @@ class TileCache {
     }
     findWidget(widget, length, flags) {
         let widgets = this.buckets[0];
-        if (widget.demo)
-            console.log("looking for widget", widget, "in cache", widgets.slice());
         if (widgets.length)
             for (let i = 0, pass = 0;; i++) {
                 if (i == widgets.length) {
@@ -2541,7 +2537,7 @@ class TileCache {
                     widgets.splice(i, 1);
                     if (i < this.index[0])
                         this.index[0]--;
-                    if (tile.length == length && (tile.flags & (496 /* TileFlag.Widget */ | 1 /* TileFlag.BreakAfter */)) == flags) {
+                    if (tile.widget == widget && tile.length == length && (tile.flags & (496 /* TileFlag.Widget */ | 1 /* TileFlag.BreakAfter */)) == flags) {
                         this.reused.set(tile, 1 /* Reused.Full */);
                         return tile;
                     }
@@ -2612,7 +2608,7 @@ class TileUpdate {
             // focused text node and its parent nodes to remain stable at
             // that point in the document.
             if (composition && next.fromA <= composition.range.fromA && next.toA >= composition.range.toA) {
-                this.forward(next.fromA, composition.range.fromA);
+                this.forward(next.fromA, composition.range.fromA, composition.range.fromA < composition.range.toA ? 1 : -1);
                 this.emit(posB, composition.range.fromB);
                 this.cache.clear(); // Must not reuse DOM across composition
                 this.builder.addComposition(composition, compositionContext);
@@ -2771,14 +2767,14 @@ class TileUpdate {
         this.openWidget = openEnd > markCount;
         this.openMarks = openEnd;
     }
-    forward(from, to) {
+    forward(from, to, side = 1) {
         if (to - from <= 10) {
-            this.old.advance(to - from, 1, this.reuseWalker);
+            this.old.advance(to - from, side, this.reuseWalker);
         }
         else {
             this.old.advance(5, -1, this.reuseWalker);
             this.old.advance(to - from - 10, -1);
-            this.old.advance(5, 1, this.reuseWalker);
+            this.old.advance(5, side, this.reuseWalker);
         }
     }
     getCompositionContext(text) {
@@ -5200,7 +5196,8 @@ class HeightOracle {
     }
     refresh(whiteSpace, lineHeight, charWidth, textHeight, lineLength, knownHeights) {
         let lineWrapping = wrappingWhiteSpace.indexOf(whiteSpace) > -1;
-        let changed = Math.round(lineHeight) != Math.round(this.lineHeight) || this.lineWrapping != lineWrapping;
+        let changed = Math.abs(lineHeight - this.lineHeight) > 0.3 || this.lineWrapping != lineWrapping ||
+            Math.abs(charWidth - this.charWidth) > 0.1;
         this.lineWrapping = lineWrapping;
         this.lineHeight = lineHeight;
         this.charWidth = charWidth;
@@ -6113,7 +6110,7 @@ class ViewState {
         let oracle = this.heightOracle;
         let whiteSpace = style.whiteSpace;
         this.defaultTextDirection = style.direction == "rtl" ? Direction.RTL : Direction.LTR;
-        let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace);
+        let refresh = this.heightOracle.mustRefreshForWrapping(whiteSpace) || this.mustMeasureContent;
         let domRect = dom.getBoundingClientRect();
         let measureContent = refresh || this.mustMeasureContent || this.contentDOMHeight != domRect.height;
         this.contentDOMHeight = domRect.height;
@@ -7689,7 +7686,10 @@ class EditorView {
         this.updateState = 0 /* UpdateState.Idle */;
         this.requestMeasure();
         if ((_a = document.fonts) === null || _a === void 0 ? void 0 : _a.ready)
-            document.fonts.ready.then(() => this.requestMeasure());
+            document.fonts.ready.then(() => {
+                this.viewState.mustMeasureContent = true;
+                this.requestMeasure();
+            });
     }
     dispatch(...input) {
         let trs = input.length == 1 && input[0] instanceof Transaction ? input

package/package.json

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