@adecore/editor 0.22.0 → 0.23.0

package/dist/layout.js

@@ -1,3 +1,15 @@
+import { offsetOfStop, rowOfStop, stopAtOffset, stopCount, xOfStop } from './geometry-stops.js';
+import { BIDI_COLUMNS, bidiControl, visibleBidi } from './bidi.js';
+import { uniformGeometry } from './uniform-geometry.js';
+import { lineChangeMapper } from './layout-changes.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));
+    return {
+        first: Math.floor(first / block) * block,
+        last: Math.min(subRows - 1, Math.ceil((last + 1) / block) * block - 1)
+    };
+}
 export const TEXT_PADDING = 0;
 export const BOTTOM_PADDING = 8;
 export const RIGHT_PADDING = 16;
@@ -10,20 +22,6 @@ const GEOMETRY_CACHE_SIZE = 400;
 const PLAIN = /^[\x20-\x7e\t]*$/;
 const GRAPHEME_LIMIT = 20000;
 const SEGMENTER = new Intl.Segmenter(undefined, { granularity: 'grapheme' });
-function lowerBound(values, value) {
-    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) {
     const offsets = [];
@@ -48,7 +46,10 @@ function characterWidth(metrics, text, x) {
         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. */
 export function wrapIndent(text, metrics, limit) {
@@ -65,20 +66,22 @@ export function wrapIndent(text, metrics, limit) {
  * 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, offsets, metrics, limit) {
+function wrapRows(text, offsets, metrics, limit) {
     const indent = wrapIndent(text, metrics, limit);
     const breaks = [];
-    const count = offsets.length - 1;
+    const triggers = [];
+    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;
@@ -86,22 +89,28 @@ export function wrapStops(text, offsets, metrics, limit) {
             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, offsets, metrics, limit) {
+    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, metrics, limit, lineInlays) {
+export function scanDenseLine(line, metrics, limit, lineInlays) {
     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 = {
         start: line.start,
         end: line.end,
+        next: line.next ?? line.end,
         text,
         offsets,
         before: [],
@@ -109,6 +118,7 @@ export function scanLine(line, metrics, limit, lineInlays) {
         rowOf: [],
         rowStarts: [0],
         rowEnds: [],
+        rowTriggers: wrapped.triggers,
         runs: [],
         inlays: [],
         subRows: breakStops.length + 1,
@@ -122,7 +132,7 @@ export function scanLine(line, metrics, limit, lineInlays) {
     let runX = 0;
     const flushRun = (end) => {
         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;
     };
@@ -141,7 +151,10 @@ export function scanLine(line, metrics, limit, lineInlays) {
         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;
         }
@@ -151,7 +164,7 @@ export function scanLine(line, metrics, limit, lineInlays) {
         }
         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) {
@@ -162,9 +175,21 @@ export function scanLine(line, metrics, limit, lineInlays) {
     }
     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, metrics, limit, lineInlays) {
+    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);
+}
 /*
  * 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
@@ -173,6 +198,7 @@ export function scanLine(line, metrics, limit, lineInlays) {
 export class EditorLayout {
     rows = [];
     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;
     lineRows = [];
@@ -183,6 +209,7 @@ export class EditorLayout {
     inlays = [];
     blocks = [];
     folds = [];
+    replacements = [];
     wrapWidth = null;
     document;
     metrics;
@@ -207,21 +234,79 @@ 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();
     }
+    retainGeometry(batches) {
+        const map = lineChangeMapper(batches);
+        const remap = (bounds) => {
+            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();
+        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();
+        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;
+    }
     rowCountOf(line, length) {
         const limit = this.wrapWidth;
         if (limit === null) {
@@ -229,7 +314,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)));
     }
@@ -257,6 +342,15 @@ export class EditorLayout {
                 folds.set(fold.startLine, fold);
             }
         }
+        const replaced = new Map();
+        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(count);
@@ -269,13 +363,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;
@@ -322,7 +447,7 @@ export class EditorLayout {
     setMeasuredHeight(key, height) {
         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);
@@ -334,18 +459,28 @@ export class EditorLayout {
     syncRows(rows) {
         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;
@@ -375,7 +510,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) {
         return this.rows[this.lineRows[Math.max(0, Math.min(this.lineRows.length - 1, line))]];
@@ -420,10 +555,10 @@ export class EditorLayout {
         return result;
     }
     stopOf(geometry, offset) {
-        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, offset, affinity = 'after') {
-        return TEXT_PADDING + geometry[affinity][this.stopOf(geometry, offset)];
+        return TEXT_PADDING + xOfStop(geometry, this.stopOf(geometry, offset), affinity);
     }
     /*
      * The offset nearest an x on one visual line of a laid out line. `rowEnd` is set when that is the
@@ -437,20 +572,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. */
     caret(offset, affinity = 'after', rowEnd = false) {
@@ -461,7 +596,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],
@@ -470,7 +605,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. */
     lineBase(y) {
@@ -495,10 +635,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 };
     }
     hitTest(x, y) {
@@ -514,21 +654,24 @@ export class EditorLayout {
         return this.offsetAtX(geometry, subRow, x);
     }
     /* The boxes a range is drawn in, one per visual line it touches, among the rows given. */
-    rectangles(from, to, rows) {
+    rectangles(from, to, rows, window) {
         const result = [];
         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];
@@ -538,8 +681,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,
@@ -551,8 +694,9 @@ export class EditorLayout {
         return result;
     }
     /*
-     * 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, direction, x, distance = this.metrics.lineHeight) {
         const caret = this.caret(offset);
@@ -561,10 +705,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;
@@ -581,8 +725,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) {

package/dist/offsets.d.ts

@@ -1,2 +1,3 @@
 import type { DocumentChange } from '@adecore/editor-core';
 export declare function mapOffset(offset: number, changes: readonly DocumentChange[]): number;
+export declare function offsetMapper(changes: readonly DocumentChange[]): (offset: number) => number;

package/dist/offsets.js

@@ -12,3 +12,26 @@ export function mapOffset(offset, changes) {
     }
     return offset + delta;
 }
+/* Build once per sorted, nonoverlapping batch when many offsets need to follow it. */
+export function offsetMapper(changes) {
+    const deltas = new Float64Array(changes.length + 1);
+    for (let index = 0; index < changes.length; index++) {
+        const change = changes[index];
+        deltas[index + 1] = deltas[index] + change.insertedLength - (change.to - change.from);
+    }
+    return (offset) => {
+        let low = 0, high = changes.length;
+        while (low < high) {
+            const middle = (low + high) >>> 1;
+            const change = changes[middle];
+            if (change.to < offset || (change.to === offset && change.from !== change.to)) {
+                low = middle + 1;
+            }
+            else {
+                high = middle;
+            }
+        }
+        const change = changes[low];
+        return change !== undefined && change.from <= offset ? change.from + deltas[low] + change.insertedLength : offset + deltas[low];
+    };
+}

package/dist/outline.js

@@ -1,4 +1,4 @@
-import { mapOffset } from './offsets.js';
+import { offsetMapper } from './offsets.js';
 const MODIFIERS = '(?:export\\s+|default\\s+|declare\\s+|abstract\\s+|async\\s+|pub(?:\\([^)]*\\))?\\s+|public\\s+|private\\s+|protected\\s+|static\\s+|final\\s+|readonly\\s+|override\\s+|unsafe\\s+|extern\\s+)*';
 const DECLARATION = new RegExp(`^${MODIFIERS}(function\\*?|class|interface|enum|type|namespace|module|trait|impl|struct|fn|def|func|object|record)\\s+([A-Za-z_$][\\w$]*)`);
 const VARIABLE = new RegExp(`^${MODIFIERS}(?:const|let|var)\\s+([A-Za-z_$][\\w$]*)`);
@@ -126,12 +126,13 @@ export class Outline {
         });
     }
     edited(batches) {
+        const mappers = batches.map(offsetMapper);
         const move = (entries) => entries.map((entry) => {
             let from = entry.from;
             let to = entry.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);
             }
             return { ...entry, from, to };
         });

package/dist/paint.d.ts

@@ -1,17 +1,18 @@
 import { type AttributedLines } from './attribution.ts';
-import { type EditorLayout, type LayoutRect, type LayoutRow, type LineGeometry } from './layout.ts';
-import type { EditorChangeKind, LineToken } from './types.ts';
+import { type EditorLayout, type LayoutRect, type LayoutRow, type LineGeometry, type SubRowBand, type VerticalWindow } from './layout.ts';
+import type { EditorChangeKind, EditorGutterIcon, LineToken } from './types.ts';
 export interface RowPaint {
     layoutVersion: number;
     whitespace: boolean;
     tokensOf(line: number): readonly LineToken[] | null;
     viewportWidth: number;
+    window: VerticalWindow;
     hostLeft: number;
     hostWidth: number;
     onUnfold(line: number): void;
 }
 export declare function styleSpan(span: HTMLElement, token: LineToken): void;
-export declare function lineElement(document: Document, geometry: LineGeometry, tokens: readonly LineToken[] | null, lineHeight: number, firstRowOnly: boolean, whitespace?: boolean): HTMLElement;
+export declare function lineElement(document: Document, geometry: LineGeometry, tokens: readonly LineToken[] | null, lineHeight: number, band: SubRowBand, whitespace?: boolean): HTMLElement;
 export declare class RowPainter {
     private readonly rows;
     private readonly code;
@@ -22,16 +23,20 @@ export declare class RowPainter {
     private paintText;
     private buildText;
     private appendTail;
+    private paintReplacement;
     private paintBlock;
     private fillBlock;
     clear(): void;
 }
 export interface GutterPaint {
+    lineNumber(line: number): string | null;
     activeLines: ReadonlySet<number>;
     changes: ReadonlyMap<number, EditorChangeKind>;
     attribution: ReadonlyMap<number, AttributedLines>;
     highlights: ReadonlyMap<number, AttributedLines>;
     foldable: ReadonlyMap<number, boolean>;
+    foldName(line: number, collapsed: boolean): string;
+    lineLabel(line: number): string | null;
     action: {
         line: number;
         label: string;
@@ -39,6 +44,8 @@ export interface GutterPaint {
     markers: ReadonlyMap<number, {
         id: string;
         label: string;
+        icon?: EditorGutterIcon;
+        pressed?: boolean;
     }>;
 }
 export declare function paintGutter(container: HTMLElement, layout: EditorLayout, rows: readonly LayoutRow[], paint: GutterPaint): void;
@@ -73,6 +80,7 @@ export interface RemoteCaret {
 export declare function paintRemoteCarets(container: HTMLElement, carets: readonly RemoteCaret[]): void;
 export interface StickyEntry {
     line: number;
+    label: string | null;
     geometry: LineGeometry;
     tokens: readonly LineToken[] | null;
 }