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

package/dist/rename.js

@@ -0,0 +1,257 @@
+import { StaleResultError } from '@adecore/lsp';
+import { occurrencesOf, renamePreviewOf, renameTargetOf, wordRangeAt } from './rename-model.js';
+import { isShortcut } from './shortcut-keys.js';
+const METHOD = 'textDocument/rename';
+const TOAST_ID = 'language-rename';
+/* How many names are offered, and how many other lines and files are read to say how the symbol is used. */
+const SAMPLE_LOCATIONS = 8;
+const SAMPLE_OTHER_FILES = 3;
+const CONTEXT_LINES = 3;
+/*
+ * Renaming a symbol. The input sits on the symbol itself, every place the name has lights up while the
+ * new one is typed, Enter applies the server's edit at once and Shift+Enter lists what it would change first.
+ * Edits to other files land as unsaved drafts (`applyWorkspaceEdit`), so nothing is written to disk here.
+ */
+export class RenameFeature {
+    tell(kind, title) {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind, title });
+    }
+    language;
+    session = null;
+    constructor(language) {
+        this.language = language;
+        const { editor } = language;
+        const offs = [
+            editor.onKeyDown((event) => {
+                if (!isShortcut(this.language.shortcuts.rename, event)) {
+                    return false;
+                }
+                void this.start();
+                return true;
+            }),
+            editor.onTextChange(() => this.cancel())
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.cancel();
+        });
+    }
+    get isOpen() {
+        return this.session !== null;
+    }
+    async start() {
+        const { editor, project, uri } = this.language;
+        if (!project.service.supports(METHOD, uri)) {
+            this.tell('error', this.say('unavailable'));
+            return;
+        }
+        this.cancel();
+        const caret = editor.getCaret();
+        const prepare = project.service.providerOptions(METHOD, uri)?.prepareProvider === true;
+        let answer;
+        try {
+            answer = prepare ? await project.service.prepareRename(uri, caret) : { defaultBehavior: true };
+        }
+        catch (error) {
+            if (!(error instanceof StaleResultError)) {
+                this.tell('error', this.say('nothing'));
+            }
+            return;
+        }
+        const target = renameTargetOf(answer, (range) => editor.textInRange(range), () => wordRangeAt(editor.textInRange({ start: { line: caret.line, character: 0 }, end: { line: caret.line, character: Number.MAX_SAFE_INTEGER } }), caret));
+        if (target === null) {
+            this.tell('error', this.say('nothing'));
+            return;
+        }
+        const session = { target, original: editor.textInRange(target.range), edit: null, names: new AbortController() };
+        this.session = session;
+        this.publish({ phase: 'input', busy: false, name: target.placeholder, files: [], occurrences: null, suggestions: [] });
+        void this.light(session).then((locations) => this.suggest(session, locations));
+    }
+    /* The name was typed: Enter applies it, Shift+Enter lists what it would change first. */
+    async submit(name, preview) {
+        const session = this.session;
+        const next = name.trim();
+        if (session === null) {
+            return;
+        }
+        if (next === '' || next === session.original) {
+            this.finish();
+            return;
+        }
+        this.publish({ phase: 'input', busy: true, name: next, error: null });
+        const { project, uri } = this.language;
+        try {
+            const edit = await project.service.rename(uri, session.target.range.start, next);
+            if (this.session !== session) {
+                return;
+            }
+            if (edit === null) {
+                this.fail(this.say('refused'));
+                return;
+            }
+            session.edit = edit;
+            if (!preview) {
+                await this.apply(session);
+                return;
+            }
+            const files = await renamePreviewOf(edit, (target) => project.readText(target));
+            if (this.session !== session) {
+                return;
+            }
+            if (files === null) {
+                // An edit that renames files too has no list of lines to show, so it is applied or refused as a whole.
+                await this.apply(session);
+                return;
+            }
+            this.publish({ phase: 'preview', busy: false, name: next, files });
+        }
+        catch (error) {
+            if (this.session === session) {
+                this.fail(error instanceof StaleResultError ? this.say('stale') : error instanceof Error ? error.message : String(error));
+            }
+        }
+    }
+    /* Applies the edit the preview showed. */
+    async confirm() {
+        const session = this.session;
+        if (session?.edit) {
+            await this.apply(session);
+        }
+    }
+    cancel() {
+        if (this.session === null) {
+            return;
+        }
+        this.finish();
+    }
+    async apply(session) {
+        const result = await this.language.project.applyWorkspaceEdit(session.edit);
+        if (this.session !== session) {
+            return;
+        }
+        if (result.applied) {
+            this.finish();
+        }
+        else {
+            this.fail(result.failureReason ?? this.say('refused'));
+        }
+    }
+    /* The input stays, with the reason under it, so the name can be changed and tried again. */
+    fail(message) {
+        if (this.session !== null) {
+            this.session.edit = null;
+            this.publish({ phase: 'input', busy: false, files: [], error: this.say('failed', { message }) });
+        }
+    }
+    /* The name was changed, which answers the failure under it. */
+    edited() {
+        if (this.language.popups.getState().rename?.error != null) {
+            this.publish({ error: null });
+        }
+    }
+    finish() {
+        this.session?.names.abort();
+        this.session = null;
+        const { editor, popups } = this.language;
+        popups.setState({ rename: null });
+        editor.setHighlights([]);
+        editor.focus();
+    }
+    /* Lights up the places the name has in this file, and counts them all; what the servers listed, or null when they did not. */
+    async light(session) {
+        const { editor, project, uri } = this.language;
+        if (!project.service.supports('textDocument/references', uri)) {
+            return null;
+        }
+        try {
+            const locations = await project.service.references(uri, session.target.range.start, true);
+            if (this.session !== session || locations === null) {
+                return null;
+            }
+            const found = occurrencesOf(locations, uri);
+            editor.setHighlights(found.inFile.map((range) => ({ range, kind: 'write' })));
+            this.publish({ occurrences: { count: found.count, files: found.files } });
+            return locations;
+        }
+        catch {
+            // The count is a courtesy; renaming does not wait for it.
+            return null;
+        }
+    }
+    /*
+     * Names from the host suggestion provider, using the lines around the symbol and a sample of the lines that
+     * use it. They only appear under the input: the name that is typed stays the one that is applied.
+     */
+    async suggest(session, locations) {
+        const suggestNames = this.language.project.host.suggestNames;
+        if (suggestNames === undefined || this.session !== session) {
+            return;
+        }
+        const { editor, languageId, uri } = this.language;
+        try {
+            const line = session.target.range.start.line;
+            const context = editor.textInRange({
+                start: { line: Math.max(0, line - CONTEXT_LINES), character: 0 },
+                end: { line: line + CONTEXT_LINES, character: Number.MAX_SAFE_INTEGER }
+            });
+            const uses = await this.linesOf(locations ?? []);
+            const names = await suggestNames({ uri, languageId, name: session.original, context, uses }, session.names.signal);
+            if (this.session === session && names.length > 0) {
+                this.publish({ suggestions: names });
+            }
+        }
+        catch {
+            // Suggestions do not prevent a manual rename.
+        }
+    }
+    /* The text of the first lines that name the symbol, in the order the servers listed them, reading at most a few other files. */
+    async linesOf(locations) {
+        const { project } = this.language;
+        const texts = new Map();
+        const lines = [];
+        let others = 0;
+        for (const location of locations.slice(0, SAMPLE_LOCATIONS)) {
+            if (!texts.has(location.uri)) {
+                if (location.uri !== this.language.uri && others++ >= SAMPLE_OTHER_FILES) {
+                    continue;
+                }
+                texts.set(location.uri, (await project.readText(location.uri))?.split('\n') ?? null);
+            }
+            const text = texts.get(location.uri)?.[location.range.start.line];
+            if (text !== undefined && text.trim() !== '' && !lines.includes(text)) {
+                lines.push(text);
+            }
+        }
+        return lines;
+    }
+    publish(patch) {
+        const session = this.session;
+        if (session === null) {
+            return;
+        }
+        const { popups } = this.language;
+        const current = popups.getState().rename;
+        popups.setState({
+            rename: {
+                phase: 'input',
+                range: session.target.range,
+                original: session.original,
+                placeholder: session.target.placeholder,
+                occurrences: null,
+                busy: false,
+                error: null,
+                name: session.target.placeholder,
+                files: [],
+                suggestions: [],
+                ...current,
+                ...patch
+            }
+        });
+    }
+    say(key, options) {
+        return this.language.project.i18n.t(`editor:language.rename.${key}`, options);
+    }
+}

package/dist/rendering-context.d.ts

@@ -0,0 +1,6 @@
+export interface EditorRendering {
+    readonly theme: string;
+    highlight?(code: string, language: string, theme: string): Promise<string>;
+}
+export declare const RenderingContext: import("react").Context<EditorRendering>;
+export declare function useEditorRendering(): EditorRendering;

package/dist/rendering-context.js

@@ -0,0 +1,5 @@
+import { createContext, useContext } from 'react';
+export const RenderingContext = createContext({ theme: 'light' });
+export function useEditorRendering() {
+    return useContext(RenderingContext);
+}

package/dist/rendering.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { type EditorRendering } from './rendering-context.ts';
+export declare function EditorRenderingProvider({ value, children }: {
+    value: EditorRendering;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/rendering.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RenderingContext } from './rendering-context.js';
+export function EditorRenderingProvider({ value, children }) {
+    return _jsx(RenderingContext, { value: value, children: children });
+}

package/dist/review-group.d.ts

@@ -0,0 +1,16 @@
+export interface ReviewMember {
+    hide(runIds: readonly string[]): void;
+    show(runIds: readonly string[]): void;
+    refresh(): void;
+}
+export declare class ReviewGroup {
+    private readonly members;
+    join(member: ReviewMember): () => void;
+    hide(runIds: readonly string[]): void;
+    show(runIds: readonly string[]): void;
+    refresh(): void;
+}
+export declare function joinReviewGroup(key: string): {
+    group: ReviewGroup;
+    leave(): void;
+};

package/dist/review-group.js

@@ -0,0 +1,54 @@
+/*
+ * The editors of one file in this window. An answer in one of them is an answer for all: the rows of
+ * the others go with it at once and every one of them reads the runs again, so no editor keeps a
+ * change in front of a person that the other already took.
+ */
+export class ReviewGroup {
+    members = new Set();
+    join(member) {
+        this.members.add(member);
+        return () => {
+            this.members.delete(member);
+        };
+    }
+    hide(runIds) {
+        for (const member of [...this.members]) {
+            member.hide(runIds);
+        }
+    }
+    show(runIds) {
+        for (const member of [...this.members]) {
+            member.show(runIds);
+        }
+    }
+    refresh() {
+        for (const member of [...this.members]) {
+            member.refresh();
+        }
+    }
+}
+const groups = new Map();
+/* The host supplies a shared file key; the group is released with its last editor. */
+export function joinReviewGroup(key) {
+    let entry = groups.get(key);
+    if (entry === undefined) {
+        entry = { group: new ReviewGroup(), holders: 0 };
+        groups.set(key, entry);
+    }
+    entry.holders++;
+    const held = entry;
+    let left = false;
+    return {
+        group: held.group,
+        leave: () => {
+            if (left) {
+                return;
+            }
+            left = true;
+            held.holders--;
+            if (held.holders === 0 && groups.get(key) === held) {
+                groups.delete(key);
+            }
+        }
+    };
+}

package/dist/row-host.d.ts

@@ -0,0 +1,42 @@
+import type { Editor } from '@adecore/editor';
+export interface HostedRow {
+    id: string;
+    line: number;
+    placement: 'above' | 'below';
+    height: number;
+}
+export declare class RowHost {
+    private readonly editor;
+    private readonly owner;
+    private readonly containers;
+    private readonly listeners;
+    private version;
+    private signature;
+    constructor(editor: Editor, owner: string);
+    getVersion: () => number;
+    subscribe: (listener: () => void) => (() => void);
+    container(id: string): HTMLElement | undefined;
+    set(rows: readonly HostedRow[]): void;
+    clear(): void;
+    private mounted;
+    private bump;
+}
+export interface HostedAction {
+    id: string;
+    line: number;
+}
+export declare class LineActionHost {
+    private readonly editor;
+    private readonly owner;
+    private readonly containers;
+    private readonly listeners;
+    private version;
+    private signature;
+    constructor(editor: Editor, owner: string);
+    getVersion: () => number;
+    subscribe: (listener: () => void) => (() => void);
+    container(id: string): HTMLElement | undefined;
+    set(actions: readonly HostedAction[]): void;
+    clear(): void;
+    private bump;
+}

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,38 @@
+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 = language.onProvidersChanged(() => {
+            this.refresher.now();
+        });
+        language.onDispose(() => {
+            edits();
+            providers();
+            this.refresher.dispose();
+            editor.setSemanticTokens(null);
+        });
+    }
+}