@codemirror/view 6.39.8 → 6.39.10

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 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
+
+Fix a bug where `EditorSelection.cursor()` with a non-zero `assoc` value would not be visually respected at soft-wrap boundaries on initial view creation.
+
+Fix error caused by hover tooltips running a scheduled timeout after their editor has been destroyed.
+
+Fix a bug that caused `EditorView.outerDecorations` to not affect the content height map.
+
+Fix an issue where composition near a widget could get unnecessarily interrupted.
+
 ## 6.39.8 (2025-12-30)
 
 ### Bug fixes

package/dist/index.cjs

@@ -2541,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;
                     }
@@ -2562,6 +2562,10 @@ class TileCache {
         this.reused.set(tile, type);
         return tile.dom;
     }
+    clear() {
+        for (let i = 0; i < this.buckets.length; i++)
+            this.buckets[i].length = this.index[i] = 0;
+    }
 }
 // This class organizes a pass over the document, guided by the array
 // of replaced ranges. For ranges that haven't changed, it iterates
@@ -2604,17 +2608,20 @@ class TileUpdate {
             }
             if (!next)
                 break;
-            this.forward(next.fromA, next.toA);
             // Compositions need to be handled specially, forcing the
             // 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, 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);
                 this.text.skip(composition.range.toB - composition.range.fromB);
+                this.forward(composition.range.fromA, next.toA);
                 this.emit(composition.range.toB, next.toB);
             }
             else {
+                this.forward(next.fromA, next.toA);
                 this.emit(posB, next.toB);
             }
             posB = next.toB;
@@ -2764,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) {
@@ -5193,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;
@@ -6027,7 +6035,7 @@ class ViewState {
         this.mustEnforceCursorAssoc = false;
         let guessWrapping = state$1.facet(contentAttributes).some(v => typeof v != "function" && v.class == "cm-lineWrapping");
         this.heightOracle = new HeightOracle(guessWrapping);
-        this.stateDeco = state$1.facet(decorations).filter(d => typeof d != "function");
+        this.stateDeco = staticDeco(state$1);
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, state.Text.empty, this.heightOracle.setDoc(state$1.doc), [new ChangedRange(0, 0, 0, state$1.doc.length)]);
         for (let i = 0; i < 2; i++) {
             this.viewport = this.getViewport(0, null);
@@ -6066,7 +6074,7 @@ class ViewState {
     update(update, scrollTarget = null) {
         this.state = update.state;
         let prevDeco = this.stateDeco;
-        this.stateDeco = this.state.facet(decorations).filter(d => typeof d != "function");
+        this.stateDeco = staticDeco(this.state);
         let contentChanges = update.changedRanges;
         let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : state.ChangeSet.empty(this.state.doc.length)));
         let prevHeight = this.heightMap.height;
@@ -6097,7 +6105,7 @@ class ViewState {
         update.flags |= this.computeVisibleRanges(update.changes);
         if (scrollTarget)
             this.scrollTarget = scrollTarget;
-        if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
+        if (!this.mustEnforceCursorAssoc && (update.selectionSet || update.focusChanged) && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc &&
             !update.state.facet(nativeSelectionHidden))
             this.mustEnforceCursorAssoc = true;
@@ -6107,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;
@@ -6495,6 +6503,13 @@ const IdScaler = {
     scale: 1,
     eq(other) { return other == this; }
 };
+function staticDeco(state$1) {
+    let deco = state$1.facet(decorations).filter(d => typeof d != "function");
+    let outer = state$1.facet(outerDecorations).filter(d => typeof d != "function");
+    if (outer.length)
+        deco.push(state.RangeSet.join(outer));
+    return deco;
+}
 // When the height is too big (> VP.MaxDOMHeight), scale down the
 // regions outside the viewports so that the total height is
 // VP.MaxDOMHeight.
@@ -7676,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
@@ -10524,6 +10542,7 @@ class HoverPlugin {
     }
     destroy() {
         clearTimeout(this.hoverTimeout);
+        clearTimeout(this.restartTimeout);
         this.view.dom.removeEventListener("mouseleave", this.mouseleave);
         this.view.dom.removeEventListener("mousemove", this.mousemove);
     }

package/dist/index.js

@@ -2537,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;
                     }
@@ -2558,6 +2558,10 @@ class TileCache {
         this.reused.set(tile, type);
         return tile.dom;
     }
+    clear() {
+        for (let i = 0; i < this.buckets.length; i++)
+            this.buckets[i].length = this.index[i] = 0;
+    }
 }
 // This class organizes a pass over the document, guided by the array
 // of replaced ranges. For ranges that haven't changed, it iterates
@@ -2600,17 +2604,20 @@ class TileUpdate {
             }
             if (!next)
                 break;
-            this.forward(next.fromA, next.toA);
             // Compositions need to be handled specially, forcing the
             // 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, 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);
                 this.text.skip(composition.range.toB - composition.range.fromB);
+                this.forward(composition.range.fromA, next.toA);
                 this.emit(composition.range.toB, next.toB);
             }
             else {
+                this.forward(next.fromA, next.toA);
                 this.emit(posB, next.toB);
             }
             posB = next.toB;
@@ -2760,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) {
@@ -5189,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;
@@ -6022,7 +6030,7 @@ class ViewState {
         this.mustEnforceCursorAssoc = false;
         let guessWrapping = state.facet(contentAttributes).some(v => typeof v != "function" && v.class == "cm-lineWrapping");
         this.heightOracle = new HeightOracle(guessWrapping);
-        this.stateDeco = state.facet(decorations).filter(d => typeof d != "function");
+        this.stateDeco = staticDeco(state);
         this.heightMap = HeightMap.empty().applyChanges(this.stateDeco, Text.empty, this.heightOracle.setDoc(state.doc), [new ChangedRange(0, 0, 0, state.doc.length)]);
         for (let i = 0; i < 2; i++) {
             this.viewport = this.getViewport(0, null);
@@ -6061,7 +6069,7 @@ class ViewState {
     update(update, scrollTarget = null) {
         this.state = update.state;
         let prevDeco = this.stateDeco;
-        this.stateDeco = this.state.facet(decorations).filter(d => typeof d != "function");
+        this.stateDeco = staticDeco(this.state);
         let contentChanges = update.changedRanges;
         let heightChanges = ChangedRange.extendWithRanges(contentChanges, heightRelevantDecoChanges(prevDeco, this.stateDeco, update ? update.changes : ChangeSet.empty(this.state.doc.length)));
         let prevHeight = this.heightMap.height;
@@ -6092,7 +6100,7 @@ class ViewState {
         update.flags |= this.computeVisibleRanges(update.changes);
         if (scrollTarget)
             this.scrollTarget = scrollTarget;
-        if (!this.mustEnforceCursorAssoc && update.selectionSet && update.view.lineWrapping &&
+        if (!this.mustEnforceCursorAssoc && (update.selectionSet || update.focusChanged) && update.view.lineWrapping &&
             update.state.selection.main.empty && update.state.selection.main.assoc &&
             !update.state.facet(nativeSelectionHidden))
             this.mustEnforceCursorAssoc = true;
@@ -6102,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;
@@ -6490,6 +6498,13 @@ const IdScaler = {
     scale: 1,
     eq(other) { return other == this; }
 };
+function staticDeco(state) {
+    let deco = state.facet(decorations).filter(d => typeof d != "function");
+    let outer = state.facet(outerDecorations).filter(d => typeof d != "function");
+    if (outer.length)
+        deco.push(RangeSet.join(outer));
+    return deco;
+}
 // When the height is too big (> VP.MaxDOMHeight), scale down the
 // regions outside the viewports so that the total height is
 // VP.MaxDOMHeight.
@@ -7671,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
@@ -10519,6 +10537,7 @@ class HoverPlugin {
     }
     destroy() {
         clearTimeout(this.hoverTimeout);
+        clearTimeout(this.restartTimeout);
         this.view.dom.removeEventListener("mouseleave", this.mouseleave);
         this.view.dom.removeEventListener("mousemove", this.mousemove);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codemirror/view",
-  "version": "6.39.8",
+  "version": "6.39.10",
   "description": "DOM view component for the CodeMirror code editor",
   "scripts": {
     "test": "cm-runtests",
@@ -36,6 +36,6 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/codemirror/view.git"
+    "url": "git+https://github.com/codemirror/view.git"
   }
 }