@adecore/editor 0.23.0 → 0.24.0

package/src/layout.ts

@@ -4,6 +4,7 @@ import { offsetOfStop, rowOfStop, stopAtOffset, stopCount, xOfStop } from './geo
 import { BIDI_COLUMNS, bidiControl, visibleBidi } from './bidi.ts';
 import { uniformGeometry } from './uniform-geometry.ts';
 import { lineChangeMapper } from './layout-changes.ts';
+import { offsetMapper } from './offsets.ts';
 
 export type Affinity = 'before' | 'after';
 
@@ -193,7 +194,7 @@ const WRAP_INDENT_STEP = 2;
 const GEOMETRY_CACHE_SIZE = 400;
 const PLAIN = /^[\x20-\x7e\t]*$/;
 const GRAPHEME_LIMIT = 20000;
-const SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+let segmenter: Intl.Segmenter | undefined;
 
 /* Where each character starts, with the length last. A very long line is cut by code unit, since splitting it by grapheme would cost more than it shows. */
 function characterOffsets(text: string): number[] {
@@ -203,7 +204,8 @@ function characterOffsets(text: string): number[] {
             offsets.push(i);
         }
     } else {
-        for (const part of SEGMENTER.segment(text)) {
+        segmenter ??= new Intl.Segmenter(undefined, { granularity: 'grapheme' });
+        for (const part of segmenter.segment(text)) {
             offsets.push(part.index);
         }
     }
@@ -393,6 +395,74 @@ export interface LayoutConfig {
     replacements?: readonly BlockReplacement[];
 }
 
+/* Lines `first` through `last`, both included. */
+interface LineRange {
+    first: number;
+    last: number;
+}
+
+/* The lines an edit replaced: `first` through `oldLast` before it, `first` through `newLast` after it. */
+interface LineEdit {
+    first: number;
+    oldLast: number;
+    newLast: number;
+}
+
+/* What the rows stand on besides the text, by the line it is at. */
+interface RowStructure {
+    above: Map<number, BlockWidget[]>;
+    below: Map<number, BlockWidget[]>;
+    folds: Map<number, FoldState>;
+    replaced: Map<number, { replacement: BlockReplacement; endLine: number }>;
+    /* The lines whose rows are more than a plain line: with a widget, a collapsed fold, a replacement or an inlay. */
+    special: LineRange[];
+}
+
+/* A text row whose key follows its line, so an edit above it moves the row without a new key. */
+class LineRow implements TextRow {
+    readonly kind = 'text';
+    index: number;
+    line: number;
+    lastLine: number;
+    tail: number | null;
+    head: number | null;
+    subRows: number;
+    top = 0;
+    height: number;
+
+    constructor(index: number, line: number, lastLine: number, tail: number | null, head: number | null, subRows: number, height: number) {
+        this.index = index;
+        this.line = line;
+        this.lastLine = lastLine;
+        this.tail = tail;
+        this.head = head;
+        this.subRows = subRows;
+        this.height = height;
+    }
+
+    get key(): string {
+        return `line:${this.line}`;
+    }
+}
+
+/* Sorted, with the ranges that overlap or touch joined. */
+function mergeRanges(ranges: LineRange[]): LineRange[] {
+    ranges.sort((left, right) => left.first - right.first);
+    const merged: LineRange[] = [];
+    for (const range of ranges) {
+        const previous = merged.at(-1);
+        if (previous !== undefined && range.first <= previous.last + 1) {
+            previous.last = Math.max(previous.last, range.last);
+        } else {
+            merged.push({ ...range });
+        }
+    }
+    return merged;
+}
+
+/* Past this many lines to lay out again, building every row costs about as much, and it keeps the arguments of a splice few. */
+const PATCH_LIMIT = 20000;
+
 /*
  * The rows of the document as they are drawn: one per line, taller for a wrapped line, one for a
  * widget, none for a line a fold hides. Only the rows that are on screen are ever measured; the
@@ -405,6 +475,9 @@ export class EditorLayout {
     /* The widest line measured since the text last changed, and the room past it; what a horizontal scroll bar needs. */
     width = 0;
     private lineRows: number[] = [];
+    /* The rows of widgets and replacements by key, which their measured heights come in by. */
+    private keyed = new Map<string, LayoutRow>();
+    private special: LineRange[] = [];
     private geometryCache = new Map<number, LineGeometry>();
     private measuredRows = new Map<number, { start: number; end: number; next: number; subRows: number }>();
     private measuredHeights = new Map<string, number>();
@@ -453,6 +526,7 @@ export class EditorLayout {
             this.replacements = config.replacements;
             this.lineHeightsVersion++;
         }
+        let edit: LineEdit | undefined;
         if (measureAgain || (config.textChanged && !config.changes?.length)) {
             this.lineHeightsVersion++;
             this.geometryCache.clear();
@@ -460,6 +534,7 @@ export class EditorLayout {
             this.width = 0;
         } else {
             if (config.changes?.length) {
+                edit = this.lineEdit(config.changes);
                 this.retainGeometry(config.changes);
                 this.lineHeightsVersion++;
             }
@@ -484,7 +559,32 @@ export class EditorLayout {
                 }
             }
         }
-        this.rebuild();
+        this.rebuild(edit);
+    }
+
+    /* The lines the transactions changed, in the coordinates of the text before and after them. */
+    private lineEdit(batches: readonly (readonly DocumentChange[])[]): LineEdit | undefined {
+        let from = Number.POSITIVE_INFINITY;
+        let to = Number.NEGATIVE_INFINITY;
+        for (const changes of batches) {
+            if (Number.isFinite(to)) {
+                to = offsetMapper(changes)(to);
+            }
+            let delta = 0;
+            for (const change of changes) {
+                from = Math.min(from, change.from);
+                to = Math.max(to, change.from + delta + change.insertedLength);
+                delta += change.insertedLength - (change.to - change.from);
+            }
+        }
+        if (!Number.isFinite(from)) {
+            return undefined;
+        }
+        // The line above too, since an edit at the start of a line can turn the `\r` that ends it into a `\r\n`.
+        const first = Math.max(0, this.document.positionAt(from).line - 1);
+        const newLast = this.document.positionAt(to).line;
+        const oldLast = newLast - (this.document.getLineCount() - this.lineRows.length);
+        return oldLast < first ? undefined : { first, oldLast, newLast };
     }
 
     private retainGeometry(batches: readonly (readonly DocumentChange[])[]): void {
@@ -527,7 +627,19 @@ export class EditorLayout {
         return Math.max(1, Math.ceil((length * this.metrics.charWidth) / Math.max(limit, this.metrics.charWidth)));
     }
 
-    private rebuild(): void {
+    private rebuild(edit?: LineEdit): void {
+        const structure = this.structure();
+        if (edit === undefined || !this.patch(edit, structure)) {
+            this.keyed.clear();
+            const built = this.buildRows(structure, 0, this.document.getLineCount() - 1, 0);
+            this.rows = built.rows;
+            this.lineRows = built.lineRows;
+            this.reflow(0);
+        }
+        this.special = structure.special;
+    }
+
+    private structure(): RowStructure {
         this.inlaysByLine.clear();
         for (const inlay of this.inlays) {
             const line = this.document.positionAt(inlay.at).line;
@@ -560,15 +672,119 @@ export class EditorLayout {
                 replaced.set(startLine, { replacement, endLine });
             }
         }
+        const special: LineRange[] = [];
+        for (const line of [...this.inlaysByLine.keys(), ...above.keys(), ...below.keys()]) {
+            special.push({ first: line, last: line });
+        }
+        for (const fold of folds.values()) {
+            special.push({ first: fold.startLine, last: Math.max(fold.startLine, fold.endLine) });
+        }
+        for (const [startLine, entry] of replaced) {
+            special.push({ first: startLine, last: entry.endLine });
+        }
+        return { above, below, folds, replaced, special: mergeRanges(special) };
+    }
+
+    /*
+     * Lays out again only the lines an edit changed and the rows that stand on more than their line, and moves the
+     * rest. False when that would cost no less than building every row.
+     */
+    private patch(edit: LineEdit, structure: RowStructure): boolean {
+        const count = this.document.getLineCount();
+        const delta = edit.newLast - edit.oldLast;
+        if (this.rows.length === 0 || this.lineRows.length + delta !== count) {
+            return false;
+        }
+        const moved = (range: LineRange): LineRange => {
+            if (range.last < edit.first) {
+                return range;
+            }
+            if (range.first > edit.oldLast) {
+                return { first: range.first + delta, last: range.last + delta };
+            }
+            return { first: Math.min(range.first, edit.first), last: range.last > edit.oldLast ? range.last + delta : edit.newLast };
+        };
+        const ranges = mergeRanges([{ first: edit.first, last: edit.newLast }, ...structure.special, ...this.special.map(moved)]).filter(
+            (range) => range.first < count
+        );
+        let lines = 0;
+        for (const range of ranges) {
+            range.last = Math.min(range.last, count - 1);
+            lines += range.last - range.first + 1;
+        }
+        if (lines > Math.min(PATCH_LIMIT, count / 2)) {
+            return false;
+        }
+        const rows = this.rows;
+        const built = new Set<LayoutRow>();
+        let first = rows.length;
+        let resized = delta !== 0;
+        // From the bottom up, so the rows and lines of the ranges above keep their indices. Rows not built again keep their old lines until the end.
+        for (let index = ranges.length - 1; index >= 0; index--) {
+            const range = ranges[index]!;
+            const oldFirst = range.first > edit.newLast ? range.first - delta : range.first;
+            const oldLast = range.last >= edit.newLast ? range.last - delta : range.last;
+            let start = this.lineRows[oldFirst]!;
+            while (start > 0 && rows[start - 1]!.kind === 'block' && rows[start - 1]!.line >= oldFirst) {
+                start--;
+            }
+            let end = this.lineRows[oldLast]!;
+            while (end + 1 < rows.length && rows[end + 1]!.kind === 'block' && rows[end + 1]!.line <= oldLast) {
+                end++;
+            }
+            const fresh = this.buildRows(structure, range.first, range.last, start);
+            const removed = rows.splice(start, end - start + 1, ...fresh.rows);
+            this.lineRows.splice(oldFirst, oldLast - oldFirst + 1, ...fresh.lineRows);
+            let height = 0;
+            for (const row of removed) {
+                height -= row.height;
+                if (this.keyed.get(row.key) === row) {
+                    this.keyed.delete(row.key);
+                }
+            }
+            let top = start > 0 ? rows[start - 1]!.top + rows[start - 1]!.height : 0;
+            for (const row of fresh.rows) {
+                built.add(row);
+                height += row.height;
+                row.top = top;
+                top += row.height;
+            }
+            resized ||= height !== 0 || removed.length !== fresh.rows.length;
+            first = start;
+        }
+        if (resized) {
+            for (let index = first; index < rows.length; index++) {
+                const row = rows[index]!;
+                row.index = index;
+                if (!built.has(row) && row.line > edit.oldLast) {
+                    row.line += delta;
+                    if (row.kind === 'text') {
+                        row.lastLine += delta;
+                    }
+                }
+                if (row.kind === 'text') {
+                    for (let covered = row.line; covered <= row.lastLine; covered++) {
+                        this.lineRows[covered] = index;
+                    }
+                }
+            }
+            this.reflow(first);
+        }
+        return true;
+    }
+
+    /* The rows of lines `from` through `to`, the first of them at `index`, and the row each of the lines is in. */
+    private buildRows(structure: RowStructure, from: number, to: number, index: number): { rows: LayoutRow[]; lineRows: number[] } {
+        const { above, below, folds, replaced } = structure;
         const count = this.document.getLineCount();
-        this.rows = [];
-        this.lineRows = new Array<number>(count);
+        const rows: LayoutRow[] = [];
+        const lineRows = new Array<number>(to - from + 1);
         const addBlock = (widget: BlockWidget, line: number): void => {
             const key = `block:${widget.id}`;
-            this.rows.push({
+            const row: BlockRow = {
                 key,
                 kind: 'block',
-                index: this.rows.length,
+                index: index + rows.length,
                 line,
                 widget,
                 top: 0,
@@ -577,9 +793,11 @@ export class EditorLayout {
                     : widget.fixed
                       ? Math.max(1, widget.height ?? DEFAULT_BLOCK_HEIGHT)
                       : (this.measuredHeights.get(key) ?? widget.height ?? DEFAULT_BLOCK_HEIGHT)
-            });
+            };
+            rows.push(row);
+            this.keyed.set(key, row);
         };
-        for (let line = 0; line < count; line++) {
+        for (let line = from; line <= to; line++) {
             for (const block of above.get(line) ?? []) {
                 addBlock(block, line);
             }
@@ -587,11 +805,11 @@ export class EditorLayout {
             if (standIn !== undefined) {
                 const last = Math.min(count - 1, standIn.endLine);
                 const key = `replaced:${standIn.replacement.id}`;
-                const index = this.rows.length;
-                this.rows.push({
+                const rowIndex = index + rows.length;
+                const row: TextRow = {
                     key,
                     kind: 'text',
-                    index,
+                    index: rowIndex,
                     line,
                     lastLine: last,
                     tail: null,
@@ -600,9 +818,11 @@ export class EditorLayout {
                     top: 0,
                     height: this.measuredHeights.get(key) ?? standIn.replacement.height ?? DEFAULT_BLOCK_HEIGHT,
                     replacement: standIn.replacement
-                });
+                };
+                rows.push(row);
+                this.keyed.set(key, row);
                 for (let covered = line; covered <= last; covered++) {
-                    this.lineRows[covered] = index;
+                    lineRows[covered - from] = rowIndex;
                 }
                 for (const block of below.get(last) ?? []) {
                     addBlock(block, last);
@@ -614,30 +834,19 @@ export class EditorLayout {
             const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
             const tail = fold?.closer !== undefined && last > line ? this.clampToLine(fold.closer, last) : null;
             const head = fold?.head !== undefined && last > line ? this.clampToLine(fold.head, line) : null;
-            const index = this.rows.length;
+            const rowIndex = index + rows.length;
             const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
             const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
-            this.rows.push({
-                key: `line:${line}`,
-                kind: 'text',
-                index,
-                line,
-                lastLine: last,
-                tail,
-                head,
-                subRows,
-                top: 0,
-                height: subRows * this.metrics.lineHeight
-            });
+            rows.push(new LineRow(rowIndex, line, last, tail, head, subRows, subRows * this.metrics.lineHeight));
             for (let covered = line; covered <= last; covered++) {
-                this.lineRows[covered] = index;
+                lineRows[covered - from] = rowIndex;
             }
             for (const block of below.get(line) ?? []) {
                 addBlock(block, line);
             }
             line = last;
         }
-        this.reflow();
+        return { rows, lineRows };
     }
 
     /* An offset of a fold clamped to its line, since the fold may be a moment older than an edit. */
@@ -646,31 +855,43 @@ export class EditorLayout {
         return Math.min(bounds.end, Math.max(bounds.start, offset));
     }
 
-    private reflow(): void {
-        let top = 0;
-        for (const row of this.rows) {
+    /* The tops of the rows from `from` on. */
+    private reflow(from: number): void {
+        const previous = this.rows[from - 1];
+        let top = previous === undefined ? 0 : previous.top + previous.height;
+        for (let index = from; index < this.rows.length; index++) {
+            const row = this.rows[index]!;
             row.top = top;
             top += row.height;
         }
         this.height = top + BOTTOM_PADDING;
     }
 
+    /* The row of a widget, a replacement or a line by its key. */
+    rowByKey(key: string): LayoutRow | undefined {
+        if (key.startsWith('line:')) {
+            const row = this.rowForLine(Number(key.slice(5)));
+            return row.key === key ? row : undefined;
+        }
+        return this.keyed.get(key);
+    }
+
     /* A widget's measured height. Returns whether it moved anything. */
     setMeasuredHeight(key: string, height: number): boolean {
-        const row = this.rows.find((candidate) => candidate.key === key);
+        const row = this.rowByKey(key);
         const next = Math.max(1, Math.round(height));
         if (!row || (row.kind === 'block' && row.widget.fixed) || !Number.isFinite(next) || row.height === next) {
             return false;
         }
         this.measuredHeights.set(key, next);
         row.height = next;
-        this.reflow();
+        this.reflow(row.index);
         return true;
     }
 
     /* The visual lines a drawn row really has, which its estimate may have missed. Returns whether any row changed. */
     syncRows(rows: readonly LayoutRow[]): boolean {
-        let changed = false;
+        let first = this.rows.length;
         for (const row of rows) {
             if (row.kind !== 'text' || row.replacement !== undefined) {
                 continue;
@@ -688,14 +909,15 @@ export class EditorLayout {
             if (subRows !== row.subRows) {
                 row.subRows = subRows;
                 row.height = subRows * this.metrics.lineHeight;
-                changed = true;
+                first = Math.min(first, row.index);
             }
         }
-        if (changed) {
+        if (first < this.rows.length) {
             this.lineHeightsVersion++;
-            this.reflow();
+            this.reflow(first);
+            return true;
         }
-        return changed;
+        return false;
     }
 
     rowAt(y: number): LayoutRow {

package/src/tokens.ts

@@ -128,7 +128,8 @@ export class TokenCache {
         const old = this.entries[lastOld];
         this.pivotLine = old ? lastNew : -1;
         this.pivotState = old?.state;
-        this.entries.splice(firstLine, lastOld - firstLine + 1, ...new Array<undefined>(lastNew - firstLine + 1));
+        // Not a spread into splice: a paste of a few hundred thousand lines would overflow the call stack.
+        this.entries = this.entries.slice(0, firstLine).concat(new Array<undefined>(lastNew - firstLine + 1).fill(undefined), this.entries.slice(lastOld + 1));
         this.reusableFrom = lastNew + 1;
     }
 

package/src/types.ts

@@ -63,6 +63,8 @@ export interface EditorOptions {
     readonly smartKeys?: Partial<EditorSmartKeys>;
     /* A line at each indentation level, the one of the scope around the caret stronger; on unless false. */
     readonly guides?: boolean;
+    /* The headers of the blocks scrolled out of sight stay pinned on top; on unless false. */
+    readonly stickyScroll?: boolean;
     /* Spaces drawn as dots and tabs as arrows; off unless true. */
     readonly whitespace?: boolean;
     /* The column to draw a line at, such as the `max_line_length` of a project; none by default. */
@@ -615,6 +617,8 @@ export interface Editor {
     /* Changes what it does as a person types; the keys left out stay as they are. */
     setSmartKeys(keys: Partial<EditorSmartKeys>): void;
     setGuides(guides: boolean): void;
+    /* Optional so an editor from before it still fits. */
+    setStickyScroll?(sticky: boolean): void;
     setWhitespace(whitespace: boolean): void;
     /* The column to draw a line at; null takes it away. */
     setRightMargin(column: number | null): void;

package/src/view.ts

@@ -9,8 +9,6 @@ import {
     type FoldingRange,
     indentationColumn,
     replacementText,
-    scanBrackets,
-    type BracketIndex,
     type Selection as EditorSelection
 } from '@adecore/editor-core';
 import { createSearchClient, type EditorSearchClientOptions } from './search-client.ts';
@@ -114,6 +112,8 @@ export interface ViewSettings {
     /* When the arrow that folds a block shows in the gutter. */
     foldOutline: 'off' | 'hover' | 'always';
     folding?: boolean;
+    /* The headers of the blocks scrolled out of sight stay pinned on top; on unless false. */
+    stickyScroll?: boolean;
 }
 
 /* The lines past the visible ones that are colored ahead of the scroll, and how long one slice of that work may take. */
@@ -122,6 +122,8 @@ const MIN_OVERSCAN = 400;
 const COLOR_SLICE_MS = 8;
 const FIRST_PAINT_MS = 12;
 const FOLD_DELAY_MS = 300;
+/* How much text one frame lexes to pair the brackets at the carets; a large document edited all over takes a few frames. */
+const BRACKET_FRAME_LIMIT = 256 * 1024;
 
 /* The space between the last character of a line and what the host puts after it. */
 const LINE_ACTION_GAP = 28;
@@ -306,11 +308,11 @@ export class EditorView {
     /* The folds somebody already decided on, a person or the defaults, so a later answer of a server leaves them as they are. */
     private settled = new Set<number>();
     private foldTimer: ReturnType<typeof setTimeout> | undefined;
+    private bracketTimer: ReturnType<typeof setTimeout> | undefined;
     private colorTimer: ReturnType<typeof setTimeout> | undefined;
     private noticeTimer: ReturnType<typeof setTimeout> | undefined;
     private liveTimer: ReturnType<typeof setTimeout> | undefined;
     private lineLabelProvider: ((line: number) => string | null) | null = null;
-    private bracketCache: { revision: number; language: string | undefined; index: BracketIndex } | undefined;
     private wrapWidth: number | null = null;
     /* The offset a click past the end of a wrapped visual line chose, which its caret is drawn at the end of that line for. */
     private rowEndCaret: number | null = null;
@@ -966,7 +968,7 @@ export class EditorView {
                 ranges,
                 this.model,
                 (from, to) => this.model.slice(from, to),
-                (offset) => this.brackets().pairs.get(offset)
+                (offset) => this.model.matchBracket(offset, this.settings.language)?.mate
             )
         );
         const anchors = new Set(this.foldRanges.map((range) => range.from));
@@ -1304,7 +1306,7 @@ export class EditorView {
         const anchor = this.layout.rowAt(top);
         const offset = top - anchor.top;
         action();
-        const next = this.layout.rows.find((row) => row.key === anchor.key);
+        const next = this.layout.rowByKey(anchor.key);
         if (next) {
             // Unwrapping can shrink the anchor below its old offset.
             this.viewport.scrollTop = Math.max(0, next.top + Math.min(offset, Math.max(0, next.height - 1)));
@@ -1329,25 +1331,16 @@ export class EditorView {
         return candidates.find((at) => at >= 0 && /[()[\]{}]/.test(this.model.slice(at, at + 1)));
     }
 
-    private brackets(): BracketIndex {
-        if (this.bracketCache?.revision !== this.revision || this.bracketCache.language !== this.settings.language) {
-            this.bracketCache = {
-                revision: this.revision,
-                language: this.settings.language,
-                index: scanBrackets(this.model.getText(), this.settings.language)
-            };
-        }
-        return this.bracketCache.index;
-    }
-
     /* The offset a bracket at the caret pairs with, if it is one. */
     matchingBracket(selection: { anchor: number; head: number }): { at: number; mate: number | undefined } | null {
         const at = this.bracketAt(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), selection.head);
-        return at === undefined ? null : { at, mate: this.brackets().pairs.get(at) };
+        return at === undefined ? null : { at, mate: this.model.matchBracket(at, this.settings.language)?.mate };
     }
 
-    unmatchedBracket(at: number): boolean {
-        return this.brackets().unmatched.has(at);
+    /* Draws the highlights of the brackets at the carets that the last frame ran out of lexing for. */
+    private scheduleBrackets(): void {
+        clearTimeout(this.bracketTimer);
+        this.bracketTimer = setTimeout(() => this.requestRender(), 0);
     }
 
     /* A point of the screen in the coordinates of the content, undoing the scale a canvas puts on a node. */
@@ -2118,12 +2111,18 @@ export class EditorView {
         const firstLine = rows[0]?.line ?? 0;
         const lastLine = lastRow?.kind === 'text' ? lastRow.lastLine : (lastRow?.line ?? 0);
         const highlighted = this.highlightedLines(firstLine, lastLine);
+        const shownFrom = this.model.offsetAt({ line: firstLine, column: 0 });
+        const shownTo = lastLine + 1 < this.model.getLineCount() ? this.model.offsetAt({ line: lastLine + 1, column: 0 }) : this.model.getLength();
         paintGutter(this.gutterLines, this.layout, rows, {
             lineNumber: (line) => this.lineNumberLabel(line),
             changes: this.changedLines(rows),
             attribution: this.attributedLines(firstLine, lastLine),
             highlights: highlighted,
-            activeLines: new Set(selections.map((selection) => this.model.positionAt(selection.head).line)),
+            activeLines: new Set(
+                selections
+                    .filter((selection) => selection.head >= shownFrom && selection.head <= shownTo)
+                    .map((selection) => this.model.positionAt(selection.head).line)
+            ),
             foldable,
             lineLabel: (line) => this.lineLabelProvider?.(line) ?? null,
             foldName: (line, collapsed) => this.foldName(line, collapsed),
@@ -2197,18 +2196,28 @@ export class EditorView {
             }
         }
         const seen = new Set<number>();
-        for (const selection of selections) {
-            const bracket = this.matchingBracket(selection);
-            if (!bracket) {
+        for (const [index, selection] of selections.entries()) {
+            // A caret off screen has no bracket to draw, except the primary one, whose mate may be on screen.
+            if (index < selections.length - 1 && (selection.head < visibleFrom - 1 || selection.head > visibleTo + 1)) {
                 continue;
             }
-            if (bracket.mate === undefined) {
-                if (this.unmatchedBracket(bracket.at)) {
-                    marks.push({ className: 'se-bracket-unmatched', rects: this.paintRectangles(bracket.at, bracket.at + 1, rows) });
-                }
+            const at = this.bracketAt(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), selection.head);
+            if (at === undefined) {
                 continue;
             }
-            for (const offset of [bracket.at, bracket.mate]) {
+            const match = this.model.matchBracket(at, this.settings.language, BRACKET_FRAME_LIMIT);
+            if (match === null) {
+                this.scheduleBrackets();
+                break;
+            }
+            if (match === undefined) {
+                continue;
+            }
+            if (match.mate === undefined) {
+                marks.push({ className: 'se-bracket-unmatched', rects: this.paintRectangles(at, at + 1, rows) });
+                continue;
+            }
+            for (const offset of [at, match.mate]) {
                 if (!seen.has(offset)) {
                     seen.add(offset);
                     marks.push({ className: 'se-bracket-match', rects: this.paintRectangles(offset, offset + 1, rows) });
@@ -2654,6 +2663,9 @@ export class EditorView {
     }
 
     private stickyAt(scrollTop: number): StickyPlacement[] {
+        if (this.settings.stickyScroll === false) {
+            return [];
+        }
         const { layout } = this;
         const bottomOf = (line: number): number => {
             const row = layout.rowForLine(line);
@@ -2806,6 +2818,7 @@ export class EditorView {
         this.subscription.dispose();
         this.resizeObserver?.disconnect();
         this.blockObserver?.disconnect();
+        clearTimeout(this.bracketTimer);
         clearTimeout(this.foldTimer);
         clearTimeout(this.colorTimer);
         clearTimeout(this.noticeTimer);