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

package/src/pick.ts

@@ -0,0 +1,197 @@
+import type { EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import type { PickGroup, PickPreview } from './popups.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const PREVIEW_DELAY_MS = 120;
+
+export interface PickSpec {
+    readonly anchor: EditorPosition;
+    readonly title?: string;
+    readonly groups: readonly PickGroup[];
+    /* The row the list opens on; the first one without it. */
+    readonly active?: string;
+    accept(id: string): void;
+    /*
+     * Asked before the list closes on a row. A reason it cannot be taken keeps the list open with the reason
+     * under it, the way a rename keeps its input; null lets the list close and `accept` run.
+     */
+    attempt?(id: string): Promise<string | null>;
+    /* What the active row would change, asked a moment after it became active. */
+    preview?(id: string, signal: AbortSignal): Promise<PickPreview | null>;
+}
+
+/*
+ * The one list an editor has open under a character, for code actions, the places a name is defined and
+ * the like. The editor keeps the focus: arrows move through the rows, Enter takes the active one and
+ * Escape, typing, a click elsewhere or a change of the text close it.
+ */
+export class PickFeature {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private spec: PickSpec | null = null;
+    private ids: readonly string[] = [];
+    private active = '';
+    private previewTimer: unknown;
+    private controller: AbortController | null = null;
+    /* The rows that said why they cannot be taken, by id. */
+    private refusals = new Map<string, string>();
+    private attempting = false;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.timers = timers;
+        const { editor } = language;
+        const offs = [
+            editor.onKeyDown((event) => this.key(event)),
+            editor.onTextChange(() => this.close()),
+            editor.onCaret(() => this.close()),
+            editor.onBlur(() => this.close())
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.close();
+        });
+    }
+
+    get isOpen(): boolean {
+        return this.spec !== null;
+    }
+
+    open(spec: PickSpec): void {
+        this.close();
+        const ids = spec.groups.flatMap((group) => group.rows.map((row) => row.id));
+        if (ids.length === 0) {
+            return;
+        }
+        this.spec = spec;
+        this.refusals = new Map();
+        this.ids = ids;
+        this.active = spec.active !== undefined && ids.includes(spec.active) ? spec.active : ids[0]!;
+        this.publish(null);
+        this.schedulePreview();
+    }
+
+    close(): void {
+        if (this.spec === null) {
+            return;
+        }
+        this.spec = null;
+        this.timers.clear(this.previewTimer);
+        this.controller?.abort();
+        this.controller = null;
+        this.language.popups.setState({ pick: null });
+    }
+
+    move(delta: number): void {
+        const index = this.ids.indexOf(this.active);
+        this.activate(this.ids[Math.max(0, Math.min(this.ids.length - 1, index + delta))]!);
+    }
+
+    /* Takes a row, by a click or Enter. */
+    choose(id: string): void {
+        const spec = this.spec;
+        if (spec === null || !this.ids.includes(id) || this.attempting) {
+            return;
+        }
+        if (spec.attempt === undefined) {
+            this.close();
+            spec.accept(id);
+            return;
+        }
+        this.attempting = true;
+        void spec
+            .attempt(id)
+            .catch(() => null)
+            .then((reason) => {
+                this.attempting = false;
+                if (this.spec !== spec) {
+                    return;
+                }
+                if (reason === null) {
+                    this.close();
+                    spec.accept(id);
+                    return;
+                }
+                this.refusals.set(id, reason);
+                this.publish(null);
+            });
+    }
+
+    private activate(id: string): void {
+        if (id === this.active) {
+            return;
+        }
+        this.active = id;
+        this.controller?.abort();
+        this.publish(null);
+        this.schedulePreview();
+    }
+
+    private key(event: KeyboardEvent): boolean {
+        if (this.spec === null || event.metaKey || event.ctrlKey || event.altKey) {
+            return false;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                this.move(1);
+                return true;
+            case 'ArrowUp':
+                this.move(-1);
+                return true;
+            case 'PageDown':
+                this.move(8);
+                return true;
+            case 'PageUp':
+                this.move(-8);
+                return true;
+            case 'Home':
+                this.activate(this.ids[0]!);
+                return true;
+            case 'End':
+                this.activate(this.ids[this.ids.length - 1]!);
+                return true;
+            case 'Enter':
+            case 'Tab':
+                this.choose(this.active);
+                return true;
+            case 'Escape':
+                this.close();
+                return true;
+            default:
+                return false;
+        }
+    }
+
+    private schedulePreview(): void {
+        const spec = this.spec;
+        this.timers.clear(this.previewTimer);
+        if (spec?.preview === undefined) {
+            return;
+        }
+        const id = this.active;
+        this.previewTimer = this.timers.set(() => {
+            const controller = new AbortController();
+            this.controller = controller;
+            spec.preview!(id, controller.signal)
+                .then((preview) => {
+                    if (this.spec === spec && this.active === id && !controller.signal.aborted) {
+                        this.publish(preview);
+                    }
+                })
+                .catch(() => undefined);
+        }, PREVIEW_DELAY_MS);
+    }
+
+    private publish(preview: PickPreview | null): void {
+        const spec = this.spec;
+        if (spec === null) {
+            return;
+        }
+        const refusal = this.refusals.get(this.active);
+        const shown = refusal === undefined ? preview : { removed: [], added: [], note: null, refusal };
+        this.language.popups.setState({ pick: { anchor: spec.anchor, groups: spec.groups, active: this.active, preview: shown, title: spec.title ?? null } });
+    }
+}

package/src/popup-placement.ts

@@ -0,0 +1,64 @@
+import type { EditorRect } from '@adecore/editor';
+
+export interface PopupSize {
+    readonly width: number;
+    readonly height: number;
+}
+
+export interface PopupPlacement {
+    readonly left: number;
+    readonly top: number;
+    /* What is left of the window on the chosen side, for a popup that scrolls inside it. */
+    readonly maxHeight: number;
+    readonly side: 'above' | 'below';
+}
+
+export interface PlaceOptions {
+    /* The space between the popup and the character it belongs to. */
+    gap?: number;
+    /* The space kept to the window's edge. */
+    margin?: number;
+    prefer?: 'above' | 'below';
+}
+
+/*
+ * Where a popup goes next to a character: under it when it fits there, over it when it does not and
+ * there is room, and otherwise on the side with more room, shortened to fit. Aligned with the
+ * character's left edge, and pushed back in when that would leave the window. The anchor and the window
+ * are the page's own pixels, so a canvas's scale never enters.
+ */
+export function placePopup(anchor: EditorRect, size: PopupSize, window: PopupSize, options: PlaceOptions = {}): PopupPlacement {
+    const gap = options.gap ?? 4;
+    const margin = options.margin ?? 8;
+    const roomBelow = window.height - margin - (anchor.bottom + gap);
+    const roomAbove = anchor.top - gap - margin;
+    const fitsBelow = size.height <= roomBelow;
+    const fitsAbove = size.height <= roomAbove;
+    const below = options.prefer === 'above' ? !fitsAbove && (fitsBelow || roomBelow >= roomAbove) : fitsBelow || (!fitsAbove && roomBelow >= roomAbove);
+    const maxHeight = Math.max(0, below ? roomBelow : roomAbove);
+    const height = Math.min(size.height, maxHeight);
+    const left = Math.max(margin, Math.min(anchor.left, window.width - size.width - margin));
+    return { left, top: below ? anchor.bottom + gap : anchor.top - gap - height, maxHeight, side: below ? 'below' : 'above' };
+}
+
+/*
+ * A second box beside a first, such as the documentation of the highlighted suggestion: to the right
+ * of it when it fits, to the left when only that fits, and under it, at its left edge, when neither does.
+ */
+export function placeBeside(
+    first: { left: number; top: number; width: number; height: number },
+    size: PopupSize,
+    window: PopupSize,
+    margin = 8,
+    gap = 4
+): PopupPlacement {
+    const fitsRight = first.left + first.width + gap + size.width <= window.width - margin;
+    const fitsLeft = first.left - gap - size.width >= margin;
+    if (fitsRight || fitsLeft) {
+        const top = Math.max(margin, Math.min(first.top, window.height - size.height - margin));
+        return { left: fitsRight ? first.left + first.width + gap : first.left - gap - size.width, top, maxHeight: window.height - margin * 2, side: 'below' };
+    }
+    const top = first.top + first.height + gap;
+    const maxHeight = Math.max(0, window.height - margin - top);
+    return { left: Math.max(margin, Math.min(first.left, window.width - size.width - margin)), top, maxHeight, side: 'below' };
+}

package/src/popups.ts

@@ -0,0 +1,204 @@
+import { createStore, type StoreApi } from 'zustand';
+import type { EditorPosition, EditorRange, EditorRect } from '@adecore/editor';
+import type { Location } from '@adecore/lsp';
+import type { CodeAuthorship } from './code-authors.ts';
+import type { Problem } from './diagnostics-model.ts';
+import type { PeekFile, PeekSnippet } from './peek-model.ts';
+import type { ActionEntry } from './code-actions-model.ts';
+import type { SymbolEntry } from './symbol-picker-model.ts';
+import type { HoverText } from './hover-content.ts';
+import type { SignatureViewModel } from './signature-model.ts';
+
+/* What a hover card shows for the character under the pointer. */
+export interface HoverView {
+    /* The card sits under this character, or over it when there is no room below. */
+    readonly anchor: EditorPosition;
+    /* The character the pointer rests on, which a count of references and a peek are asked at. */
+    readonly position: EditorPosition;
+    /* While the pointer stays in this range the card stays, so moving along a word does not make it blink. */
+    readonly subject: EditorRange;
+    readonly problems: readonly Problem[];
+    /* What the servers say about the symbol, and where it is defined. */
+    readonly info: HoverInfo | null;
+}
+
+export interface HoverInfo {
+    readonly text: HoverText;
+    readonly definition: Location | null;
+    /* The name under the pointer, which a signature's own symbol is told by. */
+    readonly word: string;
+    /* How many other places use the symbol, once a server has counted them. */
+    readonly references: number | null;
+}
+
+/* One line of the suggestions list. */
+export interface CompletionRow {
+    readonly label: string;
+    readonly kind: number | undefined;
+    /* The parameters the server puts after the label. */
+    readonly detail: string;
+    /* Where the item comes from, such as the module or namespace of an import, right-aligned. */
+    readonly description: string;
+    /* UTF-16 offsets of the characters of the label that match what was typed. */
+    readonly matches: readonly number[];
+    readonly deprecated: boolean;
+}
+
+/* What is said about the active suggestion beside the list. */
+export interface CompletionDocs {
+    /* Where it comes from, such as `use Raxos\\Orm\\Property` or `Auto import from './lib.ts'`; one line, empty when the server says nothing. */
+    readonly source: string;
+    /* The signature, prose and tags the same way a hover has them. */
+    readonly text: HoverText;
+}
+
+/* The suggestions while a word is being typed. */
+export interface CompletionView {
+    /* The start of the word, which the list is placed under. */
+    readonly anchor: EditorPosition;
+    readonly rows: readonly CompletionRow[];
+    readonly active: number;
+    /* Whether the documentation of the active row is shown beside the list. */
+    readonly detailsOpen: boolean;
+    readonly docs: CompletionDocs | null;
+    /* The server the suggestions came from. */
+    readonly server: string;
+    /* The shiki id of the file's language, for the signature in the documentation. */
+    readonly highlightLanguage: string;
+}
+
+/* The signature of the call the caret is in. */
+export interface SignatureView {
+    /* Where the call opened, so the card stays put while the arguments are typed. */
+    readonly anchor: EditorPosition;
+    readonly model: SignatureViewModel;
+}
+
+/* One line of a list the person picks from, such as a code action or a place a name is defined. */
+export interface PickRow {
+    readonly id: string;
+    readonly label: string;
+    /* What stands at the end of the line, such as a folder. */
+    readonly detail: string;
+    /* The detail is a path, which gives way from its start before the label gives way at all. */
+    readonly path?: boolean;
+}
+
+export interface PickGroup {
+    readonly title: string | null;
+    readonly rows: readonly PickRow[];
+}
+
+/* The change an action would make, as the lines it takes away and the lines it puts in their place. */
+export interface PickPreview {
+    readonly removed: readonly string[];
+    readonly added: readonly string[];
+    /* Other places the change reaches, such as the files besides this one. */
+    readonly note: string | null;
+    /* Why the action cannot be taken here, which the server said; nothing would change. */
+    readonly refusal?: string;
+}
+
+/* A list under a character of the editor; Enter takes the active row, Escape closes it. */
+export interface PickView {
+    readonly anchor: EditorPosition;
+    readonly groups: readonly PickGroup[];
+    readonly active: string;
+    readonly preview: PickPreview | null;
+    readonly title: string | null;
+}
+
+/* One file of a rename in the preview: the lines it changes. */
+export interface RenameFileView {
+    readonly uri: string;
+    readonly rows: readonly { readonly line: number; readonly before: string; readonly after: string }[];
+}
+
+/*
+ * The input over the symbol being renamed. In the preview phase the new name stays in the input,
+ * read only, and the lines the rename changes are listed under it until Enter applies them.
+ */
+export interface RenameView {
+    readonly phase: 'input' | 'preview';
+    readonly range: EditorRange;
+    /* The name in the text, and the one the input starts with. */
+    readonly original: string;
+    readonly placeholder: string;
+    /* How many places the name has, once the servers said. */
+    readonly occurrences: { readonly count: number; readonly files: number } | null;
+    /* A request is out, so the input waits. */
+    readonly busy: boolean;
+    /* Why the last try failed, shown under the input, which stays open for another. */
+    readonly error: string | null;
+    readonly name: string;
+    readonly files: readonly RenameFileView[];
+    /* Names the host suggests from how the symbol is used. They fill the input when chosen and never apply by themselves. */
+    readonly suggestions: readonly string[];
+}
+
+/* The references of a name between the lines of the file: a list of places and the code around the one that is active. */
+export interface PeekView {
+    /* What the places are: where the name is used, or where it is defined. */
+    readonly kind: 'references' | 'definitions';
+    /* The row the editor draws it in, which the editor makes again when it scrolls back into view. */
+    readonly container: HTMLElement | null;
+    readonly files: readonly PeekFile[];
+    readonly active: string;
+    /* The files whose places the list leaves out. */
+    readonly collapsed: readonly string[];
+    readonly count: number;
+    readonly preview: (PeekSnippet & { readonly uri: string }) | null;
+}
+
+/* The picker that jumps to a symbol of the file, over the symbols the servers know in it. */
+export interface SymbolsView {
+    /* The file's name, for the placeholder. */
+    readonly file: string;
+    readonly entries: readonly SymbolEntry[];
+}
+
+/* The context menu of the editor, asked for at a point of the page. */
+export interface MenuView {
+    readonly x: number;
+    readonly y: number;
+    /* The refactors the servers offer at the caret, once they have said. */
+    readonly refactors: readonly ActionEntry[];
+}
+
+/* The card a press on the authors of a declaration opens beside the entry. */
+export interface AuthorsView {
+    /* Where the entry stood when it was pressed, in the page's pixels. */
+    readonly anchor: EditorRect;
+    readonly name: string;
+    readonly authorship: CodeAuthorship;
+    /* Opens the latest commit in the git panel; null where there is no panel to open it in. */
+    readonly openCommit: (() => void) | null;
+}
+
+export interface PopupState {
+    readonly hover: HoverView | null;
+    readonly completion: CompletionView | null;
+    readonly signature: SignatureView | null;
+    readonly pick: PickView | null;
+    readonly rename: RenameView | null;
+    readonly peek: PeekView | null;
+    readonly symbols: SymbolsView | null;
+    readonly menu: MenuView | null;
+    readonly authors: AuthorsView | null;
+}
+
+export type PopupStore = StoreApi<PopupState>;
+
+export function createPopupStore(): PopupStore {
+    return createStore<PopupState>(() => ({
+        hover: null,
+        completion: null,
+        signature: null,
+        pick: null,
+        rename: null,
+        peek: null,
+        symbols: null,
+        menu: null,
+        authors: null
+    }));
+}

package/src/project-language.ts

@@ -0,0 +1,223 @@
+import i18next, { type i18n } from 'i18next';
+import { fileUriToPath, type ApplyWorkspaceEditResult, type ContentChange, type LanguageService, type WorkspaceEdit } from '@adecore/lsp';
+import type { Editor, EditorPosition } from '@adecore/editor';
+import { NavigationHistory, type Place } from './navigation-history.ts';
+import { ProjectProblems } from './project-problems.ts';
+import { applyWorkspaceEdit, type ProjectFiles } from './workspace-edit.ts';
+import type { LanguageHost } from './host-types.ts';
+
+export interface LanguageDocumentHandle {
+    readonly uri: string;
+    readonly service: LanguageService;
+    readonly ready: Promise<void>;
+    release(): void;
+}
+
+class DocumentSync {
+    readonly ready: Promise<void>;
+    private pending: ContentChange[] = [];
+    private opened = false;
+    private disposed = false;
+    private readonly stop: () => void;
+
+    private readonly service: LanguageService;
+    private readonly uri: string;
+    readonly editor: Editor;
+
+    constructor(service: LanguageService, uri: string, languageId: string, editor: Editor) {
+        this.service = service;
+        this.uri = uri;
+        this.editor = editor;
+        this.stop = editor.onTextChange((change) => this.changed(change.changes));
+        this.ready = service.openDocument({ uri, languageId, text: editor.getText() }).then(() => {
+            this.opened = true;
+            if (!this.disposed) {
+                this.flush();
+            }
+        });
+        // A failed open is also a document nothing can be asked of; the features' own requests say so.
+        this.ready.catch(() => undefined);
+    }
+
+    private changed(changes: readonly ContentChange[]): void {
+        this.pending.push(...changes);
+        if (this.opened) {
+            this.flush();
+        }
+    }
+
+    private flush(): void {
+        if (this.pending.length === 0) {
+            return;
+        }
+        const changes = this.pending;
+        this.pending = [];
+        void this.service.changeDocument(this.uri, changes).catch(() => undefined);
+    }
+
+    dispose(): void {
+        this.disposed = true;
+        this.pending = [];
+        this.stop();
+    }
+
+    get text(): string {
+        return this.editor.getText();
+    }
+}
+
+interface Holder {
+    readonly editors: Editor[];
+    sync: DocumentSync;
+    languageId: string;
+}
+
+/*
+ * A shared language service and document ownership for the editors of a project. Two editors on the same
+ * file hold one document, and only the first one sends changes, since both would report the same edit.
+ */
+export class ProjectLanguage {
+    readonly service: LanguageService;
+    readonly host: LanguageHost;
+    readonly i18n: i18n;
+    readonly folder: string;
+    readonly problems: ProjectProblems;
+    readonly history = new NavigationHistory();
+    private readonly holders = new Map<string, Holder>();
+    private readonly files: ProjectFiles | null;
+    private pendingCaret: Place | null = null;
+    private lastPlace: Place | null = null;
+    private disposed = false;
+
+    constructor(service: LanguageService, host: LanguageHost = {}) {
+        this.service = service;
+        this.host = host;
+        this.i18n = host.i18n ?? i18next;
+        this.folder = host.folder ?? '';
+        this.files = host.files ?? null;
+        this.problems = new ProjectProblems(service, (uri) => this.pathOfLocation(uri) ?? uri);
+    }
+
+    pathOfLocation(uri: string): string | null {
+        if (this.host.pathOfUri !== undefined) {
+            return this.host.pathOfUri(uri);
+        }
+        const path = fileUriToPath(uri);
+        return path !== null && this.folder !== '' && path.startsWith(`${this.folder}/`) ? path.slice(this.folder.length + 1) : path;
+    }
+
+    /* Makes an edit of a language server: an open document takes it as one undo step and any other file gets an unsaved draft. */
+    applyWorkspaceEdit(edit: WorkspaceEdit): Promise<ApplyWorkspaceEditResult> {
+        return applyWorkspaceEdit(edit, { editorOf: (uri) => this.holders.get(uri)?.editors[0], files: this.files });
+    }
+
+    /* The text of a file as it stands now: an open document's, else a draft's or the machine's; null when it is no text file. */
+    async readText(uri: string): Promise<string | null> {
+        const open = this.holders.get(uri)?.sync.text;
+        if (open !== undefined) {
+            return open;
+        }
+        const path = fileUriToPath(uri);
+        return path === null || this.files === null ? null : ((await this.files.read(path))?.text ?? null);
+    }
+
+    /*
+     * Opens the file of a place on its line. A file opens on a line only, so the column is kept here until the editor
+     * that shows the line asks for it with `takeCaret`.
+     */
+    openPlace(place: Place): void {
+        this.pendingCaret = place;
+        this.host.openPlace?.(place);
+    }
+
+    /* Where an editor's caret stands now, so a jump from a surface without an editor, such as the Problems panel, still knows what it left. */
+    noteCaret(place: Place): void {
+        this.lastPlace = place;
+    }
+
+    /* Opens a place from outside any editor and remembers the caret that was last seen. */
+    jumpTo(place: Place): void {
+        if (this.lastPlace !== null) {
+            this.history.record(this.lastPlace);
+        }
+        this.openPlace(place);
+    }
+
+    /* The column an opened place waits for, once the editor of its file has put its caret on the line; each place is asked for once. */
+    takeCaret(uri: string, line: number): EditorPosition | null {
+        const pending = this.pendingCaret;
+        if (pending === null || pending.uri !== uri || pending.position.line !== line) {
+            return null;
+        }
+        this.pendingCaret = null;
+        return pending.position;
+    }
+
+    /* Opens `uri` for the editor, or joins the editors that already hold it. */
+    acquire(uri: string, languageId: string, editor: Editor): LanguageDocumentHandle {
+        if (this.disposed) {
+            throw new Error('The project language is disposed');
+        }
+        let holder = this.holders.get(uri);
+        if (holder === undefined) {
+            holder = { editors: [], sync: new DocumentSync(this.service, uri, languageId, editor), languageId };
+            this.holders.set(uri, holder);
+        }
+        holder.editors.push(editor);
+        let released = false;
+        return {
+            uri,
+            service: this.service,
+            get ready() {
+                return holder.sync.ready;
+            },
+            release: () => {
+                if (!released) {
+                    released = true;
+                    this.release(uri, editor);
+                }
+            }
+        };
+    }
+
+    private release(uri: string, editor: Editor): void {
+        const holder = this.holders.get(uri);
+        if (holder === undefined) {
+            return;
+        }
+        holder.editors.splice(holder.editors.indexOf(editor), 1);
+        const next = holder.editors[0];
+        if (next === undefined) {
+            holder.sync.dispose();
+            this.holders.delete(uri);
+            void holder.sync.ready
+                .catch(() => undefined)
+                .then(() => {
+                    if (!this.holders.has(uri)) {
+                        return this.service.closeDocument(uri);
+                    }
+                })
+                .catch(() => undefined);
+        } else if (holder.sync.editor === editor) {
+            // The editor that sent the changes is gone; the next one takes over and opens the document with its own text.
+            holder.sync.dispose();
+            holder.sync = new DocumentSync(this.service, uri, holder.languageId, next);
+        }
+    }
+
+    dispose(): void {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        for (const [uri, holder] of this.holders) {
+            holder.sync.dispose();
+            void holder.sync.ready
+                .catch(() => undefined)
+                .then(() => this.service.closeDocument(uri))
+                .catch(() => undefined);
+        }
+        this.holders.clear();
+        this.problems.dispose();
+    }
+}