@adecore/editor 0.22.0 → 0.23.0

package/dist/view.js

@@ -1,11 +1,14 @@
+import { offsetOfStop, xOfStop } from './geometry-stops.js';
+import { visibleBidi } from './bidi.js';
 import { indentationColumn, replacementText, scanBrackets } from '@adecore/editor-core';
+import { createSearchClient } from './search-client.js';
 import { FindController } from './find.js';
-import { EditorLayout, RIGHT_PADDING } from './layout.js';
+import { EditorLayout, RIGHT_PADDING, subRowBand } from './layout.js';
 import { createMetrics, readEditorFont } from './metrics.js';
 import { AttributionRuns, colorValue, tintValue } from './attribution.js';
 import { renderCodeBlock } from './code-block.js';
 import { emit, subscribe } from './listeners.js';
-import { mapOffset } from './offsets.js';
+import { mapOffset, offsetMapper } from './offsets.js';
 import { mapTrackedRange } from './tracked-range.js';
 import { scrollPosition } from './scroll.js';
 import { easeOut, scrollDuration } from './scroll-animation.js';
@@ -17,16 +20,16 @@ import { TokenCache } from './tokens.js';
 function sameRect(left, right) {
     return left.left === right.left && left.top === right.top && left.right === right.right && left.bottom === right.bottom;
 }
-function mapRange(range, changes) {
-    return { ...range, from: mapOffset(range.from, changes), to: mapOffset(range.to, changes) };
+function mapRange(range, map) {
+    return { ...range, from: map(range.from), to: map(range.to) };
 }
-function mapFoldHints(hints, changes) {
+function mapFoldHints(hints, map) {
     return {
-        symbols: hints.symbols?.map((hint) => mapRange(hint, changes)) ?? [],
+        symbols: hints.symbols?.map((hint) => mapRange(hint, map)) ?? [],
         ranges: hints.ranges?.map((hint) => ({
-            ...mapRange(hint, changes),
-            ...(hint.head === undefined ? {} : { head: mapOffset(hint.head, changes) }),
-            ...(hint.tail === undefined ? {} : { tail: mapOffset(hint.tail, changes) })
+            ...mapRange(hint, map),
+            ...(hint.head === undefined ? {} : { head: map(hint.head) }),
+            ...(hint.tail === undefined ? {} : { tail: map(hint.tail) })
         })) ?? []
     };
 }
@@ -82,6 +85,7 @@ export class EditorView {
     preview;
     signs;
     notice;
+    live;
     sticky;
     overview;
     tickTip;
@@ -93,10 +97,17 @@ export class EditorView {
     findListeners = new Set();
     scopeListeners = new Set();
     viewListeners = new Set();
+    lineHeightListeners = new Set();
+    announcedLineHeights = -1;
     gutterActionListeners = new Set();
     gutterAction = null;
     gutterMarkerListeners = new Set();
     gutterMarkers = new Map();
+    lineTokenProvider = null;
+    lineNumberProvider = null;
+    lineNumberLabels = [];
+    lineNumberRevision = -1;
+    lineNumberWidth = 0;
     semantic = [];
     scopeColors = null;
     semanticVersion = 0;
@@ -110,8 +121,9 @@ export class EditorView {
     outline = new Outline();
     stickyEntries = [];
     scopeKey = '';
-    changeMarks = [];
+    changeLayers = new Map();
     changeVersion = 0;
+    changeCache = null;
     attribution = new AttributionRuns();
     highlights = new AttributionRuns();
     remoteCarets = [];
@@ -137,9 +149,14 @@ export class EditorView {
     frameGeometry = null;
     disposed = false;
     inlays = [];
+    inlayHoverListeners = new Set();
+    inlayHover = null;
+    inlayLink = null;
+    inlayLinkElement = null;
     /* The host's widgets by owner, so one owner setting its rows never takes another's away. */
     blocks = new Map();
     lenses = [];
+    replacements = new Map();
     occurrences = [];
     replacePreview = null;
     dropCaret = null;
@@ -166,6 +183,8 @@ export class EditorView {
     foldTimer;
     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. */
@@ -220,6 +239,8 @@ export class EditorView {
         for (const name of ['autocapitalize', 'autocomplete', 'autocorrect']) {
             this.input.setAttribute(name, 'off');
         }
+        this.input.setAttribute('enterkeyhint', 'enter');
+        this.input.setAttribute('inputmode', 'text');
         this.input.setAttribute('aria-multiline', 'true');
         this.sticky.setAttribute('aria-hidden', 'true');
         this.sticky.hidden = true;
@@ -230,13 +251,30 @@ export class EditorView {
         this.notice = make('div', 'se-notice');
         this.notice.setAttribute('role', 'status');
         this.notice.hidden = true;
-        this.root.append(this.viewport, this.overview, this.tickTip, this.input, this.notice);
+        this.live = make('div', 'se-live');
+        this.live.setAttribute('role', 'status');
+        this.live.setAttribute('aria-live', 'polite');
+        this.live.setAttribute('aria-atomic', 'true');
+        this.root.append(this.viewport, this.overview, this.tickTip, this.input, this.notice, this.live);
         this.wireOverview();
         this.wireAttribution();
         container.append(this.root);
         this.font = readEditorFont(this.root);
         this.layout = new EditorLayout(model, createMetrics(this.font, settings.tabSize, document));
-        this.find = new FindController(model);
+        this.find = new FindController(model, {
+            createClient: () => (settings.searchWorker === undefined ? null : createSearchClient({ workerFactory: settings.searchWorker })),
+            changed: (reveal) => {
+                if (this.disposed) {
+                    return;
+                }
+                this.announceFind();
+                if (reveal) {
+                    this.revealFind();
+                }
+                this.paintPreview();
+                this.requestRender();
+            }
+        });
         this.tokens = new TokenCache({ getLineCount: () => model.getLineCount(), getLineText: (line) => model.getLine(line).text });
         const ResizeObserverClass = document.defaultView?.ResizeObserver;
         this.blockObserver = ResizeObserverClass
@@ -272,6 +310,10 @@ export class EditorView {
         this.layout.configure({ metrics: createMetrics(this.font, this.settings.tabSize, this.document) });
         this.render();
     }
+    /* Words the gutter draws changed, not a metric: the lines keep their layout. */
+    repaint() {
+        this.render();
+    }
     refreshFont() {
         this.font = readEditorFont(this.root);
         this.applySettings();
@@ -281,8 +323,33 @@ export class EditorView {
         this.colorAhead();
         this.render();
     }
+    grammarChanged() {
+        if (!this.disposed && this.lineTokenProvider === null && this.tokens.revalidate()) {
+            this.colorAhead(true);
+        }
+    }
+    setLineTokens(tokens) {
+        this.lineTokenProvider = tokens;
+        clearTimeout(this.colorTimer);
+        this.semanticLines.clear();
+        this.layoutVersion++;
+        this.render();
+    }
+    setLineNumbers(labels) {
+        this.lineNumberProvider = labels;
+        this.lineNumberRevision = -1;
+        this.stickyEntries = [];
+        this.render();
+    }
+    lineNumberLabel(line) {
+        return this.lineNumberProvider === null ? String(line + 1) : (this.lineNumberLabels[line] ?? null);
+    }
     setInlays(inlays) {
-        this.inlays = inlays.map((inlay) => ({ ...inlay, text: inlay.text.replace(/[\r\n]/g, ' ') }));
+        this.inlays = inlays.map((inlay) => ({
+            ...inlay,
+            text: inlay.text.replace(/[\r\n]/g, ' '),
+            ...(inlay.parts === undefined ? {} : { parts: inlay.parts.map((part) => part.replace(/[\r\n]/g, ' ')) })
+        }));
         this.configureText();
     }
     setBlockWidgets(owner, blocks) {
@@ -295,6 +362,23 @@ export class EditorView {
         this.anchorScroll(() => this.layout.configure({ blocks: this.allBlocks() }));
         this.render();
     }
+    /* Lines the host draws as a row of its own, by owner; where two owners claim the same line the owner that sorts first keeps it. */
+    setReplacements(owner, replacements) {
+        if (replacements.length === 0 && !this.replacements.has(owner)) {
+            return;
+        }
+        if (replacements.length === 0) {
+            this.replacements.delete(owner);
+        }
+        else {
+            this.replacements.set(owner, [...replacements]);
+        }
+        this.anchorScroll(() => this.layout.configure({ replacements: this.allReplacements() }));
+        this.render();
+    }
+    allReplacements() {
+        return [...this.replacements.keys()].sort().flatMap((owner) => this.replacements.get(owner));
+    }
     /* The quiet rows above declarations: kept apart from the host's widgets, so setting one kind never takes the other away. */
     setLenses(lenses) {
         this.lenses = [...lenses];
@@ -334,7 +418,7 @@ export class EditorView {
     }
     /* The grammar's colors of a line with the servers' laid over them, the same object for as long as neither changed. */
     styledTokensOf(line) {
-        const base = this.tokens.tokensOf(line);
+        const base = this.lineTokenProvider === null ? this.tokens.tokensOf(line) : (this.lineTokenProvider(line) ?? null);
         if (base === null || this.semantic.length === 0 || this.scopeColors === null) {
             return base;
         }
@@ -342,7 +426,7 @@ export class EditorView {
         if (spans === undefined) {
             return base;
         }
-        const signature = spans.map((span) => `${span.from}:${span.to}:${span.color}:${span.fontStyle}`).join('|');
+        const signature = spans.map((span) => `${span.from}:${span.to}:${span.color}:${span.fontStyle}:${span.within ?? ''}`).join('|');
         const cached = this.semanticLines.get(line);
         if (cached?.base === base && cached.signature === signature) {
             return cached.result;
@@ -373,7 +457,7 @@ export class EditorView {
                 continue;
             }
             const list = lines.get(line) ?? [];
-            list.push({ from: token.from - start, to: token.to - start, color: style.color, fontStyle: style.fontStyle });
+            list.push({ from: token.from - start, to: token.to - start, color: style.color, fontStyle: style.fontStyle, within: token.within });
             lines.set(line, list);
         }
         for (const list of lines.values()) {
@@ -400,6 +484,41 @@ export class EditorView {
             this.notice.hidden = true;
         }, NOTICE_MS);
     }
+    foldName(line, collapsed) {
+        const template = (collapsed ? this.settings.messages.unfold : this.settings.messages.fold) ??
+            (collapsed ? 'Unfold lines {start} to {end}' : 'Fold lines {start} to {end}');
+        const end = this.foldAt(line)?.endLine ?? line;
+        return template.replace('{start}', String(line + 1)).replace('{end}', String(end + 1));
+    }
+    /* A new child each time, since a region only speaks what is added to it and a repeated sentence would otherwise stay silent. */
+    announce(message) {
+        const sentence = this.document.createElement('span');
+        sentence.textContent = message;
+        this.live.replaceChildren(sentence);
+        clearTimeout(this.liveTimer);
+        this.liveTimer = setTimeout(() => this.live.replaceChildren(), NOTICE_MS);
+    }
+    setInputPopup(popup) {
+        if (popup === null) {
+            for (const name of ['aria-expanded', 'aria-controls', 'aria-autocomplete', 'aria-activedescendant']) {
+                this.input.removeAttribute(name);
+            }
+            return;
+        }
+        this.input.setAttribute('aria-expanded', 'true');
+        this.input.setAttribute('aria-autocomplete', 'list');
+        this.input.setAttribute('aria-controls', popup.controls);
+        if (popup.activeDescendant === undefined) {
+            this.input.removeAttribute('aria-activedescendant');
+        }
+        else {
+            this.input.setAttribute('aria-activedescendant', popup.activeDescendant);
+        }
+    }
+    setLineLabels(labels) {
+        this.lineLabelProvider = labels;
+        this.render();
+    }
     get gutterElement() {
         return this.gutter;
     }
@@ -412,6 +531,9 @@ export class EditorView {
     get focused() {
         return this.document.activeElement === this.input;
     }
+    get contentHeight() {
+        return this.layout.height + Math.max(0, (this.viewport.offsetHeight ?? 0) - (this.viewport.clientHeight ?? 0));
+    }
     get viewportHeight() {
         return this.clientHeight || DEFAULT_HEIGHT;
     }
@@ -461,7 +583,14 @@ export class EditorView {
             this.outline.edited(batches);
             this.changeVersion++;
             this.tokens.edited(batches, (offset) => this.model.positionAt(offset).line);
-            this.layout.configure({ textChanged: true, inlays: this.displayedInlays(), blocks: this.allBlocks(), folds: this.foldStates() });
+            this.layout.configure({
+                textChanged: true,
+                changes: batches,
+                inlays: this.displayedInlays(),
+                blocks: this.allBlocks(),
+                folds: this.foldStates(),
+                replacements: this.allReplacements()
+            });
             if (anchor && this.viewport.scrollTop > 0) {
                 let offset = anchor.offset;
                 for (const changes of batches) {
@@ -481,28 +610,34 @@ export class EditorView {
     }
     /* Moves everything anchored to an offset along with one batch of changes. */
     followEdit(changes) {
-        this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: mapOffset(inlay.at, changes) }));
+        const map = offsetMapper(changes);
+        this.inlays = this.inlays.map((inlay) => ({ ...inlay, at: map(inlay.at) }));
         for (const [owner, blocks] of this.blocks) {
-            this.blocks.set(owner, blocks.map((block) => ({ ...block, at: mapOffset(block.at, changes) })));
+            this.blocks.set(owner, blocks.map((block) => ({ ...block, at: map(block.at) })));
         }
-        this.lenses = this.lenses.map((lens) => ({ ...lens, at: mapOffset(lens.at, changes) }));
-        this.collapsed = new Set([...this.collapsed].map((anchor) => mapOffset(anchor, changes)));
-        this.settled = new Set([...this.settled].map((anchor) => mapOffset(anchor, changes)));
+        this.lenses = this.lenses.map((lens) => ({ ...lens, at: map(lens.at) }));
+        for (const [owner, entries] of this.replacements) {
+            this.replacements.set(owner, entries.map((entry) => ({ ...entry, from: map(entry.from), to: map(entry.to) })));
+        }
+        this.collapsed = new Set([...this.collapsed].map((anchor) => map(anchor)));
+        this.settled = new Set([...this.settled].map((anchor) => map(anchor)));
         if (this.foldHints !== null) {
-            this.foldHints = mapFoldHints(this.foldHints, changes);
+            this.foldHints = mapFoldHints(this.foldHints, map);
         }
-        this.customFolds = this.customFolds.map((fold) => mapRange(fold, changes));
+        this.customFolds = this.customFolds.map((fold) => mapRange(fold, map));
         this.find.mapBounds(changes);
-        this.changeMarks = this.changeMarks.map((mark) => mapRange(mark, changes));
-        this.markers = this.markers.map((marker) => mapRange(marker, changes));
+        for (const [layer, marks] of this.changeLayers) {
+            this.changeLayers.set(layer, marks.map((mark) => mapRange(mark, map)));
+        }
+        this.markers = this.markers.map((marker) => mapRange(marker, map));
         this.mapTracked(changes);
-        this.attribution.map(changes);
-        this.highlights.map(changes);
-        this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: mapOffset(caret.at, changes) }));
+        this.attribution.map(changes, map);
+        this.highlights.map(changes, map);
+        this.remoteCarets = this.remoteCarets.map((caret) => ({ ...caret, at: map(caret.at) }));
         for (const [owner, entries] of this.lineActions) {
-            this.lineActions.set(owner, entries.map((entry) => ({ ...entry, at: mapOffset(entry.at, changes) })));
+            this.lineActions.set(owner, entries.map((entry) => ({ ...entry, at: map(entry.at) })));
         }
-        this.semantic = this.semantic.map((token) => mapRange(token, changes));
+        this.semantic = this.semantic.map((token) => mapRange(token, map));
     }
     mapTracked(changes) {
         for (const entry of this.tracked) {
@@ -531,13 +666,14 @@ export class EditorView {
     }
     /* The ranges follow the text until the next read of the document, so a fold above an edit stays closed meanwhile. */
     mappedFolds(batches) {
+        const mappers = batches.map(offsetMapper);
         const mapped = [];
         for (const range of this.foldRanges) {
             let from = range.from;
             let to = range.to;
-            for (const changes of batches) {
-                from = mapOffset(from, changes);
-                to = mapOffset(to, changes);
+            for (const map of mappers) {
+                from = map(from);
+                to = map(to);
             }
             const startLine = this.model.positionAt(from).line;
             const endLine = this.model.positionAt(to).line;
@@ -574,7 +710,7 @@ export class EditorView {
                     height: rest.length * this.layout.metrics.lineHeight,
                     render: (container) => {
                         container.classList.add('se-widget', 'se-ghost-rows');
-                        renderCodeBlock(container, rest.join('\n'), null, this.settings.tabSize, {});
+                        renderCodeBlock(container, visibleBidi(rest.join('\n')), null, this.settings.tabSize, {});
                     }
                 }
             ]);
@@ -611,11 +747,14 @@ export class EditorView {
     /* The folds of the document, a moment after the last edit since they read all of it. */
     scheduleFolds() {
         clearTimeout(this.foldTimer);
+        if (this.settings.folding === false) {
+            return;
+        }
         this.foldTimer = setTimeout(() => this.refreshFolds(), FOLD_DELAY_MS);
     }
     /* Reads the folds off the document now, which otherwise waits for a pause in editing. */
     refreshFolds() {
-        if (this.disposed) {
+        if (this.disposed || this.settings.folding === false) {
             return;
         }
         const ranges = this.model.getLength() > FOLD_LIMIT
@@ -768,6 +907,9 @@ export class EditorView {
      * and closes one of the document's own. A selection inside one line has no line to fold.
      */
     foldSelection() {
+        if (this.settings.folding === false) {
+            return;
+        }
         const { anchor, head } = this.model.getPrimary();
         let from = Math.min(anchor, head);
         let to = Math.max(anchor, head);
@@ -816,6 +958,9 @@ export class EditorView {
      * is what a file opens as the first time, and again as a language server names more of them.
      */
     restoreFolds(state, defaults = []) {
+        if (this.settings.folding === false) {
+            return;
+        }
         const last = this.model.getLineCount() - 1;
         if (state !== null) {
             this.customFolds = state.custom
@@ -909,6 +1054,10 @@ export class EditorView {
     /* Opens the folds that hide an offset, so a caret or a search result is where it can be seen. */
     ensureVisible(offset) {
         const line = this.model.positionAt(offset).line;
+        const row = this.layout.rowForLine(line);
+        if (row.kind === 'text') {
+            row.replacement?.onReveal?.();
+        }
         if (!this.layout.hides(offset)) {
             return;
         }
@@ -932,7 +1081,8 @@ export class EditorView {
         action();
         const next = this.layout.rows.find((row) => row.key === anchor.key);
         if (next) {
-            this.viewport.scrollTop = Math.max(0, next.top + offset);
+            // 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)));
         }
     }
     syncWrap() {
@@ -1094,6 +1244,22 @@ export class EditorView {
         this.selectionOccurrenceCache = { key, ranges };
         return ranges;
     }
+    get paintWindow() {
+        return { top: this.scrollTop - this.overscan, bottom: this.scrollTop + this.viewportHeight + this.overscan };
+    }
+    paintRectangles(from, to, rows) {
+        return this.layout.rectangles(from, to, rows, this.paintWindow);
+    }
+    visibleTextBounds(row) {
+        const geometry = this.layout.geometry(row);
+        const band = subRowBand(row.top, geometry.subRows, this.layout.metrics.lineHeight, this.paintWindow);
+        return {
+            from: geometry.start + offsetOfStop(geometry, geometry.rowStarts[band.first]),
+            to: band.last + 1 === geometry.subRows
+                ? this.model.getLine(row.line).next
+                : geometry.start + offsetOfStop(geometry, geometry.rowStarts[band.last + 1])
+        };
+    }
     /* The arrows of the soft wraps in the rows on screen. */
     wrapSigns(rows) {
         if (!this.layout.wrapping) {
@@ -1106,14 +1272,15 @@ export class EditorView {
                 continue;
             }
             const geometry = this.layout.geometry(row);
-            for (let subRow = 0; subRow < geometry.subRows; subRow++) {
+            const band = subRowBand(row.top, geometry.subRows, lineHeight, this.paintWindow);
+            for (let subRow = band.first; subRow <= band.last; subRow++) {
                 const y = row.top + subRow * lineHeight;
                 if (subRow + 1 < geometry.subRows) {
                     const x = geometry.rowEnds[subRow];
                     signs.push({ x, y, width: this.viewportWidth - x });
                 }
                 if (subRow > 0) {
-                    signs.push({ x: 0, y, width: geometry.before[geometry.rowStarts[subRow]] });
+                    signs.push({ x: 0, y, width: xOfStop(geometry, geometry.rowStarts[subRow]) });
                 }
             }
         }
@@ -1276,6 +1443,53 @@ export class EditorView {
     hoverMoved(event) {
         this.content.classList.toggle('se-over-selection', !this.settings.readOnly && event.buttons === 0 && this.selectionAtPoint(event.clientX, event.clientY) !== null);
         this.setHover(event.buttons === 0 ? this.characterAtPoint(event.clientX, event.clientY, event.target) : null);
+        this.setInlayHover(event.buttons === 0 ? event.target : null);
+    }
+    /* The hint, and the part of its label, an event happened on, or null anywhere else. */
+    inlayAt(target) {
+        const element = target?.closest?.('.se-inlay');
+        if (!element?.dataset.inlayId) {
+            return null;
+        }
+        const part = target.closest('[data-part]');
+        return { id: element.dataset.inlayId, part: part === null ? null : Number(part.dataset.part), element: part ?? element };
+    }
+    /* Says which hint the pointer is on, or that it left them all. */
+    setInlayHover(target) {
+        const found = this.inlayAt(target);
+        if (found?.id === this.inlayHover?.id && found?.part === this.inlayHover?.part) {
+            return;
+        }
+        this.inlayHover = found === null ? null : { id: found.id, part: found.part };
+        emit(this.inlayHoverListeners, found === null ? null : { id: found.id, part: found.part, rect: found.element.getBoundingClientRect() });
+    }
+    onInlayHover(listener) {
+        return subscribe(this.inlayHoverListeners, listener);
+    }
+    /* Draws a hint or one of its parts as a link, which only the pill on screen can show. The target outlives a repaint of its line. */
+    setInlayLink(target) {
+        this.inlayLink = target === null ? null : { id: target.id, part: target.part };
+        this.applyInlayLink();
+    }
+    applyInlayLink() {
+        const target = this.inlayLink;
+        if (target === null && this.inlayLinkElement === null) {
+            return;
+        }
+        let element;
+        if (target !== null) {
+            const pill = Array.from(this.content.querySelectorAll('[data-inlay-id]')).find((candidate) => candidate.dataset.inlayId === target.id);
+            element =
+                target.part === null
+                    ? pill
+                    : (Array.from(pill?.querySelectorAll('[data-part]') ?? []).find((part) => part.dataset.part === String(target.part)) ?? pill);
+        }
+        if (element === this.inlayLinkElement) {
+            return;
+        }
+        this.inlayLinkElement?.classList.remove('se-inlay-link');
+        element?.classList.add('se-inlay-link');
+        this.inlayLinkElement = element ?? null;
     }
     setHover(offset) {
         if (offset === this.hoverOffset) {
@@ -1284,6 +1498,27 @@ export class EditorView {
         this.hoverOffset = offset;
         emit(this.hoverListeners, offset);
     }
+    getLineHeight(line) {
+        if (!Number.isInteger(line) || line < 0 || line >= this.model.getLineCount() || this.layout.isHidden(line)) {
+            return 0;
+        }
+        return this.layout.rowForLine(line).height;
+    }
+    onLineHeights(listener) {
+        return subscribe(this.lineHeightListeners, listener);
+    }
+    setScrollTop(top) {
+        if (!Number.isFinite(top)) {
+            return;
+        }
+        this.cancelScroll();
+        const next = Math.max(0, top);
+        if (this.viewport.scrollTop === next) {
+            return;
+        }
+        this.viewport.scrollTop = next;
+        this.render();
+    }
     onViewChange(listener) {
         return subscribe(this.viewListeners, listener);
     }
@@ -1386,25 +1621,20 @@ export class EditorView {
     /* What a regular expression replacement writes for the match the find is on, drawn under that match; null takes it away. */
     setReplacePreview(replacement, preserveCase = false) {
         this.replacePreview = replacement === null ? null : { text: replacement, preserveCase };
+        this.find.setPreview(replacement !== null);
         this.paintPreview();
     }
     /* Shown only when it says something the replacement text does not, as a regular expression's does. */
     paintPreview() {
-        const mark = this.find.currentMark;
-        const query = this.find.activeQuery;
+        const match = this.find.currentMatch;
         const wanted = this.replacePreview;
         let shown = null;
-        if (wanted !== null && mark !== null && query?.regex === true) {
+        if (wanted !== null && match?.regex === true) {
             try {
-                const match = this.model.find(query.text, {
-                    caseSensitive: query.caseSensitive,
-                    wholeWord: query.wholeWord,
-                    regex: true,
-                    from: mark.from,
-                    to: mark.to,
-                    maxResults: 1
-                })[0];
-                const text = match === undefined ? wanted.text : replacementText(this.model.getText(), match, wanted.text, false, wanted.preserveCase);
+                if (wanted.text.length > 10000) {
+                    throw new RangeError('The replacement preview is too large.');
+                }
+                const text = replacementText(this.model.getText(), match, wanted.text, false, wanted.preserveCase, 10000);
                 shown = text === wanted.text ? null : text;
             }
             catch {
@@ -1412,11 +1642,11 @@ export class EditorView {
             }
         }
         this.preview.hidden = shown === null;
-        if (shown === null || mark === null) {
+        if (shown === null || match === null) {
             return;
         }
-        const start = this.layout.caret(mark.from);
-        const end = this.layout.caret(mark.to);
+        const start = this.layout.caret(match.from);
+        const end = this.layout.caret(match.to);
         this.preview.textContent = shown;
         this.preview.style.left = `${(start.x + end.x) / 2}px`;
         this.preview.style.top = `${end.y + end.height}px`;
@@ -1449,7 +1679,7 @@ export class EditorView {
     }
     /* Colors the lines on and just past the screen, a slice at a time so typing never waits on a grammar. */
     colorAhead(immediate = false) {
-        if (this.disposed || !this.tokens.ready) {
+        if (this.disposed || this.lineTokenProvider !== null || !this.tokens.ready) {
             return;
         }
         clearTimeout(this.colorTimer);
@@ -1465,9 +1695,16 @@ export class EditorView {
             this.colorAhead();
         }, immediate ? 0 : 1);
     }
-    /* The gutter is as wide as its widest number needs, which only changes when the line count gains a digit. */
+    /* Source numbering can be much larger than the display document's line count. */
     syncGutter() {
-        const digits = String(this.model.getLineCount()).length;
+        if (this.lineNumberProvider !== null && this.lineNumberRevision !== this.model.getRevision()) {
+            const provider = this.lineNumberProvider;
+            this.lineNumberLabels = Array.from({ length: this.model.getLineCount() }, (_, line) => provider(line));
+            this.lineNumberWidth = this.lineNumberLabels.reduce((width, label) => Math.max(width, label?.length ?? 0), 0);
+            this.lineNumberRevision = this.model.getRevision();
+            this.stickyEntries = [];
+        }
+        const digits = this.lineNumberProvider === null ? String(this.model.getLineCount()).length : this.lineNumberWidth;
         const width = Math.max(MIN_GUTTER_WIDTH, Math.ceil(digits * this.layout.metrics.charWidth) + 40);
         if (width !== this.gutterWidth) {
             this.gutterWidth = width;
@@ -1520,7 +1757,7 @@ export class EditorView {
             const lastLine = rows.at(-1)?.line ?? 0;
             const firstRow = this.layout.rowAt(this.scrollTop);
             this.topAnchor = { offset: this.model.getLine(firstRow.line).start, delta: this.scrollTop - firstRow.top };
-            if (lastLine - this.tokens.colored <= COLOR_MARGIN * 4) {
+            if (this.lineTokenProvider === null && lastLine - this.tokens.colored <= COLOR_MARGIN * 4) {
                 this.tokens.advance(lastLine, FIRST_PAINT_MS);
             }
             const paint = {
@@ -1528,6 +1765,7 @@ export class EditorView {
                 whitespace: this.settings.whitespace,
                 tokensOf: (line) => this.styledTokensOf(line),
                 viewportWidth: this.viewportWidth - RIGHT_PADDING,
+                window: this.paintWindow,
                 hostLeft: this.scrollLeft - this.gutterWidth,
                 hostWidth: this.viewportWidth + this.gutterWidth,
                 onUnfold: (line) => this.toggleFold(line, false)
@@ -1536,6 +1774,7 @@ export class EditorView {
                 rows = this.layout.visibleRows(this.scrollTop, this.viewportHeight, this.overscan);
                 this.painter.paint(rows, paint);
             }
+            this.applyInlayLink();
             this.content.style.height = `${this.layout.height}px`;
             this.content.style.width = `${Math.max(this.layout.width, this.viewportWidth)}px`;
             this.renderedScroll = { top: this.scrollTop, left: this.scrollLeft };
@@ -1556,6 +1795,11 @@ export class EditorView {
             this.frameGeometry = null;
             this.rendering = false;
         }
+        if (!this.disposed && this.announcedLineHeights !== this.layout.lineHeightsVersion) {
+            this.announcedLineHeights = this.layout.lineHeightsVersion;
+            // Hosts may adjust rows in response; rendering must already have finished.
+            emit(this.lineHeightListeners);
+        }
     }
     paintDecorations(rows) {
         const selections = this.model.getSelections();
@@ -1570,11 +1814,14 @@ export class EditorView {
         const lastLine = lastRow?.kind === 'text' ? lastRow.lastLine : (lastRow?.line ?? 0);
         const highlighted = this.highlightedLines(firstLine, lastLine);
         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)),
             foldable,
+            lineLabel: (line) => this.lineLabelProvider?.(line) ?? null,
+            foldName: (line, collapsed) => this.foldName(line, collapsed),
             action: this.gutterAction,
             markers: this.markersByLine()
         });
@@ -1588,7 +1835,7 @@ export class EditorView {
             if (group.length > 0) {
                 marks.push({
                     className: kind === 'write' ? 'se-occurrence se-occurrence-write' : 'se-occurrence',
-                    rects: group.flatMap((mark) => this.layout.rectangles(mark.from, mark.to, rows))
+                    rects: group.flatMap((mark) => this.paintRectangles(mark.from, mark.to, rows))
                 });
             }
         }
@@ -1604,7 +1851,7 @@ export class EditorView {
         paintSigns(this.signs, this.wrapSigns(rows), this.layout.metrics.lineHeight);
         const alike = this.selectionOccurrences();
         if (alike.length > 0) {
-            marks.push({ className: 'se-occurrence', rects: alike.flatMap((range) => this.layout.rectangles(range.from, range.to, rows)) });
+            marks.push({ className: 'se-occurrence', rects: alike.flatMap((range) => this.paintRectangles(range.from, range.to, rows)) });
         }
         const faded = [];
         const struck = [];
@@ -1612,7 +1859,7 @@ export class EditorView {
             if (marker.to <= marker.from) {
                 continue;
             }
-            const rects = this.layout.rectangles(marker.from, marker.to, rows);
+            const rects = this.paintRectangles(marker.from, marker.to, rows);
             if (marker.severity !== 'hint') {
                 marks.push({ className: `se-squiggle se-squiggle-${marker.severity}`, rects });
             }
@@ -1625,11 +1872,21 @@ export class EditorView {
         }
         const current = this.find.currentMark;
         const textRows = rows.filter((candidate) => candidate.kind === 'text');
-        const visibleFrom = textRows.length > 0 ? this.model.getLine(textRows[0].line).start : 0;
-        const visibleTo = textRows.length > 0 ? this.model.getLine(textRows.at(-1).line).next : 0;
-        for (const mark of this.find.matches) {
-            if (mark.to > mark.from && mark.to >= visibleFrom && mark.from <= visibleTo) {
-                marks.push({ className: mark === current ? 'se-find-current' : 'se-find-match', rects: this.layout.rectangles(mark.from, mark.to, rows) });
+        const visibleFrom = textRows.length > 0 ? this.visibleTextBounds(textRows[0]).from : 0;
+        const visibleTo = textRows.length > 0 ? this.visibleTextBounds(textRows.at(-1)).to : 0;
+        const found = this.find.matchesBetween(visibleFrom, visibleTo);
+        const spans = current !== null &&
+            !found.some((mark) => mark.from === current.from && mark.to === current.to) &&
+            current.to >= visibleFrom &&
+            current.from <= visibleTo
+            ? [...found, current]
+            : found;
+        for (const mark of spans) {
+            if (mark.to > mark.from) {
+                marks.push({
+                    className: mark.from === current?.from && mark.to === current.to ? 'se-find-current' : 'se-find-match',
+                    rects: this.paintRectangles(mark.from, mark.to, rows)
+                });
             }
         }
         const seen = new Set();
@@ -1640,25 +1897,25 @@ export class EditorView {
             }
             if (bracket.mate === undefined) {
                 if (this.unmatchedBracket(bracket.at)) {
-                    marks.push({ className: 'se-bracket-unmatched', rects: this.layout.rectangles(bracket.at, bracket.at + 1, rows) });
+                    marks.push({ className: 'se-bracket-unmatched', rects: this.paintRectangles(bracket.at, bracket.at + 1, rows) });
                 }
                 continue;
             }
             for (const offset of [bracket.at, bracket.mate]) {
                 if (!seen.has(offset)) {
                     seen.add(offset);
-                    marks.push({ className: 'se-bracket-match', rects: this.layout.rectangles(offset, offset + 1, rows) });
+                    marks.push({ className: 'se-bracket-match', rects: this.paintRectangles(offset, offset + 1, rows) });
                 }
             }
         }
         const selected = selections.flatMap((selection) => selection.anchor === selection.head
             ? []
-            : this.layout.rectangles(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), rows));
+            : this.paintRectangles(Math.min(selection.anchor, selection.head), Math.max(selection.anchor, selection.head), rows));
         paintOverlays(this.overlays, { currentLine, selections: selected, focused, marks });
         paintOver(this.over, [
             { className: 'se-faded', rects: faded },
             { className: 'se-struck', rects: struck },
-            { className: 'se-link', rects: this.link === null ? [] : this.layout.rectangles(this.link.from, this.link.to, rows) }
+            { className: 'se-link', rects: this.link === null ? [] : this.paintRectangles(this.link.from, this.link.to, rows) }
         ]);
         const top = this.scrollTop;
         const caretRects = focused
@@ -1680,36 +1937,81 @@ export class EditorView {
         this.input.style.height = `${this.layout.metrics.lineHeight}px`;
         this.root.dataset.carets = String(selections.length);
     }
-    /* The lines the host marked, which stay on their lines through edits until it marks them again. */
-    setChangeMarks(marks) {
+    /*
+     * The lines the host marked in a layer, which stay on their lines through edits until the layer is set again. Layers
+     * draw together; where two mark the same line the layer that was set first after being empty sits below the later one.
+     */
+    setChangeMarks(marks, layer = '') {
         const last = this.model.getLineCount();
         const clamp = (line) => Math.min(last, Math.max(1, Math.trunc(line) || 1)) - 1;
-        this.changeMarks = marks.map((mark) => {
-            const from = this.model.getLine(clamp(mark.startLine)).start;
-            return { kind: mark.kind, from, to: mark.kind === 'deleted' ? from : this.model.getLine(Math.max(clamp(mark.startLine), clamp(mark.endLine))).end };
-        });
+        if (marks.length === 0) {
+            this.changeLayers.delete(layer);
+        }
+        else {
+            this.changeLayers.set(layer, marks.map((mark) => {
+                const from = this.model.getLine(clamp(mark.startLine)).start;
+                return {
+                    kind: mark.kind,
+                    from,
+                    to: mark.kind === 'deleted' ? from : this.model.getLine(Math.max(clamp(mark.startLine), clamp(mark.endLine))).end
+                };
+            }));
+        }
         this.changeVersion++;
         this.render();
     }
-    markedLines(mark) {
-        const start = this.model.positionAt(mark.from).line;
-        return { start, end: mark.kind === 'deleted' ? start : this.model.positionAt(Math.max(mark.from, mark.to)).line };
+    /*
+     * How every marked line differs. The layer that last became non-empty wins a shared line for every kind; inside one
+     * layer a removal never covers a line that was added or changed, as its mark sits on the line after the removed text.
+     */
+    resolvedChanges() {
+        if (this.changeCache?.version === this.changeVersion) {
+            return this.changeCache;
+        }
+        const lines = new Map();
+        for (const marks of this.changeLayers.values()) {
+            const layer = new Map();
+            for (const mark of marks) {
+                const start = this.model.positionAt(mark.from).line;
+                const end = mark.kind === 'deleted' ? start : this.model.positionAt(Math.max(mark.from, mark.to)).line;
+                for (let line = start; line <= end; line++) {
+                    if (mark.kind !== 'deleted' || !layer.has(line)) {
+                        layer.set(line, mark.kind);
+                    }
+                }
+            }
+            for (const [line, kind] of layer) {
+                lines.set(line, kind);
+            }
+        }
+        const runs = [];
+        for (const line of [...lines.keys()].sort((left, right) => left - right)) {
+            const kind = lines.get(line);
+            const run = runs.at(-1);
+            if (run !== undefined && kind !== 'deleted' && run.kind === kind && run.end === line - 1) {
+                run.end = line;
+            }
+            else {
+                runs.push({ kind, start: line, end: line });
+            }
+        }
+        this.changeCache = { version: this.changeVersion, lines, runs };
+        return this.changeCache;
     }
-    /* How each line on screen differs, a removal never covering a line that was added or changed. */
+    /* How each line on screen differs. */
     changedLines(rows) {
-        const lines = new Map();
+        const { lines } = this.resolvedChanges();
         const first = rows[0]?.line ?? 0;
         const lastRow = rows.at(-1);
         const last = lastRow?.kind === 'text' ? lastRow.lastLine : (lastRow?.line ?? 0);
-        for (const mark of this.changeMarks) {
-            const { start, end } = this.markedLines(mark);
-            for (let line = Math.max(start, first); line <= Math.min(end, last); line++) {
-                if (mark.kind !== 'deleted' || !lines.has(line)) {
-                    lines.set(line, mark.kind);
-                }
+        const visible = new Map();
+        for (let line = first; line <= last; line++) {
+            const kind = lines.get(line);
+            if (kind !== undefined) {
+                visible.set(line, kind);
             }
         }
-        return lines;
+        return visible;
     }
     /* The carets of agents, each at an offset that follows its text through edits until the host sets them again. */
     setRemoteCarets(carets) {
@@ -1809,6 +2111,7 @@ export class EditorView {
     highlightMarks(rows, lines) {
         const byBackground = new Map();
         const width = Math.max(this.layout.width, this.viewportWidth);
+        const emphasisByColor = new Map();
         for (const row of rows) {
             const highlight = row.kind === 'text' ? lines.get(row.line) : undefined;
             if (highlight !== undefined) {
@@ -1816,13 +2119,25 @@ export class EditorView {
                 const rects = byBackground.get(background) ?? [];
                 rects.push({ x: 0, y: row.top, width, height: row.height });
                 byBackground.set(background, rects);
+                if (row.kind === 'text' && highlight.emphasis !== undefined) {
+                    const bounds = this.model.getLine(row.line);
+                    const emphasisBackground = `color-mix(in srgb, ${colorValue(highlight.color)} 22%, transparent)`;
+                    const emphasized = emphasisByColor.get(emphasisBackground) ?? [];
+                    for (const range of highlight.emphasis) {
+                        emphasized.push(...this.paintRectangles(Math.max(bounds.start, range.from), Math.min(bounds.end, range.to), [row]));
+                    }
+                    emphasisByColor.set(emphasisBackground, emphasized);
+                }
             }
         }
-        return [...byBackground].map(([background, rects]) => ({ className: 'se-line-highlight', rects, background }));
+        return [
+            ...[...byBackground].map(([background, rects]) => ({ className: 'se-line-highlight', rects, background })),
+            ...[...emphasisByColor].map(([background, rects]) => ({ className: 'se-line-emphasis', rects, background }))
+        ];
     }
     /* Code that is not in the document, drawn in the editor's own face and colors. */
     renderCode(container, text, options) {
-        renderCodeBlock(container, text, this.tokens.tokenizeText(text.split(/\r?\n/)), this.settings.tabSize, options);
+        renderCodeBlock(container, text, options.tokens === undefined ? this.tokens.tokenizeText(text.split(/\r?\n/)) : options.tokens, this.settings.tabSize, options);
     }
     attributedLines(first, last) {
         return this.attribution.linesIn(first, last, this.model.getLine(first).start, this.model.getLine(last).end, (offset) => this.model.positionAt(offset).line);
@@ -1926,9 +2241,8 @@ export class EditorView {
             const row = this.layout.rowForLine(line);
             return row.top + row.height;
         };
-        for (const mark of this.changeMarks) {
-            const { start, end } = this.markedLines(mark);
-            spans.push({ kind: mark.kind, top: rowTop(start), bottom: mark.kind === 'deleted' ? rowTop(start) : rowBottom(end) });
+        for (const { kind, start, end } of this.resolvedChanges().runs) {
+            spans.push({ kind, top: rowTop(start), bottom: kind === 'deleted' ? rowTop(start) : rowBottom(end) });
         }
         for (const marker of this.markers) {
             if (marker.severity !== 'hint' && marker.to > marker.from) {
@@ -2003,12 +2317,17 @@ export class EditorView {
         const placements = this.scrollTop <= 0 ? [] : this.stickyAt(this.scrollTop);
         const entries = placements.map((placement) => {
             const row = this.layout.rowForLine(placement.block.startLine);
-            return { line: placement.block.startLine, geometry: this.layout.geometry(row), tokens: this.styledTokensOf(placement.block.startLine) };
+            return {
+                line: placement.block.startLine,
+                label: this.lineNumberLabel(placement.block.startLine),
+                geometry: this.layout.geometry(row),
+                tokens: this.styledTokensOf(placement.block.startLine)
+            };
         });
         const changed = entries.length !== this.stickyEntries.length ||
             entries.some((entry, index) => {
                 const before = this.stickyEntries[index];
-                return entry.line !== before.line || entry.geometry !== before.geometry || entry.tokens !== before.tokens;
+                return entry.line !== before.line || entry.label !== before.label || entry.geometry !== before.geometry || entry.tokens !== before.tokens;
             });
         this.sticky.hidden = entries.length === 0;
         this.sticky.style.setProperty('--se-scroll-left', `${this.scrollLeft}px`);
@@ -2047,7 +2366,11 @@ export class EditorView {
     setGutterMarkers(owner, markers) {
         const before = this.gutterMarkers.get(owner) ?? [];
         if (before.length === markers.length &&
-            before.every((marker, index) => marker.id === markers[index].id && marker.line === markers[index].line && marker.label === markers[index].label)) {
+            before.every((marker, index) => marker.id === markers[index].id &&
+                marker.line === markers[index].line &&
+                marker.label === markers[index].label &&
+                marker.icon === markers[index].icon &&
+                marker.pressed === markers[index].pressed)) {
             return;
         }
         if (markers.length === 0) {
@@ -2075,7 +2398,7 @@ export class EditorView {
         for (const owner of [...this.gutterMarkers.keys()].sort()) {
             for (const marker of this.gutterMarkers.get(owner)) {
                 if (!byLine.has(marker.line)) {
-                    byLine.set(marker.line, { id: marker.id, label: marker.label });
+                    byLine.set(marker.line, marker);
                 }
             }
         }
@@ -2100,12 +2423,14 @@ export class EditorView {
         }
         this.disposed = true;
         this.cancelScroll();
+        this.find.dispose();
         this.subscription.dispose();
         this.resizeObserver?.disconnect();
         this.blockObserver?.disconnect();
         clearTimeout(this.foldTimer);
         clearTimeout(this.colorTimer);
         clearTimeout(this.noticeTimer);
+        clearTimeout(this.liveTimer);
         clearTimeout(this.caretTimer);
         if (this.frame !== undefined) {
             this.document.defaultView?.cancelAnimationFrame?.(this.frame);
@@ -2113,7 +2438,9 @@ export class EditorView {
         this.findListeners.clear();
         this.scopeListeners.clear();
         this.viewListeners.clear();
+        this.lineHeightListeners.clear();
         this.hoverListeners.clear();
+        this.inlayHoverListeners.clear();
         this.gutterActionListeners.clear();
         this.gutterMarkerListeners.clear();
         this.gutterMarkers.clear();