@adecore/editor-react 0.39.0 → 0.40.1

package/src/peek.ts

@@ -8,8 +8,10 @@ import type { PeekView } from './popups.ts';
 import { isShortcut } from './shortcut-keys.ts';
 import { messageOf } from './error-message.ts';
 import { realTimers, revealRow, type Timers } from './timers.ts';
+import { placeKey, uniqueBy } from './unique.ts';
 
 const TOAST_ID = 'language-peek';
+
 /* The block as the panel draws it: a hatched band, the header, eight lines of code and a hatched band, until the editor has measured it. */
 export const PEEK_HEIGHT = 241;
 
@@ -20,10 +22,6 @@ const KINDS = {
     definitions: { method: 'textDocument/definition', unavailable: 'unavailableDefinition', none: 'noDefinition' }
 } as const;
 
-function placeKey(location: Location): string {
-    return `${location.uri}\0${location.range.start.line}\0${location.range.start.character}`;
-}
-
 /*
  * The references of the name at the caret, between the lines of the file under the line it is on. The
  * editor keeps the keyboard: arrows pick a reference, Enter goes to it and Escape closes the peek; typing
@@ -33,8 +31,10 @@ export class PeekFeature {
     private readonly language: EditorLanguage;
     private readonly timers: Timers;
     private kind: PeekKind = 'references';
+
     /* The whole declaration of each place of a definition peek, where the server gave it. */
     private targets = new Map<string, Range>();
+
     private texts = new Map<string, string>();
     private places = new Map<string, Location>();
     private order: string[] = [];
@@ -45,24 +45,31 @@ export class PeekFeature {
         this.language = language;
         this.timers = timers;
         const { editor } = language;
+
         const offs = [
             language.onKey((event) => {
                 if (isShortcut(this.language.shortcuts.peekReferences, event)) {
                     void this.open();
+
                     return true;
                 }
+
                 if (isShortcut(this.language.shortcuts.peekDefinition, event)) {
                     void this.openDefinition();
+
                     return true;
                 }
+
                 return this.key(event);
             }, KEY_PRIORITY.peek),
             editor.onTextChange(() => this.close())
         ];
+
         language.onDispose(() => {
             for (const off of offs) {
                 off();
             }
+
             this.close();
         });
     }
@@ -74,61 +81,69 @@ export class PeekFeature {
     async open(position: EditorPosition = this.language.editor.getCaret(), kind: PeekKind = 'references'): Promise<void> {
         const { editor, project, uri } = this.language;
         const method = KINDS[kind].method;
+
         if (!project.service.supports(method, uri)) {
             this.tell(this.say(KINDS[kind].unavailable));
+
             return;
         }
+
         const token = ++this.token;
         let found: { locations: Location[]; targets: Map<string, Range> };
+
         try {
             found = await this.fetch(kind, position);
         } catch (error) {
             if (!(error instanceof StaleResultError)) {
                 this.tell(this.say('failed', { message: messageOf(error) }));
             }
+
             return;
         }
+
         if (token !== this.token) {
             return;
         }
+
         const { targets } = found;
-        const seen = new Set<string>();
-        const unique = found.locations.filter((location) => {
-            const key = placeKey(location);
-            if (seen.has(key)) {
-                return false;
-            }
-            seen.add(key);
-            return true;
-        });
+        const unique = uniqueBy(found.locations, placeKey);
+
         if (unique.length === 0) {
             this.tell(this.say(KINDS[kind].none));
+
             return;
         }
+
         const uris = [...new Set(unique.map((location) => location.uri))].slice(0, PEEK_READ_FILES);
         const texts = new Map<string, string>();
+
         await Promise.all(
             uris.map(async (target) => {
                 const text = await project.readText(target);
+
                 if (text !== null) {
                     texts.set(target, text);
                 }
             })
         );
+
         if (token !== this.token) {
             return;
         }
+
         this.texts = texts;
         this.kind = kind;
         this.targets = targets;
         const files = peekFilesOf(unique, uri, (target) => texts.get(target) ?? null);
         this.places = new Map(files.flatMap((file: PeekFile) => file.places.map((place) => [place.id, place.location] as const)));
         this.order = files.flatMap((file) => file.places.map((place) => place.id));
+
         // The references open on the first place that is not the one the caret is on, which is what a person came to see.
         const first =
             kind === 'definitions'
                 ? files[0]!.places[0]!
                 : (files.flatMap((file) => file.places).find((place) => !(place.location.uri === uri && place.line === position.line)) ?? files[0]!.places[0]!);
+
         this.line = position.line;
         this.language.callHierarchy.close();
         this.language.popups.setState({ peek: { kind, container: null, files, active: first.id, collapsed: [], count: unique.length, preview: null } });
@@ -146,20 +161,25 @@ export class PeekFeature {
 
     private async fetch(kind: PeekKind, position: EditorPosition): Promise<{ locations: Location[]; targets: Map<string, Range> }> {
         const { project, uri } = this.language;
+
         if (kind === 'references') {
             // Without the declaration, so the list holds what the usages count above a declaration counts.
             return { locations: (await project.service.references(uri, position, false)) ?? [], targets: new Map() };
         }
+
         const places = uniquePlaces(await project.service.definition(uri, position));
         const targets = new Map(places.flatMap(({ location, target }) => (target === null ? [] : [[placeKey(location), target] as const])));
+
         return { locations: places.map(({ location }) => location), targets };
     }
 
     close(): void {
         this.token++;
+
         if (this.language.popups.getState().peek === null) {
             return;
         }
+
         this.language.popups.setState({ peek: null });
         this.language.editor.setWidgets([]);
         this.language.editor.focus();
@@ -169,23 +189,28 @@ export class PeekFeature {
     select(id: string): void {
         const view = this.language.popups.getState().peek;
         const location = this.places.get(id);
+
         if (view === null || location === undefined) {
             return;
         }
+
         const text = this.texts.get(location.uri);
         const line = location.range.start.line;
+
         const snippet =
             text === undefined
                 ? null
                 : this.kind === 'definitions'
                   ? definitionSnippetOf(text, line, this.targets.get(placeKey(location)) ?? null, location.range)
                   : snippetOf(text, line, location.range);
+
         this.language.popups.setState({ peek: { ...view, active: id, preview: snippet === null ? null : { ...snippet, uri: location.uri } } });
     }
 
     /* Folds the places of a file away from the list, or brings them back. */
     toggleFile(uri: string): void {
         const view = this.language.popups.getState().peek;
+
         if (view !== null) {
             const collapsed = view.collapsed.includes(uri) ? view.collapsed.filter((other) => other !== uri) : [...view.collapsed, uri];
             this.language.popups.setState({ peek: { ...view, collapsed } });
@@ -195,6 +220,7 @@ export class PeekFeature {
     /* Goes to a place and closes the peek. */
     go(id: string): void {
         const location = this.places.get(id);
+
         if (location !== undefined) {
             this.close();
             this.language.goTo(location);
@@ -203,6 +229,7 @@ export class PeekFeature {
 
     private mounted(container: HTMLElement): void {
         const view = this.language.popups.getState().peek;
+
         if (view !== null && view.container !== container) {
             this.language.popups.setState({ peek: { ...view, container } });
             revealRow(this.timers, container);
@@ -211,21 +238,27 @@ export class PeekFeature {
 
     private key(event: KeyboardEvent): boolean {
         const view = this.language.popups.getState().peek;
+
         if (view === null || event.metaKey || event.ctrlKey || event.altKey) {
             return false;
         }
+
         switch (event.key) {
             case 'ArrowDown':
                 this.step(view, 1);
+
                 return true;
             case 'ArrowUp':
                 this.step(view, -1);
+
                 return true;
             case 'Enter':
                 this.go(view.active);
+
                 return true;
             case 'Escape':
                 this.close();
+
                 return true;
             default:
                 return false;
@@ -235,10 +268,13 @@ export class PeekFeature {
     /* The next place in the list a person can see, which a folded file has none of. */
     private step(view: PeekView, direction: 1 | -1): void {
         const index = this.order.indexOf(view.active);
+
         for (let next = index + direction; next >= 0 && next < this.order.length; next += direction) {
             const id = this.order[next]!;
+
             if (!view.collapsed.includes(this.places.get(id)!.uri)) {
                 this.select(id);
+
                 return;
             }
         }

package/src/pick.ts

@@ -37,24 +37,29 @@ export class PickFeature {
     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 = [
             language.onKey((event) => this.key(event), KEY_PRIORITY.pick),
             editor.onTextChange(() => this.close()),
             editor.onCaret(() => this.close()),
             editor.onBlur(() => this.close())
         ];
+
         language.onDispose(() => {
             for (const off of offs) {
                 off();
             }
+
             this.close();
         });
     }
@@ -66,9 +71,11 @@ export class PickFeature {
     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;
@@ -81,6 +88,7 @@ export class PickFeature {
         if (this.spec === null) {
             return;
         }
+
         this.spec = null;
         this.timers.clear(this.previewTimer);
         this.controller?.abort();
@@ -96,28 +104,37 @@ export class PickFeature {
     /* 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);
             });
@@ -127,6 +144,7 @@ export class PickFeature {
         if (id === this.active) {
             return;
         }
+
         this.active = id;
         this.controller?.abort();
         this.publish(null);
@@ -137,40 +155,51 @@ export class PickFeature {
         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':
                 this.choose(this.active);
+
                 return true;
             case 'Tab': {
                 const spec = this.spec;
+
                 if (spec.onTab !== undefined) {
                     this.close();
                     spec.onTab(event.shiftKey);
                 } else {
                     this.choose(this.active);
                 }
+
                 return true;
             }
             case 'Escape':
                 this.close();
+
                 return true;
             default:
                 return false;
@@ -180,13 +209,17 @@ export class PickFeature {
     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) {
@@ -199,9 +232,11 @@ export class PickFeature {
 
     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-focus.ts

@@ -1,4 +1,5 @@
-import type { FocusEvent, MouseEvent } from 'react';
+import { useLayoutEffect, type FocusEvent, type MouseEvent } from 'react';
+import type { EditorLanguage } from './editor-language.ts';
 
 /*
  * The handlers for a popup list whose rows the keyboard never enters: the text it belongs to keeps the
@@ -15,3 +16,12 @@ export function keepFocusOutOfList(focusBack: () => void): {
         onFocus: () => focusBack()
     };
 }
+
+/* The focus stays in the text, so the input is what names the popup's list and its active option. */
+export function useInputPopup(language: EditorLanguage, controls: string, activeDescendant: string | undefined): void {
+    useLayoutEffect(() => {
+        language.editor.setInputPopup({ controls, activeDescendant });
+
+        return () => language.editor.setInputPopup(null);
+    }, [language, controls, activeDescendant]);
+}

package/src/popup-placement.ts

@@ -38,6 +38,7 @@ export function placePopup(anchor: EditorRect, size: PopupSize, window: PopupSiz
     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' };
 }
 
@@ -54,11 +55,15 @@ export function placeBeside(
 ): 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

@@ -20,7 +20,6 @@ export interface HoverView {
     /* 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;
 }
 
@@ -29,13 +28,12 @@ export interface HoverInfo {
     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. */
+    /* How many other places use the symbol; null until a server has counted them. */
     readonly references: number | null;
-    /* Only the text: no footer for the definition and the references, which a card made of someone else's words has none of. */
+    /* Only the text, without the footer for the definition and the references. */
     readonly plain?: boolean;
 }
 
-/* One line of the suggestions list. */
 export interface CompletionRow {
     readonly label: string;
     readonly kind: number | undefined;
@@ -56,7 +54,6 @@ export interface CompletionDocs {
     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;
@@ -65,7 +62,6 @@ export interface CompletionView {
     /* 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;

package/src/project-language.ts

@@ -32,12 +32,15 @@ class DocumentSync {
         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);
     }
@@ -54,6 +57,7 @@ class DocumentSync {
 
     private changed(changes: readonly ContentChange[]): void {
         this.pending.push(...changes);
+
         if (this.opened) {
             this.flush();
         }
@@ -63,6 +67,7 @@ class DocumentSync {
         if (this.pending.length === 0) {
             return;
         }
+
         const changes = this.pending;
         this.pending = [];
         void this.service.changeDocument(this.uri, changes).catch(() => undefined);
@@ -82,6 +87,7 @@ function filesOf(targets: readonly FileOperationTarget[]): Array<{ uri: string;
     return targets.map((target) => {
         const { path, directory } =
             typeof target === 'string' ? { path: target, directory: false } : { path: target.path, directory: target.directory === true };
+
         return { uri: pathToFileUri(path), directory };
     });
 }
@@ -99,8 +105,10 @@ 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;
@@ -119,6 +127,7 @@ export class ProjectLanguage {
     /* 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);
     }
 
@@ -126,6 +135,7 @@ export class ProjectLanguage {
         if (height === this.panelBodyHeight) {
             return;
         }
+
         this.panelBodyHeight = height;
         this.panelListeners.forEach((listener) => listener(height));
         this.host.onPanelResize?.(height);
@@ -135,13 +145,16 @@ export class ProjectLanguage {
         if (this.host.pathOfUri !== undefined) {
             return this.host.pathOfUri(uri);
         }
+
         const path = fileUriToPath(uri);
+
         return path !== null && this.folder !== '' ? relativeTo(path, this.folder) : 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> {
         const { service } = this;
+
         return applyWorkspaceEdit(edit, {
             editorOf: (uri) => this.holders.get(uri)?.editors[0],
             files: this.files,
@@ -175,10 +188,13 @@ export class ProjectLanguage {
     /* 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);
     }
 
@@ -201,16 +217,20 @@ export class ProjectLanguage {
         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;
     }
 
@@ -219,13 +239,17 @@ export class ProjectLanguage {
         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,
@@ -243,20 +267,25 @@ export class ProjectLanguage {
 
     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 undefined;
                     }
+
                     return this.service.closeDocument(uri);
                 })
                 .catch(() => undefined);
@@ -271,15 +300,19 @@ export class ProjectLanguage {
         if (this.disposed) {
             return;
         }
+
         this.disposed = true;
         disposeSnippetTransforms(this);
+
         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();
     }