@codemirror/view 6.11.2 → 6.12.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 6.12.0 (2023-05-18)
+
+### Bug fixes
+
+Remove an accidentally included `console.log`.
+
+### New features
+
+`EditorViewConfig.dispatch` is now passed the view object as a second argument.
+
+## 6.11.3 (2023-05-17)
+
+### Bug fixes
+
+Make sure pointer selection respects `EditorView.atomicRanges`.
+
+Preserve DOM widgets when their decoration type changes but they otherwise stay in the same place.
+
+Fix a bug in `drawSelection` that could lead to invisible or incorrect selections for a blank line below a block widget.
+
 ## 6.11.2 (2023-05-13)
 
 ### Bug fixes

package/dist/index.cjs

@@ -822,6 +822,9 @@ function textCoords(text, pos, side) {
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends ContentView {
+    static create(widget, length, side) {
+        return new (widget.customView || WidgetView)(widget, length, side);
+    }
     constructor(widget, length, side) {
         super();
         this.widget = widget;
@@ -829,9 +832,6 @@ class WidgetView extends ContentView {
         this.side = side;
         this.prevWidget = null;
     }
-    static create(widget, length, side) {
-        return new (widget.customView || WidgetView)(widget, length, side);
-    }
     split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
         this.length -= from;
@@ -1647,7 +1647,7 @@ class BlockWidgetView extends ContentView {
     }
     domBoundsAround() { return null; }
     become(other) {
-        if (other instanceof BlockWidgetView && other.type == this.type &&
+        if (other instanceof BlockWidgetView &&
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.compare(this.widget))
                 this.markDirty(true);
@@ -1655,6 +1655,7 @@ class BlockWidgetView extends ContentView {
                 this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
+            this.type = other.type;
             this.breakAfter = other.breakAfter;
             return true;
         }
@@ -2215,6 +2216,10 @@ Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
 */
 class BidiSpan {
+    /**
+    The direction of this span.
+    */
+    get dir() { return this.level % 2 ? RTL : LTR; }
     /**
     @internal
     */
@@ -2240,10 +2245,6 @@ class BidiSpan {
         this.level = level;
     }
     /**
-    The direction of this span.
-    */
-    get dir() { return this.level % 2 ? RTL : LTR; }
-    /**
     @internal
     */
     side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
@@ -2495,6 +2496,7 @@ class DOMReader {
         let parent = start.parentNode;
         for (let cur = start;;) {
             this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
             this.readNode(cur);
             let next = cur.nextSibling;
             if (next == end)
@@ -2502,7 +2504,7 @@ class DOMReader {
             let view = ContentView.get(cur), nextView = ContentView.get(next);
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
                 this.lineBreak();
             cur = next;
         }
@@ -2583,6 +2585,7 @@ class DOMPoint {
 }
 
 class DocView extends ContentView {
+    get length() { return this.view.state.doc.length; }
     constructor(view) {
         super();
         this.view = view;
@@ -2613,7 +2616,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
     // position, if we know the editor is going to scroll that position
@@ -3451,15 +3453,15 @@ function moveVertically(view, start, forward, distance) {
             return state.EditorSelection.cursor(pos, start.assoc, undefined, goal);
     }
 }
-function skipAtoms(view, oldPos, pos) {
-    let atoms = view.state.facet(atomicRanges).map(f => f(view));
+function skipAtomicRanges(atoms, pos, bias) {
     for (;;) {
-        let moved = false;
+        let moved = 0;
         for (let set of atoms) {
-            set.between(pos.from - 1, pos.from + 1, (from, to, value) => {
-                if (pos.from > from && pos.from < to) {
-                    pos = oldPos.head > pos.from ? state.EditorSelection.cursor(from, 1) : state.EditorSelection.cursor(to, -1);
-                    moved = true;
+            set.between(pos - 1, pos + 1, (from, to, value) => {
+                if (pos > from && pos < to) {
+                    let side = moved || bias || (pos - from < to - pos ? -1 : 1);
+                    pos = side < 0 ? from : to;
+                    moved = side;
                 }
             });
         }
@@ -3467,9 +3469,17 @@ function skipAtoms(view, oldPos, pos) {
             return pos;
     }
 }
+function skipAtoms(view, oldPos, pos) {
+    let newPos = skipAtomicRanges(view.state.facet(atomicRanges).map(f => f(view)), pos.from, oldPos.head > pos.from ? -1 : 1);
+    return newPos == pos.from ? pos : state.EditorSelection.cursor(newPos, newPos < pos.from ? 1 : -1);
+}
 
 // This will also be where dragging info and such goes
 class InputState {
+    setSelectionOrigin(origin) {
+        this.lastSelectionOrigin = origin;
+        this.lastSelectionTime = Date.now();
+    }
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
@@ -3566,10 +3576,6 @@ class InputState {
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
     }
-    setSelectionOrigin(origin) {
-        this.lastSelectionOrigin = origin;
-        this.lastSelectionTime = Date.now();
-    }
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
@@ -3716,6 +3722,7 @@ class MouseSelection {
         this.scrolling = -1;
         this.lastEvent = startEvent;
         this.scrollParent = scrollableParent(view.contentDOM);
+        this.atoms = view.state.facet(atomicRanges).map(f => f(view));
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3789,10 +3796,33 @@ class MouseSelection {
         if (this.dragging === false)
             this.select(this.lastEvent);
     }
+    skipAtoms(sel) {
+        let ranges = null;
+        for (let i = 0; i < sel.ranges.length; i++) {
+            let range = sel.ranges[i], updated = null;
+            if (range.empty) {
+                let pos = skipAtomicRanges(this.atoms, range.from, 0);
+                if (pos != range.from)
+                    updated = state.EditorSelection.cursor(pos, -1);
+            }
+            else {
+                let from = skipAtomicRanges(this.atoms, range.from, -1);
+                let to = skipAtomicRanges(this.atoms, range.to, 1);
+                if (from != range.from || to != range.to)
+                    updated = state.EditorSelection.range(range.from == range.anchor ? from : to, range.from == range.head ? from : to);
+            }
+            if (updated) {
+                if (!ranges)
+                    ranges = sel.ranges.slice();
+                ranges[i] = updated;
+            }
+        }
+        return ranges ? state.EditorSelection.create(ranges, sel.mainIndex) : sel;
+    }
     select(event) {
-        let selection = this.style.get(event, this.extend, this.multiple);
-        if (this.mustSelect || !selection.eq(this.view.state.selection) ||
-            selection.main.assoc != this.view.state.selection.main.assoc)
+        let { view } = this, selection = this.skipAtoms(this.style.get(event, this.extend, this.multiple));
+        if (this.mustSelect || !selection.eq(view.state.selection) ||
+            selection.main.assoc != view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
                 userEvent: "select.pointer"
@@ -6469,6 +6499,53 @@ line number gutter. It handles events and dispatches state
 transactions for editing actions.
 */
 class EditorView {
+    /**
+    The current editor state.
+    */
+    get state() { return this.viewState.state; }
+    /**
+    To be able to display large documents without consuming too much
+    memory or overloading the browser, CodeMirror only draws the
+    code that is visible (plus a margin around it) to the DOM. This
+    property tells you the extent of the current drawn viewport, in
+    document positions.
+    */
+    get viewport() { return this.viewState.viewport; }
+    /**
+    When there are, for example, large collapsed ranges in the
+    viewport, its size can be a lot bigger than the actual visible
+    content. Thus, if you are doing something like styling the
+    content in the viewport, it is preferable to only do so for
+    these ranges, which are the subset of the viewport that is
+    actually drawn.
+    */
+    get visibleRanges() { return this.viewState.visibleRanges; }
+    /**
+    Returns false when the editor is entirely scrolled out of view
+    or otherwise hidden.
+    */
+    get inView() { return this.viewState.inView; }
+    /**
+    Indicates whether the user is currently composing text via
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
+    */
+    get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
+    /**
+    @internal
+    */
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     /**
     Construct a new view. You'll want to either provide a `parent`
     option, or put `view.dom` into your document after creating a
@@ -6522,56 +6599,10 @@ class EditorView {
         if (config.parent)
             config.parent.appendChild(this.dom);
     }
-    /**
-    The current editor state.
-    */
-    get state() { return this.viewState.state; }
-    /**
-    To be able to display large documents without consuming too much
-    memory or overloading the browser, CodeMirror only draws the
-    code that is visible (plus a margin around it) to the DOM. This
-    property tells you the extent of the current drawn viewport, in
-    document positions.
-    */
-    get viewport() { return this.viewState.viewport; }
-    /**
-    When there are, for example, large collapsed ranges in the
-    viewport, its size can be a lot bigger than the actual visible
-    content. Thus, if you are doing something like styling the
-    content in the viewport, it is preferable to only do so for
-    these ranges, which are the subset of the viewport that is
-    actually drawn.
-    */
-    get visibleRanges() { return this.viewState.visibleRanges; }
-    /**
-    Returns false when the editor is entirely scrolled out of view
-    or otherwise hidden.
-    */
-    get inView() { return this.viewState.inView; }
-    /**
-    Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
-    one change has been made in the current composition.
-    */
-    get composing() { return this.inputState.composing > 0; }
-    /**
-    Indicates whether the user is currently in composing state. Note
-    that on some platforms, like Android, this will be the case a
-    lot, since just putting the cursor on a word starts a
-    composition there.
-    */
-    get compositionStarted() { return this.inputState.composing >= 0; }
-    /**
-    The document or shadow root that the view lives in.
-    */
-    get root() { return this._root; }
-    /**
-    @internal
-    */
-    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
-        this._dispatch(input.length == 1 && input[0] instanceof state.Transaction ? input[0]
-            : this.state.update(...input));
+        let tr = input.length == 1 && input[0] instanceof state.Transaction ? input[0]
+            : this.state.update(...input);
+        this._dispatch(tr, this);
     }
     /**
     Update the view for the given array of transactions. This will
@@ -7718,7 +7749,7 @@ function rectanglesForRange(view, className, range) {
         let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
         let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
         let between = [];
-        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - (visualStart && visualEnd ? 1 : 0))
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
         else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == exports.BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
@@ -8876,6 +8907,10 @@ const showTooltip = state.Facet.define({
 });
 const showHoverTooltip = state.Facet.define();
 class HoverTooltipHost {
+    // Needs to be static so that host tooltip instances always match
+    static create(view) {
+        return new HoverTooltipHost(view);
+    }
     constructor(view) {
         this.view = view;
         this.mounted = false;
@@ -8883,10 +8918,6 @@ class HoverTooltipHost {
         this.dom.classList.add("cm-tooltip-hover");
         this.manager = new TooltipViewManager(view, showHoverTooltip, t => this.createHostedView(t));
     }
-    // Needs to be static so that host tooltip instances always match
-    static create(view) {
-        return new HoverTooltipHost(view);
-    }
     createHostedView(tooltip) {
         let hostedView = tooltip.create(this.view);
         hostedView.dom.classList.add("cm-tooltip-section");

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _codemirror_state from '@codemirror/state';
 import { RangeSet, RangeValue, Range, EditorState, Extension, Transaction, ChangeSet, EditorSelection, EditorStateConfig, TransactionSpec, SelectionRange, Line, StateEffect, Facet } from '@codemirror/state';
 import { StyleModule, StyleSpec } from 'style-mod';
 
-declare type Attrs = {
+type Attrs = {
     [name: string]: string;
 };
 
@@ -15,7 +15,7 @@ interface Rect {
     readonly top: number;
     readonly bottom: number;
 }
-declare type ScrollStrategy = "nearest" | "start" | "end" | "center";
+type ScrollStrategy = "nearest" | "start" | "end" | "center";
 
 interface MarkDecorationSpec {
     /**
@@ -198,7 +198,7 @@ A decoration set represents a collection of decorated ranges,
 organized for efficient access and mapping. See
 [`RangeSet`](https://codemirror.net/6/docs/ref/#state.RangeSet) for its methods.
 */
-declare type DecorationSet = RangeSet<Decoration>;
+type DecorationSet = RangeSet<Decoration>;
 /**
 The different types of blocks that can occur in an editor view.
 */
@@ -297,7 +297,7 @@ apply to the editor, and if it can, perform it as a side effect
 (which usually means [dispatching](https://codemirror.net/6/docs/ref/#view.EditorView.dispatch) a
 transaction) and return `true`.
 */
-declare type Command = (target: EditorView) => boolean;
+type Command = (target: EditorView) => boolean;
 /**
 Log or report an unhandled exception in client code. Should
 probably only be used by extension code that allows client code to
@@ -399,7 +399,7 @@ interface MeasureRequest<T> {
     */
     key?: any;
 }
-declare type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
+type AttrSource = Attrs | ((view: EditorView) => Attrs | null);
 /**
 View [plugins](https://codemirror.net/6/docs/ref/#view.ViewPlugin) are given instances of this
 class, which describe what happened, whenever the view is updated.
@@ -488,7 +488,7 @@ interface MouseSelectionStyle {
     */
     update: (update: ViewUpdate) => boolean | void;
 }
-declare type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
+type MakeSelectionStyle = (view: EditorView, event: MouseEvent) => MouseSelectionStyle | null;
 
 /**
 Record used to represent information about a block-level element
@@ -605,7 +605,7 @@ interface EditorViewConfig extends EditorStateConfig {
     if provided, should probably call the view's [`update`
     method](https://codemirror.net/6/docs/ref/#view.EditorView.update).
     */
-    dispatch?: (tr: Transaction) => void;
+    dispatch?: (tr: Transaction, view: EditorView) => void;
 }
 /**
 An editor view represents the editor's user interface. It holds
@@ -1183,7 +1183,7 @@ to hold the appropriate event object type. For unknown events, it
 is inferred to `any`, and should be explicitly set if you want type
 checking.
 */
-declare type DOMEventHandlers<This> = {
+type DOMEventHandlers<This> = {
     [event in keyof DOMEventMap]?: (this: This, event: DOMEventMap[event], view: EditorView) => boolean | void;
 };
 
@@ -1285,7 +1285,7 @@ handlers handled it.
 */
 declare function runScopeHandlers(view: EditorView, event: KeyboardEvent, scope: string): boolean;
 
-declare type SelectionConfig = {
+type SelectionConfig = {
     /**
     The length of a full cursor blink cycle, in milliseconds.
     Defaults to 1200. Can be set to 0 to disable blinking.
@@ -1751,7 +1751,7 @@ invalidate the existing tooltip positions.
 */
 declare function repositionTooltips(view: EditorView): void;
 
-declare type PanelConfig = {
+type PanelConfig = {
     /**
     By default, panels will be placed inside the editor's DOM
     structure. You can use this option to override where panels with
@@ -1805,7 +1805,7 @@ declare function getPanel(view: EditorView, panel: PanelConstructor): Panel | nu
 A function that initializes a panel. Used in
 [`showPanel`](https://codemirror.net/6/docs/ref/#view.showPanel).
 */
-declare type PanelConstructor = (view: EditorView) => Panel;
+type PanelConstructor = (view: EditorView) => Panel;
 /**
 Opening a panel is done by providing a constructor function for
 the panel through this facet. (The panel is closed again when its
@@ -1846,7 +1846,7 @@ Markers given to this facet should _only_ define an
 in all gutters for the line).
 */
 declare const gutterLineClass: Facet<RangeSet<GutterMarker>, readonly RangeSet<GutterMarker>[]>;
-declare type Handlers = {
+type Handlers = {
     [event: string]: (view: EditorView, line: BlockInfo, event: Event) => boolean;
 };
 interface GutterConfig {

package/dist/index.js

@@ -818,6 +818,9 @@ function textCoords(text, pos, side) {
 }
 // Also used for collapsed ranges that don't have a placeholder widget!
 class WidgetView extends ContentView {
+    static create(widget, length, side) {
+        return new (widget.customView || WidgetView)(widget, length, side);
+    }
     constructor(widget, length, side) {
         super();
         this.widget = widget;
@@ -825,9 +828,6 @@ class WidgetView extends ContentView {
         this.side = side;
         this.prevWidget = null;
     }
-    static create(widget, length, side) {
-        return new (widget.customView || WidgetView)(widget, length, side);
-    }
     split(from) {
         let result = WidgetView.create(this.widget, this.length - from, this.side);
         this.length -= from;
@@ -1642,7 +1642,7 @@ class BlockWidgetView extends ContentView {
     }
     domBoundsAround() { return null; }
     become(other) {
-        if (other instanceof BlockWidgetView && other.type == this.type &&
+        if (other instanceof BlockWidgetView &&
             other.widget.constructor == this.widget.constructor) {
             if (!other.widget.compare(this.widget))
                 this.markDirty(true);
@@ -1650,6 +1650,7 @@ class BlockWidgetView extends ContentView {
                 this.prevWidget = this.widget;
             this.widget = other.widget;
             this.length = other.length;
+            this.type = other.type;
             this.breakAfter = other.breakAfter;
             return true;
         }
@@ -2209,6 +2210,10 @@ Represents a contiguous range of text that has a single direction
 (as in left-to-right or right-to-left).
 */
 class BidiSpan {
+    /**
+    The direction of this span.
+    */
+    get dir() { return this.level % 2 ? RTL : LTR; }
     /**
     @internal
     */
@@ -2234,10 +2239,6 @@ class BidiSpan {
         this.level = level;
     }
     /**
-    The direction of this span.
-    */
-    get dir() { return this.level % 2 ? RTL : LTR; }
-    /**
     @internal
     */
     side(end, dir) { return (this.dir == dir) == end ? this.to : this.from; }
@@ -2489,6 +2490,7 @@ class DOMReader {
         let parent = start.parentNode;
         for (let cur = start;;) {
             this.findPointBefore(parent, cur);
+            let oldLen = this.text.length;
             this.readNode(cur);
             let next = cur.nextSibling;
             if (next == end)
@@ -2496,7 +2498,7 @@ class DOMReader {
             let view = ContentView.get(cur), nextView = ContentView.get(next);
             if (view && nextView ? view.breakAfter :
                 (view ? view.breakAfter : isBlockElement(cur)) ||
-                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore)))
+                    (isBlockElement(next) && (cur.nodeName != "BR" || cur.cmIgnore) && this.text.length > oldLen))
                 this.lineBreak();
             cur = next;
         }
@@ -2577,6 +2579,7 @@ class DOMPoint {
 }
 
 class DocView extends ContentView {
+    get length() { return this.view.state.doc.length; }
     constructor(view) {
         super();
         this.view = view;
@@ -2607,7 +2610,6 @@ class DocView extends ContentView {
         this.updateDeco();
         this.updateInner([new ChangedRange(0, 0, 0, view.state.doc.length)], 0);
     }
-    get length() { return this.view.state.doc.length; }
     // Update the document view to a given state. scrollIntoView can be
     // used as a hint to compute a new viewport that includes that
     // position, if we know the editor is going to scroll that position
@@ -3445,15 +3447,15 @@ function moveVertically(view, start, forward, distance) {
             return EditorSelection.cursor(pos, start.assoc, undefined, goal);
     }
 }
-function skipAtoms(view, oldPos, pos) {
-    let atoms = view.state.facet(atomicRanges).map(f => f(view));
+function skipAtomicRanges(atoms, pos, bias) {
     for (;;) {
-        let moved = false;
+        let moved = 0;
         for (let set of atoms) {
-            set.between(pos.from - 1, pos.from + 1, (from, to, value) => {
-                if (pos.from > from && pos.from < to) {
-                    pos = oldPos.head > pos.from ? EditorSelection.cursor(from, 1) : EditorSelection.cursor(to, -1);
-                    moved = true;
+            set.between(pos - 1, pos + 1, (from, to, value) => {
+                if (pos > from && pos < to) {
+                    let side = moved || bias || (pos - from < to - pos ? -1 : 1);
+                    pos = side < 0 ? from : to;
+                    moved = side;
                 }
             });
         }
@@ -3461,9 +3463,17 @@ function skipAtoms(view, oldPos, pos) {
             return pos;
     }
 }
+function skipAtoms(view, oldPos, pos) {
+    let newPos = skipAtomicRanges(view.state.facet(atomicRanges).map(f => f(view)), pos.from, oldPos.head > pos.from ? -1 : 1);
+    return newPos == pos.from ? pos : EditorSelection.cursor(newPos, newPos < pos.from ? 1 : -1);
+}
 
 // This will also be where dragging info and such goes
 class InputState {
+    setSelectionOrigin(origin) {
+        this.lastSelectionOrigin = origin;
+        this.lastSelectionTime = Date.now();
+    }
     constructor(view) {
         this.lastKeyCode = 0;
         this.lastKeyTime = 0;
@@ -3560,10 +3570,6 @@ class InputState {
         if (browser.safari)
             view.contentDOM.addEventListener("input", () => null);
     }
-    setSelectionOrigin(origin) {
-        this.lastSelectionOrigin = origin;
-        this.lastSelectionTime = Date.now();
-    }
     ensureHandlers(view, plugins) {
         var _a;
         let handlers;
@@ -3710,6 +3716,7 @@ class MouseSelection {
         this.scrolling = -1;
         this.lastEvent = startEvent;
         this.scrollParent = scrollableParent(view.contentDOM);
+        this.atoms = view.state.facet(atomicRanges).map(f => f(view));
         let doc = view.contentDOM.ownerDocument;
         doc.addEventListener("mousemove", this.move = this.move.bind(this));
         doc.addEventListener("mouseup", this.up = this.up.bind(this));
@@ -3783,10 +3790,33 @@ class MouseSelection {
         if (this.dragging === false)
             this.select(this.lastEvent);
     }
+    skipAtoms(sel) {
+        let ranges = null;
+        for (let i = 0; i < sel.ranges.length; i++) {
+            let range = sel.ranges[i], updated = null;
+            if (range.empty) {
+                let pos = skipAtomicRanges(this.atoms, range.from, 0);
+                if (pos != range.from)
+                    updated = EditorSelection.cursor(pos, -1);
+            }
+            else {
+                let from = skipAtomicRanges(this.atoms, range.from, -1);
+                let to = skipAtomicRanges(this.atoms, range.to, 1);
+                if (from != range.from || to != range.to)
+                    updated = EditorSelection.range(range.from == range.anchor ? from : to, range.from == range.head ? from : to);
+            }
+            if (updated) {
+                if (!ranges)
+                    ranges = sel.ranges.slice();
+                ranges[i] = updated;
+            }
+        }
+        return ranges ? EditorSelection.create(ranges, sel.mainIndex) : sel;
+    }
     select(event) {
-        let selection = this.style.get(event, this.extend, this.multiple);
-        if (this.mustSelect || !selection.eq(this.view.state.selection) ||
-            selection.main.assoc != this.view.state.selection.main.assoc)
+        let { view } = this, selection = this.skipAtoms(this.style.get(event, this.extend, this.multiple));
+        if (this.mustSelect || !selection.eq(view.state.selection) ||
+            selection.main.assoc != view.state.selection.main.assoc)
             this.view.dispatch({
                 selection,
                 userEvent: "select.pointer"
@@ -6462,6 +6492,53 @@ line number gutter. It handles events and dispatches state
 transactions for editing actions.
 */
 class EditorView {
+    /**
+    The current editor state.
+    */
+    get state() { return this.viewState.state; }
+    /**
+    To be able to display large documents without consuming too much
+    memory or overloading the browser, CodeMirror only draws the
+    code that is visible (plus a margin around it) to the DOM. This
+    property tells you the extent of the current drawn viewport, in
+    document positions.
+    */
+    get viewport() { return this.viewState.viewport; }
+    /**
+    When there are, for example, large collapsed ranges in the
+    viewport, its size can be a lot bigger than the actual visible
+    content. Thus, if you are doing something like styling the
+    content in the viewport, it is preferable to only do so for
+    these ranges, which are the subset of the viewport that is
+    actually drawn.
+    */
+    get visibleRanges() { return this.viewState.visibleRanges; }
+    /**
+    Returns false when the editor is entirely scrolled out of view
+    or otherwise hidden.
+    */
+    get inView() { return this.viewState.inView; }
+    /**
+    Indicates whether the user is currently composing text via
+    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
+    one change has been made in the current composition.
+    */
+    get composing() { return this.inputState.composing > 0; }
+    /**
+    Indicates whether the user is currently in composing state. Note
+    that on some platforms, like Android, this will be the case a
+    lot, since just putting the cursor on a word starts a
+    composition there.
+    */
+    get compositionStarted() { return this.inputState.composing >= 0; }
+    /**
+    The document or shadow root that the view lives in.
+    */
+    get root() { return this._root; }
+    /**
+    @internal
+    */
+    get win() { return this.dom.ownerDocument.defaultView || window; }
     /**
     Construct a new view. You'll want to either provide a `parent`
     option, or put `view.dom` into your document after creating a
@@ -6515,56 +6592,10 @@ class EditorView {
         if (config.parent)
             config.parent.appendChild(this.dom);
     }
-    /**
-    The current editor state.
-    */
-    get state() { return this.viewState.state; }
-    /**
-    To be able to display large documents without consuming too much
-    memory or overloading the browser, CodeMirror only draws the
-    code that is visible (plus a margin around it) to the DOM. This
-    property tells you the extent of the current drawn viewport, in
-    document positions.
-    */
-    get viewport() { return this.viewState.viewport; }
-    /**
-    When there are, for example, large collapsed ranges in the
-    viewport, its size can be a lot bigger than the actual visible
-    content. Thus, if you are doing something like styling the
-    content in the viewport, it is preferable to only do so for
-    these ranges, which are the subset of the viewport that is
-    actually drawn.
-    */
-    get visibleRanges() { return this.viewState.visibleRanges; }
-    /**
-    Returns false when the editor is entirely scrolled out of view
-    or otherwise hidden.
-    */
-    get inView() { return this.viewState.inView; }
-    /**
-    Indicates whether the user is currently composing text via
-    [IME](https://en.wikipedia.org/wiki/Input_method), and at least
-    one change has been made in the current composition.
-    */
-    get composing() { return this.inputState.composing > 0; }
-    /**
-    Indicates whether the user is currently in composing state. Note
-    that on some platforms, like Android, this will be the case a
-    lot, since just putting the cursor on a word starts a
-    composition there.
-    */
-    get compositionStarted() { return this.inputState.composing >= 0; }
-    /**
-    The document or shadow root that the view lives in.
-    */
-    get root() { return this._root; }
-    /**
-    @internal
-    */
-    get win() { return this.dom.ownerDocument.defaultView || window; }
     dispatch(...input) {
-        this._dispatch(input.length == 1 && input[0] instanceof Transaction ? input[0]
-            : this.state.update(...input));
+        let tr = input.length == 1 && input[0] instanceof Transaction ? input[0]
+            : this.state.update(...input);
+        this._dispatch(tr, this);
     }
     /**
     Update the view for the given array of transactions. This will
@@ -7711,7 +7742,7 @@ function rectanglesForRange(view, className, range) {
         let top = visualStart ? drawForLine(range.from, null, visualStart) : drawForWidget(startBlock, false);
         let bottom = visualEnd ? drawForLine(null, range.to, visualEnd) : drawForWidget(endBlock, true);
         let between = [];
-        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - 1)
+        if ((visualStart || startBlock).to < (visualEnd || endBlock).from - (visualStart && visualEnd ? 1 : 0))
             between.push(piece(leftSide, top.bottom, rightSide, bottom.top));
         else if (top.bottom < bottom.top && view.elementAtHeight((top.bottom + bottom.top) / 2).type == BlockType.Text)
             top.bottom = bottom.top = (top.bottom + bottom.top) / 2;
@@ -8869,6 +8900,10 @@ const showTooltip = /*@__PURE__*/Facet.define({
 });
 const showHoverTooltip = /*@__PURE__*/Facet.define();
 class HoverTooltipHost {
+    // Needs to be static so that host tooltip instances always match
+    static create(view) {
+        return new HoverTooltipHost(view);
+    }
     constructor(view) {
         this.view = view;
         this.mounted = false;
@@ -8876,10 +8911,6 @@ class HoverTooltipHost {
         this.dom.classList.add("cm-tooltip-hover");
         this.manager = new TooltipViewManager(view, showHoverTooltip, t => this.createHostedView(t));
     }
-    // Needs to be static so that host tooltip instances always match
-    static create(view) {
-        return new HoverTooltipHost(view);
-    }
     createHostedView(tooltip) {
         let hostedView = tooltip.create(this.view);
         hostedView.dom.classList.add("cm-tooltip-section");

package/package.json

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