@adecore/editor-react 0.42.0 → 0.43.0

package/src/inline-completion.ts

@@ -0,0 +1,221 @@
+import type { EditorPosition, EditorTextChange } from '@adecore/editor';
+import type { InlineCompletionItem, InlineCompletionResult, Range } from '@adecore/lsp';
+import { comparePositions } from './diagnostics-model.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { KEY_PRIORITY } from './key-priority.ts';
+import { isShortcut } from './shortcut-keys.ts';
+import { parseSnippet } from './snippet.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/inlineCompletion';
+/* How long typing rests before a suggestion is asked. */
+const DELAY_MS = 300;
+
+/* A suggestion as the text it inserts at the caret: what follows what was already typed of it. */
+export interface InlineSuggestion {
+    readonly item: InlineCompletionItem;
+    /* What replaces `range` on acceptance. */
+    readonly text: string;
+    readonly range: Range;
+    /* What the ghost shows after the caret. */
+    readonly rest: string;
+}
+
+export function itemsOf(result: InlineCompletionResult): InlineCompletionItem[] {
+    if (result === null) {
+        return [];
+    }
+    return Array.isArray(result) ? result : result.items;
+}
+
+/*
+ * A server's item as a suggestion at the caret, or null when it does not continue what the line holds: the text the
+ * item replaces up to the caret must start its insert text, so the rest can stand after the caret.
+ */
+export function suggestionOf(item: InlineCompletionItem, caret: EditorPosition, textOf: (range: Range) => string): InlineSuggestion | null {
+    const text = typeof item.insertText === 'string' ? item.insertText : parseSnippet(item.insertText.value).text;
+    const range = item.range ?? { start: caret, end: caret };
+    if (comparePositions(range.start, caret) > 0 || comparePositions(range.end, caret) < 0) {
+        return null;
+    }
+    const typed = textOf({ start: range.start, end: caret });
+    if (!text.startsWith(typed)) {
+        return null;
+    }
+    const rest = text.slice(typed.length);
+    return rest === '' ? null : { item, text, range, rest };
+}
+
+/*
+ * Suggestions a server writes ahead of the caret, drawn as ghost text: asked a moment after typing stops, or at
+ * once with the `suggestInline` key of the host. Tab takes the suggestion, Alt+] and Alt+[ step through the others,
+ * Escape and any key that moves away put it away. Off unless the host turns it on, since a host may draw
+ * suggestions of its own in the same place.
+ */
+export class InlineCompletionFeature {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private enabled = false;
+    private suggestions: InlineSuggestion[] = [];
+    private index = 0;
+    private timer: unknown = null;
+    private controller: AbortController | null = null;
+    private revision = 0;
+    private accepting = 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.inlineCompletion),
+            editor.onTextChange((change) => this.edited(change)),
+            editor.onCaret(() => queueMicrotask(() => this.moved()))
+        ];
+        language.onDispose(() => {
+            this.hide();
+            for (const off of offs) {
+                off();
+            }
+        });
+    }
+
+    get supported(): boolean {
+        const { service } = this.language;
+        return service.inlineCompletions !== undefined && service.supports(METHOD, this.language.uri);
+    }
+
+    get isEnabled(): boolean {
+        return this.enabled;
+    }
+
+    /* The suggestion drawn now, or null. */
+    get current(): InlineSuggestion | null {
+        return this.suggestions[this.index] ?? null;
+    }
+
+    configure(settings: { readonly enabled?: boolean }): void {
+        this.enabled = settings.enabled === true;
+        if (!this.enabled) {
+            this.hide();
+        }
+    }
+
+    /* Asks for suggestions at the caret now, as a person asking for one does. */
+    trigger(): void {
+        this.timers.clear(this.timer);
+        void this.ask(1);
+    }
+
+    /* Takes the drawn suggestion into the text; false when there is none. */
+    accept(): boolean {
+        const suggestion = this.current;
+        if (suggestion === null) {
+            return false;
+        }
+        const { editor, service, uri } = this.language;
+        this.accepting = true;
+        try {
+            editor.applyEdits([{ range: suggestion.range, text: suggestion.text }]);
+        } finally {
+            this.accepting = false;
+        }
+        this.hide();
+        const { command } = suggestion.item;
+        if (command !== undefined && service.supports('workspace/executeCommand', uri)) {
+            void service.executeCommand(uri, command).catch(() => undefined);
+        }
+        return true;
+    }
+
+    /* Steps to the next or the previous suggestion. */
+    cycle(step: 1 | -1): void {
+        if (this.suggestions.length > 1) {
+            this.index = (this.index + step + this.suggestions.length) % this.suggestions.length;
+            this.draw();
+        }
+    }
+
+    hide(): void {
+        this.revision++;
+        this.timers.clear(this.timer);
+        this.controller?.abort();
+        if (this.suggestions.length > 0) {
+            this.suggestions = [];
+            this.language.editor.setGhostText(null);
+        }
+    }
+
+    private key(event: KeyboardEvent): boolean {
+        if (isShortcut(this.language.shortcuts.suggestInline, event) && this.enabled) {
+            this.trigger();
+            return true;
+        }
+        if (this.current === null || event.isComposing) {
+            return false;
+        }
+        if (event.key === 'Tab' && !event.shiftKey && !event.altKey && !event.ctrlKey && !event.metaKey) {
+            return this.accept();
+        }
+        if (event.key === 'Escape') {
+            this.hide();
+            return true;
+        }
+        if (event.altKey && !event.ctrlKey && !event.metaKey && (event.code === 'BracketRight' || event.code === 'BracketLeft')) {
+            this.cycle(event.code === 'BracketRight' ? 1 : -1);
+            return true;
+        }
+        return false;
+    }
+
+    private edited(change: EditorTextChange): void {
+        if (this.accepting) {
+            return;
+        }
+        this.hide();
+        if (this.enabled && change.source === 'input' && this.supported) {
+            this.timer = this.timers.set(() => void this.ask(2), DELAY_MS);
+        }
+    }
+
+    /* A caret that left the place of the suggestion puts it away. */
+    private moved(): void {
+        const suggestion = this.current;
+        if (suggestion === null) {
+            return;
+        }
+        const caret = this.language.editor.getCaret();
+        const selections = this.language.editor.getSelections();
+        if (selections.length !== 1 || suggestionOf(suggestion.item, caret, (range) => this.language.editor.textInRange(range)) === null) {
+            this.hide();
+        }
+    }
+
+    private async ask(triggerKind: 1 | 2): Promise<void> {
+        const { editor, service, uri } = this.language;
+        if (!this.enabled || !this.supported || editor.getSelections().length !== 1 || editor.isReadOnly?.() === true) {
+            return;
+        }
+        this.controller?.abort();
+        const controller = new AbortController();
+        this.controller = controller;
+        const revision = this.revision;
+        const caret = editor.getCaret();
+        try {
+            const result = await service.inlineCompletions!(uri, caret, { triggerKind }, { signal: controller.signal });
+            if (revision !== this.revision || comparePositions(editor.getCaret(), caret) !== 0) {
+                return;
+            }
+            this.suggestions = itemsOf(result).flatMap((item) => suggestionOf(item, caret, (range) => editor.textInRange(range)) ?? []);
+            this.index = 0;
+            this.draw();
+        } catch {
+            // A refusal or a failing server is no suggestion; the next pause asks again.
+        }
+    }
+
+    private draw(): void {
+        const suggestion = this.current;
+        this.language.editor.setGhostText(suggestion === null ? null : { position: this.language.editor.getCaret(), text: suggestion.rest });
+    }
+}

package/src/key-priority.ts

@@ -5,11 +5,12 @@ import type { EditorKeyHandler } from '@adecore/editor';
  * apart, so a handler of the app can stand between two features; 0, the default, comes after all of them.
  */
 export const KEY_PRIORITY = {
-    pick: 1500,
-    diagnostics: 1400,
-    hover: 1300,
-    completion: 1200,
-    snippets: 1100,
+    pick: 1600,
+    diagnostics: 1500,
+    hover: 1400,
+    completion: 1300,
+    snippets: 1200,
+    markup: 1100,
     signature: 1000,
     highlights: 900,
     codeActions: 800,
@@ -19,7 +20,9 @@ export const KEY_PRIORITY = {
     callHierarchy: 400,
     symbolPicker: 300,
     history: 200,
-    renderedDocs: 100
+    renderedDocs: 100,
+    pasteHistory: 50,
+    inlineCompletion: 25
 } as const;
 
 interface Entry {

package/src/linked-editing.ts

@@ -0,0 +1,199 @@
+import type { EditorTextChange } from '@adecore/editor';
+import type { LinkedEditingRanges } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import { realTimers, type Timers } from './timers.ts';
+
+const METHOD = 'textDocument/linkedEditingRange';
+/* How long the caret rests before the ranges around it are asked. */
+const DELAY_MS = 100;
+
+interface Span {
+    from: number;
+    to: number;
+}
+
+interface Session {
+    /* Offsets in the current text, in the order the server gave them. */
+    spans: Span[];
+    pattern: RegExp | null;
+}
+
+/* The server's word pattern, anchored, or null when it gave none or one that does not compile. */
+export function wordPatternOf(ranges: LinkedEditingRanges): RegExp | null {
+    if (ranges.wordPattern === undefined) {
+        return null;
+    }
+    try {
+        return new RegExp(`^(?:${ranges.wordPattern})$`, 'u');
+    } catch {
+        return null;
+    }
+}
+
+/*
+ * Ranges a server says are edited together, such as the names of a start tag and its end tag: a change inside
+ * one goes into every other, in the undo step of the key. The ranges are asked once the caret rests, and the link
+ * ends when an edit falls outside them, the text stops matching the server's word pattern, or there is more
+ * than one caret.
+ */
+export class LinkedEditingFeature {
+    private readonly language: EditorLanguage;
+    private readonly timers: Timers;
+    private session: Session | null = null;
+    private timer: unknown = null;
+    private controller: AbortController | null = null;
+    private revision = 0;
+    private mirroring = false;
+    private enabled = true;
+
+    constructor(language: EditorLanguage, timers: Timers = realTimers) {
+        this.language = language;
+        this.timers = timers;
+        const { editor } = language;
+        const offs = [editor.onTextChange((change) => this.edited(change)), editor.onCaret(() => this.moved())];
+        language.onDispose(() => {
+            this.stop();
+            for (const off of offs) {
+                off();
+            }
+        });
+    }
+
+    get supported(): boolean {
+        const { service } = this.language;
+        return this.enabled && service.linkedEditingRanges !== undefined && service.supports(METHOD, this.language.uri);
+    }
+
+    /* Whether ranges are linked now. */
+    get isActive(): boolean {
+        return this.session !== null;
+    }
+
+    /* Off, nothing is linked; on unless false. */
+    configure(settings: { readonly enabled?: boolean }): void {
+        this.enabled = settings.enabled !== false;
+        if (!this.enabled) {
+            this.stop();
+        }
+    }
+
+    private stop(): void {
+        this.session = null;
+        this.timers.clear(this.timer);
+        this.controller?.abort();
+    }
+
+    private caretOffset(): number | null {
+        const { editor } = this.language;
+        const selections = editor.getSelections();
+        if (selections.length !== 1) {
+            return null;
+        }
+        const { start, end } = selections[0]!;
+        return start.line === end.line && start.character === end.character ? editor.offsetAt(start) : null;
+    }
+
+    private moved(): void {
+        if (this.mirroring) {
+            return;
+        }
+        // The caret moves before the text change of the same key is told, so the session is checked once both are in.
+        queueMicrotask(() => {
+            const offset = this.caretOffset();
+            if (offset !== null && this.session?.spans.some((span) => span.from <= offset && offset <= span.to)) {
+                return;
+            }
+            this.stop();
+            if (offset !== null && this.supported) {
+                this.timer = this.timers.set(() => void this.ask(offset), DELAY_MS);
+            }
+        });
+    }
+
+    private async ask(offset: number): Promise<void> {
+        const { editor, service, uri } = this.language;
+        const revision = this.revision;
+        const controller = new AbortController();
+        this.controller = controller;
+        try {
+            const ranges = await service.linkedEditingRanges!(uri, editor.positionAt(offset), { signal: controller.signal });
+            if (ranges === null || ranges.ranges.length < 2 || revision !== this.revision || this.caretOffset() !== offset) {
+                return;
+            }
+            this.session = {
+                spans: ranges.ranges.map((range) => ({ from: editor.offsetAt(range.start), to: editor.offsetAt(range.end) })),
+                pattern: wordPatternOf(ranges)
+            };
+        } catch {
+            // No ranges is no link; the next rest of the caret asks again.
+        }
+    }
+
+    private edited(change: EditorTextChange): void {
+        const revision = ++this.revision;
+        const session = this.session;
+        if (this.mirroring || session === null) {
+            return;
+        }
+        const edit = change.changes[0];
+        if (change.source === 'external' || change.changes.length !== 1 || edit === undefined || edit.range.start.line !== edit.range.end.line) {
+            this.stop();
+            return;
+        }
+        const from = this.language.editor.offsetAt(edit.range.start);
+        const removed = edit.range.end.character - edit.range.start.character;
+        const own = session.spans.findIndex((span) => span.from <= from && from + removed <= span.to);
+        if (own === -1) {
+            this.stop();
+            return;
+        }
+        const delta = edit.text.length - removed;
+        const edited = session.spans[own]!;
+        session.spans = session.spans.map((span, index) =>
+            index === own ? { from: span.from, to: span.to + delta } : span.from > edited.from ? { from: span.from + delta, to: span.to + delta } : span
+        );
+        queueMicrotask(() => this.mirror(own, revision));
+    }
+
+    private mirror(own: number, revision: number): void {
+        const session = this.session;
+        if (session === null || revision !== this.revision) {
+            return;
+        }
+        const { editor } = this.language;
+        const text = editor.getText();
+        const source = session.spans[own]!;
+        const value = text.slice(source.from, source.to);
+        if (session.pattern !== null && value !== '' && !session.pattern.test(value)) {
+            this.stop();
+            return;
+        }
+        const others = session.spans
+            .map((span, index) => ({ span, index }))
+            .filter(({ span, index }) => index !== own && text.slice(span.from, span.to) !== value);
+        if (others.length === 0) {
+            return;
+        }
+        this.mirroring = true;
+        try {
+            const applied = editor.applyEdits(
+                others.map(({ span }) => ({ range: { start: editor.positionAt(span.from), end: editor.positionAt(span.to) }, text: value })),
+                { mergeUndo: true }
+            );
+            if (!applied) {
+                this.stop();
+                return;
+            }
+        } finally {
+            this.mirroring = false;
+        }
+        // Each replaced span moves every span after it by what its length changed.
+        const changed = others.map(({ span }) => ({ at: span.from, delta: value.length - (span.to - span.from) })).sort((left, right) => left.at - right.at);
+        const shift = (offset: number): number => offset + changed.filter((entry) => entry.at < offset).reduce((total, entry) => total + entry.delta, 0);
+        session.spans = session.spans.map((span, index) => {
+            const from = shift(span.from);
+            const replaced = others.some((other) => other.index === index);
+            return { from, to: replaced ? from + value.length : shift(span.to) };
+        });
+    }
+}

package/src/locales/en.json

@@ -70,6 +70,12 @@
                 "delete": "Deletes"
             }
         },
+        "markup": {
+            "wrap": "Wrap with abbreviation",
+            "placeholder": "Abbreviation, such as div.card>p",
+            "apply": "Wrap",
+            "invalid": "Not an abbreviation"
+        },
         "navigation": {
             "unavailable": "Not available here",
             "none": "Nothing found",
@@ -119,13 +125,30 @@
             "site": "Call {{current}} of {{total}}",
             "previousSite": "Previous call",
             "nextSite": "Next call",
+            "typesUnavailable": "Type hierarchy unavailable in this file",
+            "typesNone": "No type here",
+            "typesFailed": "Could not look up types: {{message}}",
+            "typesLabel": "Type hierarchy",
+            "supertypes": "Supertypes",
+            "subtypes": "Subtypes",
+            "noSupertypes": "No supertypes",
+            "noSubtypes": "No subtypes",
             "announce": {
                 "incoming_one": "{{count}} caller of {{name}}",
                 "incoming_other": "{{count}} callers of {{name}}",
                 "outgoing_one": "{{count}} callee of {{name}}",
-                "outgoing_other": "{{count}} callees of {{name}}"
+                "outgoing_other": "{{count}} callees of {{name}}",
+                "supertypes_one": "{{count}} supertype of {{name}}",
+                "supertypes_other": "{{count}} supertypes of {{name}}",
+                "subtypes_one": "{{count}} subtype of {{name}}",
+                "subtypes_other": "{{count}} subtypes of {{name}}"
             }
         },
+        "colors": {
+            "swatch": "Color {{color}}",
+            "title": "Color",
+            "other": "Pick another color…"
+        },
         "codeVision": {
             "usagesNone": "No usages",
             "usages_one": "{{formatted}} usage",
@@ -192,6 +215,10 @@
         "history": {
             "recent": "Recent locations"
         },
+        "pasteHistory": {
+            "title": "Choose Content to Paste",
+            "empty": "Nothing was copied yet"
+        },
         "announce": {
             "problem": "{{severity}}: {{message}}",
             "severity": {
@@ -236,10 +263,12 @@
         "goToTypeDefinition": "Go to type definition",
         "goToImplementation": "Go to implementation",
         "callHierarchy": "Call hierarchy",
+        "typeHierarchy": "Type hierarchy",
         "peekReferences": "Peek references",
         "renameSymbol": "Rename symbol",
         "codeActions": "Code actions",
-        "formatDocument": "Format document"
+        "formatDocument": "Format document",
+        "formatSelection": "Format selection"
     },
     "find": {
         "label": "Find",

package/src/locales/nl.json

@@ -70,6 +70,12 @@
                 "delete": "Verwijdert"
             }
         },
+        "markup": {
+            "wrap": "Omwikkelen met afkorting",
+            "placeholder": "Afkorting, zoals div.card>p",
+            "apply": "Omwikkelen",
+            "invalid": "Geen geldige afkorting"
+        },
         "navigation": {
             "unavailable": "Hier niet beschikbaar",
             "none": "Niets gevonden",
@@ -119,13 +125,30 @@
             "site": "Aanroep {{current}} van {{total}}",
             "previousSite": "Vorige aanroep",
             "nextSite": "Volgende aanroep",
+            "typesUnavailable": "Typehiërarchie niet beschikbaar in dit bestand",
+            "typesNone": "Hier geen type",
+            "typesFailed": "Kon de types niet opzoeken: {{message}}",
+            "typesLabel": "Typehiërarchie",
+            "supertypes": "Supertypes",
+            "subtypes": "Subtypes",
+            "noSupertypes": "Geen supertypes",
+            "noSubtypes": "Geen subtypes",
             "announce": {
                 "incoming_one": "{{count}} aanroeper van {{name}}",
                 "incoming_other": "{{count}} aanroepers van {{name}}",
                 "outgoing_one": "{{count}} aangeroepen door {{name}}",
-                "outgoing_other": "{{count}} aangeroepen door {{name}}"
+                "outgoing_other": "{{count}} aangeroepen door {{name}}",
+                "supertypes_one": "{{count}} supertype van {{name}}",
+                "supertypes_other": "{{count}} supertypes van {{name}}",
+                "subtypes_one": "{{count}} subtype van {{name}}",
+                "subtypes_other": "{{count}} subtypes van {{name}}"
             }
         },
+        "colors": {
+            "swatch": "Kleur {{color}}",
+            "title": "Kleur",
+            "other": "Andere kleur kiezen…"
+        },
         "codeVision": {
             "usagesNone": "Niet gebruikt",
             "usages_one": "{{formatted}} keer gebruikt",
@@ -192,6 +215,10 @@
         "history": {
             "recent": "Recente plekken"
         },
+        "pasteHistory": {
+            "title": "Kies wat je plakt",
+            "empty": "Er is nog niets gekopieerd"
+        },
         "announce": {
             "problem": "{{severity}}: {{message}}",
             "severity": {
@@ -236,10 +263,12 @@
         "goToTypeDefinition": "Ga naar typedefinitie",
         "goToImplementation": "Ga naar implementatie",
         "callHierarchy": "Aanroephiërarchie",
+        "typeHierarchy": "Typehiërarchie",
         "peekReferences": "Bekijk referenties",
         "renameSymbol": "Symbool hernoemen",
         "codeActions": "Codeacties",
-        "formatDocument": "Document formatteren"
+        "formatDocument": "Document formatteren",
+        "formatSelection": "Selectie formatteren"
     },
     "find": {
         "label": "Zoeken",