@adecore/editor 0.22.0 → 0.23.0

package/src/offsets.ts

@@ -14,3 +14,27 @@ export function mapOffset(offset: number, changes: readonly DocumentChange[]): n
     }
     return offset + delta;
 }
+
+/* Build once per sorted, nonoverlapping batch when many offsets need to follow it. */
+export function offsetMapper(changes: readonly DocumentChange[]): (offset: number) => number {
+    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/src/outline.ts

@@ -1,5 +1,5 @@
 import type { DocumentChange, FoldingRange } from '@adecore/editor-core';
-import { mapOffset } from './offsets.ts';
+import { offsetMapper } from './offsets.ts';
 import type { EditorBlock } from './types.ts';
 
 /* A block with a header line, in zero-based lines and both ends inclusive. */
@@ -168,13 +168,14 @@ export class Outline {
     }
 
     edited(batches: readonly (readonly DocumentChange[])[]): void {
+        const mappers = batches.map(offsetMapper);
         const move = (entries: OutlineEntry[]): OutlineEntry[] =>
             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/src/paint.ts

@@ -1,6 +1,20 @@
-import { type AttributedLines, colorValue } from './attribution.ts';
-import { type BlockWidget, type EditorLayout, type LayoutRect, type LayoutRow, type LineGeometry, scanLine, type TextRow } from './layout.ts';
-import type { EditorChangeKind, LineToken } from './types.ts';
+import { offsetOfStop, rowOfStop, stopAtOffset, stopCount, xOfStop } from './geometry-stops.ts';
+import { type AttributedLines, colorValue, tintValue } from './attribution.ts';
+import {
+    type BlockReplacement,
+    type BlockWidget,
+    type EditorLayout,
+    type LayoutRect,
+    type LayoutRow,
+    type LineGeometry,
+    scanLine,
+    subRowBand,
+    type SubRowBand,
+    type VerticalWindow,
+    type TextRow
+} from './layout.ts';
+import type { EditorChangeKind, EditorGutterIcon, LineToken } from './types.ts';
+import { BIDI_CONTROLS, BIDI_PATTERN, visibleBidi } from './bidi.ts';
 
 const ITALIC = 1;
 const BOLD = 2;
@@ -19,6 +33,7 @@ interface PaintedRow {
     tailTokens: readonly LineToken[] | null;
     /* The revision of the widget a block row was drawn from. */
     revision: number;
+    band?: SubRowBand;
 }
 
 /* The gap around a collapsed fold's placeholder, so it reads as `{…}` and not as three separate things. */
@@ -32,6 +47,7 @@ export interface RowPaint {
     whitespace: boolean;
     tokensOf(line: number): readonly LineToken[] | null;
     viewportWidth: number;
+    window: VerticalWindow;
     /* Where a row of the host's own DOM starts and how wide it is: the whole width of the editor, over the gutter, wherever the text is scrolled to. */
     hostLeft: number;
     hostWidth: number;
@@ -106,43 +122,66 @@ function fillRun(
     }
 }
 
-/* One line of text as absolutely placed runs and inlays. `firstRowOnly` leaves out what a wrapped line carries onto later visual lines. */
 export function lineElement(
     document: Document,
     geometry: LineGeometry,
     tokens: readonly LineToken[] | null,
     lineHeight: number,
-    firstRowOnly: boolean,
+    band: SubRowBand,
     whitespace = false
 ): HTMLElement {
     const element = document.createElement('div');
     element.className = 'se-line';
     element.style.width = `${geometry.width}px`;
-    for (const run of geometry.runs) {
-        if (firstRowOnly && run.subRow > 0) {
-            continue;
+    let first = 0;
+    let last = geometry.runs.length;
+    while (first < last) {
+        const middle = (first + last) >>> 1;
+        if (geometry.runs[middle]!.subRow < band.first) {
+            first = middle + 1;
+        } else {
+            last = middle;
+        }
+    }
+    for (let index = first; index < geometry.runs.length; index++) {
+        const run = geometry.runs[index]!;
+        if (run.subRow > band.last) {
+            break;
         }
         const span = document.createElement('span');
         span.className = 'se-run';
         span.style.left = `${run.x}px`;
         span.style.top = `${run.subRow * lineHeight}px`;
-        fillRun(span, geometry, run.from, run.to, tokens, whitespace);
+        fillRun(span, geometry, geometry.start + run.from, geometry.start + run.to, tokens, whitespace);
         element.append(span);
     }
     if (whitespace) {
-        appendTabSigns(element, geometry, lineHeight, firstRowOnly);
+        appendTabSigns(element, geometry, lineHeight, band);
     }
+    appendBidiSigns(element, geometry, lineHeight, band);
     for (const box of geometry.inlays) {
-        if (firstRowOnly && box.subRow > 0) {
+        if (box.subRow < band.first || box.subRow > band.last) {
             continue;
         }
         const span = document.createElement('span');
         span.className = box.inlay.ghost ? 'se-ghost' : box.inlay.composition ? 'se-composition' : 'se-inlay';
         span.dataset.inlayId = box.inlay.id;
-        span.textContent = box.inlay.text;
-        span.style.left = `${box.x}px`;
+        const { parts } = box.inlay;
+        if (parts === undefined) {
+            span.textContent = visibleBidi(box.inlay.text);
+        } else {
+            parts.forEach((part, index) => {
+                const element = document.createElement('span');
+                element.className = 'se-inlay-part';
+                element.dataset.part = String(index);
+                element.textContent = visibleBidi(part);
+                span.append(element);
+            });
+        }
+        const gapLeft = box.inlay.gapLeft ?? 0;
+        span.style.left = `${box.x + gapLeft}px`;
         span.style.top = `${box.subRow * lineHeight}px`;
-        span.style.width = `${box.width}px`;
+        span.style.width = `${box.width - gapLeft - (box.inlay.gapRight ?? 0)}px`;
         element.append(span);
     }
     return element;
@@ -177,7 +216,9 @@ export class RowPainter {
         }
         let measured = false;
         for (const row of rows) {
-            if (row.kind === 'text') {
+            if (row.kind === 'text' && row.replacement !== undefined) {
+                measured = this.paintReplacement(row, row.replacement, paint) || measured;
+            } else if (row.kind === 'text') {
                 this.paintText(row, paint);
             } else {
                 measured = this.paintBlock(row, paint) || measured;
@@ -189,6 +230,11 @@ export class RowPainter {
     private paintText(row: TextRow, paint: RowPaint): void {
         const geometry = this.layout.geometry(row);
         const tokens = paint.tokensOf(row.line);
+        // Block boundaries keep a scroll within the band from rebuilding its text DOM.
+        const band =
+            geometry.subRows <= 64
+                ? { first: 0, last: geometry.subRows - 1 }
+                : subRowBand(row.top, geometry.subRows, this.layout.metrics.lineHeight, paint.window, 64);
         const folded = row.lastLine > row.line;
         const lastLine = folded && row.tail !== null ? this.layout.document.getLine(row.lastLine) : null;
         const tail = lastLine === null ? '' : lastLine.text.slice(row.tail! - lastLine.start);
@@ -202,9 +248,11 @@ export class RowPainter {
             entry.whitespace !== paint.whitespace ||
             entry.folded !== folded ||
             entry.tail !== tail ||
-            entry.tailTokens !== tailTokens
+            entry.tailTokens !== tailTokens ||
+            entry.band?.first !== band.first ||
+            entry.band?.last !== band.last
         ) {
-            const element = this.buildText(row, geometry, tokens, paint, tail, tailTokens);
+            const element = this.buildText(row, geometry, tokens, paint, tail, tailTokens, band);
             if (entry) {
                 entry.element.replaceWith(element);
             } else {
@@ -219,7 +267,8 @@ export class RowPainter {
                 folded,
                 tail,
                 tailTokens,
-                revision: 0
+                revision: 0,
+                band
             };
             this.rows.set(row.key, entry);
         }
@@ -234,12 +283,13 @@ export class RowPainter {
         tokens: readonly LineToken[] | null,
         paint: RowPaint,
         tail: string,
-        tailTokens: readonly LineToken[] | null
+        tailTokens: readonly LineToken[] | null,
+        band: SubRowBand
     ): HTMLElement {
         const document = this.code.ownerDocument;
         const lineHeight = this.layout.metrics.lineHeight;
-        const element = lineElement(document, geometry, tokens, lineHeight, false, paint.whitespace);
-        if (row.lastLine > row.line) {
+        const element = lineElement(document, geometry, tokens, lineHeight, band, paint.whitespace);
+        if (row.lastLine > row.line && band.last === geometry.subRows - 1) {
             const chip = document.createElement('button');
             chip.type = 'button';
             chip.className = 'se-fold-chip';
@@ -270,9 +320,42 @@ export class RowPainter {
             span.className = 'se-run';
             span.style.left = `${left + run.x}px`;
             span.style.top = `${(header.subRows - 1) * this.layout.metrics.lineHeight}px`;
-            fillRun(span, geometry, run.from, run.to, tokens, false, lineStart);
+            fillRun(span, geometry, geometry.start + run.from, geometry.start + run.to, tokens, false, lineStart);
             element.append(span);
         }
+        appendBidiSigns(element, geometry, this.layout.metrics.lineHeight, { first: 0, last: 0 }, left, (header.subRows - 1) * this.layout.metrics.lineHeight);
+    }
+
+    /* The lines the host draws itself: an element of its own, indented as the first line is and as tall as its content. */
+    private paintReplacement(row: TextRow, replacement: BlockReplacement, paint: RowPaint): boolean {
+        const revision = replacement.revision ?? 0;
+        let entry = this.rows.get(row.key);
+        if (!entry) {
+            const element = this.code.ownerDocument.createElement('div');
+            element.className = 'se-block se-replacement';
+            element.dataset.rowKey = row.key;
+            element.dataset.replacementId = replacement.id;
+            element.setAttribute('role', 'group');
+            if (replacement.label !== undefined) {
+                element.setAttribute('aria-label', replacement.label);
+            }
+            replacement.render(element);
+            this.code.append(element);
+            entry = { element, text: '', tokens: null, layoutVersion: 0, whitespace: false, folded: false, tail: '', tailTokens: null, revision };
+            this.rows.set(row.key, entry);
+        } else if (entry.revision !== revision) {
+            entry.element.replaceChildren();
+            replacement.render(entry.element);
+            entry.revision = revision;
+        }
+        const indent = this.layout.indentX(row.line);
+        entry.element.style.top = `${row.top}px`;
+        entry.element.style.left = `${indent}px`;
+        entry.element.style.width = `${Math.max(80, paint.viewportWidth - indent)}px`;
+        entry.element.style.height = '';
+        this.observer?.observe(entry.element);
+        const height = entry.element.getBoundingClientRect?.().height ?? 0;
+        return height > 0 && this.layout.setMeasuredHeight(row.key, height);
     }
 
     private paintBlock(row: Extract<LayoutRow, { kind: 'block' }>, paint: RowPaint): boolean {
@@ -286,7 +369,7 @@ export class RowPainter {
             element.dataset.widgetId = widget.id;
             this.fillBlock(element, widget);
             this.code.append(element);
-            if (!widget.lens) {
+            if (!widget.lens && !widget.fixed) {
                 this.observer?.observe(element);
             }
             entry = { element, text: '', tokens: null, layoutVersion: 0, whitespace: false, folded: false, tail: '', tailTokens: null, revision };
@@ -308,6 +391,13 @@ export class RowPainter {
         } else {
             entry.element.style.width = `${Math.max(80, paint.viewportWidth)}px`;
         }
+        if (widget.fixed) {
+            this.observer?.unobserve(entry.element);
+            entry.element.style.height = `${row.height}px`;
+            return false;
+        }
+        entry.element.style.height = '';
+        this.observer?.observe(entry.element);
         const height = entry.element.getBoundingClientRect?.().height ?? 0;
         return height > 0 && this.layout.setMeasuredHeight(row.key, height);
     }
@@ -330,6 +420,7 @@ export class RowPainter {
 }
 
 export interface GutterPaint {
+    lineNumber(line: number): string | null;
     activeLines: ReadonlySet<number>;
     /* How the lines the host marked differ from what it compares against. */
     changes: ReadonlyMap<number, EditorChangeKind>;
@@ -339,10 +430,14 @@ export interface GutterPaint {
     highlights: ReadonlyMap<number, AttributedLines>;
     /* Lines a fold can start at, and whether each is collapsed. */
     foldable: ReadonlyMap<number, boolean>;
+    /* What the fold control of a line is called, from its line and whether it is collapsed. */
+    foldName(line: number, collapsed: boolean): string;
+    /* A sentence read with the line, which then stands in for the drawn number and sign. */
+    lineLabel(line: number): string | null;
     /* The line that carries the host's button, and what it is called. */
     action: { line: number; label: string } | null;
     /* The host's markers by line. */
-    markers: ReadonlyMap<number, { id: string; label: string }>;
+    markers: ReadonlyMap<number, { id: string; label: string; icon?: EditorGutterIcon; pressed?: boolean }>;
 }
 
 function gutterButton(document: Document, className: string, label: string): HTMLButtonElement {
@@ -366,13 +461,33 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         item.className = paint.activeLines.has(row.line) ? 'se-line-number se-active-number' : 'se-line-number';
         item.style.top = `${row.top}px`;
         item.style.height = `${layout.metrics.lineHeight}px`;
-        const fill = paint.highlights.get(row.line)?.fill;
+        const highlight = paint.highlights.get(row.line);
+        const fill = highlight?.fill;
         if (fill !== undefined) {
             item.style.background = colorValue(fill);
         }
+        if (highlight?.bar !== undefined) {
+            item.classList.add('se-line-marked');
+            item.style.height = `${row.height}px`;
+            item.style.setProperty('--se-line', `${layout.metrics.lineHeight}px`);
+            item.style.setProperty('--se-mark', colorValue(highlight.color));
+            if (fill === undefined) {
+                item.style.setProperty('--se-tint', tintValue(highlight.color));
+            }
+        }
         const number = document.createElement('span');
-        number.textContent = String(row.line + 1);
+        number.textContent = paint.lineNumber(row.line);
+        const label = paint.lineLabel(row.line);
+        if (label !== null) {
+            number.setAttribute('aria-hidden', 'true');
+        }
         item.append(number);
+        if (label !== null) {
+            const hidden = document.createElement('span');
+            hidden.className = 'se-sr-only';
+            hidden.textContent = label;
+            item.append(hidden);
+        }
         if (paint.action?.line === row.line) {
             const button = gutterButton(document, 'se-gutter-action', paint.action.label);
             button.dataset.gutterAction = String(row.line);
@@ -382,6 +497,12 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         if (marker !== undefined) {
             const button = gutterButton(document, 'se-gutter-marker', marker.label);
             button.dataset.gutterMarker = marker.id;
+            if (marker.icon !== undefined) {
+                button.dataset.icon = marker.icon;
+            }
+            if (marker.pressed !== undefined) {
+                button.setAttribute('aria-pressed', String(marker.pressed));
+            }
             item.append(button);
         }
         const sign = paint.highlights.get(row.line)?.sign;
@@ -389,9 +510,18 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
             const mark = document.createElement('span');
             mark.className = 'se-line-sign';
             mark.textContent = sign;
+            if (label !== null) {
+                mark.setAttribute('aria-hidden', 'true');
+            }
             mark.style.color = colorValue(paint.highlights.get(row.line)!.color);
             item.append(mark);
         }
+        if (highlight?.bar !== undefined) {
+            const mark = document.createElement('span');
+            mark.className = `se-line-bar se-line-bar-${highlight.bar}`;
+            mark.setAttribute('aria-hidden', 'true');
+            item.append(mark);
+        }
         const bar = paint.attribution.get(row.line);
         if (bar) {
             const mark = document.createElement('span');
@@ -403,7 +533,7 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         }
         const change = paint.changes.get(row.line);
         // The bar of an agent stands where the mark of a change would, and a removal is a triangle between lines that the bar never hides.
-        if (change && (!bar || change === 'deleted')) {
+        if (change && (!bar || change === 'deleted') && highlight?.bar === undefined) {
             const mark = document.createElement('span');
             mark.className = `se-change se-change-${change}`;
             if (change !== 'deleted') {
@@ -413,7 +543,8 @@ export function paintGutter(container: HTMLElement, layout: EditorLayout, rows:
         }
         const collapsed = paint.foldable.get(row.line);
         if (collapsed !== undefined) {
-            const button = gutterButton(document, collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle', collapsed ? 'Expand' : 'Collapse');
+            const button = gutterButton(document, collapsed ? 'se-fold-toggle se-folded' : 'se-fold-toggle', paint.foldName(row.line, collapsed));
+            button.setAttribute('aria-expanded', String(!collapsed));
             button.dataset.foldLine = String(row.line);
             item.append(button);
         }
@@ -515,6 +646,7 @@ export function paintRemoteCarets(container: HTMLElement, carets: readonly Remot
 
 export interface StickyEntry {
     line: number;
+    label: string | null;
     geometry: LineGeometry;
     tokens: readonly LineToken[] | null;
 }
@@ -530,10 +662,10 @@ export function paintSticky(container: HTMLElement, entries: readonly StickyEntr
             row.dataset.depth = String(depth);
             const number = document.createElement('span');
             number.className = 'se-sticky-number';
-            number.textContent = String(entry.line + 1);
+            number.textContent = entry.label;
             const code = document.createElement('div');
             code.className = 'se-sticky-code';
-            code.append(lineElement(document, entry.geometry, entry.tokens, lineHeight, true));
+            code.append(lineElement(document, entry.geometry, entry.tokens, lineHeight, { first: 0, last: 0 }));
             row.append(number, code);
             return row;
         })
@@ -567,20 +699,54 @@ export function arrowSign(document: Document, width: number, lineHeight: number,
 }
 
 /* An arrow over each tab of a line. */
-function appendTabSigns(element: HTMLElement, geometry: LineGeometry, lineHeight: number, firstRowOnly: boolean): void {
+function appendTabSigns(element: HTMLElement, geometry: LineGeometry, lineHeight: number, band: SubRowBand): void {
+    if (geometry.uniform !== undefined) {
+        return;
+    }
     const document = element.ownerDocument;
-    for (let stop = 0; stop < geometry.offsets.length - 1; stop++) {
-        if (geometry.text[geometry.offsets[stop]!] !== '\t' || (firstRowOnly && geometry.rowOf[stop]! > 0)) {
+    const end = geometry.rowStarts[band.last + 1] ?? stopCount(geometry) - 1;
+    for (let stop = geometry.rowStarts[band.first]!; stop < end; stop++) {
+        if (geometry.text[offsetOfStop(geometry, stop)] !== '\t') {
             continue;
         }
-        const left = geometry.before[stop]!;
-        const right = geometry.rowOf[stop + 1] === geometry.rowOf[stop] ? geometry.before[stop + 1]! : geometry.rowEnds[geometry.rowOf[stop]!]!;
+        const left = xOfStop(geometry, stop);
+        const right = rowOfStop(geometry, stop + 1) === rowOfStop(geometry, stop) ? xOfStop(geometry, stop + 1) : geometry.rowEnds[rowOfStop(geometry, stop)]!;
         if (right - left < 3) {
             continue;
         }
         const sign = arrowSign(document, right - left - 2, lineHeight, 'se-tab-sign');
         sign.style.left = `${left + 1}px`;
-        sign.style.top = `${geometry.rowOf[stop]! * lineHeight}px`;
+        sign.style.top = `${rowOfStop(geometry, stop) * lineHeight}px`;
+        element.append(sign);
+    }
+}
+
+/*
+ * A boxed label over each bidirectional control character, which no run carries, so the control never reaches the text nodes
+ * where it would reorder the line. `top` and `originX` place a line that is drawn as part of another one.
+ */
+function appendBidiSigns(element: HTMLElement, geometry: LineGeometry, lineHeight: number, band: SubRowBand, originX = 0, top?: number): void {
+    if (geometry.uniform !== undefined) {
+        return;
+    }
+    const document = element.ownerDocument;
+    const from = offsetOfStop(geometry, geometry.rowStarts[band.first]!);
+    const to = geometry.rowStarts[band.last + 1] === undefined ? geometry.text.length : offsetOfStop(geometry, geometry.rowStarts[band.last + 1]!);
+    const pattern = new RegExp(BIDI_PATTERN.source, 'g');
+    pattern.lastIndex = from;
+    for (let match = pattern.exec(geometry.text); match !== null && match.index < to; match = pattern.exec(geometry.text)) {
+        const stop = stopAtOffset(geometry, match.index);
+        const row = rowOfStop(geometry, stop);
+        const control = BIDI_CONTROLS[match[0] as keyof typeof BIDI_CONTROLS];
+        const left = xOfStop(geometry, stop);
+        const right = rowOfStop(geometry, stop + 1) === row ? xOfStop(geometry, stop + 1) : geometry.rowEnds[row]!;
+        const sign = document.createElement('span');
+        sign.className = 'se-bidi';
+        sign.textContent = control.label;
+        sign.style.left = `${originX + left}px`;
+        sign.style.top = `${top ?? row * lineHeight}px`;
+        sign.style.width = `${right - left}px`;
+        sign.style.height = `${lineHeight}px`;
         element.append(sign);
     }
 }