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

package/dist/snippet-session.js

@@ -0,0 +1,110 @@
+import { comparePositions, rangeHolds, shiftRange } from './diagnostics-model.js';
+/* Where an offset of inserted text lands when the text is put in at `start`. */
+export function positionInInsertion(start, text, offset) {
+    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 {
+    language;
+    stops = [];
+    current = 0;
+    constructor(language) {
+        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() {
+        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, text, stops) {
+        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() {
+        this.stops = [];
+        this.current = 0;
+    }
+    visit(index) {
+        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();
+        }
+    }
+    key(event) {
+        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;
+    }
+    edited(change) {
+        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. */
+    moved(position) {
+        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/dist/snippet.d.ts

@@ -0,0 +1,11 @@
+export interface SnippetStop {
+    readonly index: number;
+    readonly start: number;
+    readonly end: number;
+}
+export interface ParsedSnippet {
+    readonly text: string;
+    readonly stops: readonly SnippetStop[];
+}
+export declare function parseSnippet(snippet: string): ParsedSnippet;
+export declare function tabOrder(parsed: ParsedSnippet): SnippetStop[];

package/dist/snippet.js

@@ -0,0 +1,134 @@
+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 = '';
+    stops = [];
+    at = 0;
+    source;
+    constructor(source) {
+        this.source = source;
+    }
+    parse() {
+        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. */
+    sequence(nested) {
+        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++;
+            }
+        }
+    }
+    dollar() {
+        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++;
+        }
+    }
+    closeBrace() {
+        if (this.source[this.at] === '}') {
+            this.at++;
+        }
+    }
+    /* The first of `a,b,c|}`, and the rest dropped. */
+    firstChoice() {
+        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. */
+    skipBraces() {
+        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) {
+    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) {
+    const first = new Map();
+    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/dist/symbol-links.d.ts

@@ -0,0 +1,6 @@
+import type { Location, WorkspaceSymbolResult } from '@adecore/lsp';
+export declare const SYMBOL_LINK_CLASS = "cursor-pointer hover:text-accent hover:underline";
+export declare function isTypeName(name: string): boolean;
+export declare function linkTypeNames(html: string): string;
+export declare function declaredNameOf(code: string): string | null;
+export declare function placesOfName(result: WorkspaceSymbolResult, name: string, fileText: string): Location[];

package/dist/symbol-links.js

@@ -0,0 +1,50 @@
+/* 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) {
+    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) {
+    return html.replace(/>([A-Z][A-Za-z0-9_]*)</g, (match, name) => 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) {
+    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]);
+/*
+ * 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, name, fileText) {
+    const found = (result ?? []).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();
+    return candidates
+        .map((symbol) => '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;
+    });
+}

package/dist/symbol-picker-model.d.ts

@@ -0,0 +1,44 @@
+import type { DocumentSymbolResult, WorkspaceSymbolResult } from '@adecore/lsp';
+export type SymbolGroup = 'namespaces' | 'classes' | 'interfaces' | 'enums' | 'functions' | 'methods' | 'properties' | 'variables' | 'constants' | 'other';
+export declare const SYMBOL_GROUPS: readonly SymbolGroup[];
+export declare function groupOfKind(kind: number): SymbolGroup;
+export declare function letterOfKind(kind: number): string;
+export type SymbolTone = 'callable' | 'value' | 'type' | 'other';
+export declare function toneOfKind(kind: number): SymbolTone;
+export interface SymbolEntry {
+    readonly id: string;
+    readonly name: string;
+    readonly kind: number;
+    readonly container: string;
+    readonly detail: string;
+    readonly line: number;
+    readonly character: number;
+}
+export declare function entriesOf(result: DocumentSymbolResult): SymbolEntry[];
+export declare function scoreOf(name: string, query: string): number;
+export declare function filterEntries(entries: readonly SymbolEntry[], query: string): SymbolEntry[];
+export interface EntryGroup {
+    readonly group: SymbolGroup;
+    readonly entries: readonly SymbolEntry[];
+}
+export declare function groupEntries(entries: readonly SymbolEntry[]): EntryGroup[];
+export type PickerMode = {
+    readonly mode: 'symbol';
+    readonly text: string;
+} | {
+    readonly mode: 'workspace';
+    readonly text: string;
+} | {
+    readonly mode: 'line';
+    readonly line: number | null;
+};
+export declare function modeOf(input: string): PickerMode;
+export interface WorkspaceEntry {
+    readonly id: string;
+    readonly name: string;
+    readonly kind: number;
+    readonly container: string;
+    readonly uri: string;
+    readonly line: number;
+}
+export declare function workspaceEntriesOf(result: WorkspaceSymbolResult): WorkspaceEntry[];

package/dist/symbol-picker-model.js

@@ -0,0 +1,146 @@
+/* The order the groups are listed in: what a file declares, then what those declare. */
+export const SYMBOL_GROUPS = [
+    'namespaces',
+    'classes',
+    'interfaces',
+    'enums',
+    'functions',
+    'methods',
+    'properties',
+    'variables',
+    'constants',
+    'other'
+];
+const GROUP_OF_KIND = {
+    2: 'namespaces',
+    3: 'namespaces',
+    4: 'namespaces',
+    5: 'classes',
+    23: 'classes',
+    11: 'interfaces',
+    10: 'enums',
+    22: 'enums',
+    12: 'functions',
+    6: 'methods',
+    9: 'methods',
+    7: 'properties',
+    8: 'properties',
+    13: 'variables',
+    14: 'constants',
+    26: 'other'
+};
+export function groupOfKind(kind) {
+    return GROUP_OF_KIND[kind] ?? 'other';
+}
+const LETTERS = {
+    namespaces: 'N',
+    classes: 'C',
+    interfaces: 'I',
+    enums: 'E',
+    functions: 'f',
+    methods: 'm',
+    properties: 'p',
+    variables: 'v',
+    constants: 'c',
+    other: '·'
+};
+/* The letter in the badge in front of a symbol. */
+export function letterOfKind(kind) {
+    return kind === 22 ? 'e' : LETTERS[groupOfKind(kind)];
+}
+export function toneOfKind(kind) {
+    const group = groupOfKind(kind);
+    return group === 'functions' || group === 'methods'
+        ? 'callable'
+        : group === 'classes' || group === 'interfaces' || group === 'enums'
+            ? 'type'
+            : group === 'properties' || group === 'variables' || group === 'constants'
+                ? 'value'
+                : 'other';
+}
+function isHierarchical(symbols) {
+    return symbols.length > 0 && 'selectionRange' in symbols[0];
+}
+/* The symbols of a file, parents before their children, in the order of the file. */
+export function entriesOf(result) {
+    const entries = [];
+    const add = (name, kind, container, detail, at) => {
+        entries.push({ id: String(entries.length), name, kind, container, detail, line: at.line, character: at.character });
+    };
+    const walk = (symbols, container) => {
+        for (const symbol of symbols) {
+            add(symbol.name, symbol.kind, container, symbol.detail ?? '', symbol.selectionRange.start);
+            walk(symbol.children ?? [], container === '' ? symbol.name : `${container}.${symbol.name}`);
+        }
+    };
+    if (result === null || result.length === 0) {
+        return entries;
+    }
+    if (isHierarchical(result)) {
+        walk(result, '');
+    }
+    else {
+        for (const symbol of result) {
+            add(symbol.name, symbol.kind, symbol.containerName ?? '', '', symbol.location.range.start);
+        }
+    }
+    return entries;
+}
+/* How well a query matches a name: 3 for a prefix, 2 for a part of it, 1 for its letters in order, 0 for no match. Case is ignored. */
+export function scoreOf(name, query) {
+    const haystack = name.toLowerCase();
+    const needle = query.toLowerCase();
+    if (needle === '') {
+        return 1;
+    }
+    if (haystack.startsWith(needle)) {
+        return 3;
+    }
+    if (haystack.includes(needle)) {
+        return 2;
+    }
+    let from = 0;
+    for (const character of needle) {
+        from = haystack.indexOf(character, from) + 1;
+        if (from === 0) {
+            return 0;
+        }
+    }
+    return 1;
+}
+/* The entries that match, best first within each group; without a query, in the order of the file. */
+export function filterEntries(entries, query) {
+    const trimmed = query.trim();
+    const scored = entries.map((entry, index) => ({ entry, index, score: scoreOf(entry.name, trimmed) })).filter((candidate) => candidate.score > 0);
+    return scored
+        .sort((left, right) => (trimmed === '' ? left.index - right.index : right.score - left.score || left.index - right.index))
+        .map((candidate) => candidate.entry);
+}
+/* The entries in their groups, in the order of the groups, and so in the order the list is walked with the arrows. */
+export function groupEntries(entries) {
+    return SYMBOL_GROUPS.flatMap((group) => {
+        const own = entries.filter((entry) => groupOfKind(entry.kind) === group);
+        return own.length === 0 ? [] : [{ group, entries: own }];
+    });
+}
+/* `#name` searches the whole project, `:12` goes to a line, anything else filters the symbols of the file. */
+export function modeOf(input) {
+    if (input.startsWith('#')) {
+        return { mode: 'workspace', text: input.slice(1).trim() };
+    }
+    if (input.startsWith(':')) {
+        const line = Number.parseInt(input.slice(1), 10);
+        return { mode: 'line', line: Number.isFinite(line) && line > 0 ? line : null };
+    }
+    return { mode: 'symbol', text: input };
+}
+export function workspaceEntriesOf(result) {
+    return (result ?? []).map((symbol, index) => ({
+        id: String(index),
+        name: symbol.name,
+        kind: symbol.kind,
+        container: symbol.containerName ?? '',
+        uri: symbol.location.uri,
+        line: 'range' in symbol.location ? symbol.location.range.start.line : 0
+    }));
+}

package/dist/symbol-picker.d.ts

@@ -0,0 +1,12 @@
+import type { EditorLanguage } from './editor-language.ts';
+import { type SymbolEntry, type WorkspaceEntry } from './symbol-picker-model.ts';
+export declare class SymbolPickerFeature {
+    private readonly language;
+    constructor(language: EditorLanguage);
+    open(): Promise<void>;
+    close(): void;
+    goTo(entry: SymbolEntry): void;
+    goToLine(line: number): void;
+    search(text: string, signal: AbortSignal): Promise<WorkspaceEntry[]>;
+    goToWorkspace(entry: WorkspaceEntry): void;
+}

package/dist/symbol-picker.js

@@ -0,0 +1,77 @@
+import i18next from 'i18next';
+import { StaleResultError } from '@adecore/lsp';
+import { basenameOf } from './paths.js';
+import { entriesOf, workspaceEntriesOf } from './symbol-picker-model.js';
+import { isShortcut } from './shortcut-keys.js';
+const TOAST_ID = 'language-symbols';
+/*
+ * Go to symbol: a picker over the symbols the language servers know in the file, filtered as it is typed.
+ * A `#` in front searches the whole project and a `:` in front goes to a line. The picker answers to
+ * its own input, so the editor only has to open it.
+ */
+export class SymbolPickerFeature {
+    language;
+    constructor(language) {
+        this.language = language;
+        const off = language.editor.onKeyDown((event) => {
+            if (!isShortcut(this.language.shortcuts.goToSymbol, event)) {
+                return false;
+            }
+            void this.open();
+            return true;
+        });
+        language.onDispose(() => {
+            off();
+            this.close();
+        });
+    }
+    async open() {
+        const { project, uri, popups } = this.language;
+        if (!project.service.supports('textDocument/documentSymbol', uri)) {
+            this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title: i18next.t('editor:language.symbols.unavailable') });
+            return;
+        }
+        try {
+            const entries = entriesOf(await project.service.documentSymbols(uri));
+            popups.setState({ symbols: { file: basenameOf(this.language.uri), entries } });
+        }
+        catch (error) {
+            if (!(error instanceof StaleResultError)) {
+                this.language.project.host.notify?.({
+                    id: TOAST_ID,
+                    kind: 'error',
+                    title: i18next.t('editor:language.symbols.failed', { message: error instanceof Error ? error.message : String(error) })
+                });
+            }
+        }
+    }
+    close() {
+        if (this.language.popups.getState().symbols !== null) {
+            this.language.popups.setState({ symbols: null });
+            this.language.editor.focus();
+        }
+    }
+    /* Puts the caret on a symbol of the file. */
+    goTo(entry) {
+        this.close();
+        this.language.jump({ line: entry.line, character: entry.character });
+    }
+    /* Puts the caret on a one-based line. */
+    goToLine(line) {
+        this.close();
+        this.language.jump({ line: line - 1, character: 0 });
+    }
+    /* The symbols of the project that answer to a name, which is a request to the server and so waits for a pause in the typing. */
+    async search(text, signal) {
+        const { project, uri } = this.language;
+        if (text === '' || !project.service.supports('workspace/symbol', uri)) {
+            return [];
+        }
+        return workspaceEntriesOf(await project.service.workspaceSymbols(uri, text, { signal }));
+    }
+    goToWorkspace(entry) {
+        this.close();
+        const location = { uri: entry.uri, range: { start: { line: entry.line, character: 0 }, end: { line: entry.line, character: 0 } } };
+        this.language.goTo(location);
+    }
+}

package/dist/symbols.d.ts

@@ -0,0 +1,11 @@
+import type { EditorBlock } from '@adecore/editor';
+import type { DocumentSymbolResult } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import { type Timers } from './timers.ts';
+export declare function blocksOf(result: DocumentSymbolResult): EditorBlock[];
+export declare class SymbolsFeature {
+    private readonly refresher;
+    private readonly listeners;
+    constructor(language: EditorLanguage, timers?: Timers);
+    onResult(listener: (result: DocumentSymbolResult) => void): () => void;
+}