@adecore/editor-react 0.41.1 → 0.43.0

package/src/completion.ts

@@ -236,7 +236,7 @@ export class CompletionFeature {
 
         recentChoicesOf(this.language.languageId).record(entry.item);
         let item = this.resolved.get(entry.item) ?? entry.item;
-        const needsResolve = !this.resolved.has(entry.item) && project.service.providerOptions('completionItem/resolve', uri) !== undefined;
+        const needsResolve = !this.resolved.has(entry.item) && this.language.service.providerOptions('completionItem/resolve', uri) !== undefined;
         this.close();
 
         if (needsResolve) {
@@ -522,7 +522,7 @@ export class CompletionFeature {
 
     /* Parameter info for a call that was opened (or that the server asks for), then the item's own command. */
     private afterInsert(item: CompletionItem, commit: string | undefined, lineBefore: string): void {
-        const { editor, project, uri, signature } = this.language;
+        const { editor, uri, signature } = this.language;
         const { start } = editor.getSelection();
         const insideCall = start.character > 0 && editor.textInRange({ start: { line: start.line, character: start.character - 1 }, end: start }) === '(';
 
@@ -539,7 +539,7 @@ export class CompletionFeature {
         if (command.command === PARAMETER_HINTS_COMMAND) {
             signature.trigger();
         } else {
-            project.service.executeCommand(uri, command).catch(() => undefined);
+            this.language.service.executeCommand(uri, command).catch(() => undefined);
         }
     }
 
@@ -549,10 +549,10 @@ export class CompletionFeature {
      * suggestion is resolved in that one; an item that cannot be resolved is still inserted as it is.
      */
     private async resolveNow(item: CompletionItem, signal: AbortSignal): Promise<CompletionItem> {
-        const { editor, project, uri } = this.language;
+        const { editor, uri } = this.language;
 
         try {
-            return { ...item, ...(await project.service.resolveCompletion(uri, item, { signal })) };
+            return { ...item, ...(await this.language.service.resolveCompletion(uri, item, { signal })) };
         } catch (error) {
             if (!(error instanceof StaleResultError)) {
                 return item;
@@ -560,11 +560,11 @@ export class CompletionFeature {
         }
 
         try {
-            const fresh = itemsOf(await project.service.completion(uri, editor.getCaret(), { triggerKind: 1 }, { signal })).items.find(
+            const fresh = itemsOf(await this.language.service.completion(uri, editor.getCaret(), { triggerKind: 1 }, { signal })).items.find(
                 (candidate) => candidate.label === item.label && candidate.kind === item.kind
             );
 
-            return fresh === undefined ? item : { ...fresh, ...(await project.service.resolveCompletion(uri, fresh, { signal }).catch(() => fresh)) };
+            return fresh === undefined ? item : { ...fresh, ...(await this.language.service.resolveCompletion(uri, fresh, { signal }).catch(() => fresh)) };
         } catch {
             return item;
         }
@@ -703,15 +703,15 @@ export class CompletionFeature {
     }
 
     private triggerCharacters(): readonly string[] {
-        const { project, uri } = this.language;
+        const { uri } = this.language;
 
-        return project.service.providerOptions(METHOD, uri)?.triggerCharacters ?? [];
+        return this.language.service.providerOptions(METHOD, uri)?.triggerCharacters ?? [];
     }
 
     private beginRequest(context: CompletionContext, delay: number): void {
-        const { project, uri } = this.language;
+        const { uri } = this.language;
 
-        if (!project.service.supports(METHOD, uri)) {
+        if (!this.language.service.supports(METHOD, uri)) {
             return;
         }
 
@@ -729,7 +729,7 @@ export class CompletionFeature {
         let normalized: ReturnType<typeof itemsOf>;
 
         try {
-            const result = await project.service.completion(uri, position, context, { signal: controller.signal });
+            const result = await this.language.service.completion(uri, position, context, { signal: controller.signal });
 
             if (request !== this.request || this.controller !== controller || controller.signal.aborted) {
                 return;
@@ -839,12 +839,12 @@ export class CompletionFeature {
     }
 
     private scheduleResolve(): void {
-        const { project, uri } = this.language;
+        const { uri } = this.language;
         this.timers.clear(this.resolveTimer);
         this.resolving?.abort();
         const entry = this.ranked[this.active];
 
-        if (entry === undefined || this.resolved.has(entry.item) || project.service.providerOptions('completionItem/resolve', uri) === undefined) {
+        if (entry === undefined || this.resolved.has(entry.item) || this.language.service.providerOptions('completionItem/resolve', uri) === undefined) {
             return;
         }
 
@@ -854,7 +854,7 @@ export class CompletionFeature {
             const controller = new AbortController();
             this.resolving = controller;
 
-            void project.service
+            void this.language.service
                 .resolveCompletion(uri, entry.item, { signal: controller.signal })
                 .then((item) => {
                     this.resolved.set(entry.item, { ...entry.item, ...item });

package/src/context-menu-rows.ts

@@ -1,7 +1,7 @@
 import type { KeymapId } from '@adecore/editor/keymap';
 import type { NavigationKind } from './navigation.ts';
 
-export type MenuRowId = NavigationKind | 'peekReferences' | 'callHierarchy' | 'renameSymbol' | 'codeActions';
+export type MenuRowId = NavigationKind | 'peekReferences' | 'callHierarchy' | 'typeHierarchy' | 'renameSymbol' | 'codeActions';
 
 export interface MenuRowSpec {
     readonly id: MenuRowId;
@@ -19,7 +19,8 @@ const GO_TO: readonly MenuRowSpec[] = [
 
 const REFERENCES: readonly MenuRowSpec[] = [
     { id: 'peekReferences', method: 'textDocument/references', shortcut: 'peekReferences' },
-    { id: 'callHierarchy', method: 'textDocument/prepareCallHierarchy', shortcut: 'callHierarchy' }
+    { id: 'callHierarchy', method: 'textDocument/prepareCallHierarchy', shortcut: 'callHierarchy' },
+    { id: 'typeHierarchy', method: 'textDocument/prepareTypeHierarchy', shortcut: 'typeHierarchy' }
 ];
 
 const CHANGES: readonly MenuRowSpec[] = [

package/src/definition-link.ts

@@ -34,8 +34,8 @@ export function followModKey(apple: boolean, onHeld: (held: boolean) => void): (
 
 /*
  * The name under the pointer drawn as a link while Cmd (Ctrl elsewhere) is held and a server knows where it
- * is defined, which is what a Mod+click on it follows. The editor only says where the pointer is, so the
- * key comes from the window.
+ * is defined, which is what a Mod+click on it follows. A document link under the pointer goes first. The
+ * editor only says where the pointer is, so the key comes from the window.
  */
 export class DefinitionLinkFeature {
     private readonly language: EditorLanguage;
@@ -90,13 +90,25 @@ export class DefinitionLinkFeature {
     private update(): void {
         const { pointer } = this;
 
-        if (!this.held || pointer === null || !this.language.project.service.supports('textDocument/definition', this.language.uri)) {
+        const link = pointer === null ? null : this.language.links.rangeAt(pointer);
+        if (this.held && link !== null) {
+            const key = `link:${link.start.line}:${link.start.character}`;
+            if (key !== this.shownKey) {
+                this.clear();
+                this.shownKey = key;
+                this.drawn = true;
+                this.language.editor.setLink(link);
+            }
+            return;
+        }
+
+        if (!this.held || pointer === null || !this.language.service.supports('textDocument/definition', this.language.uri)) {
             this.clear();
 
             return;
         }
 
-        const { editor, project, uri } = this.language;
+        const { editor, uri } = this.language;
         const line = lineTextOf(editor, pointer.line);
         const word = isIdentifierCharacter(line[pointer.character] ?? '') ? wordRangeAt(line, pointer) : null;
 
@@ -118,7 +130,7 @@ export class DefinitionLinkFeature {
         const controller = new AbortController();
         this.lookup = controller;
 
-        project.service
+        this.language.service
             .definition(uri, pointer, { signal: controller.signal })
             .then((result) => {
                 if (request === this.request && locationsOf(result).length > 0) {

package/src/document-colors.ts

@@ -0,0 +1,189 @@
+import type { EditorContentChange, EditorInlayClick, EditorInlayHint } from '@adecore/editor';
+import type { Color, ColorInformation, ColorPresentation, TextEdit } from '@adecore/lsp';
+import { DocumentQuery } from './document-query.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/documentColor';
+const OWNER = 'document-colors';
+const DELAY_MS = 500;
+const ID_PREFIX = 'color-';
+const OTHER_COLOR = 'other';
+
+/* A color of LSP, each part from 0 to 1, as CSS draws it. */
+export function cssColorOf(color: Color): string {
+    const part = (value: number): string => String(Math.round(Math.min(1, Math.max(0, value)) * 1000) / 1000);
+    return `color(srgb ${part(color.red)} ${part(color.green)} ${part(color.blue)} / ${part(color.alpha)})`;
+}
+
+/* `#rrggbb` of an `<input type="color">` as a color of LSP, opaque. */
+export function colorOfHex(value: string): Color | null {
+    const match = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})$/i.exec(value);
+    if (match === null) {
+        return null;
+    }
+    return { red: parseInt(match[1]!, 16) / 255, green: parseInt(match[2]!, 16) / 255, blue: parseInt(match[3]!, 16) / 255, alpha: 1 };
+}
+
+function hexOf(color: Color): string {
+    const part = (value: number): string =>
+        Math.round(Math.min(1, Math.max(0, value)) * 255)
+            .toString(16)
+            .padStart(2, '0');
+    return `#${part(color.red)}${part(color.green)}${part(color.blue)}`;
+}
+
+/* The edits a presentation makes: its own text edit, or its label over the color, and the edits that come with it. */
+export function presentationEdits(presentation: ColorPresentation, information: ColorInformation): TextEdit[] {
+    return [presentation.textEdit ?? { range: information.range, newText: presentation.label }, ...(presentation.additionalTextEdits ?? [])];
+}
+
+/*
+ * The colors a server finds in the text, such as `#ff0000` in a stylesheet, each with a swatch before it. A press on
+ * a swatch lists the ways the server writes that color, so `rgb()` can become `#hex`, and offers a color of the
+ * platform's picker, which keeps the way the color was written when the server offers it.
+ */
+export class DocumentColorsFeature {
+    private readonly language: EditorLanguage;
+    private colors: readonly ColorInformation[] = [];
+    private readonly query: DocumentQuery<ColorInformation[]>;
+    private enabled = true;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.query = new DocumentQuery(
+            language,
+            timers,
+            DELAY_MS,
+            (signal) => (this.enabled && this.supported ? language.service.documentColors!(language.uri, { signal }) : Promise.resolve(null)),
+            (colors) => this.show(colors ?? [])
+        );
+        const { editor } = language;
+        if (editor.onInlayClick !== undefined) {
+            language.onDispose(editor.onInlayClick((click) => this.pressed(click)));
+        }
+        language.onDispose(() => editor.setInlayHints([], OWNER));
+    }
+
+    get supported(): boolean {
+        const { service } = this.language;
+        return service.documentColors !== undefined && service.supports(METHOD, this.language.uri);
+    }
+
+    /* The colors of the current text, empty while an edit waits for the next answer. */
+    all(): readonly ColorInformation[] {
+        return this.colors;
+    }
+
+    /* Off, there are no swatches; on unless false. */
+    configure(settings: { readonly enabled?: boolean }): void {
+        this.enabled = settings.enabled !== false;
+        if (this.enabled) {
+            this.query.run();
+        } else {
+            this.show([]);
+        }
+    }
+
+    /* The ways the server writes a color found in the text, for a menu of the host. */
+    async presentations(information: ColorInformation, color: Color = information.color): Promise<ColorPresentation[]> {
+        const { service } = this.language;
+        if (service.colorPresentations === undefined) {
+            return [];
+        }
+        try {
+            return (await service.colorPresentations(this.language.uri, color, information.range)) ?? [];
+        } catch {
+            return [];
+        }
+    }
+
+    /* Writes a presentation in place of the color it was asked for; false when the text moved on since. */
+    apply(presentation: ColorPresentation, information: ColorInformation): boolean {
+        if (!this.colors.includes(information)) {
+            return false;
+        }
+        const changes: EditorContentChange[] = presentationEdits(presentation, information).map((edit) => ({ range: edit.range, text: edit.newText }));
+        return this.language.editor.applyEdits(changes);
+    }
+
+    private show(colors: readonly ColorInformation[]): void {
+        this.colors = colors;
+        const hints: EditorInlayHint[] = colors.map((information, index) => ({
+            id: `${ID_PREFIX}${index}`,
+            position: information.range.start,
+            label: this.language.project.i18n.t('editor:language.colors.swatch', { color: hexOf(information.color) }),
+            swatch: cssColorOf(information.color),
+            paddingRight: true
+        }));
+        this.language.editor.setInlayHints(hints, OWNER);
+    }
+
+    private pressed(click: EditorInlayClick): boolean {
+        if (!click.id.startsWith(ID_PREFIX)) {
+            return false;
+        }
+        const information = this.colors[Number(click.id.slice(ID_PREFIX.length))];
+        if (information === undefined) {
+            return false;
+        }
+        void this.open(information);
+        return true;
+    }
+
+    private async open(information: ColorInformation): Promise<void> {
+        const presentations = await this.presentations(information);
+        if (!this.colors.includes(information)) {
+            return;
+        }
+        const { pick, project } = this.language;
+        const rows = presentations.map((presentation, index) => ({ id: String(index), label: presentation.label, detail: '' }));
+        pick.open({
+            anchor: information.range.start,
+            title: project.i18n.t('editor:language.colors.title'),
+            groups: [
+                { title: null, rows },
+                { title: null, rows: [{ id: OTHER_COLOR, label: project.i18n.t('editor:language.colors.other'), detail: '' }] }
+            ],
+            accept: (id) => {
+                if (id === OTHER_COLOR) {
+                    this.choose(information, presentations);
+                } else {
+                    this.apply(presentations[Number(id)]!, information);
+                }
+            }
+        });
+    }
+
+    /* The platform's color picker; the new color is written the way the old one was when the server offers that. */
+    private choose(information: ColorInformation, before: readonly ColorPresentation[]): void {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        const written = this.language.editor.textInRange(information.range);
+        const form = Math.max(
+            0,
+            before.findIndex((presentation) => presentation.label === written)
+        );
+        const input = document.createElement('input');
+        input.type = 'color';
+        input.value = hexOf(information.color);
+        input.addEventListener(
+            'change',
+            () => {
+                const color = colorOfHex(input.value);
+                if (color === null) {
+                    return;
+                }
+                void this.presentations(information, { ...color, alpha: information.color.alpha }).then((presentations) => {
+                    const presentation = presentations[form] ?? presentations[0];
+                    if (presentation !== undefined) {
+                        this.apply(presentation, information);
+                    }
+                });
+            },
+            { once: true }
+        );
+        input.click();
+    }
+}

package/src/document-links.ts

@@ -0,0 +1,129 @@
+import type { EditorPosition, EditorRange } from '@adecore/editor';
+import type { DocumentLink } from '@adecore/lsp';
+import { comparePositions } from './diagnostics-model.ts';
+import { DocumentQuery } from './document-query.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/documentLink';
+const RESOLVE = 'documentLink/resolve';
+/* How long after the last edit the links are asked again. */
+const DELAY_MS = 500;
+/* `#L12`, `#12` or `#L12,4`: a line, from one, and a column, from one, the form editors write into a link. */
+const LINE_FRAGMENT = /^#L?(\d+)(?:[,:C](\d+))?$/i;
+
+/* Where a link to a file of the editor lands, from the line its fragment names; the start of the file without one. */
+export function linkPosition(target: string): { readonly uri: string; readonly position: EditorPosition } {
+    const hash = target.indexOf('#');
+    const fragment = hash === -1 ? null : LINE_FRAGMENT.exec(target.slice(hash));
+    if (fragment === null) {
+        return { uri: target, position: { line: 0, character: 0 } };
+    }
+    return {
+        uri: target.slice(0, hash),
+        position: { line: Math.max(0, Number(fragment[1]) - 1), character: Math.max(0, Number(fragment[2] ?? 1) - 1) }
+    };
+}
+
+/* Whether a target opens in the editor: a file, or a document of a scheme a server serves. A web address opens outside. */
+function opensInEditor(target: string): boolean {
+    return !/^(https?|mailto|ftp):/i.test(target);
+}
+
+/*
+ * The links a server finds in the text, such as an import path or a web address in a comment. Mod+click on one
+ * follows it, and while Mod is held the link under the pointer is drawn as one (`DefinitionLinkFeature` draws it).
+ * A link without a target asks the server for it first.
+ */
+export class DocumentLinksFeature {
+    private readonly language: EditorLanguage;
+    private links: readonly DocumentLink[] = [];
+    private readonly query: DocumentQuery<DocumentLink[]>;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.query = new DocumentQuery(
+            language,
+            timers,
+            DELAY_MS,
+            (signal) => (this.supported ? language.service.documentLinks!(language.uri, { signal }) : Promise.resolve(null)),
+            (links) => {
+                this.links = links ?? [];
+            }
+        );
+        const off = language.editor.onClick((click) => {
+            if (!click.mod || click.alt || click.shift) {
+                return false;
+            }
+            const link = this.linkAt(click.position);
+            if (link === null) {
+                return false;
+            }
+            void this.follow(link);
+            return true;
+        });
+        language.onDispose(off);
+    }
+
+    get supported(): boolean {
+        const { service } = this.language;
+        return service.documentLinks !== undefined && service.supports(METHOD, this.language.uri);
+    }
+
+    /* The links of the current text, empty while an edit waits for the next answer. */
+    all(): readonly DocumentLink[] {
+        return this.links;
+    }
+
+    /* The link whose range holds `position`, its end left out. */
+    linkAt(position: EditorPosition): DocumentLink | null {
+        return this.links.find((link) => comparePositions(link.range.start, position) <= 0 && comparePositions(position, link.range.end) < 0) ?? null;
+    }
+
+    /* The range of the link at `position`, which the pointer draws as a link while Mod is held. */
+    rangeAt(position: EditorPosition): EditorRange | null {
+        return this.linkAt(position)?.range ?? null;
+    }
+
+    refresh(): void {
+        this.query.run();
+    }
+
+    /* Opens what a link points at; false when it has no target, even after asking. */
+    async follow(link: DocumentLink): Promise<boolean> {
+        const target = link.target ?? (await this.resolve(link))?.target;
+        if (target === undefined) {
+            return false;
+        }
+        openTarget(this.language, target);
+        return true;
+    }
+
+    private async resolve(link: DocumentLink): Promise<DocumentLink | null> {
+        const { service } = this.language;
+        if (service.resolveDocumentLink === undefined || service.providerOptions(RESOLVE, this.language.uri)?.resolveProvider !== true) {
+            return null;
+        }
+        try {
+            return await service.resolveDocumentLink(this.language.uri, link);
+        } catch {
+            return null;
+        }
+    }
+}
+
+/* Opens a file or a document of a server in the editor, and a web address through the host. */
+export function openTarget(language: EditorLanguage, target: string, selection?: EditorRange): void {
+    if (!opensInEditor(target)) {
+        const { host } = language.project;
+        if (host.openExternal !== undefined) {
+            host.openExternal(target);
+        } else if (typeof window !== 'undefined') {
+            window.open(target, '_blank', 'noopener,noreferrer');
+        }
+        return;
+    }
+    const { uri, position } = linkPosition(target);
+    const range = selection ?? { start: position, end: position };
+    language.goTo({ uri, range });
+}

package/src/document-query.ts

@@ -0,0 +1,71 @@
+import type { EditorLanguage } from './editor-language.ts';
+import type { Timers } from './timers.ts';
+
+/*
+ * Asks the servers for something of the whole document: once it is open, a moment after the last edit, and
+ * whenever what the servers offer changes. An edit clears the answer at once, since its ranges point into a
+ * text that is gone; an answer for an older text is dropped.
+ */
+export class DocumentQuery<Value> {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private readonly delay: number;
+    private readonly ask: (signal: AbortSignal) => Promise<Value | null>;
+    private readonly apply: (value: Value | null) => void;
+    private timer: unknown = null;
+    private controller: AbortController | null = null;
+    private generation = 0;
+
+    constructor(
+        language: EditorLanguage,
+        timers: Timers,
+        delay: number,
+        ask: (signal: AbortSignal) => Promise<Value | null>,
+        apply: (value: Value | null) => void
+    ) {
+        this.language = language;
+        this.timers = timers;
+        this.delay = delay;
+        this.ask = ask;
+        this.apply = apply;
+        const offs = [
+            language.onProvidersChanged(() => this.run()),
+            language.editor.onTextChange(() => {
+                this.cancel();
+                this.apply(null);
+                this.timer = this.timers.set(() => this.run(), this.delay);
+            })
+        ];
+        language.onDispose(() => {
+            this.cancel();
+            for (const off of offs) {
+                off();
+            }
+        });
+    }
+
+    /* Asks again now, as a refresh of the host does. */
+    run(): void {
+        this.cancel();
+        const generation = this.generation;
+        const controller = new AbortController();
+        this.controller = controller;
+        this.ask(controller.signal).then(
+            (value) => {
+                if (generation === this.generation && !this.language.isDisposed) {
+                    this.apply(value);
+                }
+            },
+            // A server that fails or refuses answers nothing; the next edit asks again.
+            () => undefined
+        );
+    }
+
+    private cancel(): void {
+        this.generation++;
+        this.timers.clear(this.timer);
+        this.timer = null;
+        this.controller?.abort();
+        this.controller = null;
+    }
+}