@adecore/editor-react 0.23.0 → 0.24.0

package/src/project-language.ts

@@ -3,10 +3,11 @@ import i18next, { type i18n } from 'i18next';
 import { fileUriToPath, pathToFileUri, 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 { ProjectProblems, serviceProblems } from './project-problems.ts';
 import { applyWorkspaceEdit, type ProjectFiles } from './workspace-edit.ts';
 import type { LanguageHost } from './host-types.ts';
 import { relativeTo } from './paths.ts';
+import { PANEL_BODY_HEIGHT } from './panel-size.ts';
 
 export interface LanguageDocumentHandle {
     readonly uri: string;
@@ -98,6 +99,9 @@ export class ProjectLanguage {
     readonly history = new NavigationHistory();
     private readonly holders = new Map<string, Holder>();
     private readonly files: ProjectFiles | null;
+    /* The body height of the peek and call hierarchy panels, shared by the editors of the project. */
+    panelBodyHeight: number;
+    private readonly panelListeners = new Set<(height: number) => void>();
     private pendingCaret: Place | null = null;
     private lastPlace: Place | null = null;
     private disposed = false;
@@ -108,7 +112,23 @@ export class ProjectLanguage {
         this.i18n = host.i18n ?? i18next;
         this.folder = host.folder ?? '';
         this.files = host.files ?? null;
-        this.problems = new ProjectProblems(service, (uri) => this.pathOfLocation(uri) ?? uri);
+        this.panelBodyHeight = host.panelBodyHeight ?? PANEL_BODY_HEIGHT;
+        this.problems = new ProjectProblems(host.problemSource ?? serviceProblems(service, (uri) => this.pathOfLocation(uri) ?? uri));
+    }
+
+    /* Open panels of other editors of the project follow a resize. */
+    onPanelBodyChange(listener: (height: number) => void): () => void {
+        this.panelListeners.add(listener);
+        return () => this.panelListeners.delete(listener);
+    }
+
+    resizePanelBody(height: number): void {
+        if (height === this.panelBodyHeight) {
+            return;
+        }
+        this.panelBodyHeight = height;
+        this.panelListeners.forEach((listener) => listener(height));
+        this.host.onPanelResize?.(height);
     }
 
     pathOfLocation(uri: string): string | null {
@@ -234,9 +254,10 @@ export class ProjectLanguage {
             void holder.sync.ready
                 .catch(() => undefined)
                 .then(() => {
-                    if (!this.holders.has(uri)) {
-                        return this.service.closeDocument(uri);
+                    if (this.holders.has(uri)) {
+                        return undefined;
                     }
+                    return this.service.closeDocument(uri);
                 })
                 .catch(() => undefined);
         } else if (holder.sync.editor === editor) {

package/src/project-problems.ts

@@ -24,24 +24,51 @@ export function compareRows(left: ProblemRow, right: ProblemRow): number {
     );
 }
 
+/* One report of a file's problems; `path` is a stored path, as `ProblemFile.path` is. */
+export interface ProblemReport {
+    readonly path: string;
+    readonly server: string;
+    readonly diagnostics: readonly Diagnostic[];
+}
+
+/* Hands every report to `listener` until the function it returns runs. */
+export type ProblemSource = (listener: (report: ProblemReport) => void) => () => void;
+
+/* The diagnostics a service reports, by the stored path `pathOf` gives each URI. */
+export function serviceProblems(service: LanguageService, pathOf: (uri: string) => string = (uri) => uri): ProblemSource {
+    return (listener) => {
+        const subscription = service.onDiagnostics((report) => listener({ path: pathOf(report.uri), server: report.source, diagnostics: report.diagnostics }));
+        return () => subscription.dispose();
+    };
+}
+
 /*
  * Each report replaces the previous diagnostics from that source for the file. Files with no
  * remaining problems drop out. Hints remain editor annotations rather than listed problems.
  */
 export class ProjectProblems {
     private readonly reports = new Map<string, Map<string, readonly Diagnostic[]>>();
+    private readonly files = new Map<string, ProblemFile>();
     private readonly listeners = new Set<() => void>();
     private readonly stop: () => void;
-    private snapshot: readonly ProblemFile[] = [];
+    /* The paths of `files` in order; null once a file came or went. */
+    private order: string[] | null = [];
+    /* Made on first read after a report, so a project nobody lists does no sorting. */
+    private snapshot: readonly ProblemFile[] | null = [];
 
-    constructor(service: LanguageService, pathOf: (uri: string) => string = (uri) => uri) {
-        const subscription = service.onDiagnostics((report) => this.report(pathOf(report.uri), report.source, report.diagnostics));
-        this.stop = () => subscription.dispose();
+    /* A service stands for `serviceProblems(service, pathOf)`. */
+    constructor(source: ProblemSource | LanguageService, pathOf?: (uri: string) => string) {
+        const listen = typeof source === 'function' ? source : serviceProblems(source, pathOf);
+        this.stop = listen((report) => this.report(report.path, report.server, report.diagnostics));
     }
 
     report(path: string, server: string, diagnostics: readonly Diagnostic[]): void {
         const kept = diagnostics.filter((diagnostic) => severityOf(diagnostic) !== 'hint');
         const servers = this.reports.get(path) ?? new Map<string, readonly Diagnostic[]>();
+        if (kept.length === 0 && !servers.has(server)) {
+            // A clean file reported clean again, as servers do after every edit.
+            return;
+        }
         if (kept.length === 0) {
             servers.delete(server);
         } else {
@@ -49,22 +76,30 @@ export class ProjectProblems {
         }
         if (servers.size === 0) {
             this.reports.delete(path);
+            this.files.delete(path);
+            this.order = null;
         } else {
+            if (!this.files.has(path)) {
+                this.order = null;
+            }
             this.reports.set(path, servers);
+            const rows = [...servers].flatMap(([name, list]) => list.map((diagnostic): ProblemRow => ({ diagnostic, server: name }))).sort(compareRows);
+            this.files.set(path, { path, rows });
         }
-        this.snapshot = [...this.reports]
-            .map(([file, byServer]): ProblemFile => ({
-                path: file,
-                rows: [...byServer].flatMap(([name, list]) => list.map((diagnostic): ProblemRow => ({ diagnostic, server: name }))).sort(compareRows)
-            }))
-            .sort((left, right) => left.path.localeCompare(right.path));
+        this.snapshot = null;
         for (const listener of [...this.listeners]) {
             listener();
         }
     }
 
     /* The same array until the next report, which is what a store a component reads must hand out. */
-    getSnapshot = (): readonly ProblemFile[] => this.snapshot;
+    getSnapshot = (): readonly ProblemFile[] => {
+        if (this.snapshot === null) {
+            this.order ??= [...this.files.keys()].sort((left, right) => left.localeCompare(right));
+            this.snapshot = this.order.map((path) => this.files.get(path)!);
+        }
+        return this.snapshot;
+    };
 
     subscribe = (listener: () => void): (() => void) => {
         this.listeners.add(listener);

package/src/proposal-model.ts

@@ -139,15 +139,6 @@ export function fitReplacement(selected: string, replacement: string): string {
     return breaks === '\n' ? fitted : fitted.replace(/\n/g, breaks);
 }
 
-/* Where the caret stands after `text` was typed at `start`. */
-export function endOfInsertion(start: EditorPosition, text: string): EditorPosition {
-    const lines = text.split('\n');
-    if (lines.length === 1) {
-        return { line: start.line, character: start.character + text.length };
-    }
-    return { line: start.line + lines.length - 1, character: lines.at(-1)!.length };
-}
-
 /* One stretch of the proposal as the card draws it. */
 export interface DiffSegment {
     readonly kind: 'same' | 'added' | 'removed';

package/src/rename-model.ts

@@ -1,6 +1,7 @@
 import type { EditorPosition, EditorRange } from '@adecore/editor';
-import type { Location, PrepareRenameResult, TextEdit, WorkspaceEdit } from '@adecore/lsp';
+import type { DocumentSymbol, DocumentSymbolResult, Location, PrepareRenameResult, TextEdit, WorkspaceEdit } from '@adecore/lsp';
 import { isIdentifierCharacter } from './completion-model.ts';
+import { rangeHolds } from './diagnostics-model.ts';
 import { textEntriesOf } from './workspace-edit.ts';
 
 /* The identifier the caret is in or touches; null where there is none. */
@@ -59,6 +60,64 @@ export function occurrencesOf(locations: readonly Location[], uri: string): Occu
     };
 }
 
+/* LSP's SymbolKind in words, indexed by its number. */
+const SYMBOL_KINDS = [
+    '',
+    'file',
+    'module',
+    'namespace',
+    'package',
+    'class',
+    'method',
+    'property',
+    'field',
+    'constructor',
+    'enum',
+    'interface',
+    'function',
+    'variable',
+    'constant',
+    'string',
+    'number',
+    'boolean',
+    'array',
+    'object',
+    'key',
+    'null',
+    'enum member',
+    'struct',
+    'event',
+    'operator',
+    'type parameter'
+];
+
+/*
+ * The kind of the symbol a rename names, in words, from the outline of the open file: the symbol whose name
+ * holds one of the places of the name there. Undefined when the outline does not list it, as with most locals.
+ */
+export function renameKindOf(result: DocumentSymbolResult, name: string, places: readonly EditorRange[]): string | undefined {
+    if (result === null || result.length === 0) {
+        return undefined;
+    }
+    const named = (range: EditorRange) => places.some((place) => rangeHolds(range, place.start));
+    if ('range' in result[0]!) {
+        let found: DocumentSymbol | undefined;
+        const walk = (symbols: readonly DocumentSymbol[]): void => {
+            for (const symbol of symbols) {
+                if (named(symbol.selectionRange)) {
+                    found = symbol;
+                }
+                walk(symbol.children ?? []);
+            }
+        };
+        walk(result as DocumentSymbol[]);
+        return found === undefined ? undefined : SYMBOL_KINDS[found.kind];
+    }
+    // A flat list only gives the whole span of a symbol, so the name has to match as well.
+    const found = result.find((symbol) => 'location' in symbol && symbol.name === name && named(symbol.location.range));
+    return found === undefined ? undefined : SYMBOL_KINDS[found.kind];
+}
+
 /* One line a rename changes: the line as it is and as it will be. */
 export interface RenameRow {
     /* One-based. */

package/src/rename.ts

@@ -1,9 +1,10 @@
 import { StaleResultError, type Location, type PrepareRenameResult, type WorkspaceEdit } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorRange } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { lineTextOf } from './line-text.ts';
 import type { RenameView } from './popups.ts';
-import { occurrencesOf, renamePreviewOf, renameTargetOf, wordRangeAt, type RenameTarget } from './rename-model.ts';
+import { occurrencesOf, renameKindOf, renamePreviewOf, renameTargetOf, wordRangeAt, type RenameTarget } from './rename-model.ts';
 import { isShortcut } from './shortcut-keys.ts';
 import { resourceOperationsOf } from './workspace-edit.ts';
 import { messageOf } from './error-message.ts';
@@ -37,13 +38,13 @@ export class RenameFeature {
         this.language = language;
         const { editor } = language;
         const offs = [
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 if (!isShortcut(this.language.shortcuts.rename, event)) {
                     return false;
                 }
                 void this.start();
                 return true;
-            }),
+            }, KEY_PRIORITY.rename),
             editor.onTextChange(() => this.cancel())
         ];
         language.onDispose(() => {
@@ -218,8 +219,9 @@ export class RenameFeature {
                 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);
+            const [uses, kind] = await Promise.all([this.linesOf(locations ?? []), this.kindOf(session, locations ?? [])]);
+            const request = { uri, languageId, name: session.original, ...(kind === undefined ? {} : { kind }), context, uses };
+            const names = await suggestNames(request, session.names.signal);
             if (this.session === session && names.length > 0) {
                 this.publish({ suggestions: names });
             }
@@ -228,6 +230,20 @@ export class RenameFeature {
         }
     }
 
+    /* So a suggester knows a function from a variable; a rename on a use finds the kind through the declaration's place in this file. */
+    private async kindOf(session: Session, locations: readonly Location[]): Promise<string | undefined> {
+        const { project, uri } = this.language;
+        if (!project.service.supports('textDocument/documentSymbol', uri)) {
+            return undefined;
+        }
+        try {
+            const symbols = await project.service.documentSymbols(uri, { signal: session.names.signal, parallel: true });
+            return renameKindOf(symbols, session.original, [session.target.range, ...occurrencesOf(locations, uri).inFile]);
+        } catch {
+            return undefined;
+        }
+    }
+
     /* 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;

package/src/rendered-docs.ts

@@ -1,4 +1,5 @@
 import { findDocComments, type DocComment, type EditorPosition, type EditorRange, type EditorReplacement, type EditorTrackedRange } from '@adecore/editor';
+import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { parseDocComment, type ParsedDocComment } from './doc-comment-model.ts';
 import { isShortcut } from './shortcut-keys.ts';
@@ -16,6 +17,8 @@ const MAX_PARSED = 200;
 export interface RenderedDocsSettings {
     /* Draw every documentation comment as formatted text, as the Reader mode of the documentation does. Off by default. */
     readonly renderDocComments: boolean;
+    /* Off draws no buttons, ignores the shortcut and shows every comment as source; on unless false. */
+    readonly enabled?: boolean;
 }
 
 /* A documentation comment the editor drew a row for, and the element of that row. */
@@ -69,6 +72,7 @@ export class RenderedDocsFeature {
     private readonly language: EditorLanguage;
     private readonly timers: Timers;
     private settings: RenderedDocsSettings = { renderDocComments: false };
+    private enabled = true;
     private comments: DocComment[] = [];
     private overrides: Override[] = [];
     private readonly containers = new Map<string, HTMLElement>();
@@ -111,9 +115,9 @@ export class RenderedDocsFeature {
                     this.toggleAt(line);
                 }
             }),
-            editor.onKeyDown((event) => {
+            language.onKey((event) => {
                 return isShortcut(this.language.shortcuts.toggleRenderedDocs, event) && this.toggle();
-            }),
+            }, KEY_PRIORITY.renderedDocs),
             editor.onViewChange(() => {
                 this.sweep();
                 this.releaseRevealed();
@@ -140,11 +144,16 @@ export class RenderedDocsFeature {
 
     /* Whether every documentation comment is drawn as text until a person switches it. Changing it puts every comment back under it. */
     configure(settings: RenderedDocsSettings): void {
-        if (settings.renderDocComments === this.settings.renderDocComments) {
+        const enabled = settings.enabled !== false;
+        if (settings.renderDocComments === this.settings.renderDocComments && enabled === this.enabled) {
             return;
         }
+        const sameRendering = settings.renderDocComments === this.settings.renderDocComments;
         this.settings = settings;
-        this.clearOverrides();
+        this.enabled = enabled;
+        if (!sameRendering) {
+            this.clearOverrides();
+        }
         this.publish();
     }
 
@@ -162,7 +171,7 @@ export class RenderedDocsFeature {
     toggle(): boolean {
         this.settle();
         const comment = this.at(this.language.editor.getCaret().line);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -173,7 +182,7 @@ export class RenderedDocsFeature {
     toggleAt(startLine: number): boolean {
         this.settle();
         const comment = this.comments.find((candidate) => candidate.startLine === startLine);
-        if (comment === undefined || !this.canRender(comment)) {
+        if (!this.enabled || comment === undefined || !this.canRender(comment)) {
             return false;
         }
         this.setRendered(comment, !this.wantsRendered(comment));
@@ -225,7 +234,7 @@ export class RenderedDocsFeature {
     }
 
     private wantsRendered(comment: DocComment): boolean {
-        if (!this.canRender(comment)) {
+        if (!this.enabled || !this.canRender(comment)) {
             return false;
         }
         const start = startOf(comment);
@@ -375,7 +384,7 @@ export class RenderedDocsFeature {
             this.bump();
         }
         this.markerLines.clear();
-        const markers = this.comments.map((comment) => {
+        const markers = (this.enabled ? this.comments : []).map((comment) => {
             const id = `docs:${comment.startLine}`;
             this.markerLines.set(id, comment.startLine);
             const on = this.wantsRendered(comment);

package/src/signature.ts

@@ -1,4 +1,5 @@
 import type { SignatureHelp, SignatureHelpContext } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.ts';
 import type { EditorPosition, EditorTextChange } from '@adecore/editor';
 import type { EditorLanguage } from './editor-language.ts';
 import { signatureViewOf } from './signature-model.ts';
@@ -30,8 +31,8 @@ export class SignatureFeature {
             editor.onTextChange((change) => this.edited(change)),
             editor.onCaret(() => this.retrigger()),
             editor.onBlur(() => this.close()),
-            editor.onKeyDown((event) => {
-                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy == null) {
+            language.onKey((event) => {
+                if (event.key === 'Escape' && this.isOpen && this.language.popups.getState().callHierarchy === null) {
                     this.close();
                     return true;
                 }
@@ -43,7 +44,7 @@ export class SignatureFeature {
                     return this.cycle(event.key === 'ArrowDown' ? 1 : -1);
                 }
                 return false;
-            })
+            }, KEY_PRIORITY.signature)
         ];
         language.onDispose(() => {
             for (const off of offs) {

package/src/snippet-session.ts

@@ -3,6 +3,7 @@ import { SnippetFieldTransforms, type FieldTransformTarget } from './snippet-fie
 import { SnippetTransformError } from './snippet-transform-client.ts';
 import { acquireSnippetTransforms, type SnippetTransformLease } from './snippet-transform-queue.ts';
 import { realTimers, type Timers } from './timers.ts';
+import { KEY_PRIORITY } from './key-priority.ts';
 import { MAX_TRANSFORM_CHARACTERS, type SnippetTransformJob } from './snippet-transform-protocol.ts';
 import type { EditorContentChange, EditorPosition, EditorRange, EditorTextChange } from '@adecore/editor';
 import { comparePositions, rangeHolds, shiftPosition } from './diagnostics-model.ts';
@@ -79,7 +80,7 @@ export interface SnippetInsertion {
     readonly fields?: readonly SnippetField[];
 }
 
-type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project'>>;
+type SnippetHost = Pick<EditorLanguage, 'editor' | 'onDispose'> & Partial<Pick<EditorLanguage, 'popups' | 'pick' | 'project' | 'onKey'>>;
 const MAX_FRAMES = 8;
 const MAX_RANGES = 1000;
 
@@ -185,7 +186,12 @@ export class SnippetFeature {
         this.transforms = language.project === undefined ? null : acquireSnippetTransforms(language.project, timers);
         const { editor } = language;
         this.fieldTransforms = new SnippetFieldTransforms(editor, this.transforms, (targets, values) => this.applyFieldTransforms(targets, values));
-        const offs = [editor.onKeyDown((event) => this.key(event)), editor.onTextChange((change) => this.edited(change)), editor.onCaret(() => this.moved())];
+        const key = (event: KeyboardEvent): boolean => this.key(event);
+        const offs = [
+            language.onKey === undefined ? editor.onKeyDown(key) : language.onKey(key, KEY_PRIORITY.snippets),
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret(() => this.moved())
+        ];
         language.onDispose(() => {
             this.transforms?.dispose();
             this.end();
@@ -492,7 +498,7 @@ export class SnippetFeature {
             const popups = this.language.popups?.getState();
             if (
                 popups !== undefined &&
-                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy ?? null].some((popup) => popup !== null)
+                [popups.completion, popups.signature, popups.hover, popups.pick, popups.peek, popups.callHierarchy].some((popup) => popup !== null)
             ) {
                 return false;
             }

package/src/symbol-picker.ts

@@ -1,4 +1,5 @@
 import { StaleResultError, type Location } from '@adecore/lsp';
+import { KEY_PRIORITY } from './key-priority.ts';
 import { basenameOf } from './paths.ts';
 import type { EditorLanguage } from './editor-language.ts';
 import { entriesOf, workspaceEntriesOf, type SymbolEntry, type WorkspaceEntry } from './symbol-picker-model.ts';
@@ -17,13 +18,13 @@ export class SymbolPickerFeature {
 
     constructor(language: EditorLanguage) {
         this.language = language;
-        const off = language.editor.onKeyDown((event) => {
+        const off = language.onKey((event) => {
             if (!isShortcut(this.language.shortcuts.goToSymbol, event)) {
                 return false;
             }
             void this.open();
             return true;
-        });
+        }, KEY_PRIORITY.symbolPicker);
         language.onDispose(() => {
             off();
             this.close();

package/src/timers.ts

@@ -43,3 +43,8 @@ export class ManualTimers implements Timers {
         return this.pending.size;
     }
 }
+
+/* Scrolls a row the editor opened under the caret line into view, which may sit at the bottom of the view with the row below the fold. The element is in the page a turn later. */
+export function revealRow(timers: Timers, container: HTMLElement): void {
+    timers.set(() => container.scrollIntoView?.({ block: 'nearest' }), 0);
+}

package/src/use-panel-body.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import type { EditorLanguage } from './editor-language.ts';
+import { clampPanelBody } from './panel-size.ts';
+
+/* The body height of a panel, from the project that remembers it for the next one; `commit` hands it to the host. */
+export function usePanelBody(language: EditorLanguage): { height: number; set(height: number): void; commit(height: number): void } {
+    const { project } = language;
+    const [height, set] = useState(() => clampPanelBody(project.panelBodyHeight));
+
+    useEffect(() => project.onPanelBodyChange((value) => set(clampPanelBody(value))), [project]);
+
+    return {
+        height,
+        set,
+        commit: (value) => project.resizePanelBody(value)
+    };
+}

package/dist/relative-time.d.ts

@@ -1 +0,0 @@
-export declare function relativeTime(at: number, now: number): string;

package/dist/relative-time.js

@@ -1,9 +0,0 @@
-import { formatAgo, formatDay, formatDayWithYear } from '@adecore/ui/format';
-export function relativeTime(at, now) {
-    const seconds = Math.max(0, now - at);
-    if (seconds < 7 * 24 * 60 * 60) {
-        return formatAgo(seconds * 1000);
-    }
-    const date = new Date(at * 1000);
-    return date.getFullYear() === new Date(now * 1000).getFullYear() ? formatDay(date) : formatDayWithYear(date);
-}

package/src/relative-time.ts

@@ -1,10 +0,0 @@
-import { formatAgo, formatDay, formatDayWithYear } from '@adecore/ui/format';
-
-export function relativeTime(at: number, now: number): string {
-    const seconds = Math.max(0, now - at);
-    if (seconds < 7 * 24 * 60 * 60) {
-        return formatAgo(seconds * 1000);
-    }
-    const date = new Date(at * 1000);
-    return date.getFullYear() === new Date(now * 1000).getFullYear() ? formatDay(date) : formatDayWithYear(date);
-}