@adecore/editor 0.0.1 → 0.17.0-beta.2

package/dist/layout.js

@@ -0,0 +1,583 @@
+export const TEXT_PADDING = 0;
+export const BOTTOM_PADDING = 8;
+export const RIGHT_PADDING = 16;
+/* The room the platform keeps past the widest line, in columns of a space. */
+const ADDITIONAL_COLUMNS = 3;
+const DEFAULT_BLOCK_HEIGHT = 40;
+/* How many characters a wrapped line's continuation rows sit in past the line's own indentation. */
+const WRAP_INDENT_STEP = 2;
+const GEOMETRY_CACHE_SIZE = 400;
+const PLAIN = /^[\x20-\x7e\t]*$/;
+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 line that long is cut by code unit, since splitting it by grapheme would cost more than it shows. */
+function characterOffsets(text) {
+    const offsets = [];
+    if (text.length > 20000 || PLAIN.test(text)) {
+        for (let i = 0; i < text.length; i++) {
+            offsets.push(i);
+        }
+    }
+    else {
+        for (const part of SEGMENTER.segment(text)) {
+            offsets.push(part.index);
+        }
+    }
+    offsets.push(text.length);
+    return offsets;
+}
+function isSpace(character) {
+    return character === ' ' || character === '\t';
+}
+function characterWidth(metrics, text, x) {
+    if (text === '\t') {
+        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);
+}
+/* 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) {
+    let x = 0;
+    for (const character of text) {
+        if (!isSpace(character)) {
+            break;
+        }
+        x += characterWidth(metrics, character, x);
+    }
+    return Math.min(x + WRAP_INDENT_STEP * metrics.charWidth, limit / 2);
+}
+/*
+ * 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) {
+    const indent = wrapIndent(text, metrics, limit);
+    const breaks = [];
+    const count = 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 width = characterWidth(metrics, character, x);
+        if (index > rowStart && x + width > limit && !isSpace(character)) {
+            const target = opportunity > rowStart ? opportunity : index;
+            breaks.push(target);
+            rowStart = target;
+            opportunity = -1;
+            x = indent;
+            index = target;
+            continue;
+        }
+        x += width;
+        if (isSpace(character) && index + 1 < count && !isSpace(text[offsets[index + 1]])) {
+            opportunity = index + 1;
+        }
+        index++;
+    }
+    return 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) {
+    const text = line.text;
+    const offsets = characterOffsets(text);
+    const breakStops = limit === null ? [] : wrapStops(text, offsets, metrics, limit);
+    const indent = limit === null ? 0 : wrapIndent(text, metrics, limit);
+    const geometry = {
+        start: line.start,
+        end: line.end,
+        text,
+        offsets,
+        before: [],
+        after: [],
+        rowOf: [],
+        rowStarts: [0],
+        rowEnds: [],
+        runs: [],
+        inlays: [],
+        subRows: breakStops.length + 1,
+        width: 0
+    };
+    let x = 0;
+    let row = 0;
+    let nextBreak = 0;
+    let nextInlay = 0;
+    let runStart = -1;
+    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) });
+        }
+        runStart = -1;
+    };
+    for (let stop = 0; stop < offsets.length; stop++) {
+        const offset = offsets[stop];
+        if (nextBreak < breakStops.length && breakStops[nextBreak] === stop) {
+            flushRun(offset);
+            geometry.rowEnds.push(x);
+            geometry.rowStarts.push(stop);
+            nextBreak++;
+            row++;
+            x = indent;
+        }
+        geometry.before.push(x);
+        geometry.rowOf.push(row);
+        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);
+            geometry.inlays.push({ inlay, x, width, subRow: row });
+            x += width;
+        }
+        geometry.after.push(x);
+        if (stop === offsets.length - 1) {
+            break;
+        }
+        const character = text.slice(offset, offsets[stop + 1]);
+        const width = characterWidth(metrics, character, x);
+        if (character === '\t') {
+            flushRun(offset);
+        }
+        else if (runStart < 0) {
+            runStart = offset;
+            runX = x;
+        }
+        x += width;
+    }
+    flushRun(text.length);
+    geometry.rowEnds.push(x);
+    geometry.width = Math.max(...geometry.rowEnds);
+    return geometry;
+}
+/*
+ * 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
+ * others stand on an estimate that the first draw of a row corrects.
+ */
+export class EditorLayout {
+    rows = [];
+    height = 0;
+    /* The widest line measured since the text last changed, and the room past it; what a horizontal scroll bar needs. */
+    width = 0;
+    lineRows = [];
+    geometryCache = new Map();
+    measuredRows = new Map();
+    measuredHeights = new Map();
+    inlaysByLine = new Map();
+    inlays = [];
+    blocks = [];
+    folds = [];
+    wrapWidth = null;
+    document;
+    metrics;
+    constructor(document, metrics) {
+        this.document = document;
+        this.metrics = metrics;
+        this.rebuild();
+    }
+    get wrapping() {
+        return this.wrapWidth !== null;
+    }
+    configure(config) {
+        let measureAgain = false;
+        if (config.metrics) {
+            this.metrics = config.metrics;
+            this.measuredHeights.clear();
+            measureAgain = true;
+        }
+        if (config.wrapWidth !== undefined && config.wrapWidth !== this.wrapWidth) {
+            this.wrapWidth = config.wrapWidth;
+            measureAgain = true;
+        }
+        if (config.inlays) {
+            this.inlays = config.inlays;
+            measureAgain = true;
+        }
+        if (config.blocks) {
+            this.blocks = config.blocks;
+        }
+        if (config.folds) {
+            this.folds = config.folds;
+        }
+        if (measureAgain || config.textChanged) {
+            this.geometryCache.clear();
+            this.measuredRows.clear();
+            this.width = 0;
+        }
+        this.rebuild();
+    }
+    rowCountOf(line, length) {
+        const limit = this.wrapWidth;
+        if (limit === null) {
+            return 1;
+        }
+        const measured = this.measuredRows.get(line);
+        if (measured !== undefined) {
+            return measured;
+        }
+        return Math.max(1, Math.ceil((length * this.metrics.charWidth) / Math.max(limit, this.metrics.charWidth)));
+    }
+    rebuild() {
+        this.inlaysByLine.clear();
+        for (const inlay of this.inlays) {
+            const line = this.document.positionAt(inlay.at).line;
+            const list = this.inlaysByLine.get(line) ?? [];
+            list.push(inlay);
+            this.inlaysByLine.set(line, list);
+        }
+        for (const list of this.inlaysByLine.values()) {
+            list.sort((left, right) => left.at - right.at);
+        }
+        const above = new Map();
+        const below = new Map();
+        for (const block of this.blocks) {
+            const line = this.document.positionAt(block.at).line;
+            const target = block.placement === 'above' ? above : below;
+            target.set(line, [...(target.get(line) ?? []), block]);
+        }
+        const folds = new Map();
+        for (const fold of this.folds) {
+            if (fold.collapsed && fold.endLine > (folds.get(fold.startLine)?.endLine ?? 0)) {
+                folds.set(fold.startLine, fold);
+            }
+        }
+        const count = this.document.getLineCount();
+        this.rows = [];
+        this.lineRows = new Array(count);
+        const addBlock = (widget, line) => {
+            const key = `block:${widget.id}`;
+            this.rows.push({
+                key,
+                kind: 'block',
+                index: this.rows.length,
+                line,
+                widget,
+                top: 0,
+                height: widget.lens ? this.metrics.lineHeight : (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 fold = folds.get(line);
+            const last = Math.max(line, Math.min(count - 1, fold?.endLine ?? line));
+            const tail = fold?.closer !== undefined && last > line ? this.tailOf(fold.closer, last) : null;
+            const index = this.rows.length;
+            const bounds = this.wrapWidth === null ? null : this.document.getLine(line);
+            const subRows = this.rowCountOf(line, bounds === null ? 0 : bounds.end - bounds.start);
+            this.rows.push({
+                key: `line:${line}`,
+                kind: 'text',
+                index,
+                line,
+                lastLine: last,
+                tail,
+                subRows,
+                top: 0,
+                height: subRows * this.metrics.lineHeight
+            });
+            for (let covered = line; covered <= last; covered++) {
+                this.lineRows[covered] = index;
+            }
+            for (const block of below.get(line) ?? []) {
+                addBlock(block, line);
+            }
+            line = last;
+        }
+        this.reflow();
+    }
+    /* The closer a fold ends in, clamped to its last line since the fold may be a moment older than an edit. */
+    tailOf(closer, line) {
+        const bounds = this.document.getLine(line);
+        return Math.min(bounds.end, Math.max(bounds.start, closer));
+    }
+    reflow() {
+        let top = 0;
+        for (const row of this.rows) {
+            row.top = top;
+            top += row.height;
+        }
+        this.height = top + BOTTOM_PADDING;
+    }
+    /* A widget's measured height. Returns whether it moved anything. */
+    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) {
+            return false;
+        }
+        this.measuredHeights.set(key, next);
+        row.height = next;
+        this.reflow();
+        return true;
+    }
+    /* The visual lines a drawn row really has, which its estimate may have missed. Returns whether any row changed. */
+    syncRows(rows) {
+        let changed = false;
+        for (const row of rows) {
+            if (row.kind !== 'text') {
+                continue;
+            }
+            const subRows = this.geometry(row).subRows;
+            if (subRows !== row.subRows) {
+                this.measuredRows.set(row.line, subRows);
+                row.subRows = subRows;
+                row.height = subRows * this.metrics.lineHeight;
+                changed = true;
+            }
+        }
+        if (changed) {
+            this.reflow();
+        }
+        return changed;
+    }
+    rowAt(y) {
+        let low = 0;
+        let high = this.rows.length - 1;
+        while (low < high) {
+            const middle = Math.ceil((low + high) / 2);
+            if (this.rows[middle].top <= y) {
+                low = middle;
+            }
+            else {
+                high = middle - 1;
+            }
+        }
+        return this.rows[low];
+    }
+    /* Where a line's text starts after its indentation, which is where a lens row begins. */
+    indentX(line) {
+        const row = this.rowForLine(line);
+        if (row.kind !== 'text') {
+            return TEXT_PADDING;
+        }
+        const geometry = this.geometry(row);
+        let stop = 0;
+        while (stop < geometry.text.length && isSpace(geometry.text[stop])) {
+            stop++;
+        }
+        return TEXT_PADDING + geometry.before[Math.min(stop, geometry.before.length - 1)];
+    }
+    rowForLine(line) {
+        return this.rows[this.lineRows[Math.max(0, Math.min(this.lineRows.length - 1, line))]];
+    }
+    /* Whether a fold hides the line. */
+    isHidden(line) {
+        const row = this.rowForLine(line);
+        return row.kind === 'text' && line > row.line && line <= row.lastLine;
+    }
+    visibleRows(top, height, overscan = 120) {
+        const result = [];
+        for (let index = this.rowAt(top - overscan).index; index < this.rows.length && this.rows[index].top < top + height + overscan; index++) {
+            result.push(this.rows[index]);
+        }
+        return result;
+    }
+    geometry(row) {
+        const cached = this.geometryCache.get(row.line);
+        if (cached) {
+            return cached;
+        }
+        const result = scanLine(this.document.getLine(row.line), this.metrics, this.wrapWidth, this.inlaysByLine.get(row.line) ?? []);
+        if (this.wrapWidth === null) {
+            this.width = Math.max(this.width, result.width + ADDITIONAL_COLUMNS * this.metrics.charWidth);
+        }
+        if (this.geometryCache.size >= GEOMETRY_CACHE_SIZE) {
+            this.geometryCache.delete(this.geometryCache.keys().next().value);
+        }
+        this.geometryCache.set(row.line, result);
+        return result;
+    }
+    stopOf(geometry, offset) {
+        return Math.min(geometry.offsets.length - 1, lowerBound(geometry.offsets, Math.max(0, offset - geometry.start)));
+    }
+    xAt(geometry, offset, affinity = 'after') {
+        return TEXT_PADDING + geometry[affinity][this.stopOf(geometry, offset)];
+    }
+    /*
+     * The offset nearest an x on one visual line of a laid out line. `rowEnd` is set when that is the
+     * offset a wrap starts the next visual line at, which the caret may be drawn at the end of this one for.
+     */
+    offsetAtX(geometry, subRow, x) {
+        const local = x - TEXT_PADDING;
+        for (const box of geometry.inlays) {
+            if (box.subRow === subRow && local >= box.x && local <= box.x + box.width) {
+                return { offset: box.inlay.at, rowEnd: false };
+            }
+        }
+        const first = geometry.rowStarts[subRow] ?? 0;
+        const last = subRow + 1 < geometry.rowStarts.length ? geometry.rowStarts[subRow + 1] : geometry.offsets.length - 1;
+        const wrapped = subRow + 1 < geometry.rowStarts.length;
+        let best = first;
+        let distance = Math.abs(local - geometry.before[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 candidate = Math.abs(local - edge);
+            if (candidate < distance) {
+                distance = candidate;
+                best = stop;
+            }
+        }
+        return { offset: geometry.start + geometry.offsets[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) {
+        const position = this.document.positionAt(offset);
+        const row = this.rowForLine(position.line);
+        if (row.kind !== 'text') {
+            return { x: TEXT_PADDING, y: row.top, width: 1, height: Math.min(row.height, this.metrics.lineHeight) };
+        }
+        const geometry = this.geometry(row);
+        const stop = this.stopOf(geometry, offset);
+        const subRow = geometry.rowOf[stop];
+        if (rowEnd && subRow > 0 && geometry.rowStarts[subRow] === stop) {
+            return {
+                x: TEXT_PADDING + geometry.rowEnds[subRow - 1],
+                y: row.top + (subRow - 1) * this.metrics.lineHeight,
+                width: 1,
+                height: this.metrics.lineHeight
+            };
+        }
+        return { x: TEXT_PADDING + geometry[affinity][stop], 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) {
+        const row = this.rowAt(y);
+        if (row.kind !== 'text') {
+            return y;
+        }
+        const base = row.top + Math.floor((y - row.top) / this.metrics.lineHeight) * this.metrics.lineHeight;
+        return y > base && y < base + this.metrics.lineHeight ? base : y;
+    }
+    /*
+     * The visual line an offset is on, as the platform counts it: a wrapped line is as many as it has
+     * rows and a collapsed fold is one. `end` is where its text stops and `next` where the line after it starts.
+     */
+    visualLine(offset) {
+        const position = this.document.positionAt(offset);
+        const row = this.rowForLine(position.line);
+        const line = this.document.getLine(row.kind === 'text' ? row.line : position.line);
+        if (row.kind !== 'text') {
+            return { start: line.start, end: line.end, next: line.next, y: row.top };
+        }
+        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 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]];
+        return { start, end, next: last ? lastLine.next : end, y: row.top + subRow * this.metrics.lineHeight };
+    }
+    hitTest(x, y) {
+        return this.hitTestRow(x, y).offset;
+    }
+    hitTestRow(x, y) {
+        const row = this.rowAt(y);
+        if (row.kind === 'block') {
+            return { offset: row.widget.at, rowEnd: false };
+        }
+        const geometry = this.geometry(row);
+        const subRow = Math.max(0, Math.min(geometry.subRows - 1, Math.floor((y - row.top) / this.metrics.lineHeight)));
+        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) {
+        const result = [];
+        const lineHeight = this.metrics.lineHeight;
+        for (const row of rows) {
+            if (row.kind !== 'text') {
+                continue;
+            }
+            const geometry = this.geometry(row);
+            if (from === to || from > geometry.end || to <= geometry.start) {
+                continue;
+            }
+            const lastStop = geometry.offsets.length - 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 last = subRow + 1 === geometry.subRows;
+                const rowFirst = geometry.rowStarts[subRow];
+                const rowEnd = last ? lastStop : geometry.rowStarts[subRow + 1];
+                const first = Math.max(fromStop, rowFirst);
+                const stop = Math.min(toStop, rowEnd);
+                const newline = last && to > geometry.end;
+                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];
+                result.push({
+                    x: TEXT_PADDING + startX,
+                    y: row.top + subRow * lineHeight,
+                    width: Math.max(1, endX - startX + (newline ? this.metrics.charWidth : 0)),
+                    height: lineHeight
+                });
+            }
+        }
+        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.
+     */
+    verticalOffset(offset, direction, x, distance = this.metrics.lineHeight) {
+        const caret = this.caret(offset);
+        let y = caret.y + direction * distance;
+        if (y < 0) {
+            return 0;
+        }
+        let row = this.rowAt(y);
+        while (row.kind === 'block') {
+            const next = this.rows[row.index + direction];
+            if (!next) {
+                return offset;
+            }
+            row = next;
+            y = direction < 0 ? row.top + row.height - 1 : row.top;
+        }
+        if (y >= this.height - BOTTOM_PADDING) {
+            return this.document.getLine(this.document.getLineCount() - 1).end;
+        }
+        return this.hitTest(x, y);
+    }
+    /* One character left or right, over the end of a line onto the next visible one. */
+    horizontalOffset(offset, direction) {
+        const row = this.rowForLine(this.document.positionAt(offset).line);
+        if (row.kind === 'text') {
+            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];
+            }
+        }
+        for (let index = row.index + direction; index >= 0 && index < this.rows.length; index += direction) {
+            const next = this.rows[index];
+            if (next.kind !== 'text') {
+                continue;
+            }
+            const line = this.document.getLine(next.line);
+            return direction < 0 ? line.end : line.start;
+        }
+        return offset;
+    }
+}

package/dist/lens.d.ts

@@ -0,0 +1,3 @@
+import type { EditorCodeVisionEntry } from './types.ts';
+export declare function lensSignature(entries: readonly EditorCodeVisionEntry[]): string;
+export declare function fillLens(container: HTMLElement, entries: readonly EditorCodeVisionEntry[], lookup: (id: string) => EditorCodeVisionEntry | undefined): void;

package/dist/lens.js

@@ -0,0 +1,29 @@
+/* What decides whether a row has to be drawn again: the words and the icons, never the handlers, which a press looks up at the time. */
+export function lensSignature(entries) {
+    return entries.map((entry) => `${entry.id}\0${entry.text}\0${entry.icon ?? ''}`).join('\n');
+}
+/*
+ * The entries of a row as buttons. A press looks its entry up when it happens, so an entry the host set
+ * after the row was drawn is the one that answers.
+ */
+export function fillLens(container, entries, lookup) {
+    const document = container.ownerDocument;
+    container.classList.add('se-lens');
+    for (const entry of entries) {
+        const button = document.createElement('button');
+        button.type = 'button';
+        button.className = 'se-lens-entry';
+        button.tabIndex = -1;
+        if (entry.icon !== undefined) {
+            const icon = document.createElement('span');
+            icon.className = `se-lens-icon se-lens-icon-${entry.icon}`;
+            icon.setAttribute('aria-hidden', 'true');
+            button.append(icon);
+        }
+        button.append(entry.text);
+        // The editor keeps the focus, so the caret stays where it was and a popover can hand the keyboard back.
+        button.addEventListener('pointerdown', (event) => event.preventDefault());
+        button.addEventListener('click', () => lookup(entry.id)?.activate(button.getBoundingClientRect()));
+        container.append(button);
+    }
+}

package/dist/listeners.d.ts

@@ -0,0 +1,3 @@
+export type Listener = () => void;
+export declare function subscribe(listeners: Set<Listener>, listener: Listener): () => void;
+export declare function emit(listeners: Set<Listener>): void;

package/dist/listeners.js

@@ -0,0 +1,12 @@
+export function subscribe(listeners, listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/* Over a copy, so a listener that unsubscribes itself does not skip the next one. */
+export function emit(listeners) {
+    for (const listener of [...listeners]) {
+        listener();
+    }
+}

package/dist/metrics.d.ts

@@ -0,0 +1,8 @@
+import type { LayoutMetrics } from './layout.ts';
+export interface EditorFont {
+    family: string;
+    size: number;
+    lineHeight: number;
+}
+export declare function readEditorFont(element: HTMLElement): EditorFont;
+export declare function createMetrics(font: EditorFont, tabSize: number, document: Document): LayoutMetrics;