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

package/src/semantic-tokens.ts

@@ -0,0 +1,46 @@
+import type { EditorLanguage } from './editor-language.ts';
+import { Refresher } from './refresher.ts';
+import { decodeSemanticTokens } from './semantic-model.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/semanticTokens/full';
+const PAUSE_MS = 200;
+
+/*
+ * Colors the editor draws from what the language servers know, over what the grammar made of the text:
+ * a class is a class and a call is a call where the grammar could only guess. It asks after a pause in
+ * typing and when a server says its offer changed, and keeps drawing the last answer, which follows its
+ * text through edits, in between, so the colors never blink out while the next one is on its way.
+ */
+export class SemanticTokensFeature {
+    private readonly refresher: Refresher;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        const { editor, project, uri } = language;
+        this.refresher = new Refresher(
+            async (signal) => {
+                const { service } = project;
+                const legend = service.providerOptions(METHOD, uri)?.legend;
+                if (!service.supports(METHOD, uri) || legend === undefined) {
+                    return;
+                }
+                const tokens = await service.semanticTokens(uri, { signal });
+                if (!signal.aborted) {
+                    editor.setSemanticTokens(tokens === null ? null : decodeSemanticTokens(tokens, legend));
+                }
+            },
+            PAUSE_MS,
+            timers
+        );
+        const edits = editor.onTextChange(() => this.refresher.later());
+        const providers = language.onProvidersChanged(() => {
+            this.refresher.now();
+        });
+        language.onDispose(() => {
+            edits();
+            providers();
+            this.refresher.dispose();
+            editor.setSemanticTokens(null);
+        });
+    }
+}

package/src/shortcut-keys.ts

@@ -0,0 +1,21 @@
+import { chordOf, KEYMAP_IDS, parseChord, type Keymap } from '@adecore/editor/keymap';
+import type { KeyChord } from '@adecore/editor';
+import { matchesShortcut } from '@adecore/ui';
+
+export interface LanguageShortcut extends KeyChord {
+    readonly apple: boolean;
+}
+
+export function shortcutsOf(keymap: Keymap, apple: boolean) {
+    const shortcuts = Object.fromEntries(
+        KEYMAP_IDS.map((id) => {
+            const text = chordOf(id, apple, keymap);
+            return [id, text === null ? null : { ...parseChord(text), apple }];
+        })
+    ) as Record<keyof Keymap, LanguageShortcut | null>;
+    return { ...shortcuts, rename: shortcuts.renameSymbol };
+}
+
+export function isShortcut(target: LanguageShortcut | null, event: KeyboardEvent): boolean {
+    return target !== null && matchesShortcut(target, event, target.apple);
+}

package/src/signature-model.ts

@@ -0,0 +1,49 @@
+import type { SignatureHelp, SignatureInformation } from '@adecore/lsp';
+import { documentationText } from './completion-model.ts';
+
+/* The signature help of a call, ready to draw: the label with the active parameter marked, and what is said about it. */
+export interface SignatureViewModel {
+    readonly label: string;
+    /* The active parameter's characters in the label, or null when the server named none. */
+    readonly active: { readonly start: number; readonly end: number } | null;
+    readonly parameterName: string;
+    readonly parameterDocumentation: string;
+    readonly documentation: string;
+    /* Zero-based, and how many overloads the server knows. */
+    readonly index: number;
+    readonly count: number;
+}
+
+/* Where a parameter's label stands in the signature's: given as a pair of offsets, or as the text to find in it. */
+export function parameterSpan(signature: SignatureInformation, index: number): { start: number; end: number } | null {
+    const parameter = signature.parameters?.[index];
+    if (parameter === undefined) {
+        return null;
+    }
+    if (typeof parameter.label !== 'string') {
+        const [start, end] = parameter.label;
+        return start >= 0 && end <= signature.label.length && start < end ? { start, end } : null;
+    }
+    const start = signature.label.indexOf(parameter.label);
+    return start < 0 ? null : { start, end: start + parameter.label.length };
+}
+
+export function signatureViewOf(help: SignatureHelp | null): SignatureViewModel | null {
+    if (help === null || help.signatures.length === 0) {
+        return null;
+    }
+    const index = Math.min(Math.max(0, help.activeSignature ?? 0), help.signatures.length - 1);
+    const signature = help.signatures[index]!;
+    const parameterIndex = signature.activeParameter ?? help.activeParameter ?? 0;
+    const active = parameterSpan(signature, parameterIndex);
+    const parameter = signature.parameters?.[parameterIndex];
+    return {
+        label: signature.label,
+        active,
+        parameterName: active === null ? '' : signature.label.slice(active.start, active.end).replace(/[?:].*$/s, ''),
+        parameterDocumentation: documentationText(parameter?.documentation),
+        documentation: documentationText(signature.documentation),
+        index,
+        count: help.signatures.length
+    };
+}

package/src/signature.ts

@@ -0,0 +1,164 @@
+import type { SignatureHelp, SignatureHelpContext } from '@adecore/lsp';
+import type { EditorPosition, EditorTextChange } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { signatureViewOf } from './signature-model.ts';
+import { isShortcut } from './shortcut-keys.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/signatureHelp';
+const PAUSE_MS = 60;
+
+/*
+ * The parameters of the call the caret is in, while its arguments are typed. It opens on a trigger
+ * character of the server, such as `(` and `,`, and asks again as the caret moves or the text changes,
+ * so the active parameter follows; the server answering nothing is the caret leaving the call.
+ */
+export class SignatureFeature {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private timer: unknown;
+    private request = 0;
+    private controller: AbortController | null = null;
+    private help: SignatureHelp | null = null;
+    private anchor: EditorPosition | null = null;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.timers = timers;
+        const { editor } = language;
+        const offs = [
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret(() => this.retrigger()),
+            editor.onBlur(() => this.close()),
+            editor.onKeyDown((event) => {
+                if (event.key === 'Escape' && this.isOpen) {
+                    this.close();
+                    return true;
+                }
+                if (isShortcut(this.language.shortcuts.parameterInfo, event)) {
+                    this.invoke();
+                    return true;
+                }
+                if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !event.ctrlKey && !event.metaKey && !event.altKey && !event.shiftKey) {
+                    return this.cycle(event.key === 'ArrowDown' ? 1 : -1);
+                }
+                return false;
+            })
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.close();
+        });
+    }
+
+    get isOpen(): boolean {
+        return this.language.popups.getState().signature !== null;
+    }
+
+    /* Asks for the parameters of the call at the caret, as its key does. */
+    invoke(): void {
+        this.ask({ triggerKind: 1, isRetrigger: false });
+    }
+
+    /* Asks for the parameters as if `(` had just been typed, which is what a call opened by a completion is. */
+    trigger(): void {
+        this.ask({ triggerKind: 2, triggerCharacter: '(', isRetrigger: false });
+    }
+
+    /* Shows the next overload, or the one before, while the card is up and has more than one; false when it has not, which leaves the arrow to the caret. */
+    private cycle(step: 1 | -1): boolean {
+        const { help } = this;
+        if (help === null || help.signatures.length < 2 || !this.isOpen) {
+            return false;
+        }
+        const count = help.signatures.length;
+        const next = { ...help, activeSignature: (Math.min(Math.max(0, help.activeSignature ?? 0), count - 1) + step + count) % count };
+        const model = signatureViewOf(next);
+        if (model === null || this.anchor === null) {
+            return false;
+        }
+        this.help = next;
+        this.language.popups.setState({ signature: { anchor: this.anchor, model } });
+        return true;
+    }
+
+    close(): void {
+        this.request++;
+        this.controller?.abort();
+        this.timers.clear(this.timer);
+        this.help = null;
+        this.anchor = null;
+        if (this.isOpen) {
+            this.language.popups.setState({ signature: null });
+        }
+    }
+
+    private options(): { triggers: readonly string[]; retriggers: readonly string[] } | null {
+        const { project, uri } = this.language;
+        const options = project.service.providerOptions(METHOD, uri);
+        return options === undefined ? null : { triggers: options.triggerCharacters ?? [], retriggers: options.retriggerCharacters ?? [] };
+    }
+
+    private edited(change: EditorTextChange): void {
+        const options = this.options();
+        if (change.source !== 'input' || options === null) {
+            this.close();
+            return;
+        }
+        const text = change.changes.length === 1 ? change.changes[0]!.text : '';
+        const last = Array.from(text).at(-1) ?? '';
+        if (text.length === 1 && options.triggers.includes(last)) {
+            this.ask({ triggerKind: 2, triggerCharacter: last, isRetrigger: this.isOpen });
+        } else if (this.isOpen) {
+            this.ask({
+                triggerKind: text.length === 1 && options.retriggers.includes(last) ? 2 : 3,
+                ...(options.retriggers.includes(last) ? { triggerCharacter: last } : {}),
+                isRetrigger: true
+            });
+        }
+    }
+
+    private retrigger(): void {
+        if (this.isOpen) {
+            this.ask({ triggerKind: 3, isRetrigger: true });
+        }
+    }
+
+    private ask(context: Omit<SignatureHelpContext, 'activeSignatureHelp'>): void {
+        const { project, uri } = this.language;
+        if (!project.service.supports(METHOD, uri)) {
+            return;
+        }
+        this.timers.clear(this.timer);
+        const request = ++this.request;
+        const full: SignatureHelpContext = { ...context, ...(this.help === null ? {} : { activeSignatureHelp: this.help }) };
+        this.timer = this.timers.set(() => void this.fetch(full, request), PAUSE_MS);
+    }
+
+    private async fetch(context: SignatureHelpContext, request: number): Promise<void> {
+        const { editor, project, uri } = this.language;
+        const caret = editor.getCaret();
+        this.controller?.abort();
+        const controller = new AbortController();
+        this.controller = controller;
+        let help: SignatureHelp | null;
+        try {
+            help = await project.service.signatureHelp(uri, caret, context, { signal: controller.signal });
+        } catch {
+            return;
+        }
+        if (request !== this.request) {
+            return;
+        }
+        const model = signatureViewOf(help);
+        if (model === null) {
+            this.close();
+            return;
+        }
+        this.help = help;
+        this.anchor ??= caret;
+        this.language.popups.setState({ signature: { anchor: this.anchor, model } });
+    }
+}

package/src/snippet-session.ts

@@ -0,0 +1,122 @@
+import type { EditorPosition, EditorRange, EditorTextChange } from '@adecore/editor';
+import { comparePositions, rangeHolds, shiftRange } from './diagnostics-model.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import type { SnippetStop } from './snippet.ts';
+
+/* Where an offset of inserted text lands when the text is put in at `start`. */
+export function positionInInsertion(start: EditorPosition, text: string, offset: number): EditorPosition {
+    const lines = text.slice(0, offset).split(/\r\n|\r|\n/);
+    return lines.length === 1
+        ? { line: start.line, character: start.character + offset }
+        : { line: start.line + lines.length - 1, character: lines[lines.length - 1]!.length };
+}
+
+/*
+ * The tab stops of a snippet that was just inserted. The caret goes to the first one, with its default text
+ * selected; Tab goes on to the next and Shift+Tab back, and the last stop (`$0`, or the end of the text)
+ * ends it. Escape, a caret that leaves the snippet and any change that is not typing end it too. Typing in
+ * a stop does not touch the others: they follow the text, but a mirror of a stop is not edited along.
+ */
+export class SnippetFeature {
+    private readonly language: EditorLanguage;
+    private stops: EditorRange[] = [];
+    private current = 0;
+
+    constructor(language: EditorLanguage) {
+        this.language = language;
+        const { editor } = language;
+        const offs = [
+            editor.onKeyDown((event) => this.key(event)),
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret((position) => this.moved(position))
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+        });
+    }
+
+    get isActive(): boolean {
+        return this.stops.length > 0;
+    }
+
+    /* Puts the caret where the snippet says, and keeps the stops to go through when there is more than the last one. */
+    begin(start: EditorPosition, text: string, stops: readonly SnippetStop[]): void {
+        this.end();
+        if (stops.length === 0) {
+            return;
+        }
+        const ranges = stops.map((stop) => ({ start: positionInInsertion(start, text, stop.start), end: positionInInsertion(start, text, stop.end) }));
+        if (ranges.length === 1) {
+            this.language.editor.setCaret(ranges[0]!.start);
+            return;
+        }
+        this.stops = ranges;
+        this.visit(0);
+    }
+
+    end(): void {
+        this.stops = [];
+        this.current = 0;
+    }
+
+    private visit(index: number): void {
+        const { editor } = this.language;
+        const target = this.stops[index]!;
+        this.current = index;
+        if (comparePositions(target.start, target.end) === 0) {
+            editor.setCaret(target.start);
+        } else {
+            editor.setSelection(target);
+        }
+        if (index === this.stops.length - 1) {
+            this.end();
+        }
+    }
+
+    private key(event: KeyboardEvent): boolean {
+        if (!this.isActive || event.ctrlKey || event.metaKey || event.altKey) {
+            return false;
+        }
+        if (event.key === 'Tab') {
+            this.visit(event.shiftKey ? Math.max(0, this.current - 1) : this.current + 1);
+            return true;
+        }
+        if (event.key === 'Escape') {
+            this.end();
+            return true;
+        }
+        return false;
+    }
+
+    private edited(change: EditorTextChange): void {
+        if (!this.isActive) {
+            return;
+        }
+        if (change.source !== 'input') {
+            this.end();
+            return;
+        }
+        this.stops = this.stops.map((stop) => shiftRange(stop, change.changes));
+    }
+
+    /* A caret outside the stretch the stops span is a person moving on. */
+    private moved(position: EditorPosition): void {
+        if (!this.isActive) {
+            return;
+        }
+        const hull = { start: this.stops[0]!.start, end: this.stops[this.stops.length - 1]!.end };
+        for (const stop of this.stops) {
+            if (comparePositions(stop.start, hull.start) < 0) {
+                hull.start = stop.start;
+            }
+            if (comparePositions(stop.end, hull.end) > 0) {
+                hull.end = stop.end;
+            }
+        }
+        if (!rangeHolds(hull, position)) {
+            this.end();
+        }
+    }
+}

package/src/snippet.ts

@@ -0,0 +1,147 @@
+/* A tab stop of a snippet: its index, and where it stands in the text the snippet inserts. */
+export interface SnippetStop {
+    readonly index: number;
+    /* UTF-16 offsets into the inserted text; equal for a stop that holds no text. */
+    readonly start: number;
+    readonly end: number;
+}
+
+export interface ParsedSnippet {
+    readonly text: string;
+    /* In text order, a stop of the same index again being a mirror, which is not edited along. */
+    readonly stops: readonly SnippetStop[];
+}
+
+const NAME = '[A-Za-z_]\\w*';
+const TABSTOP = new RegExp(`^\\$(\\d+)|^\\$\\{(\\d+)\\}`);
+const PLACEHOLDER = /^\$\{(\d+):/;
+const CHOICE = /^\$\{(\d+)\|/;
+const DEFAULT_VARIABLE = new RegExp(`^\\$\\{${NAME}:`);
+const TRANSFORMED_VARIABLE = new RegExp(`^\\$\\{${NAME}/`);
+const BARE_VARIABLE = new RegExp(`^\\$${NAME}|^\\$\\{${NAME}\\}`);
+
+class SnippetParser {
+    text = '';
+    readonly stops: SnippetStop[] = [];
+    private at = 0;
+    private readonly source: string;
+
+    constructor(source: string) {
+        this.source = source;
+    }
+
+    parse(): ParsedSnippet {
+        this.sequence(false);
+        return { text: this.text, stops: this.stops };
+    }
+
+    /* Text up to the `}` that closes the placeholder this is in, which is left for the caller. */
+    private sequence(nested: boolean): void {
+        while (this.at < this.source.length) {
+            const character = this.source[this.at]!;
+            if (character === '}' && nested) {
+                return;
+            }
+            if (character === '\\' && /[\\$}]/.test(this.source[this.at + 1] ?? '')) {
+                this.text += this.source[this.at + 1];
+                this.at += 2;
+            } else if (character === '$') {
+                this.dollar();
+            } else {
+                this.text += character;
+                this.at++;
+            }
+        }
+    }
+
+    private dollar(): void {
+        const rest = this.source.slice(this.at);
+        const tabstop = TABSTOP.exec(rest);
+        const placeholder = PLACEHOLDER.exec(rest);
+        const choice = CHOICE.exec(rest);
+        if (tabstop !== null) {
+            this.at += tabstop[0].length;
+            this.stops.push({ index: Number(tabstop[1] ?? tabstop[2]), start: this.text.length, end: this.text.length });
+        } else if (placeholder !== null) {
+            this.at += placeholder[0].length;
+            const start = this.text.length;
+            this.sequence(true);
+            this.closeBrace();
+            this.stops.push({ index: Number(placeholder[1]), start, end: this.text.length });
+        } else if (choice !== null) {
+            this.at += choice[0].length;
+            const start = this.text.length;
+            this.firstChoice();
+            this.stops.push({ index: Number(choice[1]), start, end: this.text.length });
+        } else if (DEFAULT_VARIABLE.test(rest)) {
+            this.at += rest.indexOf(':') + 1;
+            this.sequence(true);
+            this.closeBrace();
+        } else if (TRANSFORMED_VARIABLE.test(rest)) {
+            this.skipBraces();
+        } else if (BARE_VARIABLE.test(rest)) {
+            this.at += BARE_VARIABLE.exec(rest)![0].length;
+        } else {
+            this.text += '$';
+            this.at++;
+        }
+    }
+
+    private closeBrace(): void {
+        if (this.source[this.at] === '}') {
+            this.at++;
+        }
+    }
+
+    /* The first of `a,b,c|}`, and the rest dropped. */
+    private firstChoice(): void {
+        let first = true;
+        while (this.at < this.source.length && !(this.source[this.at] === '|' && this.source[this.at + 1] === '}')) {
+            const character = this.source[this.at]!;
+            if (character === '\\' && /[\\,|]/.test(this.source[this.at + 1] ?? '')) {
+                this.at++;
+                if (first) {
+                    this.text += this.source[this.at];
+                }
+            } else if (character === ',') {
+                first = false;
+            } else if (first) {
+                this.text += character;
+            }
+            this.at++;
+        }
+        this.at += 2;
+    }
+
+    /* Past the `}` that closes a `${name/regex/format/}` variable, which inserts nothing here. */
+    private skipBraces(): void {
+        let depth = 0;
+        while (this.at < this.source.length) {
+            const character = this.source[this.at]!;
+            this.at += character === '\\' ? 2 : 1;
+            if (character === '{') {
+                depth++;
+            } else if (character === '}' && --depth === 0) {
+                return;
+            }
+        }
+    }
+}
+
+export function parseSnippet(snippet: string): ParsedSnippet {
+    return new SnippetParser(snippet).parse();
+}
+
+/* The stops in the order Tab visits them: 1, 2 and on, one per index, then the final stop `$0`, which the end of the text stands in for. */
+export function tabOrder(parsed: ParsedSnippet): SnippetStop[] {
+    const first = new Map<number, SnippetStop>();
+    for (const stop of parsed.stops) {
+        const known = first.get(stop.index);
+        if (known === undefined || stop.start < known.start) {
+            first.set(stop.index, stop);
+        }
+    }
+    const visited = [...first.values()].filter((stop) => stop.index > 0).sort((left, right) => left.index - right.index);
+    const final = first.get(0) ?? { index: 0, start: parsed.text.length, end: parsed.text.length };
+    return [...visited, final];
+}

package/src/symbol-links.ts

@@ -0,0 +1,72 @@
+import type { Location, SymbolInformation, WorkspaceSymbol, WorkspaceSymbolResult } from '@adecore/lsp';
+
+/* The classes a name in a signature has: a pointer and an underline on hover, and the accent only then, so the signature stays calm. */
+export const SYMBOL_LINK_CLASS = 'cursor-pointer hover:text-accent hover:underline';
+
+/* A name that reads as a type: it starts with a capital and has a lowercase letter, which leaves `DEFAULT_WEIGHTS` and `T` alone. */
+const TYPE_NAME = /^[A-Z][A-Za-z0-9_]*$/;
+
+export function isTypeName(name: string): boolean {
+    return TYPE_NAME.test(name) && /[a-z]/.test(name);
+}
+
+/*
+ * Marks the type-like names of a highlighted snippet as links. Shiki writes each token as a span of its own,
+ * so a name that is the whole text of a token is one; a string or a comment is never that.
+ */
+export function linkTypeNames(html: string): string {
+    return html.replace(/>([A-Z][A-Za-z0-9_]*)</g, (match, name: string) =>
+        isTypeName(name) ? `><span data-symbol="${name}" class="${SYMBOL_LINK_CLASS}">${name}</span><` : match
+    );
+}
+
+const DECLARES = /\b(?:class|interface|enum|trait|type|namespace|struct|function|const|let|var)\s+&?([A-Za-z_$][\w$]*)/;
+
+/* The name a signature declares, such as `IssueTicketsMessage` in `final class IssueTicketsMessage implements MessageInterface`; null for one that declares nothing, such as a method of a class. */
+export function declaredNameOf(code: string): string | null {
+    return DECLARES.exec(code)?.[1] ?? null;
+}
+
+/* What a workspace symbol is that a type name can mean. */
+const TYPE_KINDS = new Set([2, 3, 5, 10, 11, 23, 26]);
+
+interface Found {
+    readonly name: string;
+    readonly kind: number;
+    readonly containerName?: string;
+    readonly location: Location | { uri: string };
+}
+
+/*
+ * The places a type name leads to among the symbols a server found for it. Only symbols of exactly that name
+ * count, those that are types ahead of the rest, and when several are left the ones whose container (a
+ * namespace) the current file names, which is how a file says which `Message` it means.
+ */
+export function placesOfName(result: WorkspaceSymbolResult, name: string, fileText: string): Location[] {
+    const found: Found[] = ((result ?? []) as (SymbolInformation | WorkspaceSymbol)[]).filter((symbol) => symbol.name === name);
+    const types = found.filter((symbol) => TYPE_KINDS.has(symbol.kind));
+    let candidates = types.length > 0 ? types : found;
+    if (candidates.length > 1) {
+        const named = candidates.filter(
+            (symbol) => symbol.containerName !== undefined && symbol.containerName !== '' && fileText.includes(symbol.containerName)
+        );
+        if (named.length > 0) {
+            candidates = named;
+        }
+    }
+    const seen = new Set<string>();
+    return candidates
+        .map((symbol): Location =>
+            'range' in symbol.location
+                ? symbol.location
+                : { uri: symbol.location.uri, range: { start: { line: 0, character: 0 }, end: { line: 0, character: 0 } } }
+        )
+        .filter((location) => {
+            const key = `${location.uri}\0${location.range.start.line}`;
+            if (seen.has(key)) {
+                return false;
+            }
+            seen.add(key);
+            return true;
+        });
+}