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

package/src/hover.ts

@@ -0,0 +1,280 @@
+import type { EditorHover, EditorPosition, EditorRange } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { rangeHolds, type Problem } from './diagnostics-model.ts';
+import { hoverTextOf, isEmptyHover, locationsOf } from './hover-content.ts';
+import { wordRangeAt } from './rename-model.ts';
+import type { HoverInfo } from './popups.ts';
+import { isShortcut } from './shortcut-keys.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const SHOW_DELAY_MS = 300;
+const HIDE_DELAY_MS = 250;
+/* How long a card has to stay up before the references of its symbol are counted, which can be a request over the whole project. */
+const COUNT_DELAY_MS = 500;
+const TOAST_ID = 'language-hover';
+
+/*
+ * The card under a character the pointer rests on: the problems there, and what the language servers
+ * say about the symbol. It opens after the pointer has stayed a moment, stays while the pointer is on
+ * the word or on the card itself, and goes when the text, the scroll or the focus moves.
+ */
+export class HoverFeature {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private showTimer: unknown;
+    private countTimer: unknown;
+    /* The counts asked for since the text last changed, by the symbol's position, so moving back to a name does not ask again. */
+    private readonly counts = new Map<string, number>();
+    private hideTimer: unknown;
+    private inCard = false;
+    /* Counts every request, so an answer that arrives after the pointer moved on is dropped. */
+    private request = 0;
+    private lookup: AbortController | null = null;
+    /* A card the keyboard opened: scrolling does not take it away, since it was never under a pointer. Moving the caret does. */
+    private pinned = false;
+    /* The card is being read: an explanation runs in it or is shown, so the pointer going elsewhere neither closes nor replaces it. */
+    private held = false;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.timers = timers;
+        const { editor } = language;
+        const offs = [
+            editor.onHover((hover) => this.moved(hover)),
+            editor.onTextChange(() => {
+                this.counts.clear();
+                this.hide();
+            }),
+            editor.onClick(() => {
+                if (this.held) {
+                    this.hide();
+                }
+                return false;
+            }),
+            editor.onViewChange(() => {
+                if (!this.pinned) {
+                    this.hide();
+                }
+            }),
+            editor.onCaret(() => {
+                if (this.pinned) {
+                    this.hide();
+                }
+            }),
+            editor.onKeyDown((event) => {
+                if (isShortcut(this.language.shortcuts.quickInfo, event)) {
+                    this.quickInfo();
+                    return true;
+                }
+                if (event.key === 'Escape' && this.language.popups.getState().hover !== null) {
+                    this.hide();
+                    return true;
+                }
+                return false;
+            })
+        ];
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.hide();
+        });
+    }
+
+    /* The pointer entered or left the card, which is where a link in it is clicked. */
+    holdCard(inside: boolean): void {
+        this.inCard = inside;
+        if (inside) {
+            this.timers.clear(this.hideTimer);
+        } else {
+            this.scheduleHide();
+        }
+    }
+
+    /* The card for the caret, as a pointer resting there would open it. */
+    quickInfo(): void {
+        const request = ++this.request;
+        this.timers.clear(this.showTimer);
+        void this.show(this.language.editor.getCaret(), request, true);
+    }
+
+    /* The problems at a position as a card, at once; what the servers say about the symbol is left for the pointer and Quick Info. */
+    showProblemsAt(position: EditorPosition): boolean {
+        const problems = this.language.diagnostics.at(position);
+        if (problems.length === 0) {
+            return false;
+        }
+        this.hide();
+        this.pinned = true;
+        this.present(position, problems, null, problems[0]!.diagnostic.range);
+        return true;
+    }
+
+    /* Keeps the card up until Escape, a press in the text, an edit or a move of the caret. */
+    keep(): void {
+        this.pinned = true;
+        this.held = true;
+        this.timers.clear(this.hideTimer);
+    }
+
+    /* A card of its own for a range, such as the explanation of a selection, which stays like the card Quick Info opens. */
+    showRange(range: EditorRange): void {
+        this.hide();
+        this.keep();
+        this.present(range.start, [], null, range);
+    }
+
+    hide(): void {
+        this.pinned = false;
+        this.held = false;
+        this.request++;
+        this.lookup?.abort();
+        this.timers.clear(this.showTimer);
+        this.timers.clear(this.hideTimer);
+        this.timers.clear(this.countTimer);
+        this.inCard = false;
+        if (this.language.popups.getState().hover !== null) {
+            this.language.popups.setState({ hover: null });
+        }
+    }
+
+    private moved(hover: EditorHover | null): void {
+        if (this.held) {
+            return;
+        }
+        this.timers.clear(this.showTimer);
+        if (hover === null) {
+            this.request++;
+            this.scheduleHide();
+            return;
+        }
+        const shown = this.language.popups.getState().hover;
+        if (shown !== null && rangeHolds(shown.subject, hover.position)) {
+            this.timers.clear(this.hideTimer);
+            return;
+        }
+        this.scheduleHide();
+        const request = ++this.request;
+        this.showTimer = this.timers.set(() => void this.show(hover.position, request, false), SHOW_DELAY_MS);
+    }
+
+    private scheduleHide(): void {
+        this.timers.clear(this.hideTimer);
+        if (this.language.popups.getState().hover === null || this.inCard || this.held) {
+            return;
+        }
+        this.hideTimer = this.timers.set(() => {
+            if (!this.inCard) {
+                this.hide();
+            }
+        }, HIDE_DELAY_MS);
+    }
+
+    /* What the servers say at a position: the hover text and the definition, each of which may be missing without the other. */
+    private async ask(position: EditorHover['position'], signal: AbortSignal): Promise<{ info: HoverInfo | null; range: EditorRange | null }> {
+        const { service } = this.language.project;
+        const { uri } = this.language;
+        if (!service.supports('textDocument/hover', uri)) {
+            return { info: null, range: null };
+        }
+        const [hover, definition] = await Promise.all([
+            service.hover(uri, position, { signal }).catch(() => null),
+            service.supports('textDocument/definition', uri) ? service.definition(uri, position, { signal }).catch(() => null) : null
+        ]);
+        const text = hover === null ? null : hoverTextOf(hover);
+        if (hover === null || text === null || isEmptyHover(text)) {
+            return { info: null, range: null };
+        }
+        const { editor } = this.language;
+        const line = editor.textInRange({ start: { line: position.line, character: 0 }, end: { line: position.line, character: Number.MAX_SAFE_INTEGER } });
+        const word = wordRangeAt(line, position);
+        return {
+            info: {
+                text,
+                definition: locationsOf(definition)[0] ?? null,
+                word: word === null ? '' : line.slice(word.start.character, word.end.character),
+                references: null
+            },
+            range: hover.range ?? null
+        };
+    }
+
+    private async show(position: EditorPosition, request: number, pinned: boolean): Promise<void> {
+        const problems = this.language.diagnostics.at(position);
+        this.lookup?.abort();
+        const controller = new AbortController();
+        this.lookup = controller;
+        const { info, range } = await this.ask(position, controller.signal);
+        if (request !== this.request) {
+            return;
+        }
+        if (problems.length === 0 && info === null) {
+            this.hide();
+            if (pinned) {
+                this.language.project.host.notify?.({ id: TOAST_ID, kind: 'error', title: this.language.project.i18n.t('editor:language.hover.none') });
+            }
+            return;
+        }
+        this.pinned = pinned;
+        this.present(position, problems, info, problems[0]?.diagnostic.range ?? range);
+        if (info !== null) {
+            this.scheduleCount(position, request, controller.signal);
+        }
+    }
+
+    private present(position: EditorPosition, problems: readonly Problem[], info: HoverInfo | null, range: EditorRange | null): void {
+        const subject = range ?? { start: position, end: position };
+        this.timers.clear(this.hideTimer);
+        this.language.popups.setState({
+            hover: {
+                anchor: subject.start.line === position.line ? subject.start : position,
+                position,
+                subject,
+                problems,
+                info
+            }
+        });
+    }
+
+    /* The references of the symbol are counted once the card has stayed up a while, or at once when the text has not changed since they were. */
+    private scheduleCount(position: EditorPosition, request: number, signal: AbortSignal): void {
+        const key = `${position.line}:${this.wordStart(position)}`;
+        const known = this.counts.get(key);
+        if (known !== undefined) {
+            this.showCount(known, request);
+            return;
+        }
+        this.timers.clear(this.countTimer);
+        this.countTimer = this.timers.set(() => void this.count(position, key, request, signal), COUNT_DELAY_MS);
+    }
+
+    /* How many places use the symbol, which can take a while in a large project and so arrives after the card does. */
+    private async count(position: EditorPosition, key: string, request: number, signal: AbortSignal): Promise<void> {
+        const { service } = this.language.project;
+        if (request !== this.request || !service.supports('textDocument/references', this.language.uri)) {
+            return;
+        }
+        const found = await service.references(this.language.uri, position, false, { signal }).catch(() => null);
+        if (found === null) {
+            return;
+        }
+        this.counts.set(key, found.length);
+        this.showCount(found.length, request);
+    }
+
+    private showCount(count: number, request: number): void {
+        const shown = this.language.popups.getState().hover;
+        if (request === this.request && shown?.info != null) {
+            this.language.popups.setState({ hover: { ...shown, info: { ...shown.info, references: count } } });
+        }
+    }
+
+    /* Where the word at a position starts, which names the symbol for the cache. */
+    wordStart(position: EditorPosition): number {
+        const line = this.language.editor.textInRange({
+            start: { line: position.line, character: 0 },
+            end: { line: position.line, character: Number.MAX_SAFE_INTEGER }
+        });
+        return wordRangeAt(line, position)?.start.character ?? position.character;
+    }
+}

package/src/index.ts

@@ -0,0 +1,63 @@
+export { EditorLanguage } from './editor-language.ts';
+export { ProjectLanguage } from './project-language.ts';
+export type { LanguageDocumentHandle } from './project-language.ts';
+export type { LanguageHost, DiskText, GitBlameCommit, GitBlameResult, EditorNotification, RenameSuggestionsRequest } from './host-types.ts';
+export { EditorView } from './EditorView.tsx';
+export { createHolder } from './holder.ts';
+export type { EditorViewProps } from './EditorView.tsx';
+export { LanguagePopups } from './LanguagePopups.tsx';
+export { AnchoredPopup } from './AnchoredPopup.tsx';
+export { HoverCard } from './HoverCard.tsx';
+export { CompletionPopup } from './CompletionPopup.tsx';
+export { SignatureCard } from './SignatureCard.tsx';
+export { RenameCard } from './RenameCard.tsx';
+export { PickPopup } from './PickPopup.tsx';
+export { PeekPanel } from './PeekPanel.tsx';
+export { SymbolPicker } from './SymbolPicker.tsx';
+export { CodeAuthorsCard } from './CodeAuthorsCard.tsx';
+export { EditorContextMenu } from './EditorContextMenu.tsx';
+export { EditorRenderingProvider } from './rendering.tsx';
+export type { EditorRendering } from './rendering-context.ts';
+export { FindReplace } from './FindReplace.tsx';
+export { ChangeReview } from './ChangeReview.tsx';
+export type { ChangeReviewProps } from './ChangeReview.tsx';
+export { ProjectProblems, countsOf, compareRows } from './project-problems.ts';
+export type { ProblemFile, ProblemRow } from './project-problems.ts';
+export { applyWorkspaceEdit } from './workspace-edit.ts';
+export type { ProjectFiles, StagedFile, WorkspaceEditHost } from './workspace-edit.ts';
+export { useProblemCounts } from './use-problem-counts.ts';
+export type { ProblemCounts } from './diagnostics.ts';
+export type { BlameSource, CodeVisionSettings } from './code-vision.ts';
+export type { Problem } from './diagnostics-model.ts';
+export type {
+    PopupState,
+    PopupStore,
+    HoverInfo,
+    HoverView,
+    CompletionView,
+    CompletionDocs,
+    CompletionRow,
+    SignatureView,
+    RenameView,
+    RenameFileView,
+    PeekView,
+    PickView,
+    PickGroup,
+    PickRow,
+    PickPreview,
+    SymbolsView,
+    MenuView,
+    AuthorsView
+} from './popups.ts';
+export { RowHost, LineActionHost } from './row-host.ts';
+export type { HostedRow, HostedAction } from './row-host.ts';
+export { HighlightLayers, highlightLayers } from './highlight-layers.ts';
+export { NavigationHistory } from './navigation-history.ts';
+export type { Place } from './navigation-history.ts';
+export { openingPlace, viewStates, followViewStates, viewStateKey, forgetMovesFrom } from './view-state.ts';
+export type { ViewState, RevealLineRequest } from './view-state.ts';
+export { lspLanguageIdOf, shikiLanguageOf, shikiLanguageOfPath } from './language-ids.ts';
+export { AttributionCard } from './AttributionCard.tsx';
+export type { AttributionCardProps } from './AttributionCard.tsx';
+export { ReviewGroup, joinReviewGroup } from './review-group.ts';
+export type { ReviewMember } from './review-group.ts';

package/src/inlay-hints.ts

@@ -0,0 +1,85 @@
+import type { EditorInlayHint, EditorPosition, EditorRange } from '@adecore/editor';
+import type { InlayHint } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import { Refresher } from './refresher.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/inlayHint';
+const PAUSE_MS = 300;
+/* Lines asked for above and below what is in view, so a little scrolling stays inside what is already drawn. */
+const MARGIN_LINES = 60;
+
+/* A hint's label is a string or a list of parts, which are read as one text. */
+export function hintLabelOf(hint: InlayHint): string {
+    return typeof hint.label === 'string' ? hint.label : hint.label.map((part) => part.value).join('');
+}
+
+export function editorHintsOf(hints: readonly InlayHint[]): EditorInlayHint[] {
+    return hints
+        .map((hint) => ({ position: hint.position, label: hintLabelOf(hint) }))
+        .filter((hint) => hint.label !== '')
+        .sort((left, right) => left.position.line - right.position.line || left.position.character - right.position.character);
+}
+
+/* The lines in view with a margin of lines around them, from the start of the first to the end of the last. */
+export function withMargin(visible: EditorRange, endOfDocument: EditorPosition, endOfLine: (line: number) => EditorPosition): EditorRange {
+    const first = Math.max(0, visible.start.line - MARGIN_LINES);
+    const last = Math.min(endOfDocument.line, visible.end.line + MARGIN_LINES);
+    return { start: { line: first, character: 0 }, end: last === endOfDocument.line ? endOfDocument : endOfLine(last) };
+}
+
+/* Whether what was asked for already holds every line in view. */
+export function covers(asked: EditorRange, visible: EditorRange): boolean {
+    return asked.start.line <= visible.start.line && asked.end.line >= visible.end.line;
+}
+
+/*
+ * Types and parameter names the servers infer, drawn in the text as soft pills. They are asked for the
+ * lines in view and a margin around them after a pause in typing or scrolling; until the answer comes the
+ * last ones stay where their text went, so nothing blinks while typing. Scrolling asks again only once the
+ * view leaves the lines that were asked for.
+ */
+export class InlayHintsFeature {
+    private readonly refresher: Refresher;
+    /* The lines the hints on screen were asked for. */
+    private asked: EditorRange | null = null;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        const { editor, project, uri } = language;
+        this.refresher = new Refresher(
+            async (signal) => {
+                const { service } = project;
+                if (!service.supports(METHOD, uri)) {
+                    return;
+                }
+                const range = withMargin(editor.getVisibleRange(), editor.positionAt(Number.MAX_SAFE_INTEGER), (line) => ({
+                    line,
+                    character: editor.textInRange({ start: { line, character: 0 }, end: { line, character: Number.MAX_SAFE_INTEGER } }).length
+                }));
+                this.asked = range;
+                const hints = await service.inlayHints(uri, range, { signal });
+                if (!signal.aborted) {
+                    editor.setInlayHints(hints === null ? [] : editorHintsOf(hints));
+                }
+            },
+            PAUSE_MS,
+            timers
+        );
+        const edits = editor.onTextChange(() => this.refresher.later());
+        const scrolls = editor.onViewChange(() => {
+            if (this.asked !== null && !covers(this.asked, editor.getVisibleRange())) {
+                this.refresher.later();
+            }
+        });
+        const providers = language.onProvidersChanged(() => {
+            this.refresher.now();
+        });
+        language.onDispose(() => {
+            edits();
+            scrolls();
+            providers();
+            this.refresher.dispose();
+            editor.setInlayHints([]);
+        });
+    }
+}

package/src/language-ids.ts

@@ -0,0 +1,54 @@
+/* The highlighter ids `fs.read` answers with, by the id LSP names the same language. */
+const LSP_IDS: Record<string, string> = {
+    typescript: 'typescript',
+    tsx: 'typescriptreact',
+    javascript: 'javascript',
+    jsx: 'javascriptreact',
+    vue: 'vue',
+    php: 'php',
+    css: 'css',
+    scss: 'scss',
+    less: 'less',
+    html: 'html',
+    json: 'json',
+    jsonc: 'jsonc',
+    yaml: 'yaml',
+    python: 'python',
+    shellscript: 'shellscript',
+    docker: 'dockerfile'
+};
+
+/* The LSP language id of a file, or null when no language server here knows its language. */
+export function lspLanguageIdOf(language: string | undefined): string | null {
+    return language === undefined ? null : (LSP_IDS[language] ?? null);
+}
+
+const SHIKI_IDS: Record<string, string> = { typescriptreact: 'tsx', javascriptreact: 'jsx' };
+
+/* The highlighter id of an LSP language id, for code a server sends back to be drawn. */
+export function shikiLanguageOf(lspLanguageId: string): string {
+    return SHIKI_IDS[lspLanguageId] ?? lspLanguageId;
+}
+
+const PATH_IDS: Record<string, string> = {
+    ts: 'typescript',
+    mts: 'typescript',
+    cts: 'typescript',
+    tsx: 'tsx',
+    js: 'javascript',
+    mjs: 'javascript',
+    cjs: 'javascript',
+    jsx: 'jsx',
+    vue: 'vue',
+    php: 'php',
+    json: 'json',
+    css: 'css',
+    scss: 'scss',
+    html: 'html',
+    md: 'markdown'
+};
+
+/* The highlighter id for the code of a file we only know by its path, such as a place another file refers to. */
+export function shikiLanguageOfPath(path: string): string {
+    return PATH_IDS[path.slice(path.lastIndexOf('.') + 1).toLowerCase()] ?? 'text';
+}

package/src/line-edits.ts

@@ -0,0 +1,48 @@
+import { shapeOf, splitLines } from '@adecore/merge';
+import type { EditorContentChange } from '@adecore/editor';
+
+/* A replacement of whole lines, zero-based with `to` exclusive, such as a block a review puts back. */
+export interface LineReplacement {
+    readonly from: number;
+    readonly to: number;
+    readonly lines: readonly string[];
+}
+
+/*
+ * The edit that makes the lines `from` up to `to` of `text` into `lines`. A file that does not end on a
+ * newline has no line break after its last line, so the break before it goes along when the last lines
+ * leave and comes with the new ones when they are put at the end.
+ */
+export function replaceLines(text: string, replacement: LineReplacement): EditorContentChange {
+    const { from, to, lines } = replacement;
+    const eol = shapeOf(text).eol;
+    const raw = text.split('\n');
+    const count = splitLines(text).length;
+    const body = lines.join(eol);
+    if (to < count || text === '' || text.endsWith('\n')) {
+        return { range: { start: { line: from, character: 0 }, end: { line: to, character: 0 } }, text: lines.length === 0 ? '' : `${body}${eol}` };
+    }
+    const end = { line: count - 1, character: raw[count - 1]!.length };
+    if (from === count) {
+        return { range: { start: end, end }, text: lines.length === 0 ? '' : `${eol}${body}` };
+    }
+    if (lines.length === 0 && from > 0) {
+        return { range: { start: { line: from - 1, character: raw[from - 1]!.length }, end }, text: '' };
+    }
+    return { range: { start: { line: from, character: 0 }, end }, text: body };
+}
+
+/* Several replacements of one text as the edits an editor applies at once; replacements that touch are one edit. */
+export function replaceAllLines(text: string, replacements: readonly LineReplacement[]): EditorContentChange[] {
+    const ordered = [...replacements].sort((left, right) => left.from - right.from);
+    const merged: LineReplacement[] = [];
+    for (const next of ordered) {
+        const last = merged.at(-1);
+        if (last !== undefined && last.to >= next.from) {
+            merged[merged.length - 1] = { from: last.from, to: Math.max(last.to, next.to), lines: [...last.lines, ...next.lines] };
+        } else {
+            merged.push(next);
+        }
+    }
+    return merged.map((replacement) => replaceLines(text, replacement));
+}