@adecore/editor-react 0.0.1 → 0.17.0-beta.2

package/dist/peek-model.d.ts

@@ -0,0 +1,28 @@
+import type { Location, Range } from '@adecore/lsp';
+export interface NameRange {
+    readonly start: number;
+    readonly end: number;
+}
+export interface PeekPlace {
+    readonly id: string;
+    readonly location: Location;
+    readonly line: number;
+    readonly text: string;
+    readonly name: NameRange | null;
+}
+export interface PeekFile {
+    readonly uri: string;
+    readonly places: readonly PeekPlace[];
+}
+export declare const PEEK_READ_FILES = 30;
+export declare function peekFilesOf(locations: readonly Location[], current: string, textOf: (uri: string) => string | null): PeekFile[];
+export interface PeekSnippet {
+    readonly startLine: number;
+    readonly text: string;
+    readonly active: number;
+    readonly name: NameRange | null;
+}
+export declare function snippetOf(text: string, line: number, range: Range): PeekSnippet;
+export declare function definitionSnippetOf(text: string, line: number, declaration: Range | null, range: Range): PeekSnippet;
+export declare function distinguishingFolders(paths: readonly string[]): string[];
+export declare function visualColumnOf(line: string, character: number, tabSize: number): number;

package/dist/peek-model.js

@@ -0,0 +1,104 @@
+/* The most files whose text is read for the list; a name used everywhere shows the rest as places without a line. */
+export const PEEK_READ_FILES = 30;
+/* The part of `line` a range covers, which runs to the end of the line when the range goes on. */
+function columnsOf(range, line, length) {
+    if (range.start.line !== line) {
+        return null;
+    }
+    const end = Math.min(length, range.end.line === line ? range.end.character : length);
+    return range.start.character < end ? { start: range.start.character, end } : null;
+}
+/* The name of a place within its line once the indentation is cut off. */
+function trimmedNameOf(raw, range, line) {
+    const leading = raw.length - raw.trimStart().length;
+    const columns = columnsOf(range, line, raw.length);
+    const length = raw.trim().length;
+    if (columns === null || columns.start < leading || columns.start >= leading + length) {
+        return null;
+    }
+    return { start: columns.start - leading, end: Math.min(length, columns.end - leading) };
+}
+/*
+ * The references grouped by file, the file the peek was opened in first and the others in the order the
+ * server gave them, each file's places by line. `textOf` answers null for a file whose text is not at hand.
+ */
+export function peekFilesOf(locations, current, textOf) {
+    const order = [];
+    const byFile = new Map();
+    for (const location of locations) {
+        if (!byFile.has(location.uri)) {
+            order.push(location.uri);
+            byFile.set(location.uri, []);
+        }
+        byFile.get(location.uri).push(location);
+    }
+    const uris = [...order.filter((uri) => uri === current), ...order.filter((uri) => uri !== current)];
+    return uris.map((uri, fileIndex) => {
+        const text = textOf(uri);
+        const lines = text === null ? null : text.split(/\r\n|\r|\n/);
+        const places = [...byFile.get(uri)]
+            .sort((left, right) => left.range.start.line - right.range.start.line || left.range.start.character - right.range.start.character)
+            .map((location, index) => {
+            const line = location.range.start.line;
+            const raw = lines?.[line] ?? '';
+            return {
+                id: `${fileIndex}:${index}`,
+                location,
+                line,
+                text: raw.trim(),
+                name: lines === null ? null : trimmedNameOf(raw, location.range, line)
+            };
+        });
+        return { uri, places };
+    });
+}
+const BEFORE = 3;
+const AFTER = 8;
+export function snippetOf(text, line, range) {
+    const lines = text.split(/\r\n|\r|\n/);
+    const startLine = Math.max(0, line - BEFORE);
+    const end = Math.min(lines.length, line + AFTER + 1);
+    return { startLine, text: lines.slice(startLine, end).join('\n'), active: line - startLine, name: columnsOf(range, line, (lines[line] ?? '').length) };
+}
+const DEFINITION_LINES = 24;
+/*
+ * The source of a definition: the lines of the whole declaration when the server gave them, else a stretch
+ * from just above the name, cut at a screenful since a class is longer than a peek is tall.
+ */
+export function definitionSnippetOf(text, line, declaration, range) {
+    const lines = text.split(/\r\n|\r|\n/);
+    const startLine = declaration === null ? Math.max(0, line - 2) : Math.min(declaration.start.line, line);
+    const end = Math.min(lines.length - 1, declaration === null ? line + DEFINITION_LINES / 2 : Math.min(declaration.end.line, startLine + DEFINITION_LINES));
+    return { startLine, text: lines.slice(startLine, end + 1).join('\n'), active: line - startLine, name: columnsOf(range, line, (lines[line] ?? '').length) };
+}
+/*
+ * For each path, the trailing folders that tell it from the other paths with the same file name, as few
+ * as it takes; empty for a file whose name is its own.
+ */
+export function distinguishingFolders(paths) {
+    const folders = paths.map((path) => path.split('/').slice(0, -1));
+    const names = paths.map((path) => path.slice(path.lastIndexOf('/') + 1));
+    return paths.map((path, index) => {
+        const same = paths.map((_, other) => other).filter((other) => names[other] === names[index] && paths[other] !== path);
+        if (same.length === 0) {
+            return '';
+        }
+        const rivals = [...new Set(same.map((other) => paths[other]))].map((other) => folders[paths.indexOf(other)]);
+        const mine = folders[index];
+        for (let depth = 1; depth <= mine.length; depth++) {
+            const tail = mine.slice(-depth).join('/');
+            if (rivals.every((rival) => rival.slice(-depth).join('/') !== tail)) {
+                return tail;
+            }
+        }
+        return mine.join('/');
+    });
+}
+/* The column a character stands at once tabs are expanded to their stops, which is where a monospace face draws it. */
+export function visualColumnOf(line, character, tabSize) {
+    let column = 0;
+    for (let i = 0; i < Math.min(character, line.length); i++) {
+        column += line[i] === '\t' ? tabSize - (column % tabSize) : 1;
+    }
+    return column;
+}

package/dist/peek.d.ts

@@ -0,0 +1,30 @@
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { PeekView } from './popups.ts';
+export declare const PEEK_HEIGHT = 241;
+type PeekKind = PeekView['kind'];
+export declare class PeekFeature {
+    private readonly language;
+    private kind;
+    private targets;
+    private texts;
+    private places;
+    private order;
+    private line;
+    private token;
+    constructor(language: EditorLanguage);
+    get isOpen(): boolean;
+    open(position?: EditorPosition, kind?: PeekKind): Promise<void>;
+    openDefinition(position?: EditorPosition): Promise<void>;
+    private fetch;
+    close(): void;
+    select(id: string): void;
+    toggleFile(uri: string): void;
+    go(id: string): void;
+    private mounted;
+    private key;
+    private step;
+    private tell;
+    private say;
+}
+export {};

package/dist/peek.js

@@ -0,0 +1,215 @@
+import { StaleResultError } from '@adecore/lsp';
+import { uniquePlaces } from './navigation.js';
+import { PEEK_READ_FILES, definitionSnippetOf, peekFilesOf, snippetOf } from './peek-model.js';
+import { isShortcut } from './shortcut-keys.js';
+const TOAST_ID = 'language-peek';
+/* The block as the panel draws it: a hatched band, the header, eight lines of code and a hatched band, until the editor has measured it. */
+export const PEEK_HEIGHT = 241;
+const KINDS = {
+    references: { method: 'textDocument/references', unavailable: 'unavailable', none: 'none' },
+    definitions: { method: 'textDocument/definition', unavailable: 'unavailableDefinition', none: 'noDefinition' }
+};
+function placeKey(location) {
+    return `${location.uri}\0${location.range.start.line}\0${location.range.start.character}`;
+}
+/*
+ * The references of the name at the caret, between the lines of the file under the line it is on. The
+ * editor keeps the keyboard: arrows pick a reference, Enter goes to it and Escape closes the peek; typing
+ * closes it too. A click on a place shows its code and a second one goes there.
+ */
+export class PeekFeature {
+    language;
+    kind = 'references';
+    /* The whole declaration of each place of a definition peek, where the server gave it. */
+    targets = new Map();
+    texts = new Map();
+    places = new Map();
+    order = [];
+    line = 0;
+    token = 0;
+    constructor(language) {
+        this.language = language;
+        const { editor } = language;
+        const offs = [
+            editor.onKeyDown((event) => {
+                if (isShortcut(this.language.shortcuts.peekReferences, event)) {
+                    void this.open();
+                    return true;
+                }
+                if (isShortcut(this.language.shortcuts.peekDefinition, event)) {
+                    void this.openDefinition();
+                    return true;
+                }
+                return this.key(event);
+            }),
+            editor.onTextChange(() => this.close())
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.close();
+        });
+    }
+    get isOpen() {
+        return this.language.popups.getState().peek !== null;
+    }
+    async open(position = this.language.editor.getCaret(), kind = 'references') {
+        const { editor, project, uri } = this.language;
+        const method = KINDS[kind].method;
+        if (!project.service.supports(method, uri)) {
+            this.tell(this.say(KINDS[kind].unavailable));
+            return;
+        }
+        const token = ++this.token;
+        let found;
+        try {
+            found = await this.fetch(kind, position);
+        }
+        catch (error) {
+            if (!(error instanceof StaleResultError)) {
+                this.tell(this.say('failed', { message: error instanceof Error ? error.message : String(error) }));
+            }
+            return;
+        }
+        if (token !== this.token) {
+            return;
+        }
+        const { targets } = found;
+        const unique = found.locations.filter((location, index) => found.locations.findIndex((other) => other.uri === location.uri &&
+            other.range.start.line === location.range.start.line &&
+            other.range.start.character === location.range.start.character) === index);
+        if (unique.length === 0) {
+            this.tell(this.say(KINDS[kind].none));
+            return;
+        }
+        const uris = [...new Set(unique.map((location) => location.uri))].slice(0, PEEK_READ_FILES);
+        const texts = new Map();
+        await Promise.all(uris.map(async (target) => {
+            const text = await project.readText(target);
+            if (text !== null) {
+                texts.set(target, text);
+            }
+        }));
+        if (token !== this.token) {
+            return;
+        }
+        this.texts = texts;
+        this.kind = kind;
+        this.targets = targets;
+        const files = peekFilesOf(unique, uri, (target) => texts.get(target) ?? null);
+        this.places = new Map(files.flatMap((file) => file.places.map((place) => [place.id, place.location])));
+        this.order = files.flatMap((file) => file.places.map((place) => place.id));
+        // The references open on the first place that is not the one the caret is on, which is what a person came to see.
+        const first = kind === 'definitions'
+            ? files[0].places[0]
+            : (files.flatMap((file) => file.places).find((place) => !(place.location.uri === uri && place.line === position.line)) ?? files[0].places[0]);
+        this.line = position.line;
+        this.language.popups.setState({ peek: { kind, container: null, files, active: first.id, collapsed: [], count: unique.length, preview: null } });
+        this.select(first.id);
+        // The editor draws a row once per id, so a peek opened over another needs an id of its own to get a container.
+        editor.setWidgets([{ id: `peek-${token}`, line: this.line, height: PEEK_HEIGHT, render: (container) => this.mounted(container) }]);
+        // The keys come through the editor, which a click on the hover's link or a menu command has taken the focus from.
+        editor.focus();
+    }
+    /* The definition of the name at the caret, as its source between the lines of the file. */
+    openDefinition(position = this.language.editor.getCaret()) {
+        return this.open(position, 'definitions');
+    }
+    async fetch(kind, position) {
+        const { project, uri } = this.language;
+        if (kind === 'references') {
+            // Without the declaration, so the list holds what the usages count above a declaration counts.
+            return { locations: (await project.service.references(uri, position, false)) ?? [], targets: new Map() };
+        }
+        const places = uniquePlaces(await project.service.definition(uri, position));
+        const targets = new Map(places.flatMap(({ location, target }) => (target === null ? [] : [[placeKey(location), target]])));
+        return { locations: places.map(({ location }) => location), targets };
+    }
+    close() {
+        this.token++;
+        if (this.language.popups.getState().peek === null) {
+            return;
+        }
+        this.language.popups.setState({ peek: null });
+        this.language.editor.setWidgets([]);
+        this.language.editor.focus();
+    }
+    /* Shows the code around a place. */
+    select(id) {
+        const view = this.language.popups.getState().peek;
+        const location = this.places.get(id);
+        if (view === null || location === undefined) {
+            return;
+        }
+        const text = this.texts.get(location.uri);
+        const line = location.range.start.line;
+        const snippet = text === undefined
+            ? null
+            : this.kind === 'definitions'
+                ? definitionSnippetOf(text, line, this.targets.get(placeKey(location)) ?? null, location.range)
+                : snippetOf(text, line, location.range);
+        this.language.popups.setState({ peek: { ...view, active: id, preview: snippet === null ? null : { ...snippet, uri: location.uri } } });
+    }
+    /* Folds the places of a file away from the list, or brings them back. */
+    toggleFile(uri) {
+        const view = this.language.popups.getState().peek;
+        if (view !== null) {
+            const collapsed = view.collapsed.includes(uri) ? view.collapsed.filter((other) => other !== uri) : [...view.collapsed, uri];
+            this.language.popups.setState({ peek: { ...view, collapsed } });
+        }
+    }
+    /* Goes to a place and closes the peek. */
+    go(id) {
+        const location = this.places.get(id);
+        if (location !== undefined) {
+            this.close();
+            this.language.goTo(location);
+        }
+    }
+    mounted(container) {
+        const view = this.language.popups.getState().peek;
+        if (view !== null && view.container !== container) {
+            this.language.popups.setState({ peek: { ...view, container } });
+        }
+    }
+    key(event) {
+        const view = this.language.popups.getState().peek;
+        if (view === null || event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                this.step(view, 1);
+                return true;
+            case 'ArrowUp':
+                this.step(view, -1);
+                return true;
+            case 'Enter':
+                this.go(view.active);
+                return true;
+            case 'Escape':
+                this.close();
+                return true;
+            default:
+                return false;
+        }
+    }
+    /* The next place in the list a person can see, which a folded file has none of. */
+    step(view, direction) {
+        const index = this.order.indexOf(view.active);
+        for (let next = index + direction; next >= 0 && next < this.order.length; next += direction) {
+            const id = this.order[next];
+            if (!view.collapsed.includes(this.places.get(id).uri)) {
+                this.select(id);
+                return;
+            }
+        }
+    }
+    tell(title) {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title });
+    }
+    say(key, options) {
+        return this.language.project.i18n.t(`editor:language.peek.${key}`, options);
+    }
+}

package/dist/pick.d.ts

@@ -0,0 +1,34 @@
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { PickGroup, PickPreview } from './popups.ts';
+import { type Timers } from './timers.ts';
+export interface PickSpec {
+    readonly anchor: EditorPosition;
+    readonly title?: string;
+    readonly groups: readonly PickGroup[];
+    readonly active?: string;
+    accept(id: string): void;
+    attempt?(id: string): Promise<string | null>;
+    preview?(id: string, signal: AbortSignal): Promise<PickPreview | null>;
+}
+export declare class PickFeature {
+    private readonly language;
+    private readonly timers;
+    private spec;
+    private ids;
+    private active;
+    private previewTimer;
+    private controller;
+    private refusals;
+    private attempting;
+    constructor(language: EditorLanguage, timers?: Timers);
+    get isOpen(): boolean;
+    open(spec: PickSpec): void;
+    close(): void;
+    move(delta: number): void;
+    choose(id: string): void;
+    private activate;
+    private key;
+    private schedulePreview;
+    private publish;
+}

package/dist/pick.js

@@ -0,0 +1,166 @@
+import { realTimers } from './timers.js';
+const PREVIEW_DELAY_MS = 120;
+/*
+ * The one list an editor has open under a character, for code actions, the places a name is defined and
+ * the like. The editor keeps the focus: arrows move through the rows, Enter takes the active one and
+ * Escape, typing, a click elsewhere or a change of the text close it.
+ */
+export class PickFeature {
+    language;
+    timers;
+    spec = null;
+    ids = [];
+    active = '';
+    previewTimer;
+    controller = null;
+    /* The rows that said why they cannot be taken, by id. */
+    refusals = new Map();
+    attempting = false;
+    constructor(language, timers = realTimers) {
+        this.language = language;
+        this.timers = timers;
+        const { editor } = language;
+        const offs = [
+            editor.onKeyDown((event) => this.key(event)),
+            editor.onTextChange(() => this.close()),
+            editor.onCaret(() => this.close()),
+            editor.onBlur(() => this.close())
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.close();
+        });
+    }
+    get isOpen() {
+        return this.spec !== null;
+    }
+    open(spec) {
+        this.close();
+        const ids = spec.groups.flatMap((group) => group.rows.map((row) => row.id));
+        if (ids.length === 0) {
+            return;
+        }
+        this.spec = spec;
+        this.refusals = new Map();
+        this.ids = ids;
+        this.active = spec.active !== undefined && ids.includes(spec.active) ? spec.active : ids[0];
+        this.publish(null);
+        this.schedulePreview();
+    }
+    close() {
+        if (this.spec === null) {
+            return;
+        }
+        this.spec = null;
+        this.timers.clear(this.previewTimer);
+        this.controller?.abort();
+        this.controller = null;
+        this.language.popups.setState({ pick: null });
+    }
+    move(delta) {
+        const index = this.ids.indexOf(this.active);
+        this.activate(this.ids[Math.max(0, Math.min(this.ids.length - 1, index + delta))]);
+    }
+    /* Takes a row, by a click or Enter. */
+    choose(id) {
+        const spec = this.spec;
+        if (spec === null || !this.ids.includes(id) || this.attempting) {
+            return;
+        }
+        if (spec.attempt === undefined) {
+            this.close();
+            spec.accept(id);
+            return;
+        }
+        this.attempting = true;
+        void spec
+            .attempt(id)
+            .catch(() => null)
+            .then((reason) => {
+            this.attempting = false;
+            if (this.spec !== spec) {
+                return;
+            }
+            if (reason === null) {
+                this.close();
+                spec.accept(id);
+                return;
+            }
+            this.refusals.set(id, reason);
+            this.publish(null);
+        });
+    }
+    activate(id) {
+        if (id === this.active) {
+            return;
+        }
+        this.active = id;
+        this.controller?.abort();
+        this.publish(null);
+        this.schedulePreview();
+    }
+    key(event) {
+        if (this.spec === null || event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                this.move(1);
+                return true;
+            case 'ArrowUp':
+                this.move(-1);
+                return true;
+            case 'PageDown':
+                this.move(8);
+                return true;
+            case 'PageUp':
+                this.move(-8);
+                return true;
+            case 'Home':
+                this.activate(this.ids[0]);
+                return true;
+            case 'End':
+                this.activate(this.ids[this.ids.length - 1]);
+                return true;
+            case 'Enter':
+            case 'Tab':
+                this.choose(this.active);
+                return true;
+            case 'Escape':
+                this.close();
+                return true;
+            default:
+                return false;
+        }
+    }
+    schedulePreview() {
+        const spec = this.spec;
+        this.timers.clear(this.previewTimer);
+        if (spec?.preview === undefined) {
+            return;
+        }
+        const id = this.active;
+        this.previewTimer = this.timers.set(() => {
+            const controller = new AbortController();
+            this.controller = controller;
+            spec.preview(id, controller.signal)
+                .then((preview) => {
+                if (this.spec === spec && this.active === id && !controller.signal.aborted) {
+                    this.publish(preview);
+                }
+            })
+                .catch(() => undefined);
+        }, PREVIEW_DELAY_MS);
+    }
+    publish(preview) {
+        const spec = this.spec;
+        if (spec === null) {
+            return;
+        }
+        const refusal = this.refusals.get(this.active);
+        const shown = refusal === undefined ? preview : { removed: [], added: [], note: null, refusal };
+        this.language.popups.setState({ pick: { anchor: spec.anchor, groups: spec.groups, active: this.active, preview: shown, title: spec.title ?? null } });
+    }
+}

package/dist/popup-placement.d.ts

@@ -0,0 +1,23 @@
+import type { EditorRect } from '@adecore/editor';
+export interface PopupSize {
+    readonly width: number;
+    readonly height: number;
+}
+export interface PopupPlacement {
+    readonly left: number;
+    readonly top: number;
+    readonly maxHeight: number;
+    readonly side: 'above' | 'below';
+}
+export interface PlaceOptions {
+    gap?: number;
+    margin?: number;
+    prefer?: 'above' | 'below';
+}
+export declare function placePopup(anchor: EditorRect, size: PopupSize, window: PopupSize, options?: PlaceOptions): PopupPlacement;
+export declare function placeBeside(first: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, size: PopupSize, window: PopupSize, margin?: number, gap?: number): PopupPlacement;

package/dist/popup-placement.js

@@ -0,0 +1,34 @@
+/*
+ * Where a popup goes next to a character: under it when it fits there, over it when it does not and
+ * there is room, and otherwise on the side with more room, shortened to fit. Aligned with the
+ * character's left edge, and pushed back in when that would leave the window. The anchor and the window
+ * are the page's own pixels, so a canvas's scale never enters.
+ */
+export function placePopup(anchor, size, window, options = {}) {
+    const gap = options.gap ?? 4;
+    const margin = options.margin ?? 8;
+    const roomBelow = window.height - margin - (anchor.bottom + gap);
+    const roomAbove = anchor.top - gap - margin;
+    const fitsBelow = size.height <= roomBelow;
+    const fitsAbove = size.height <= roomAbove;
+    const below = options.prefer === 'above' ? !fitsAbove && (fitsBelow || roomBelow >= roomAbove) : fitsBelow || (!fitsAbove && roomBelow >= roomAbove);
+    const maxHeight = Math.max(0, below ? roomBelow : roomAbove);
+    const height = Math.min(size.height, maxHeight);
+    const left = Math.max(margin, Math.min(anchor.left, window.width - size.width - margin));
+    return { left, top: below ? anchor.bottom + gap : anchor.top - gap - height, maxHeight, side: below ? 'below' : 'above' };
+}
+/*
+ * A second box beside a first, such as the documentation of the highlighted suggestion: to the right
+ * of it when it fits, to the left when only that fits, and under it, at its left edge, when neither does.
+ */
+export function placeBeside(first, size, window, margin = 8, gap = 4) {
+    const fitsRight = first.left + first.width + gap + size.width <= window.width - margin;
+    const fitsLeft = first.left - gap - size.width >= margin;
+    if (fitsRight || fitsLeft) {
+        const top = Math.max(margin, Math.min(first.top, window.height - size.height - margin));
+        return { left: fitsRight ? first.left + first.width + gap : first.left - gap - size.width, top, maxHeight: window.height - margin * 2, side: 'below' };
+    }
+    const top = first.top + first.height + gap;
+    const maxHeight = Math.max(0, window.height - margin - top);
+    return { left: Math.max(margin, Math.min(first.left, window.width - size.width - margin)), top, maxHeight, side: 'below' };
+}