@codemirror/view 6.24.0 → 6.25.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 6.25.0 (2024-03-04)
+
+### Bug fixes
+
+Properly recognize Android GBoard enter presses that strip a space at the end of the line as enter.
+
+Fix a bug that caused the gutter to have the wrong height when the editor was scaled after construction.
+
+When starting a composition after a non-inclusive mark decoration, temporarily insert a widget that prevents the composed text from inheriting that mark's styles.
+
+Make sure the selection is repositioned when a transaction changes decorations without changing the document.
+
+### New features
+
+View plugins can now provide a `docViewUpdate` method that is called whenever the document view is updated.
+
+Layers now take a `updateOnDocUpdate` option that controls whether they are automatically updated when the document view changes.
+
+## 6.24.1 (2024-02-19)
+
+### Bug fixes
+
+Fix a crash that happens when hover tooltips are active during changes, introduced in 6.24.0.
+
 ## 6.24.0 (2024-02-09)
 
 ### Bug fixes

package/dist/index.cjs

@@ -1726,10 +1726,10 @@ class ContentBuilder {
             if (deco.block) {
                 if (deco.startSide > 0 && !this.posCovered())
                     this.getLine();
-                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, deco));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || NullWidget.block, len, deco));
             }
             else {
-                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
+                let view = WidgetView.create(deco.widget || NullWidget.inline, len, len ? 0 : deco.startSide);
                 let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length &&
                     (from < to || deco.startSide > 0);
                 let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
@@ -1790,6 +1790,8 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
     get isHidden() { return true; }
 }
+NullWidget.inline = new NullWidget("span");
+NullWidget.block = new NullWidget("div");
 
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
@@ -2650,10 +2652,11 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.decorations = [];
-        this.dynamicDecorationMap = [];
+        this.dynamicDecorationMap = [false];
         this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
+        this.compositionBarrier = Decoration.none;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2917,7 +2920,7 @@ class DocView extends ContentView {
     // composition, avoid moving it across it and disrupting the
     // composition.
     suppressWidgetCursorChange(sel, cursor) {
-        return this.hasComposition && cursor.empty &&
+        return this.hasComposition && cursor.empty && !this.compositionBarrier.size &&
             isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset) &&
             this.posFromDOM(sel.focusNode, sel.focusOffset) == cursor.head;
     }
@@ -3125,8 +3128,9 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
-        let allDeco = this.view.state.facet(decorations).map((d, i) => {
-            let dynamic = this.dynamicDecorationMap[i] = typeof d == "function";
+        let i = 1;
+        let allDeco = this.view.state.facet(decorations).map(d => {
+            let dynamic = this.dynamicDecorationMap[i++] = typeof d == "function";
             return dynamic ? d(this.view) : d;
         });
         let dynamicOuter = false, outerDeco = this.view.state.facet(outerDecorations).map((d, i) => {
@@ -3136,16 +3140,46 @@ class DocView extends ContentView {
             return dynamic ? d(this.view) : d;
         });
         if (outerDeco.length) {
-            this.dynamicDecorationMap[allDeco.length] = dynamicOuter;
+            this.dynamicDecorationMap[i++] = dynamicOuter;
             allDeco.push(state.RangeSet.join(outerDeco));
         }
-        for (let i = allDeco.length; i < allDeco.length + 3; i++)
-            this.dynamicDecorationMap[i] = false;
-        return this.decorations = [
+        this.decorations = [
+            this.compositionBarrier,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
         ];
+        while (i < this.decorations.length)
+            this.dynamicDecorationMap[i++] = false;
+        return this.decorations;
+    }
+    // Starting a composition will style the inserted text with the
+    // style of the text before it, and this is only cleared when the
+    // composition ends, because touching it before that will abort it.
+    // This (called from compositionstart handler) tries to notice when
+    // the cursor is after a non-inclusive mark, where the styling could
+    // be jarring, and insert an ad-hoc widget before the cursor to
+    // isolate it from the style before it.
+    maybeCreateCompositionBarrier() {
+        let { main: { head, empty } } = this.view.state.selection;
+        if (!empty)
+            return false;
+        let found = null;
+        for (let set of this.decorations) {
+            set.between(head, head, (from, to, value) => {
+                if (value.point)
+                    found = false;
+                else if (value.endSide < 0 && from < head && to == head)
+                    found = true;
+            });
+            if (found === false)
+                break;
+        }
+        this.compositionBarrier = found ? Decoration.set(compositionBarrierWidget.range(head)) : Decoration.none;
+        return !!found;
+    }
+    clearCompositionBarrier() {
+        this.compositionBarrier = Decoration.none;
     }
     scrollIntoView(target) {
         if (target.isSnapshot) {
@@ -3170,6 +3204,7 @@ class DocView extends ContentView {
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == exports.Direction.LTR);
     }
 }
+const compositionBarrierWidget = Decoration.widget({ side: -1, widget: NullWidget.inline });
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
         (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
@@ -4419,6 +4454,10 @@ observers.compositionstart = observers.compositionupdate = view => {
     if (view.inputState.composing < 0) {
         // FIXME possibly set a timeout to clear it again on Android
         view.inputState.composing = 0;
+        if (view.docView.maybeCreateCompositionBarrier()) {
+            view.update([]);
+            view.docView.clearCompositionBarrier();
+        }
     }
 };
 observers.compositionend = view => {
@@ -6298,7 +6337,10 @@ function applyDOMChange(view, domChange) {
         // events and the pendingAndroidKey mechanism, but that's not
         // reliable in all situations.)
         if (browser.android &&
-            ((change.from == sel.from && change.to == sel.to &&
+            ((change.to == sel.to &&
+                // GBoard will sometimes remove a space it just inserted
+                // after a completion when you press enter
+                (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
@@ -7118,6 +7160,8 @@ class EditorView {
             this.viewState.mustMeasureContent = true;
         if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
+        if (redrawn)
+            this.docViewUpdate();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener)) {
                 try {
@@ -7205,6 +7249,19 @@ class EditorView {
         if (prevSpecs != specs)
             this.inputState.ensureHandlers(this.plugins);
     }
+    docViewUpdate() {
+        for (let plugin of this.plugins) {
+            let val = plugin.value;
+            if (val && val.docViewUpdate) {
+                try {
+                    val.docViewUpdate(this);
+                }
+                catch (e) {
+                    logException(this.state, e, "doc view update listener");
+                }
+            }
+        }
+    }
     /**
     @internal
     */
@@ -7275,6 +7332,8 @@ class EditorView {
                     this.inputState.update(update);
                     this.updateAttrs();
                     redrawn = this.docView.update(update);
+                    if (redrawn)
+                        this.docViewUpdate();
                 }
                 for (let i = 0; i < measuring.length; i++)
                     if (measured[i] != BadMeasure) {
@@ -8423,6 +8482,10 @@ class LayerView {
             update.view.requestMeasure(this.measureReq);
         }
     }
+    docViewUpdate(view) {
+        if (this.layer.updateOnDocViewUpdate !== false)
+            view.requestMeasure(this.measureReq);
+    }
     setOrder(state) {
         let pos = 0, order = state.facet(layerOrder);
         while (pos < order.length && order[pos] != this.layer)
@@ -9811,6 +9874,7 @@ function hoverTooltip(source, options = {}) {
                 else if (options.hideOn)
                     value = value.filter(v => !options.hideOn(tr, v));
                 if (tr.docChanged) {
+                    let mapped = [];
                     for (let tooltip of value) {
                         let newPos = tr.changes.mapPos(tooltip.pos, -1, state.MapMode.TrackDel);
                         if (newPos != null) {
@@ -9818,8 +9882,10 @@ function hoverTooltip(source, options = {}) {
                             copy.pos = newPos;
                             if (copy.end != null)
                                 copy.end = tr.changes.mapPos(copy.end);
+                            mapped.push(copy);
                         }
                     }
+                    value = mapped;
                 }
             }
             for (let effect of tr.effects) {
@@ -10152,8 +10218,9 @@ const gutterView = ViewPlugin.fromClass(class {
             let vpOverlap = Math.min(vpA.to, vpB.to) - Math.max(vpA.from, vpB.from);
             this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8);
         }
-        if (update.geometryChanged)
-            this.dom.style.minHeight = this.view.contentHeight + "px";
+        if (update.geometryChanged) {
+            this.dom.style.minHeight = (this.view.contentHeight / this.view.scaleY) + "px";
+        }
         if (this.view.state.facet(unfixGutters) != !this.fixed) {
             this.fixed = !this.fixed;
             this.dom.style.position = this.fixed ? "sticky" : "";

package/dist/index.d.cts

@@ -404,6 +404,13 @@ interface PluginValue extends Object {
     */
     update?(update: ViewUpdate): void;
     /**
+    Called when the document view is updated (due to content,
+    decoration, or viewport changes). Should not try to immediately
+    start another view update. Often useful for calling
+    [`requestMeasure`](https://codemirror.net/6/docs/ref/#view.EditorView.requestMeasure).
+    */
+    docViewUpdate?(view: EditorView): void;
+    /**
     Called when the plugin is no longer going to be used. Should
     revert any changes the plugin made to the DOM.
     */
@@ -791,6 +798,7 @@ declare class EditorView {
     */
     setState(newState: EditorState): void;
     private updatePlugins;
+    private docViewUpdate;
     /**
     Get the CSS classes for the currently active editor themes.
     */
@@ -1638,6 +1646,11 @@ interface LayerConfig {
     */
     update(update: ViewUpdate, layer: HTMLElement): boolean;
     /**
+    Whether to update this layer every time the document view
+    changes. Defaults to true.
+    */
+    updateOnDocViewUpdate: boolean;
+    /**
     Build a set of markers for this layer, and measure their
     dimensions.
     */

package/dist/index.d.ts

@@ -404,6 +404,13 @@ interface PluginValue extends Object {
     */
     update?(update: ViewUpdate): void;
     /**
+    Called when the document view is updated (due to content,
+    decoration, or viewport changes). Should not try to immediately
+    start another view update. Often useful for calling
+    [`requestMeasure`](https://codemirror.net/6/docs/ref/#view.EditorView.requestMeasure).
+    */
+    docViewUpdate?(view: EditorView): void;
+    /**
     Called when the plugin is no longer going to be used. Should
     revert any changes the plugin made to the DOM.
     */
@@ -791,6 +798,7 @@ declare class EditorView {
     */
     setState(newState: EditorState): void;
     private updatePlugins;
+    private docViewUpdate;
     /**
     Get the CSS classes for the currently active editor themes.
     */
@@ -1638,6 +1646,11 @@ interface LayerConfig {
     */
     update(update: ViewUpdate, layer: HTMLElement): boolean;
     /**
+    Whether to update this layer every time the document view
+    changes. Defaults to true.
+    */
+    updateOnDocViewUpdate: boolean;
+    /**
     Build a set of markers for this layer, and measure their
     dimensions.
     */

package/dist/index.js

@@ -1723,10 +1723,10 @@ class ContentBuilder {
             if (deco.block) {
                 if (deco.startSide > 0 && !this.posCovered())
                     this.getLine();
-                this.addBlockWidget(new BlockWidgetView(deco.widget || new NullWidget("div"), len, deco));
+                this.addBlockWidget(new BlockWidgetView(deco.widget || NullWidget.block, len, deco));
             }
             else {
-                let view = WidgetView.create(deco.widget || new NullWidget("span"), len, len ? 0 : deco.startSide);
+                let view = WidgetView.create(deco.widget || NullWidget.inline, len, len ? 0 : deco.startSide);
                 let cursorBefore = this.atCursorPos && !view.isEditable && openStart <= active.length &&
                     (from < to || deco.startSide > 0);
                 let cursorAfter = !view.isEditable && (from < to || openStart > active.length || deco.startSide <= 0);
@@ -1787,6 +1787,8 @@ class NullWidget extends WidgetType {
     updateDOM(elt) { return elt.nodeName.toLowerCase() == this.tag; }
     get isHidden() { return true; }
 }
+NullWidget.inline = /*@__PURE__*/new NullWidget("span");
+NullWidget.block = /*@__PURE__*/new NullWidget("div");
 
 /**
 Used to indicate [text direction](https://codemirror.net/6/docs/ref/#view.EditorView.textDirection).
@@ -2646,10 +2648,11 @@ class DocView extends ContentView {
         super();
         this.view = view;
         this.decorations = [];
-        this.dynamicDecorationMap = [];
+        this.dynamicDecorationMap = [false];
         this.domChanged = null;
         this.hasComposition = null;
         this.markedForComposition = new Set;
+        this.compositionBarrier = Decoration.none;
         // Track a minimum width for the editor. When measuring sizes in
         // measureVisibleLineHeights, this is updated to point at the width
         // of a given element and its extent in the document. When a change
@@ -2913,7 +2916,7 @@ class DocView extends ContentView {
     // composition, avoid moving it across it and disrupting the
     // composition.
     suppressWidgetCursorChange(sel, cursor) {
-        return this.hasComposition && cursor.empty &&
+        return this.hasComposition && cursor.empty && !this.compositionBarrier.size &&
             isEquivalentPosition(sel.focusNode, sel.focusOffset, sel.anchorNode, sel.anchorOffset) &&
             this.posFromDOM(sel.focusNode, sel.focusOffset) == cursor.head;
     }
@@ -3121,8 +3124,9 @@ class DocView extends ContentView {
         return Decoration.set(deco);
     }
     updateDeco() {
-        let allDeco = this.view.state.facet(decorations).map((d, i) => {
-            let dynamic = this.dynamicDecorationMap[i] = typeof d == "function";
+        let i = 1;
+        let allDeco = this.view.state.facet(decorations).map(d => {
+            let dynamic = this.dynamicDecorationMap[i++] = typeof d == "function";
             return dynamic ? d(this.view) : d;
         });
         let dynamicOuter = false, outerDeco = this.view.state.facet(outerDecorations).map((d, i) => {
@@ -3132,16 +3136,46 @@ class DocView extends ContentView {
             return dynamic ? d(this.view) : d;
         });
         if (outerDeco.length) {
-            this.dynamicDecorationMap[allDeco.length] = dynamicOuter;
+            this.dynamicDecorationMap[i++] = dynamicOuter;
             allDeco.push(RangeSet.join(outerDeco));
         }
-        for (let i = allDeco.length; i < allDeco.length + 3; i++)
-            this.dynamicDecorationMap[i] = false;
-        return this.decorations = [
+        this.decorations = [
+            this.compositionBarrier,
             ...allDeco,
             this.computeBlockGapDeco(),
             this.view.viewState.lineGapDeco
         ];
+        while (i < this.decorations.length)
+            this.dynamicDecorationMap[i++] = false;
+        return this.decorations;
+    }
+    // Starting a composition will style the inserted text with the
+    // style of the text before it, and this is only cleared when the
+    // composition ends, because touching it before that will abort it.
+    // This (called from compositionstart handler) tries to notice when
+    // the cursor is after a non-inclusive mark, where the styling could
+    // be jarring, and insert an ad-hoc widget before the cursor to
+    // isolate it from the style before it.
+    maybeCreateCompositionBarrier() {
+        let { main: { head, empty } } = this.view.state.selection;
+        if (!empty)
+            return false;
+        let found = null;
+        for (let set of this.decorations) {
+            set.between(head, head, (from, to, value) => {
+                if (value.point)
+                    found = false;
+                else if (value.endSide < 0 && from < head && to == head)
+                    found = true;
+            });
+            if (found === false)
+                break;
+        }
+        this.compositionBarrier = found ? Decoration.set(compositionBarrierWidget.range(head)) : Decoration.none;
+        return !!found;
+    }
+    clearCompositionBarrier() {
+        this.compositionBarrier = Decoration.none;
     }
     scrollIntoView(target) {
         if (target.isSnapshot) {
@@ -3166,6 +3200,7 @@ class DocView extends ContentView {
         scrollRectIntoView(this.view.scrollDOM, targetRect, range.head < range.anchor ? -1 : 1, target.x, target.y, Math.max(Math.min(target.xMargin, offsetWidth), -offsetWidth), Math.max(Math.min(target.yMargin, offsetHeight), -offsetHeight), this.view.textDirection == Direction.LTR);
     }
 }
+const compositionBarrierWidget = /*@__PURE__*/Decoration.widget({ side: -1, widget: NullWidget.inline });
 function betweenUneditable(pos) {
     return pos.node.nodeType == 1 && pos.node.firstChild &&
         (pos.offset == 0 || pos.node.childNodes[pos.offset - 1].contentEditable == "false") &&
@@ -4415,6 +4450,10 @@ observers.compositionstart = observers.compositionupdate = view => {
     if (view.inputState.composing < 0) {
         // FIXME possibly set a timeout to clear it again on Android
         view.inputState.composing = 0;
+        if (view.docView.maybeCreateCompositionBarrier()) {
+            view.update([]);
+            view.docView.clearCompositionBarrier();
+        }
     }
 };
 observers.compositionend = view => {
@@ -6293,7 +6332,10 @@ function applyDOMChange(view, domChange) {
         // events and the pendingAndroidKey mechanism, but that's not
         // reliable in all situations.)
         if (browser.android &&
-            ((change.from == sel.from && change.to == sel.to &&
+            ((change.to == sel.to &&
+                // GBoard will sometimes remove a space it just inserted
+                // after a completion when you press enter
+                (change.from == sel.from || change.from == sel.from - 1 && view.state.sliceDoc(change.from, sel.from) == " ") &&
                 change.insert.length == 1 && change.insert.lines == 2 &&
                 dispatchKey(view.contentDOM, "Enter", 13)) ||
                 ((change.from == sel.from - 1 && change.to == sel.to && change.insert.length == 0 ||
@@ -7113,6 +7155,8 @@ class EditorView {
             this.viewState.mustMeasureContent = true;
         if (redrawn || attrsChanged || scrollTarget || this.viewState.mustEnforceCursorAssoc || this.viewState.mustMeasureContent)
             this.requestMeasure();
+        if (redrawn)
+            this.docViewUpdate();
         if (!update.empty)
             for (let listener of this.state.facet(updateListener)) {
                 try {
@@ -7200,6 +7244,19 @@ class EditorView {
         if (prevSpecs != specs)
             this.inputState.ensureHandlers(this.plugins);
     }
+    docViewUpdate() {
+        for (let plugin of this.plugins) {
+            let val = plugin.value;
+            if (val && val.docViewUpdate) {
+                try {
+                    val.docViewUpdate(this);
+                }
+                catch (e) {
+                    logException(this.state, e, "doc view update listener");
+                }
+            }
+        }
+    }
     /**
     @internal
     */
@@ -7270,6 +7327,8 @@ class EditorView {
                     this.inputState.update(update);
                     this.updateAttrs();
                     redrawn = this.docView.update(update);
+                    if (redrawn)
+                        this.docViewUpdate();
                 }
                 for (let i = 0; i < measuring.length; i++)
                     if (measured[i] != BadMeasure) {
@@ -8418,6 +8477,10 @@ class LayerView {
             update.view.requestMeasure(this.measureReq);
         }
     }
+    docViewUpdate(view) {
+        if (this.layer.updateOnDocViewUpdate !== false)
+            view.requestMeasure(this.measureReq);
+    }
     setOrder(state) {
         let pos = 0, order = state.facet(layerOrder);
         while (pos < order.length && order[pos] != this.layer)
@@ -9806,6 +9869,7 @@ function hoverTooltip(source, options = {}) {
                 else if (options.hideOn)
                     value = value.filter(v => !options.hideOn(tr, v));
                 if (tr.docChanged) {
+                    let mapped = [];
                     for (let tooltip of value) {
                         let newPos = tr.changes.mapPos(tooltip.pos, -1, MapMode.TrackDel);
                         if (newPos != null) {
@@ -9813,8 +9877,10 @@ function hoverTooltip(source, options = {}) {
                             copy.pos = newPos;
                             if (copy.end != null)
                                 copy.end = tr.changes.mapPos(copy.end);
+                            mapped.push(copy);
                         }
                     }
+                    value = mapped;
                 }
             }
             for (let effect of tr.effects) {
@@ -10147,8 +10213,9 @@ const gutterView = /*@__PURE__*/ViewPlugin.fromClass(class {
             let vpOverlap = Math.min(vpA.to, vpB.to) - Math.max(vpA.from, vpB.from);
             this.syncGutters(vpOverlap < (vpB.to - vpB.from) * 0.8);
         }
-        if (update.geometryChanged)
-            this.dom.style.minHeight = this.view.contentHeight + "px";
+        if (update.geometryChanged) {
+            this.dom.style.minHeight = (this.view.contentHeight / this.view.scaleY) + "px";
+        }
         if (this.view.state.facet(unfixGutters) != !this.fixed) {
             this.fixed = !this.fixed;
             this.dom.style.position = this.fixed ? "sticky" : "";

package/package.json

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