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

package/src/navigation.ts

@@ -0,0 +1,168 @@
+import { StaleResultError, fileUriToPath, type Location, type LocationLink, type NavigationResult, type Range } from '@adecore/lsp';
+import type { EditorPosition } from '@adecore/editor';
+import { basenameOf } from './paths.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { rangeHolds } from './diagnostics-model.ts';
+import { placesOfName } from './symbol-links.ts';
+import { isShortcut } from './shortcut-keys.ts';
+
+export type NavigationKind = 'definition' | 'declaration' | 'typeDefinition' | 'implementation';
+
+const METHODS: Record<NavigationKind, string> = {
+    definition: 'textDocument/definition',
+    declaration: 'textDocument/declaration',
+    typeDefinition: 'textDocument/typeDefinition',
+    implementation: 'textDocument/implementation'
+};
+
+const SHORTCUT_KINDS: readonly [NavigationKind, 'goToDefinition' | 'goToTypeDefinition' | 'goToImplementation'][] = [
+    ['definition', 'goToDefinition'],
+    ['typeDefinition', 'goToTypeDefinition'],
+    ['implementation', 'goToImplementation']
+];
+
+const TOAST_ID = 'language-navigation';
+
+/* The places of a result, each once: the two servers of a Vue file may both know the same one. `target` is the whole declaration when the server gave it. */
+export function uniquePlaces(result: NavigationResult): { location: Location; target: Range | null }[] {
+    const seen = new Set<string>();
+    const list = result === null ? [] : Array.isArray(result) ? (result as (Location | LocationLink)[]) : [result];
+    return list
+        .map((entry) =>
+            'targetUri' in entry
+                ? { location: { uri: entry.targetUri, range: entry.targetSelectionRange }, target: entry.targetRange as Range | null }
+                : { location: entry, target: null }
+        )
+        .filter(({ location }) => {
+            const { start } = location.range;
+            const key = `${location.uri}\0${start.line}\0${start.character}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+}
+
+/* The places of a result, each once. */
+export function uniqueLocations(result: NavigationResult): Location[] {
+    return uniquePlaces(result).map(({ location }) => location);
+}
+
+/*
+ * Going to where a name is defined, declared, typed or implemented: Mod+click on the name or a shortcut
+ * for the caret. One place opens at once, in this file or in the one it lives in, the way a file opens in
+ * the host; several are listed under the name to choose from.
+ */
+export class NavigationFeature {
+    private readonly language: EditorLanguage;
+
+    constructor(language: EditorLanguage) {
+        this.language = language;
+        const { editor } = language;
+        const offs = [
+            editor.onClick((click) => {
+                if (!click.mod || click.alt || click.shift || !this.supports('definition')) {
+                    return false;
+                }
+                void this.go('definition', click.position);
+                return true;
+            }),
+            editor.onKeyDown((event) => {
+                const found = SHORTCUT_KINDS.find(([, name]) => isShortcut(this.language.shortcuts[name], event));
+                if (found === undefined) {
+                    return false;
+                }
+                void this.go(found[0]);
+                return true;
+            })
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+        });
+    }
+
+    supports(kind: NavigationKind): boolean {
+        return this.language.project.service.supports(METHODS[kind], this.language.uri);
+    }
+
+    async go(kind: NavigationKind, position: EditorPosition = this.language.editor.getCaret()): Promise<void> {
+        const { project, uri, editor } = this.language;
+        if (!this.supports(kind)) {
+            this.tell(this.say('unavailable'));
+            return;
+        }
+        let result: NavigationResult;
+        try {
+            const { service } = project;
+            result = await (kind === 'definition'
+                ? service.definition(uri, position)
+                : kind === 'declaration'
+                  ? service.declaration(uri, position)
+                  : kind === 'typeDefinition'
+                    ? service.typeDefinition(uri, position)
+                    : service.implementation(uri, position));
+        } catch (error) {
+            if (!(error instanceof StaleResultError)) {
+                this.tell(this.say('failed', { message: error instanceof Error ? error.message : String(error) }));
+            }
+            return;
+        }
+        const places = uniqueLocations(result);
+        if (places.length === 0) {
+            this.tell(this.say('none'));
+        } else if (kind === 'definition' && places.length === 1 && places[0]!.uri === uri && rangeHolds(places[0]!.range, position)) {
+            // The name is its own definition, so what a person wants to see is where it is used.
+            void this.language.peek.open(position);
+        } else if (places.length === 1) {
+            this.language.goTo(places[0]!);
+        } else {
+            this.language.locations(places, position, this.say(`titles.${kind}`));
+        }
+        editor.focus();
+    }
+
+    /*
+     * A name in the signature of a hover, which is a snippet and no document a server can be asked about by position.
+     * The symbol the signature declares goes to the definition the hover already knows; any other name is looked
+     * up by name among the symbols of the project. One match goes there at once, several are listed, and none says nothing.
+     */
+    async goToName(name: string, anchor: EditorPosition, own: Location | null): Promise<void> {
+        const { project, uri, editor } = this.language;
+        if (own !== null) {
+            this.language.goTo(own);
+            return;
+        }
+        if (!project.service.supports('workspace/symbol', uri)) {
+            return;
+        }
+        try {
+            const places = placesOfName(await project.service.workspaceSymbols(uri, name), name, editor.getText());
+            if (places.length === 1) {
+                this.language.goTo(places[0]!);
+            } else if (places.length > 1) {
+                this.language.locations(places, anchor, this.say('titles.symbol'));
+            }
+        } catch {
+            // A name that cannot be found is a link that does nothing, not an error.
+        }
+    }
+
+    private tell(title: string): void {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title });
+    }
+
+    private say(key: string, options?: Record<string, unknown>): string {
+        return this.language.project.i18n.t(`editor:language.navigation.${key}`, options);
+    }
+}
+
+/* How a place reads in a list: the file and the line, with the folder it is in. */
+export function locationRow(location: Location, stored: string | null): { label: string; detail: string; path: true } {
+    const path = stored ?? fileUriToPath(location.uri) ?? location.uri;
+    const name = basenameOf(path);
+    const folder = path.slice(0, Math.max(0, path.length - name.length)).replace(/\/$/, '');
+    return { label: `${name}:${location.range.start.line + 1}`, detail: folder, path: true };
+}

package/src/paths.ts

@@ -0,0 +1,3 @@
+export function basenameOf(path: string): string {
+    return path.replaceAll('\\', '/').split('/').at(-1) ?? path;
+}

package/src/peek-model.ts

@@ -0,0 +1,147 @@
+import type { Location, Range } from '@adecore/lsp';
+
+/* A stretch of one line, in characters from its start. */
+export interface NameRange {
+    readonly start: number;
+    readonly end: number;
+}
+
+/* One reference in the list: the line it is on, as the file reads there. */
+export interface PeekPlace {
+    readonly id: string;
+    readonly location: Location;
+    /* Zero-based. */
+    readonly line: number;
+    readonly text: string;
+    /* Where the name stands in `text`; null without a line, or when the line is not what the server read. */
+    readonly name: NameRange | null;
+}
+
+export interface PeekFile {
+    readonly uri: string;
+    readonly places: readonly PeekPlace[];
+}
+
+/* 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: Range, line: number, length: number): NameRange | null {
+    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: string, range: Range, line: number): NameRange | null {
+    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: readonly Location[], current: string, textOf: (uri: string) => string | null): PeekFile[] {
+    const order: string[] = [];
+    const byFile = new Map<string, Location[]>();
+    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 };
+    });
+}
+
+/* A few lines of a file around a line, to draw as the preview of a reference. */
+export interface PeekSnippet {
+    readonly startLine: number;
+    readonly text: string;
+    /* Zero-based, from the first line of the snippet. */
+    readonly active: number;
+    /* The name on the active line, in characters of the line as it stands in `text`. */
+    readonly name: NameRange | null;
+}
+
+const BEFORE = 3;
+const AFTER = 8;
+
+export function snippetOf(text: string, line: number, range: Range): PeekSnippet {
+    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: string, line: number, declaration: Range | null, range: Range): PeekSnippet {
+    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: readonly string[]): string[] {
+    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: string, character: number, tabSize: number): number {
+    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/src/peek.ts

@@ -0,0 +1,247 @@
+import { StaleResultError, type Location, type Range } from '@adecore/lsp';
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { uniquePlaces } from './navigation.ts';
+import { PEEK_READ_FILES, definitionSnippetOf, peekFilesOf, snippetOf, type PeekFile } from './peek-model.ts';
+import type { PeekView } from './popups.ts';
+import { isShortcut } from './shortcut-keys.ts';
+
+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;
+
+type PeekKind = PeekView['kind'];
+
+const KINDS = {
+    references: { method: 'textDocument/references', unavailable: 'unavailable', none: 'none' },
+    definitions: { method: 'textDocument/definition', unavailable: 'unavailableDefinition', none: 'noDefinition' }
+} as const;
+
+function placeKey(location: Location): string {
+    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 {
+    private readonly language: EditorLanguage;
+    private kind: PeekKind = 'references';
+    /* The whole declaration of each place of a definition peek, where the server gave it. */
+    private targets = new Map<string, Range>();
+    private texts = new Map<string, string>();
+    private places = new Map<string, Location>();
+    private order: string[] = [];
+    private line = 0;
+    private token = 0;
+
+    constructor(language: EditorLanguage) {
+        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(): boolean {
+        return this.language.popups.getState().peek !== null;
+    }
+
+    async open(position: EditorPosition = this.language.editor.getCaret(), kind: PeekKind = 'references'): Promise<void> {
+        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: { locations: Location[]; targets: Map<string, Range> };
+        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<string, string>();
+        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: PeekFile) => file.places.map((place) => [place.id, place.location] as const)));
+        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: EditorPosition = this.language.editor.getCaret()): Promise<void> {
+        return this.open(position, 'definitions');
+    }
+
+    private async fetch(kind: PeekKind, position: EditorPosition): Promise<{ locations: Location[]; targets: Map<string, Range> }> {
+        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] as const])));
+        return { locations: places.map(({ location }) => location), targets };
+    }
+
+    close(): void {
+        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: string): void {
+        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: string): void {
+        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: string): void {
+        const location = this.places.get(id);
+        if (location !== undefined) {
+            this.close();
+            this.language.goTo(location);
+        }
+    }
+
+    private mounted(container: HTMLElement): void {
+        const view = this.language.popups.getState().peek;
+        if (view !== null && view.container !== container) {
+            this.language.popups.setState({ peek: { ...view, container } });
+        }
+    }
+
+    private key(event: KeyboardEvent): boolean {
+        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. */
+    private step(view: PeekView, direction: 1 | -1): void {
+        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;
+            }
+        }
+    }
+
+    private tell(title: string): void {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title });
+    }
+
+    private say(key: string, options?: Record<string, unknown>): string {
+        return this.language.project.i18n.t(`editor:language.peek.${key}`, options);
+    }
+}