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

package/src/rename.ts

@@ -0,0 +1,291 @@
+import i18next from 'i18next';
+import { StaleResultError, type Location, type PrepareRenameResult, type WorkspaceEdit } from '@adecore/lsp';
+import type { EditorRange } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { RenameView } from './popups.ts';
+import { occurrencesOf, renamePreviewOf, renameTargetOf, wordRangeAt, type RenameTarget } from './rename-model.ts';
+import { isShortcut } from './shortcut-keys.ts';
+
+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;
+
+function say(key: string, options?: Record<string, unknown>): string {
+    return i18next.t(`editor:language.rename.${key}`, options);
+}
+
+interface Session {
+    readonly target: RenameTarget;
+    readonly original: string;
+    /* Set once the preview asked for the edit, so Enter applies exactly what was shown. */
+    edit: WorkspaceEdit | null;
+    /* The request for names, which ends with the rename. */
+    readonly names: AbortController;
+}
+
+/*
+ * 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 {
+    private tell(kind: 'success' | 'error', title: string): void {
+        this.language.project.host.notify?.({ id: TOAST_ID, kind, title });
+    }
+
+    private readonly language: EditorLanguage;
+    private session: Session | null = null;
+
+    constructor(language: EditorLanguage) {
+        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(): boolean {
+        return this.session !== null;
+    }
+
+    async start(): Promise<void> {
+        const { editor, project, uri } = this.language;
+        if (!project.service.supports(METHOD, uri)) {
+            this.tell('error', say('unavailable'));
+            return;
+        }
+        this.cancel();
+        const caret = editor.getCaret();
+        const prepare = project.service.providerOptions(METHOD, uri)?.prepareProvider === true;
+        let answer: PrepareRenameResult;
+        try {
+            answer = prepare ? await project.service.prepareRename(uri, caret) : { defaultBehavior: true };
+        } catch (error) {
+            if (!(error instanceof StaleResultError)) {
+                this.tell('error', 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', say('nothing'));
+            return;
+        }
+        const session: 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: string, preview: boolean): Promise<void> {
+        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(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 ? say('stale') : error instanceof Error ? error.message : String(error));
+            }
+        }
+    }
+
+    /* Applies the edit the preview showed. */
+    async confirm(): Promise<void> {
+        const session = this.session;
+        if (session?.edit) {
+            await this.apply(session);
+        }
+    }
+
+    cancel(): void {
+        if (this.session === null) {
+            return;
+        }
+        this.finish();
+    }
+
+    private async apply(session: Session): Promise<void> {
+        const result = await this.language.project.applyWorkspaceEdit(session.edit!);
+        if (this.session !== session) {
+            return;
+        }
+        if (result.applied) {
+            this.finish();
+        } else {
+            this.fail(result.failureReason ?? say('refused'));
+        }
+    }
+
+    /* The input stays, with the reason under it, so the name can be changed and tried again. */
+    private fail(message: string): void {
+        if (this.session !== null) {
+            this.session.edit = null;
+            this.publish({ phase: 'input', busy: false, files: [], error: say('failed', { message }) });
+        }
+    }
+
+    /* The name was changed, which answers the failure under it. */
+    edited(): void {
+        if (this.language.popups.getState().rename?.error != null) {
+            this.publish({ error: null });
+        }
+    }
+
+    private finish(): void {
+        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. */
+    private async light(session: Session): Promise<readonly Location[] | null> {
+        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: EditorRange) => ({ range, kind: 'write' as const })));
+            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.
+     */
+    private async suggest(session: Session, locations: readonly Location[] | null): Promise<void> {
+        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. */
+    private async linesOf(locations: readonly Location[]): Promise<string[]> {
+        const { project } = this.language;
+        const texts = new Map<string, string[] | null>();
+        const lines: string[] = [];
+        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;
+    }
+
+    private publish(patch: Partial<RenameView>): void {
+        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
+            }
+        });
+    }
+}

package/src/rendering-context.ts

@@ -0,0 +1,12 @@
+import { createContext, useContext } from 'react';
+
+export interface EditorRendering {
+    readonly theme: string;
+    highlight?(code: string, language: string, theme: string): Promise<string>;
+}
+
+export const RenderingContext = createContext<EditorRendering>({ theme: 'light' });
+
+export function useEditorRendering(): EditorRendering {
+    return useContext(RenderingContext);
+}

package/src/rendering.tsx

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+import { RenderingContext, type EditorRendering } from './rendering-context.ts';
+
+export function EditorRenderingProvider({ value, children }: { value: EditorRendering; children: ReactNode }) {
+    return <RenderingContext value={value}>{children}</RenderingContext>;
+}

package/src/review-group.ts

@@ -0,0 +1,70 @@
+/* What the review of one editor does for the other editors that show the same file. */
+export interface ReviewMember {
+    /* Optimistically hides runs until the host answers. */
+    hide(runIds: readonly string[]): void;
+    /* Restores runs after a refused operation. */
+    show(runIds: readonly string[]): void;
+    /* Refreshes runs after an operation. */
+    refresh(): void;
+}
+
+/*
+ * 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 {
+    private readonly members = new Set<ReviewMember>();
+
+    join(member: ReviewMember): () => void {
+        this.members.add(member);
+        return () => {
+            this.members.delete(member);
+        };
+    }
+
+    hide(runIds: readonly string[]): void {
+        for (const member of [...this.members]) {
+            member.hide(runIds);
+        }
+    }
+
+    show(runIds: readonly string[]): void {
+        for (const member of [...this.members]) {
+            member.show(runIds);
+        }
+    }
+
+    refresh(): void {
+        for (const member of [...this.members]) {
+            member.refresh();
+        }
+    }
+}
+
+const groups = new Map<string, { group: ReviewGroup; holders: number }>();
+
+/* The host supplies a shared file key; the group is released with its last editor. */
+export function joinReviewGroup(key: string): { group: ReviewGroup; leave(): void } {
+    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/src/row-host.ts

@@ -0,0 +1,158 @@
+import type { Editor } from '@adecore/editor';
+
+export interface HostedRow {
+    id: string;
+    /* Zero-based. */
+    line: number;
+    placement: 'above' | 'below';
+    height: number;
+}
+
+/*
+ * 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 {
+    private readonly editor: Editor;
+    private readonly owner: string;
+    private readonly containers = new Map<string, HTMLElement>();
+    private readonly listeners = new Set<() => void>();
+    private version = 0;
+    private signature = '';
+
+    constructor(editor: Editor, owner: string) {
+        this.editor = editor;
+        this.owner = owner;
+    }
+
+    getVersion = (): number => this.version;
+
+    subscribe = (listener: () => void): (() => void) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+
+    container(id: string): HTMLElement | undefined {
+        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: readonly HostedRow[]): void {
+        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: HTMLElement) => this.mounted(row.id, container)
+            })),
+            this.owner
+        );
+        this.bump();
+    }
+
+    clear(): void {
+        this.set([]);
+    }
+
+    private mounted(id: string, container: HTMLElement): void {
+        this.containers.set(id, container);
+        this.bump();
+    }
+
+    private bump(): void {
+        this.version++;
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}
+
+export interface HostedAction {
+    id: string;
+    /* Zero-based. */
+    line: number;
+}
+
+/*
+ * 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 {
+    private readonly editor: Editor;
+    private readonly owner: string;
+    private readonly containers = new Map<string, HTMLElement>();
+    private readonly listeners = new Set<() => void>();
+    private version = 0;
+    private signature = '';
+
+    constructor(editor: Editor, owner: string) {
+        this.editor = editor;
+        this.owner = owner;
+    }
+
+    getVersion = (): number => this.version;
+
+    subscribe = (listener: () => void): (() => void) => {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    };
+
+    container(id: string): HTMLElement | undefined {
+        return this.containers.get(id);
+    }
+
+    set(actions: readonly HostedAction[]): void {
+        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: HTMLElement) => {
+                    this.containers.set(action.id, container);
+                    this.bump();
+                }
+            })),
+            this.owner
+        );
+        this.bump();
+    }
+
+    clear(): void {
+        this.set([]);
+    }
+
+    private bump(): void {
+        this.version++;
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}

package/src/selection-ranges.ts

@@ -0,0 +1,32 @@
+import type { EditorRange } from '@adecore/editor';
+import type { SelectionRange } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+
+const METHOD = 'textDocument/selectionRange';
+
+/* The links of one answer, the smallest range first. */
+export function selectionChainOf(selection: SelectionRange): EditorRange[] {
+    const chain: EditorRange[] = [];
+    for (let link: SelectionRange | undefined = 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: EditorLanguage) {
+        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/src/semantic-model.ts

@@ -0,0 +1,80 @@
+import type { EditorSemanticToken } from '@adecore/editor';
+import type { SemanticTokens, SemanticTokensLegend } from '@adecore/lsp';
+
+/*
+ * 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: string, modifiers: ReadonlySet<string>, scoped = false): string[] | null {
+    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: SemanticTokens, legend: SemanticTokensLegend): EditorSemanticToken[] {
+    const result: EditorSemanticToken[] = [];
+    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;
+}