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

package/dist/row-host.js

@@ -0,0 +1,120 @@
+/*
+ * The rows of one owner in an editor, and the elements the editor draws them in, so React can portal
+ * into them. The editor makes an element again whenever its row scrolls back into view, which is why a
+ * row's content never keeps state of its own.
+ */
+export class RowHost {
+    editor;
+    owner;
+    containers = new Map();
+    listeners = new Set();
+    version = 0;
+    signature = '';
+    constructor(editor, owner) {
+        this.editor = editor;
+        this.owner = owner;
+    }
+    getVersion = () => this.version;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    container(id) {
+        return this.containers.get(id);
+    }
+    /* Sets the owner's rows; the same rows again are left alone, so an editor does not measure them twice. */
+    set(rows) {
+        const signature = rows.map((row) => `${row.id}@${row.line}${row.placement}`).join('|');
+        if (signature === this.signature) {
+            return;
+        }
+        this.signature = signature;
+        const kept = new Set(rows.map((row) => row.id));
+        for (const id of [...this.containers.keys()]) {
+            if (!kept.has(id)) {
+                this.containers.delete(id);
+            }
+        }
+        this.editor.setWidgets(rows.map((row) => ({
+            id: row.id,
+            line: row.line,
+            placement: row.placement,
+            height: row.height,
+            render: (container) => this.mounted(row.id, container)
+        })), this.owner);
+        this.bump();
+    }
+    clear() {
+        this.set([]);
+    }
+    mounted(id, container) {
+        this.containers.set(id, container);
+        this.bump();
+    }
+    bump() {
+        this.version++;
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}
+/*
+ * The actions of one owner after the end of lines in an editor, and the elements the editor makes for
+ * them. An element lives as long as its action does, unlike a row's, so what React draws into it keeps
+ * its state.
+ */
+export class LineActionHost {
+    editor;
+    owner;
+    containers = new Map();
+    listeners = new Set();
+    version = 0;
+    signature = '';
+    constructor(editor, owner) {
+        this.editor = editor;
+        this.owner = owner;
+    }
+    getVersion = () => this.version;
+    subscribe = (listener) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+    container(id) {
+        return this.containers.get(id);
+    }
+    set(actions) {
+        const signature = actions.map((action) => `${action.id}@${action.line}`).join('|');
+        if (signature === this.signature) {
+            return;
+        }
+        this.signature = signature;
+        const kept = new Set(actions.map((action) => action.id));
+        for (const id of [...this.containers.keys()]) {
+            if (!kept.has(id)) {
+                this.containers.delete(id);
+            }
+        }
+        this.editor.setLineActions(actions.map((action) => ({
+            id: action.id,
+            line: action.line,
+            render: (container) => {
+                this.containers.set(action.id, container);
+                this.bump();
+            }
+        })), this.owner);
+        this.bump();
+    }
+    clear() {
+        this.set([]);
+    }
+    bump() {
+        this.version++;
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}

package/dist/selection-ranges.d.ts

@@ -0,0 +1,7 @@
+import type { EditorRange } from '@adecore/editor';
+import type { SelectionRange } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+export declare function selectionChainOf(selection: SelectionRange): EditorRange[];
+export declare class SelectionRangesFeature {
+    constructor(language: EditorLanguage);
+}

package/dist/selection-ranges.js

@@ -0,0 +1,26 @@
+const METHOD = 'textDocument/selectionRange';
+/* The links of one answer, the smallest range first. */
+export function selectionChainOf(selection) {
+    const chain = [];
+    for (let link = selection; link; link = link.parent) {
+        chain.push(link.range);
+    }
+    return chain;
+}
+/*
+ * Extend and Shrink Selection grow through the ranges the language server knows around the caret, which
+ * follow the syntax of the file. Where no server offers them the editor grows by its own rule.
+ */
+export class SelectionRangesFeature {
+    constructor(language) {
+        const { editor, project, uri } = language;
+        editor.setSelectionRanges(async (positions) => {
+            if (!project.service.supports(METHOD, uri)) {
+                return null;
+            }
+            const chains = await project.service.selectionRanges(uri, positions);
+            return chains === null || chains.length !== positions.length ? null : chains.map(selectionChainOf);
+        });
+        language.onDispose(() => editor.setSelectionRanges(null));
+    }
+}

package/dist/semantic-model.d.ts

@@ -0,0 +1,4 @@
+import type { EditorSemanticToken } from '@adecore/editor';
+import type { SemanticTokens, SemanticTokensLegend } from '@adecore/lsp';
+export declare function scopesOf(type: string, modifiers: ReadonlySet<string>, scoped?: boolean): string[] | null;
+export declare function decodeSemanticTokens(tokens: SemanticTokens, legend: SemanticTokensLegend): EditorSemanticToken[];

package/dist/semantic-model.js

@@ -0,0 +1,76 @@
+/*
+ * The TextMate scopes a classification stands for, so the editor's theme colors it the way its own
+ * grammar colors the same thing. Null where the grammar already did better: a keyword, a string, a
+ * local variable. A function being called, a method, a static member and a declaration are scopes of
+ * their own, as the platform's color scheme tells them apart. `scoped` says the server marks what is
+ * local to a function, so a variable it leaves unmarked lives at the top of a file or comes from a
+ * library, which the scheme draws as a global.
+ */
+export function scopesOf(type, modifiers, scoped = false) {
+    switch (type) {
+        case 'namespace':
+            return ['entity.name.namespace'];
+        case 'class':
+            return ['entity.name.type.class'];
+        case 'enum':
+            return ['entity.name.type.enum'];
+        case 'interface':
+            return ['entity.name.type.interface'];
+        case 'struct':
+            return ['entity.name.type.struct'];
+        case 'type':
+            return ['entity.name.type'];
+        case 'typeParameter':
+            return ['entity.name.type.parameter'];
+        case 'parameter':
+            return ['variable.parameter'];
+        case 'property':
+            return [modifiers.has('static') ? 'variable.other.property.static' : 'variable.other.property'];
+        case 'enumMember':
+            return ['variable.other.enummember'];
+        case 'function':
+        case 'method':
+            if (modifiers.has('static')) {
+                return ['entity.name.function.static'];
+            }
+            if (modifiers.has('declaration')) {
+                return ['entity.name.function'];
+            }
+            return [type === 'method' ? 'entity.name.function.method' : 'entity.name.function.call'];
+        case 'decorator':
+            return ['meta.decorator'];
+        case 'macro':
+            return ['entity.name.function.macro'];
+        case 'variable':
+            if (scoped) {
+                return modifiers.has('local') ? null : ['variable.other.constant'];
+            }
+            return modifiers.has('readonly') ? ['variable.other.constant'] : null;
+        default:
+            return null;
+    }
+}
+/* The encoded data of `textDocument/semanticTokens` as one token per classified range, the ones the theme has nothing to say about left out. */
+export function decodeSemanticTokens(tokens, legend) {
+    const result = [];
+    const { data } = tokens;
+    const scoped = legend.tokenModifiers.includes('local');
+    let line = 0;
+    let character = 0;
+    for (let at = 0; at + 4 < data.length; at += 5) {
+        const deltaLine = data[at];
+        line += deltaLine;
+        character = deltaLine === 0 ? character + data[at + 1] : data[at + 1];
+        const type = legend.tokenTypes[data[at + 3]];
+        if (type === undefined) {
+            continue;
+        }
+        const bits = data[at + 4];
+        const modifiers = new Set(legend.tokenModifiers.filter((_, index) => (bits & (1 << index)) !== 0));
+        const scopes = scopesOf(type, modifiers, scoped);
+        if (scopes !== null) {
+            result.push({ line, character, length: data[at + 2], scopes });
+        }
+    }
+    return result;
+}

package/dist/semantic-tokens.d.ts

@@ -0,0 +1,6 @@
+import type { EditorLanguage } from './editor-language.ts';
+import { type Timers } from './timers.ts';
+export declare class SemanticTokensFeature {
+    private readonly refresher;
+    constructor(language: EditorLanguage, timers?: Timers);
+}

package/dist/semantic-tokens.js

@@ -0,0 +1,40 @@
+import { Refresher } from './refresher.js';
+import { decodeSemanticTokens } from './semantic-model.js';
+import { realTimers } from './timers.js';
+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 {
+    refresher;
+    constructor(language, 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 = project.service.onProvidersChanged((changed) => {
+            if (changed === uri) {
+                this.refresher.now();
+            }
+        });
+        language.onDispose(() => {
+            edits();
+            providers.dispose();
+            this.refresher.dispose();
+            editor.setSemanticTokens(null);
+        });
+    }
+}

package/dist/shortcut-keys.d.ts

@@ -0,0 +1,91 @@
+import { type Keymap } from '@adecore/editor/keymap';
+import type { KeyChord } from '@adecore/editor';
+export interface LanguageShortcut extends KeyChord {
+    readonly apple: boolean;
+}
+export declare function shortcutsOf(keymap: Keymap, apple: boolean): {
+    rename: LanguageShortcut | null;
+    acceptGhostWord: LanguageShortcut | null;
+    addCaretAbove: LanguageShortcut | null;
+    addCaretBelow: LanguageShortcut | null;
+    addCaretPerSelectedLine: LanguageShortcut | null;
+    autoIndentLines: LanguageShortcut | null;
+    codeActions: LanguageShortcut | null;
+    collapse: LanguageShortcut | null;
+    collapseAll: LanguageShortcut | null;
+    collapseDocComments: LanguageShortcut | null;
+    collapseRecursively: LanguageShortcut | null;
+    deleteLine: LanguageShortcut | null;
+    deleteWordLeft: LanguageShortcut | null;
+    deleteWordRight: LanguageShortcut | null;
+    duplicateLine: LanguageShortcut | null;
+    expand: LanguageShortcut | null;
+    expandAll: LanguageShortcut | null;
+    expandAllToLevel1: LanguageShortcut | null;
+    expandAllToLevel2: LanguageShortcut | null;
+    expandAllToLevel3: LanguageShortcut | null;
+    expandAllToLevel4: LanguageShortcut | null;
+    expandAllToLevel5: LanguageShortcut | null;
+    expandDocComments: LanguageShortcut | null;
+    expandRecursively: LanguageShortcut | null;
+    expandSelection: LanguageShortcut | null;
+    findNext: LanguageShortcut | null;
+    findPrevious: LanguageShortcut | null;
+    foldSelection: LanguageShortcut | null;
+    formatDocument: LanguageShortcut | null;
+    goToDefinition: LanguageShortcut | null;
+    goToImplementation: LanguageShortcut | null;
+    goToSymbol: LanguageShortcut | null;
+    goToTypeDefinition: LanguageShortcut | null;
+    historyBack: LanguageShortcut | null;
+    historyForward: LanguageShortcut | null;
+    inlineEdit: LanguageShortcut | null;
+    joinLines: LanguageShortcut | null;
+    matchBrace: LanguageShortcut | null;
+    moveLineDown: LanguageShortcut | null;
+    moveLineUp: LanguageShortcut | null;
+    nextHighlight: LanguageShortcut | null;
+    nextProblem: LanguageShortcut | null;
+    organizeImports: LanguageShortcut | null;
+    parameterInfo: LanguageShortcut | null;
+    peekDefinition: LanguageShortcut | null;
+    peekReferences: LanguageShortcut | null;
+    previousHighlight: LanguageShortcut | null;
+    previousProblem: LanguageShortcut | null;
+    quickInfo: LanguageShortcut | null;
+    recentLocations: LanguageShortcut | null;
+    redo: LanguageShortcut | null;
+    refactorThis: LanguageShortcut | null;
+    renameSymbol: LanguageShortcut | null;
+    replace: LanguageShortcut | null;
+    save: LanguageShortcut | null;
+    selectAll: LanguageShortcut | null;
+    selectAllOccurrences: LanguageShortcut | null;
+    selectNextOccurrence: LanguageShortcut | null;
+    selectSmartEnd: LanguageShortcut | null;
+    selectSmartHome: LanguageShortcut | null;
+    selectTextEnd: LanguageShortcut | null;
+    selectTextStart: LanguageShortcut | null;
+    selectWordLeft: LanguageShortcut | null;
+    selectWordRight: LanguageShortcut | null;
+    selectionToChat: LanguageShortcut | null;
+    shrinkSelection: LanguageShortcut | null;
+    smartEnd: LanguageShortcut | null;
+    smartHome: LanguageShortcut | null;
+    splitLine: LanguageShortcut | null;
+    startNewLine: LanguageShortcut | null;
+    startNewLineBefore: LanguageShortcut | null;
+    suggestInline: LanguageShortcut | null;
+    textEnd: LanguageShortcut | null;
+    textStart: LanguageShortcut | null;
+    toggleBlockComment: LanguageShortcut | null;
+    toggleCase: LanguageShortcut | null;
+    toggleColumnMode: LanguageShortcut | null;
+    toggleLineComment: LanguageShortcut | null;
+    triggerCompletion: LanguageShortcut | null;
+    undo: LanguageShortcut | null;
+    unselectOccurrence: LanguageShortcut | null;
+    wordLeft: LanguageShortcut | null;
+    wordRight: LanguageShortcut | null;
+};
+export declare function isShortcut(target: LanguageShortcut | null, event: KeyboardEvent): boolean;

package/dist/shortcut-keys.js

@@ -0,0 +1,12 @@
+import { chordOf, KEYMAP_IDS, parseChord } from '@adecore/editor/keymap';
+import { matchesShortcut } from '@adecore/ui';
+export function shortcutsOf(keymap, apple) {
+    const shortcuts = Object.fromEntries(KEYMAP_IDS.map((id) => {
+        const text = chordOf(id, apple, keymap);
+        return [id, text === null ? null : { ...parseChord(text), apple }];
+    }));
+    return { ...shortcuts, rename: shortcuts.renameSymbol };
+}
+export function isShortcut(target, event) {
+    return target !== null && matchesShortcut(target, event, target.apple);
+}

package/dist/signature-model.d.ts

@@ -0,0 +1,18 @@
+import type { SignatureHelp, SignatureInformation } from '@adecore/lsp';
+export interface SignatureViewModel {
+    readonly label: string;
+    readonly active: {
+        readonly start: number;
+        readonly end: number;
+    } | null;
+    readonly parameterName: string;
+    readonly parameterDocumentation: string;
+    readonly documentation: string;
+    readonly index: number;
+    readonly count: number;
+}
+export declare function parameterSpan(signature: SignatureInformation, index: number): {
+    start: number;
+    end: number;
+} | null;
+export declare function signatureViewOf(help: SignatureHelp | null): SignatureViewModel | null;

package/dist/signature-model.js

@@ -0,0 +1,33 @@
+import { documentationText } from './completion-model.js';
+/* 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, index) {
+    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) {
+    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/dist/signature.d.ts

@@ -0,0 +1,22 @@
+import type { EditorLanguage } from './editor-language.ts';
+import { type Timers } from './timers.ts';
+export declare class SignatureFeature {
+    private readonly language;
+    private readonly timers;
+    private timer;
+    private request;
+    private controller;
+    private help;
+    private anchor;
+    constructor(language: EditorLanguage, timers?: Timers);
+    get isOpen(): boolean;
+    invoke(): void;
+    trigger(): void;
+    private cycle;
+    close(): void;
+    private options;
+    private edited;
+    private retrigger;
+    private ask;
+    private fetch;
+}

package/dist/signature.js

@@ -0,0 +1,150 @@
+import { signatureViewOf } from './signature-model.js';
+import { isShortcut } from './shortcut-keys.js';
+import { realTimers } from './timers.js';
+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 {
+    language;
+    timers;
+    timer;
+    request = 0;
+    controller = null;
+    help = null;
+    anchor = null;
+    constructor(language, 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() {
+        return this.language.popups.getState().signature !== null;
+    }
+    /* Asks for the parameters of the call at the caret, as its key does. */
+    invoke() {
+        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() {
+        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. */
+    cycle(step) {
+        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() {
+        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 });
+        }
+    }
+    options() {
+        const { project, uri } = this.language;
+        const options = project.service.providerOptions(METHOD, uri);
+        return options === undefined ? null : { triggers: options.triggerCharacters ?? [], retriggers: options.retriggerCharacters ?? [] };
+    }
+    edited(change) {
+        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
+            });
+        }
+    }
+    retrigger() {
+        if (this.isOpen) {
+            this.ask({ triggerKind: 3, isRetrigger: true });
+        }
+    }
+    ask(context) {
+        const { project, uri } = this.language;
+        if (!project.service.supports(METHOD, uri)) {
+            return;
+        }
+        this.timers.clear(this.timer);
+        const request = ++this.request;
+        const full = { ...context, ...(this.help === null ? {} : { activeSignatureHelp: this.help }) };
+        this.timer = this.timers.set(() => void this.fetch(full, request), PAUSE_MS);
+    }
+    async fetch(context, request) {
+        const { editor, project, uri } = this.language;
+        const caret = editor.getCaret();
+        this.controller?.abort();
+        const controller = new AbortController();
+        this.controller = controller;
+        let help;
+        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/dist/snippet-session.d.ts

@@ -0,0 +1,17 @@
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { SnippetStop } from './snippet.ts';
+export declare function positionInInsertion(start: EditorPosition, text: string, offset: number): EditorPosition;
+export declare class SnippetFeature {
+    private readonly language;
+    private stops;
+    private current;
+    constructor(language: EditorLanguage);
+    get isActive(): boolean;
+    begin(start: EditorPosition, text: string, stops: readonly SnippetStop[]): void;
+    end(): void;
+    private visit;
+    private key;
+    private edited;
+    private moved;
+}