@adecore/editor 0.23.0 → 0.24.0

package/dist/layout.js

@@ -2,6 +2,7 @@ import { offsetOfStop, rowOfStop, stopAtOffset, stopCount, xOfStop } from './geo
 import { BIDI_COLUMNS, bidiControl, visibleBidi } from './bidi.js';
 import { uniformGeometry } from './uniform-geometry.js';
 import { lineChangeMapper } from './layout-changes.js';
+import { offsetMapper } from './offsets.js';
 export function subRowBand(top, subRows, lineHeight, window, block = 1) {
     const first = Math.max(0, Math.min(subRows - 1, Math.floor((window.top - top) / lineHeight)));
     const last = Math.max(first, Math.min(subRows - 1, Math.ceil((window.bottom - top) / lineHeight) - 1));
@@ -21,7 +22,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;
 /* 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) {
     const offsets = [];
@@ -31,7 +32,8 @@ function characterOffsets(text) {
         }
     }
     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);
         }
     }
@@ -190,6 +192,47 @@ export function scanLine(line, metrics, limit, lineInlays) {
     }
     return scanDenseLine(line, metrics, limit, lineInlays);
 }
+/* A text row whose key follows its line, so an edit above it moves the row without a new key. */
+class LineRow {
+    kind = 'text';
+    index;
+    line;
+    lastLine;
+    tail;
+    head;
+    subRows;
+    top = 0;
+    height;
+    constructor(index, line, lastLine, tail, head, subRows, height) {
+        this.index = index;
+        this.line = line;
+        this.lastLine = lastLine;
+        this.tail = tail;
+        this.head = head;
+        this.subRows = subRows;
+        this.height = height;
+    }
+    get key() {
+        return `line:${this.line}`;
+    }
+}
+/* Sorted, with the ranges that overlap or touch joined. */
+function mergeRanges(ranges) {
+    ranges.sort((left, right) => left.first - right.first);
+    const merged = [];
+    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
@@ -202,6 +245,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;
     lineRows = [];
+    /* The rows of widgets and replacements by key, which their measured heights come in by. */
+    keyed = new Map();
+    special = [];
     geometryCache = new Map();
     measuredRows = new Map();
     measuredHeights = new Map();
@@ -246,6 +292,7 @@ export class EditorLayout {
             this.replacements = config.replacements;
             this.lineHeightsVersion++;
         }
+        let edit;
         if (measureAgain || (config.textChanged && !config.changes?.length)) {
             this.lineHeightsVersion++;
             this.geometryCache.clear();
@@ -254,6 +301,7 @@ export class EditorLayout {
         }
         else {
             if (config.changes?.length) {
+                edit = this.lineEdit(config.changes);
                 this.retainGeometry(config.changes);
                 this.lineHeightsVersion++;
             }
@@ -278,7 +326,31 @@ export class EditorLayout {
                 }
             }
         }
-        this.rebuild();
+        this.rebuild(edit);
+    }
+    /* The lines the transactions changed, in the coordinates of the text before and after them. */
+    lineEdit(batches) {
+        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 };
     }
     retainGeometry(batches) {
         const map = lineChangeMapper(batches);
@@ -318,7 +390,18 @@ export class EditorLayout {
         }
         return Math.max(1, Math.ceil((length * this.metrics.charWidth) / Math.max(limit, this.metrics.charWidth)));
     }
-    rebuild() {
+    rebuild(edit) {
+        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;
+    }
+    structure() {
         this.inlaysByLine.clear();
         for (const inlay of this.inlays) {
             const line = this.document.positionAt(inlay.at).line;
@@ -351,15 +434,115 @@ export class EditorLayout {
                 replaced.set(startLine, { replacement, endLine });
             }
         }
+        const special = [];
+        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.
+     */
+    patch(edit, structure) {
         const count = this.document.getLineCount();
-        this.rows = [];
-        this.lineRows = new Array(count);
+        const delta = edit.newLast - edit.oldLast;
+        if (this.rows.length === 0 || this.lineRows.length + delta !== count) {
+            return false;
+        }
+        const moved = (range) => {
+            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();
+        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. */
+    buildRows(structure, from, to, index) {
+        const { above, below, folds, replaced } = structure;
+        const count = this.document.getLineCount();
+        const rows = [];
+        const lineRows = new Array(to - from + 1);
         const addBlock = (widget, line) => {
             const key = `block:${widget.id}`;
-            this.rows.push({
+            const row = {
                 key,
                 kind: 'block',
-                index: this.rows.length,
+                index: index + rows.length,
                 line,
                 widget,
                 top: 0,
@@ -368,9 +551,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);
             }
@@ -378,11 +563,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 = {
                     key,
                     kind: 'text',
-                    index,
+                    index: rowIndex,
                     line,
                     lastLine: last,
                     tail: null,
@@ -391,9 +576,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);
@@ -405,59 +592,59 @@ 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. */
     clampToLine(offset, line) {
         const bounds = this.document.getLine(line);
         return Math.min(bounds.end, Math.max(bounds.start, offset));
     }
-    reflow() {
-        let top = 0;
-        for (const row of this.rows) {
+    /* The tops of the rows from `from` on. */
+    reflow(from) {
+        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) {
+        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, height) {
-        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) {
-        let changed = false;
+        let first = this.rows.length;
         for (const row of rows) {
             if (row.kind !== 'text' || row.replacement !== undefined) {
                 continue;
@@ -476,14 +663,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) {
         let low = 0;

package/dist/tokens.js

@@ -109,7 +109,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(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(lastNew - firstLine + 1).fill(undefined), this.entries.slice(lastOld + 1));
         this.reusableFrom = lastNew + 1;
     }
     /* Old colors stay visible until the rebuilt grammar reaches each line. */

package/dist/types.d.ts

@@ -26,6 +26,7 @@ export interface EditorOptions {
     readonly indentation?: EditorIndentation;
     readonly smartKeys?: Partial<EditorSmartKeys>;
     readonly guides?: boolean;
+    readonly stickyScroll?: boolean;
     readonly whitespace?: boolean;
     readonly rightMargin?: number | null;
     readonly foldOutline?: EditorFoldOutline;
@@ -319,6 +320,7 @@ export interface Editor {
     setIndentation(indentation: EditorIndentation): void;
     setSmartKeys(keys: Partial<EditorSmartKeys>): void;
     setGuides(guides: boolean): void;
+    setStickyScroll?(sticky: boolean): void;
     setWhitespace(whitespace: boolean): void;
     setRightMargin(column: number | null): void;
     setFoldOutline(outline: EditorFoldOutline): void;

package/dist/view.d.ts

@@ -21,6 +21,7 @@ export interface ViewSettings {
     rightMargin: number | null;
     foldOutline: 'off' | 'hover' | 'always';
     folding?: boolean;
+    stickyScroll?: boolean;
 }
 export type ViewFold = Omit<FoldingRange, 'kind'> & {
     kind: FoldingRange['kind'] | 'custom';
@@ -156,11 +157,11 @@ export declare class EditorView {
     private defaultRoles;
     private settled;
     private foldTimer;
+    private bracketTimer;
     private colorTimer;
     private noticeTimer;
     private liveTimer;
     private lineLabelProvider;
-    private bracketCache;
     private wrapWidth;
     private rowEndCaret;
     private topAnchor;
@@ -276,7 +277,6 @@ export declare class EditorView {
     private anchorScroll;
     private syncWrap;
     private bracketAt;
-    private brackets;
     matchingBracket(selection: {
         anchor: number;
         head: number;
@@ -284,7 +284,7 @@ export declare class EditorView {
         at: number;
         mate: number | undefined;
     } | null;
-    unmatchedBracket(at: number): boolean;
+    private scheduleBrackets;
     contentPoint(clientX: number, clientY: number): {
         x: number;
         y: number;

package/dist/view.js

@@ -1,6 +1,6 @@
 import { offsetOfStop, xOfStop } from './geometry-stops.js';
 import { visibleBidi } from './bidi.js';
-import { indentationColumn, replacementText, scanBrackets } from '@adecore/editor-core';
+import { indentationColumn, replacementText } from '@adecore/editor-core';
 import { createSearchClient } from './search-client.js';
 import { FindController } from './find.js';
 import { EditorLayout, RIGHT_PADDING, subRowBand } from './layout.js';
@@ -39,6 +39,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;
 const NOTICE_MS = 3000;
@@ -181,11 +183,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. */
     settled = new Set();
     foldTimer;
+    bracketTimer;
     colorTimer;
     noticeTimer;
     liveTimer;
     lineLabelProvider = null;
-    bracketCache;
     wrapWidth = 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. */
     rowEndCaret = null;
@@ -766,7 +768,7 @@ export class EditorView {
                 ...(this.foldHints === null ? {} : { hints: this.foldHints })
             });
         this.foldRanges = this.withCustomFolds(ranges);
-        this.outline.setStructure(structuralEntries(ranges, this.model, (from, to) => this.model.slice(from, to), (offset) => this.brackets().pairs.get(offset)));
+        this.outline.setStructure(structuralEntries(ranges, this.model, (from, to) => this.model.slice(from, to), (offset) => this.model.matchBracket(offset, this.settings.language)?.mate));
         const anchors = new Set(this.foldRanges.map((range) => range.from));
         this.collapsed = new Set([...this.collapsed].filter((anchor) => anchors.has(anchor)));
         this.refoldLayout();
@@ -1079,7 +1081,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)));
@@ -1100,23 +1102,15 @@ export class EditorView {
         const candidates = from !== to ? [from] : [head, head - 1];
         return candidates.find((at) => at >= 0 && /[()[\]{}]/.test(this.model.slice(at, at + 1)));
     }
-    brackets() {
-        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) {
         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) {
-        return this.brackets().unmatched.has(at);
+    /* Draws the highlights of the brackets at the carets that the last frame ran out of lexing for. */
+    scheduleBrackets() {
+        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. */
     contentPoint(clientX, clientY) {
@@ -1813,12 +1807,16 @@ 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),
@@ -1890,18 +1888,28 @@ export class EditorView {
             }
         }
         const seen = new Set();
-        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;
+            }
+            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 [bracket.at, bracket.mate]) {
+            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) });
@@ -2294,6 +2302,9 @@ export class EditorView {
         return Math.min(STICKY_MAX_LINES, Math.floor(this.viewportHeight / this.layout.metrics.lineHeight / STICKY_ROW_SHARE));
     }
     stickyAt(scrollTop) {
+        if (this.settings.stickyScroll === false) {
+            return [];
+        }
         const { layout } = this;
         const bottomOf = (line) => {
             const row = layout.rowForLine(line);
@@ -2427,6 +2438,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/editor",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "type": "module",
   "exports": {
     ".": {
@@ -54,7 +54,7 @@
     "test": "bun test --conditions=source"
   },
   "dependencies": {
-    "@adecore/editor-core": "0.23.0",
+    "@adecore/editor-core": "0.24.0",
     "linkedom": "^0.18.13",
     "shiki": "^4.4.3"
   },

package/src/controller.ts

@@ -202,7 +202,9 @@ export class InputController {
         });
         this.listen(input, 'keyup', (event) => this.gesture.keyup(event));
         this.listen(root, 'focusout', (event) => {
-            if (!(event.relatedTarget instanceof Node) || !root.contains(event.relatedTarget)) {
+            // A node by its type, as `instanceof Node` fails for one of another window, such as a window the opener mounted the editor in.
+            const related = event.relatedTarget as Node | null;
+            if (typeof related?.nodeType !== 'number' || !root.contains(related)) {
                 this.options.blur();
             }
         });
@@ -790,7 +792,12 @@ export class InputController {
     private pointerDown(event: PointerEvent): void {
         this.view.cancelScroll();
         const target = event.target as HTMLElement;
-        if (event.button !== 0 || target.closest('button, a, input, textarea, [contenteditable], .se-block, .se-gutter, .se-sticky')) {
+        // A press a part took already, such as a pinned header, which draws itself anew and so takes its target off the page before the press bubbles here.
+        if (
+            event.defaultPrevented ||
+            event.button !== 0 ||
+            target.closest('button, a, input, textarea, [contenteditable], .se-block, .se-gutter, .se-sticky')
+        ) {
             return;
         }
         // Cancels the compatibility mouse events, whose focus change would close the keyboard a tap opened; scrolling is not affected.