@adecore/editor 0.22.0 → 0.23.0

package/src/layout.ts

@@ -1,7 +1,31 @@
-import type { Position } from '@adecore/editor-core';
+import type { DocumentChange, Position } from '@adecore/editor-core';
+
+import { offsetOfStop, rowOfStop, stopAtOffset, stopCount, xOfStop } from './geometry-stops.ts';
+import { BIDI_COLUMNS, bidiControl, visibleBidi } from './bidi.ts';
+import { uniformGeometry } from './uniform-geometry.ts';
+import { lineChangeMapper } from './layout-changes.ts';
 
 export type Affinity = 'before' | 'after';
 
+export interface VerticalWindow {
+    top: number;
+    bottom: number;
+}
+
+export interface SubRowBand {
+    first: number;
+    last: number;
+}
+
+export function subRowBand(top: number, subRows: number, lineHeight: number, window: VerticalWindow, block = 1): SubRowBand {
+    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));
+    return {
+        first: Math.floor(first / block) * block,
+        last: Math.min(subRows - 1, Math.ceil((last + 1) / block) * block - 1)
+    };
+}
+
 export interface LayoutDocument {
     getLineCount(): number;
     getLine(line: number): { start: number; end: number; next: number; text: string };
@@ -22,6 +46,11 @@ export interface Inlay {
     at: number;
     text: string;
     tooltip?: string;
+    /* The text cut into pieces drawn as elements of their own; they add up to `text`. */
+    parts?: readonly string[];
+    /* Pixels of space kept clear before and after the pill. */
+    gapLeft?: number;
+    gapRight?: number;
     /* What an input method has composed: drawn as text in the code face, with no padding, so what stands around it does not move. */
     composition?: boolean;
     /* A suggestion the host drew after the caret: text in the code face with no padding, which the caret stays in front of. */
@@ -40,6 +69,26 @@ export interface BlockWidget {
     revision?: number;
     /* A quiet row of one code line's height, placed at the indentation of its line and never measured. */
     lens?: boolean;
+    fixed?: boolean;
+}
+
+/* The lines from `from` through `to` drawn as a row of the host's own DOM, as tall as the host makes it, while the text stays in the document. */
+export interface BlockReplacement {
+    id: string;
+    /* Offsets inside the first and the last line it stands for. */
+    from: number;
+    to: number;
+    render: (container: HTMLElement) => void;
+    /* The height until the row has been measured. */
+    height?: number;
+    /* Drawn again in the element it already has when this changes, which `render` alone never is. */
+    revision?: number;
+    /* What assistive technology calls the row. */
+    label?: string;
+    /* Whether vertical caret movement may stop in the row's lines instead of stepping over the row. */
+    enterable?: boolean;
+    /* Called before the view scrolls to an offset inside the row's lines. */
+    onReveal?: () => void;
 }
 
 /* Collapsed, it hides the lines after `startLine` through `endLine`. */
@@ -72,6 +121,8 @@ export interface TextRow extends RowBase {
     head: number | null;
     /* Visual lines, which is more than one for a wrapped line. */
     subRows: number;
+    /* Set when the host draws the lines `line` through `lastLine` itself; the row is then as tall as its content. */
+    replacement?: BlockReplacement;
 }
 
 export interface BlockRow extends RowBase {
@@ -82,6 +133,7 @@ export interface BlockRow extends RowBase {
 export type LayoutRow = TextRow | BlockRow;
 
 export interface TextRun {
+    /* Line-relative offsets let preceding edits move a line without rewriting its runs. */
     from: number;
     to: number;
     x: number;
@@ -101,8 +153,9 @@ export interface InlineBox {
 export interface LineGeometry {
     start: number;
     end: number;
+    next: number;
     text: string;
-    /* UTF-16 offsets into the line at which a character begins, then the line's length. */
+    /* Uniform ASCII rows share x prefixes instead of allocating these four arrays per character. */
     offsets: number[];
     /* The x of each stop before and after the inlays that sit on it. */
     before: number[];
@@ -113,6 +166,9 @@ export interface LineGeometry {
     rowStarts: number[];
     /* The x each visual line ends at. */
     rowEnds: number[];
+    /* The furthest stop a greedy wrap decision read, including its lookahead. */
+    rowTriggers: number[];
+    uniform?: { first: readonly number[]; continuation: readonly number[] };
     runs: TextRun[];
     inlays: InlineBox[];
     subRows: number;
@@ -139,20 +195,6 @@ const PLAIN = /^[\x20-\x7e\t]*$/;
 const GRAPHEME_LIMIT = 20000;
 const SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
 
-function lowerBound(values: readonly number[], value: number): number {
-    let low = 0;
-    let high = values.length;
-    while (low < high) {
-        const middle = (low + high) >>> 1;
-        if (values[middle]! < value) {
-            low = middle + 1;
-        } else {
-            high = middle;
-        }
-    }
-    return low;
-}
-
 /* 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[] {
     const offsets: number[] = [];
@@ -178,7 +220,10 @@ function characterWidth(metrics: LayoutMetrics, text: string, x: number): number
         const tab = metrics.tabSize * metrics.charWidth;
         return (Math.floor(x / tab) + 1) * tab - x;
     }
-    return text.length === 1 && text >= ' ' && text <= '~' ? metrics.charWidth : metrics.measureText(text);
+    if (text.length === 1 && text >= ' ' && text <= '~') {
+        return metrics.charWidth;
+    }
+    return bidiControl(text) !== null ? BIDI_COLUMNS * metrics.charWidth : metrics.measureText(text);
 }
 
 /* Where the continuation rows of a wrapped line start, kept to half the row so a deep indent never leaves no room for text. */
@@ -197,20 +242,22 @@ export function wrapIndent(text: string, metrics: LayoutMetrics, limit: number):
  * The stops at which a wrapped line starts a new visual line, after the space a word ends in when
  * there is one on the visual line and in the middle of a word when there is not.
  */
-export function wrapStops(text: string, offsets: readonly number[], metrics: LayoutMetrics, limit: number): number[] {
+function wrapRows(text: string, offsets: readonly number[] | null, metrics: LayoutMetrics, limit: number): { breaks: number[]; triggers: number[] } {
     const indent = wrapIndent(text, metrics, limit);
     const breaks: number[] = [];
-    const count = offsets.length - 1;
+    const triggers: number[] = [];
+    const count = offsets === null ? text.length : offsets.length - 1;
     let rowStart = 0;
     let opportunity = -1;
     let x = 0;
     let index = 0;
     while (index < count) {
-        const character = text.slice(offsets[index]!, offsets[index + 1]!);
+        const character = offsets === null ? text[index]! : text.slice(offsets[index]!, offsets[index + 1]!);
         const width = characterWidth(metrics, character, x);
         if (index > rowStart && x + width > limit && !isSpace(character)) {
             const target = opportunity > rowStart ? opportunity : index;
             breaks.push(target);
+            triggers.push(index);
             rowStart = target;
             opportunity = -1;
             x = indent;
@@ -218,28 +265,35 @@ export function wrapStops(text: string, offsets: readonly number[], metrics: Lay
             continue;
         }
         x += width;
-        if (isSpace(character) && index + 1 < count && !isSpace(text[offsets[index + 1]!])) {
+        if (isSpace(character) && index + 1 < count && !isSpace(text[offsets === null ? index + 1 : offsets[index + 1]!])) {
             opportunity = index + 1;
         }
         index++;
     }
-    return breaks;
+    triggers.push(count);
+    return { breaks, triggers };
+}
+
+export function wrapStops(text: string, offsets: readonly number[], metrics: LayoutMetrics, limit: number): number[] {
+    return wrapRows(text, offsets, metrics, limit).breaks;
 }
 
 /* A line of text laid out against its metrics; wrapped at `limit` pixels unless that is null. */
-export function scanLine(
-    line: { start: number; end: number; text: string },
+export function scanDenseLine(
+    line: { start: number; end: number; text: string; next?: number },
     metrics: LayoutMetrics,
     limit: number | null,
     lineInlays: readonly Inlay[]
 ): LineGeometry {
     const text = line.text;
     const offsets = characterOffsets(text);
-    const breakStops = limit === null ? [] : wrapStops(text, offsets, metrics, limit);
+    const wrapped = limit === null ? { breaks: [], triggers: [offsets.length - 1] } : wrapRows(text, offsets, metrics, limit);
+    const breakStops = wrapped.breaks;
     const indent = limit === null ? 0 : wrapIndent(text, metrics, limit);
     const geometry: LineGeometry = {
         start: line.start,
         end: line.end,
+        next: line.next ?? line.end,
         text,
         offsets,
         before: [],
@@ -247,6 +301,7 @@ export function scanLine(
         rowOf: [],
         rowStarts: [0],
         rowEnds: [],
+        rowTriggers: wrapped.triggers,
         runs: [],
         inlays: [],
         subRows: breakStops.length + 1,
@@ -260,7 +315,7 @@ export function scanLine(
     let runX = 0;
     const flushRun = (end: number): void => {
         if (runStart >= 0 && end > runStart) {
-            geometry.runs.push({ from: line.start + runStart, to: line.start + end, x: runX, subRow: row, text: text.slice(runStart, end) });
+            geometry.runs.push({ from: runStart, to: end, x: runX, subRow: row, text: text.slice(runStart, end) });
         }
         runStart = -1;
     };
@@ -279,7 +334,11 @@ export function scanLine(
         while (nextInlay < lineInlays.length && lineInlays[nextInlay]!.at - line.start <= offset) {
             flushRun(offset);
             const inlay = lineInlays[nextInlay++]!;
-            const width = inlay.composition || inlay.ghost ? metrics.measureText(inlay.text) : Math.max(8, metrics.measureInlay(inlay.text) + 12);
+            const shown = visibleBidi(inlay.text);
+            const width =
+                inlay.composition || inlay.ghost
+                    ? metrics.measureText(shown)
+                    : Math.max(8, metrics.measureInlay(shown) + 12) + (inlay.gapLeft ?? 0) + (inlay.gapRight ?? 0);
             geometry.inlays.push({ inlay, x, width, subRow: row });
             x += width;
         }
@@ -289,7 +348,7 @@ export function scanLine(
         }
         const character = text.slice(offset, offsets[stop + 1]!);
         const width = characterWidth(metrics, character, x);
-        if (character === '\t') {
+        if (character === '\t' || bidiControl(character) !== null) {
             flushRun(offset);
         } else if (runStart < 0) {
             runStart = offset;
@@ -299,19 +358,39 @@ export function scanLine(
     }
     flushRun(text.length);
     geometry.rowEnds.push(x);
-    geometry.width = Math.max(...geometry.rowEnds);
+    for (const end of geometry.rowEnds) {
+        geometry.width = Math.max(geometry.width, end);
+    }
     return geometry;
 }
 
+export function scanLine(
+    line: { start: number; end: number; text: string; next?: number },
+    metrics: LayoutMetrics,
+    limit: number | null,
+    lineInlays: readonly Inlay[]
+): LineGeometry {
+    if (limit !== null && line.text.length > GRAPHEME_LIMIT && lineInlays.length === 0 && /^[\x20-\x7e]*$/.test(line.text)) {
+        const wrapped = wrapRows(line.text, null, metrics, limit);
+        const geometry = uniformGeometry(line, metrics, wrapped.breaks, wrapped.triggers, wrapIndent(line.text, metrics, limit));
+        if (geometry !== null) {
+            return geometry;
+        }
+    }
+    return scanDenseLine(line, metrics, limit, lineInlays);
+}
+
 export interface LayoutConfig {
-    /* The text changed, so nothing remembered about a line number holds any more. */
+    /* Clear remembered geometry when transaction offsets are unavailable. */
     textChanged?: boolean;
+    changes?: readonly (readonly DocumentChange[])[];
     metrics?: LayoutMetrics;
     /* The pixels a visual line may take before it wraps; null for no wrapping. */
     wrapWidth?: number | null;
     inlays?: readonly Inlay[];
     blocks?: readonly BlockWidget[];
     folds?: readonly FoldState[];
+    replacements?: readonly BlockReplacement[];
 }
 
 /*
@@ -322,16 +401,18 @@ export interface LayoutConfig {
 export class EditorLayout {
     rows: LayoutRow[] = [];
     height = 0;
+    lineHeightsVersion = 0;
     /* 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[] = [];
     private geometryCache = new Map<number, LineGeometry>();
-    private measuredRows = new Map<number, number>();
+    private measuredRows = new Map<number, { start: number; end: number; next: number; subRows: number }>();
     private measuredHeights = new Map<string, number>();
     private inlaysByLine = new Map<number, Inlay[]>();
     private inlays: readonly Inlay[] = [];
     private blocks: readonly BlockWidget[] = [];
     private folds: readonly FoldState[] = [];
+    private replacements: readonly BlockReplacement[] = [];
     private wrapWidth: number | null = null;
 
     readonly document: LayoutDocument;
@@ -360,22 +441,80 @@ export class EditorLayout {
         }
         if (config.inlays) {
             this.inlays = config.inlays;
-            measureAgain = true;
         }
         if (config.blocks) {
             this.blocks = config.blocks;
         }
         if (config.folds) {
             this.folds = config.folds;
+            this.lineHeightsVersion++;
         }
-        if (measureAgain || config.textChanged) {
+        if (config.replacements) {
+            this.replacements = config.replacements;
+            this.lineHeightsVersion++;
+        }
+        if (measureAgain || (config.textChanged && !config.changes?.length)) {
+            this.lineHeightsVersion++;
             this.geometryCache.clear();
             this.measuredRows.clear();
             this.width = 0;
+        } else {
+            if (config.changes?.length) {
+                this.retainGeometry(config.changes);
+                this.lineHeightsVersion++;
+            }
+            if (config.inlays !== undefined) {
+                if (!config.changes?.length) {
+                    for (const line of this.inlaysByLine.keys()) {
+                        this.geometryCache.delete(line);
+                        this.measuredRows.delete(line);
+                    }
+                }
+                for (const inlay of config.inlays) {
+                    const line = this.document.positionAt(inlay.at).line;
+                    this.geometryCache.delete(line);
+                    this.measuredRows.delete(line);
+                }
+                this.lineHeightsVersion++;
+            }
+            this.width = 0;
+            if (this.wrapWidth === null) {
+                for (const geometry of this.geometryCache.values()) {
+                    this.width = Math.max(this.width, geometry.width + ADDITIONAL_COLUMNS * this.metrics.charWidth);
+                }
+            }
         }
         this.rebuild();
     }
 
+    private retainGeometry(batches: readonly (readonly DocumentChange[])[]): void {
+        const map = lineChangeMapper(batches);
+        const remap = (bounds: { start: number; end: number; next: number }): { line: number; start: number; end: number; next: number } | null => {
+            const next = map({ start: bounds.start, end: Math.max(bounds.end, bounds.next - 1) });
+            if (next === null) {
+                return null;
+            }
+            const delta = next.start - bounds.start;
+            return { start: next.start, end: bounds.end + delta, next: bounds.next + delta, line: this.document.positionAt(next.start).line };
+        };
+        const geometries = new Map<number, LineGeometry>();
+        for (const geometry of this.geometryCache.values()) {
+            const next = remap(geometry);
+            if (next !== null && geometry.inlays.length === 0) {
+                geometries.set(next.line, next.start === geometry.start ? geometry : { ...geometry, start: next.start, end: next.end, next: next.next });
+            }
+        }
+        const measured = new Map<number, { start: number; end: number; next: number; subRows: number }>();
+        for (const [line, bounds] of this.measuredRows) {
+            const next = remap(bounds);
+            if (next !== null && !this.inlaysByLine.has(line)) {
+                measured.set(next.line, { start: next.start, end: next.end, next: next.next, subRows: bounds.subRows });
+            }
+        }
+        this.geometryCache = geometries;
+        this.measuredRows = measured;
+    }
+
     private rowCountOf(line: number, length: number): number {
         const limit = this.wrapWidth;
         if (limit === null) {
@@ -383,7 +522,7 @@ export class EditorLayout {
         }
         const measured = this.measuredRows.get(line);
         if (measured !== undefined) {
-            return measured;
+            return measured.subRows;
         }
         return Math.max(1, Math.ceil((length * this.metrics.charWidth) / Math.max(limit, this.metrics.charWidth)));
     }
@@ -412,6 +551,15 @@ export class EditorLayout {
                 folds.set(fold.startLine, fold);
             }
         }
+        const replaced = new Map<number, { replacement: BlockReplacement; endLine: number }>();
+        for (const replacement of this.replacements) {
+            const startLine = this.document.positionAt(replacement.from).line;
+            const endLine = Math.max(startLine, this.document.positionAt(replacement.to).line);
+            // A fold the person collapsed shows its own placeholder, so folding a replaced comment keeps working.
+            if (!folds.has(startLine) && !replaced.has(startLine)) {
+                replaced.set(startLine, { replacement, endLine });
+            }
+        }
         const count = this.document.getLineCount();
         this.rows = [];
         this.lineRows = new Array<number>(count);
@@ -424,13 +572,44 @@ export class EditorLayout {
                 line,
                 widget,
                 top: 0,
-                height: widget.lens ? this.metrics.lineHeight : (this.measuredHeights.get(key) ?? widget.height ?? DEFAULT_BLOCK_HEIGHT)
+                height: widget.lens
+                    ? this.metrics.lineHeight
+                    : widget.fixed
+                      ? Math.max(1, widget.height ?? DEFAULT_BLOCK_HEIGHT)
+                      : (this.measuredHeights.get(key) ?? widget.height ?? DEFAULT_BLOCK_HEIGHT)
             });
         };
         for (let line = 0; line < count; line++) {
             for (const block of above.get(line) ?? []) {
                 addBlock(block, line);
             }
+            const standIn = replaced.get(line);
+            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({
+                    key,
+                    kind: 'text',
+                    index,
+                    line,
+                    lastLine: last,
+                    tail: null,
+                    head: null,
+                    subRows: 1,
+                    top: 0,
+                    height: this.measuredHeights.get(key) ?? standIn.replacement.height ?? DEFAULT_BLOCK_HEIGHT,
+                    replacement: standIn.replacement
+                });
+                for (let covered = line; covered <= last; covered++) {
+                    this.lineRows[covered] = index;
+                }
+                for (const block of below.get(last) ?? []) {
+                    addBlock(block, last);
+                }
+                line = last;
+                continue;
+            }
             const fold = folds.get(line);
             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;
@@ -480,7 +659,7 @@ export class EditorLayout {
     setMeasuredHeight(key: string, height: number): boolean {
         const row = this.rows.find((candidate) => candidate.key === key);
         const next = Math.max(1, Math.round(height));
-        if (!row || !Number.isFinite(next) || row.height === next) {
+        if (!row || (row.kind === 'block' && row.widget.fixed) || !Number.isFinite(next) || row.height === next) {
             return false;
         }
         this.measuredHeights.set(key, next);
@@ -493,18 +672,27 @@ export class EditorLayout {
     syncRows(rows: readonly LayoutRow[]): boolean {
         let changed = false;
         for (const row of rows) {
-            if (row.kind !== 'text') {
+            if (row.kind !== 'text' || row.replacement !== undefined) {
                 continue;
             }
-            const subRows = this.geometry(row).subRows;
+            const geometry = this.geometry(row);
+            const subRows = geometry.subRows;
+            if (row.head === null && this.wrapWidth !== null) {
+                if (!this.measuredRows.has(row.line) && this.measuredRows.size >= GEOMETRY_CACHE_SIZE) {
+                    this.measuredRows.delete(this.measuredRows.keys().next().value!);
+                }
+                this.measuredRows.set(row.line, { start: geometry.start, end: geometry.end, next: geometry.next, subRows });
+            } else {
+                this.measuredRows.delete(row.line);
+            }
             if (subRows !== row.subRows) {
-                this.measuredRows.set(row.line, subRows);
                 row.subRows = subRows;
                 row.height = subRows * this.metrics.lineHeight;
                 changed = true;
             }
         }
         if (changed) {
+            this.lineHeightsVersion++;
             this.reflow();
         }
         return changed;
@@ -535,7 +723,7 @@ export class EditorLayout {
         while (stop < geometry.text.length && isSpace(geometry.text[stop])) {
             stop++;
         }
-        return TEXT_PADDING + geometry.before[Math.min(stop, geometry.before.length - 1)]!;
+        return TEXT_PADDING + xOfStop(geometry, Math.min(stop, stopCount(geometry) - 1));
     }
 
     rowForLine(line: number): LayoutRow {
@@ -591,11 +779,11 @@ export class EditorLayout {
     }
 
     private stopOf(geometry: LineGeometry, offset: number): number {
-        return Math.min(geometry.offsets.length - 1, lowerBound(geometry.offsets, Math.max(0, offset - geometry.start)));
+        return stopAtOffset(geometry, Math.max(0, offset - geometry.start));
     }
 
     xAt(geometry: LineGeometry, offset: number, affinity: Affinity = 'after'): number {
-        return TEXT_PADDING + geometry[affinity][this.stopOf(geometry, offset)]!;
+        return TEXT_PADDING + xOfStop(geometry, this.stopOf(geometry, offset), affinity);
     }
 
     /*
@@ -610,20 +798,20 @@ export class EditorLayout {
             }
         }
         const first = geometry.rowStarts[subRow] ?? 0;
-        const last = subRow + 1 < geometry.rowStarts.length ? geometry.rowStarts[subRow + 1]! : geometry.offsets.length - 1;
+        const last = subRow + 1 < geometry.rowStarts.length ? geometry.rowStarts[subRow + 1]! : stopCount(geometry) - 1;
         const wrapped = subRow + 1 < geometry.rowStarts.length;
         let best = first;
-        let distance = Math.abs(local - geometry.before[first]!);
+        let distance = Math.abs(local - xOfStop(geometry, first));
         // The stop that starts the next visual line stands in for the end of this one.
         for (let stop = first + 1; stop <= last; stop++) {
-            const edge = stop === last && wrapped ? geometry.rowEnds[subRow]! : geometry.before[stop]!;
+            const edge = stop === last && wrapped ? geometry.rowEnds[subRow]! : xOfStop(geometry, stop);
             const candidate = Math.abs(local - edge);
             if (candidate < distance) {
                 distance = candidate;
                 best = stop;
             }
         }
-        return { offset: geometry.start + geometry.offsets[best]!, rowEnd: wrapped && best === last };
+        return { offset: geometry.start + offsetOfStop(geometry, best), rowEnd: wrapped && best === last };
     }
 
     /* With `rowEnd`, an offset a wrap starts a visual line at is drawn at the end of the line before it. */
@@ -635,7 +823,7 @@ export class EditorLayout {
         }
         const geometry = this.geometry(row);
         const stop = this.stopOf(geometry, offset);
-        const subRow = geometry.rowOf[stop]!;
+        const subRow = rowOfStop(geometry, stop);
         if (rowEnd && subRow > 0 && geometry.rowStarts[subRow] === stop) {
             return {
                 x: TEXT_PADDING + geometry.rowEnds[subRow - 1]!,
@@ -644,7 +832,12 @@ export class EditorLayout {
                 height: this.metrics.lineHeight
             };
         }
-        return { x: TEXT_PADDING + geometry[affinity][stop]!, y: row.top + subRow * this.metrics.lineHeight, width: 1, height: this.metrics.lineHeight };
+        return {
+            x: TEXT_PADDING + xOfStop(geometry, stop, affinity),
+            y: row.top + subRow * this.metrics.lineHeight,
+            width: 1,
+            height: this.metrics.lineHeight
+        };
     }
 
     /* A height snapped up to the top of the visual line it is in, so a page scrolls to whole lines. */
@@ -671,10 +864,10 @@ export class EditorLayout {
         const geometry = this.geometry(row);
         const lastLine = this.document.getLine(row.lastLine);
         const hidden = position.line > row.line;
-        const subRow = hidden ? geometry.subRows - 1 : geometry.rowOf[this.stopOf(geometry, offset)]!;
+        const subRow = hidden ? geometry.subRows - 1 : rowOfStop(geometry, this.stopOf(geometry, offset));
         const last = subRow + 1 >= geometry.subRows;
-        const start = line.start + geometry.offsets[geometry.rowStarts[subRow]!]!;
-        const end = last ? lastLine.end : line.start + geometry.offsets[geometry.rowStarts[subRow + 1]!]!;
+        const start = line.start + offsetOfStop(geometry, geometry.rowStarts[subRow]!);
+        const end = last ? lastLine.end : line.start + offsetOfStop(geometry, geometry.rowStarts[subRow + 1]!);
         return { start, end, next: last ? lastLine.next : end, y: row.top + subRow * this.metrics.lineHeight };
     }
 
@@ -693,21 +886,26 @@ export class EditorLayout {
     }
 
     /* The boxes a range is drawn in, one per visual line it touches, among the rows given. */
-    rectangles(from: number, to: number, rows: readonly LayoutRow[]): LayoutRect[] {
+    rectangles(from: number, to: number, rows: readonly LayoutRow[], window?: VerticalWindow): LayoutRect[] {
         const result: LayoutRect[] = [];
         const lineHeight = this.metrics.lineHeight;
         for (const row of rows) {
-            if (row.kind !== 'text') {
+            if (
+                row.kind !== 'text' ||
+                row.replacement !== undefined ||
+                (window !== undefined && (row.top >= window.bottom || row.top + row.height <= window.top))
+            ) {
                 continue;
             }
             const geometry = this.geometry(row);
             if (from === to || from > geometry.end || to <= geometry.start) {
                 continue;
             }
-            const lastStop = geometry.offsets.length - 1;
+            const lastStop = stopCount(geometry) - 1;
             const fromStop = this.stopOf(geometry, Math.max(from, geometry.start));
             const toStop = this.stopOf(geometry, Math.min(to, geometry.end));
-            for (let subRow = 0; subRow < geometry.subRows; subRow++) {
+            const band = window === undefined ? { first: 0, last: geometry.subRows - 1 } : subRowBand(row.top, geometry.subRows, lineHeight, window);
+            for (let subRow = band.first; subRow <= band.last; subRow++) {
                 const last = subRow + 1 === geometry.subRows;
                 const rowFirst = geometry.rowStarts[subRow]!;
                 const rowEnd = last ? lastStop : geometry.rowStarts[subRow + 1]!;
@@ -717,8 +915,8 @@ export class EditorLayout {
                 if (first >= stop && !newline) {
                     continue;
                 }
-                const startX = first === fromStop ? geometry.after[first]! : geometry.before[first]!;
-                const endX = stop < rowEnd || last ? geometry.before[stop]! : geometry.rowEnds[subRow]!;
+                const startX = first === fromStop ? xOfStop(geometry, first, 'after') : xOfStop(geometry, first);
+                const endX = stop < rowEnd || last ? xOfStop(geometry, stop) : geometry.rowEnds[subRow]!;
                 result.push({
                     x: TEXT_PADDING + startX,
                     y: row.top + subRow * lineHeight,
@@ -731,8 +929,9 @@ export class EditorLayout {
     }
 
     /*
-     * The offset a visual line above or below, `distance` pixels away, at an x. Widgets are walked
-     * over, and the document's ends stop the caret on the first or the last offset.
+     * The offset a visual line above or below, `distance` pixels away, at an x. Widgets and the rows of
+     * replaced lines, unless the host made them enterable, are walked over, and the document's ends stop
+     * the caret on the first or the last offset.
      */
     verticalOffset(offset: number, direction: -1 | 1, x: number, distance = this.metrics.lineHeight): number {
         const caret = this.caret(offset);
@@ -741,10 +940,10 @@ export class EditorLayout {
             return 0;
         }
         let row = this.rowAt(y);
-        while (row.kind === 'block') {
+        while (row.kind === 'block' || (row.replacement !== undefined && row.replacement.enterable !== true)) {
             const next = this.rows[row.index + direction];
             if (!next) {
-                return offset;
+                return direction < 0 ? 0 : this.document.getLine(this.document.getLineCount() - 1).end;
             }
             row = next;
             y = direction < 0 ? row.top + row.height - 1 : row.top;
@@ -762,8 +961,8 @@ export class EditorLayout {
             const geometry = this.geometry(row);
             const stop = this.stopOf(geometry, offset);
             const next = stop + direction;
-            if (next >= 0 && next < geometry.offsets.length && offset >= geometry.start && offset <= geometry.end) {
-                return geometry.start + geometry.offsets[next]!;
+            if (next >= 0 && next < stopCount(geometry) && offset >= geometry.start && offset <= geometry.end) {
+                return geometry.start + offsetOfStop(geometry, next);
             }
         }
         for (let index = row.index + direction; index >= 0 && index < this.rows.length; index += direction) {