@adecore/editor-react 0.42.0 → 0.43.0

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;
+    }
+}

package/src/edit-locations.ts

@@ -0,0 +1,162 @@
+import type { EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
+
+/* Where an edit left the carets of one file, the primary last. */
+export interface EditPlace {
+    readonly uri: string;
+    readonly selections: readonly EditorRange[];
+}
+
+const LIMIT = 150;
+
+/* Two places are one when they are in one file with as many carets, and every caret is within three lines of its twin. */
+function isSame(left: EditPlace, right: EditPlace | null): boolean {
+    return (
+        right !== null &&
+        left.uri === right.uri &&
+        left.selections.length === right.selections.length &&
+        left.selections.every((selection, index) => Math.abs(selection.end.line - right.selections[index]!.end.line) < 4)
+    );
+}
+
+function before(left: EditorPosition, right: EditorPosition): boolean {
+    return left.line < right.line || (left.line === right.line && left.character < right.character);
+}
+
+/* Where the text of a change ends, in the text after the change. */
+function endOf(change: EditorContentChange): EditorPosition {
+    const lines = change.text.split('\n');
+    const { start } = change.range;
+
+    return lines.length === 1
+        ? { line: start.line, character: start.character + change.text.length }
+        : { line: start.line + lines.length - 1, character: lines[lines.length - 1]!.length };
+}
+
+/* A position after a change: untouched in front of it, at the start when the change replaced the text around it, moved along behind it. */
+function follow(position: EditorPosition, change: EditorContentChange): EditorPosition {
+    const { start, end } = change.range;
+
+    if (!before(start, position)) {
+        return position;
+    }
+
+    if (before(position, end)) {
+        return start;
+    }
+
+    const landed = endOf(change);
+
+    return position.line === end.line
+        ? { line: landed.line, character: landed.character + position.character - end.character }
+        : { line: position.line + landed.line - end.line, character: position.character };
+}
+
+/*
+ * Where the project was edited, for Last Edit Location and Next Edit Location. An edit within three lines of the
+ * last one is the same place, so typing a paragraph is one stop. A caret that moves without an edit puts the walk
+ * back at the end, and so does an edit.
+ */
+export class EditLocations {
+    private readonly limit: number;
+    private entries: EditPlace[] = [];
+    private index = 0;
+    private arriving: { uri: string; line: number } | null = null;
+
+    constructor(limit = LIMIT) {
+        this.limit = limit;
+    }
+
+    get places(): readonly EditPlace[] {
+        return this.entries;
+    }
+
+    /* An edit left the carets here. */
+    record(place: EditPlace): void {
+        const last = this.entries.at(-1);
+
+        if (last !== undefined && isSame(last, place)) {
+            this.entries[this.entries.length - 1] = place;
+        } else {
+            this.entries.push(place);
+
+            if (this.entries.length > this.limit) {
+                this.entries.shift();
+            }
+        }
+
+        this.index = this.entries.length;
+        this.arriving = null;
+    }
+
+    /* The caret moved without an edit. The move that lands on the place a walk went to does not count. */
+    moved(uri: string, position: EditorPosition): void {
+        if (this.arriving?.uri === uri && this.arriving.line === position.line) {
+            return;
+        }
+
+        this.arriving = null;
+        this.index = this.entries.length;
+    }
+
+    /* The place of an earlier edit that is not the one the carets are on; null when there is none. */
+    previous(current: EditPlace | null): EditPlace | null {
+        for (let i = this.index - 1; i >= 0; i--) {
+            if (!isSame(this.entries[i]!, current)) {
+                this.index = i;
+
+                return this.arrive(this.entries[i]!);
+            }
+        }
+
+        return null;
+    }
+
+    /* The place of a later edit; it moves one past the place it returns, so Last Edit Location and Next Edit Location are not exact opposites. */
+    next(current: EditPlace | null): EditPlace | null {
+        for (let i = this.index; i < this.entries.length; i++) {
+            if (!isSame(this.entries[i]!, current)) {
+                this.index = i + 1;
+
+                return this.arrive(this.entries[i]!);
+            }
+        }
+
+        return null;
+    }
+
+    /* The places of a file follow its edits, in the order the editor made them. */
+    map(uri: string, changes: readonly EditorContentChange[]): void {
+        if (!this.entries.some((entry) => entry.uri === uri)) {
+            return;
+        }
+
+        this.entries = this.entries.map((entry) => {
+            if (entry.uri !== uri) {
+                return entry;
+            }
+
+            const selections = changes.reduce(
+                (current, change) => current.map((selection) => ({ start: follow(selection.start, change), end: follow(selection.end, change) })),
+                entry.selections
+            );
+
+            return { uri, selections };
+        });
+    }
+
+    /* Drops the places of files that are gone. */
+    forget(matches: (uri: string) => boolean): void {
+        this.entries = this.entries.filter((entry) => !matches(entry.uri));
+        this.index = this.entries.length;
+
+        if (this.arriving !== null && matches(this.arriving.uri)) {
+            this.arriving = null;
+        }
+    }
+
+    private arrive(place: EditPlace): EditPlace {
+        this.arriving = { uri: place.uri, line: place.selections.at(-1)!.end.line };
+
+        return place;
+    }
+}