@adecore/editor-react 0.42.0 → 0.44.0

package/src/pick.ts

@@ -22,6 +22,17 @@ export interface PickSpec {
     attempt?(id: string): Promise<string | null>;
     /* What the active row would change, asked a moment after it became active. */
     preview?(id: string, signal: AbortSignal): Promise<PickPreview | null>;
+    /*
+     * Typing narrows the rows to those whose `search` (the label without one) contains the query, whatever the case, and
+     * the list stays open while a person types. Backspace edits the query.
+     */
+    readonly filter?: boolean;
+    /* Shift with the arrows or a press chooses a run of rows, and Mod with a press adds or takes away one. */
+    readonly multiple?: boolean;
+    /* Enter takes the chosen rows, or the active one when none is chosen; without it Enter calls `accept` with the active row. */
+    acceptMany?(ids: readonly string[]): void;
+    /* Delete takes the chosen rows, or the active one, out of the list, and so does Backspace when there is no query. It answers the rows that remain. */
+    remove?(ids: readonly string[]): readonly PickGroup[];
 }
 
 /*
@@ -33,8 +44,18 @@ export class PickFeature {
     private readonly language: EditorLanguage;
     private readonly timers: Timers;
     private spec: PickSpec | null = null;
+
+    /* The rows as the spec gave them, or as `remove` left them; `ids` are those a query lets through. */
+    private groups: readonly PickGroup[] = [];
+
     private ids: readonly string[] = [];
     private active = '';
+    private query = '';
+
+    /* The rows chosen as a run or one by one, in list order, and the row a run of them grows from. */
+    private chosen: readonly string[] = [];
+
+    private rangeAnchor: string | null = null;
     private previewTimer: unknown;
     private controller: AbortController | null = null;
 
@@ -78,6 +99,10 @@ export class PickFeature {
 
         this.spec = spec;
         this.refusals = new Map();
+        this.groups = spec.groups;
+        this.query = '';
+        this.chosen = [];
+        this.rangeAnchor = null;
         this.ids = ids;
         this.active = spec.active !== undefined && ids.includes(spec.active) ? spec.active : ids[0]!;
         this.publish(null);
@@ -96,19 +121,53 @@ export class PickFeature {
         this.language.popups.setState({ pick: null });
     }
 
-    move(delta: number): void {
+    /* Moves the active row; with `extend`, in a list of several choices, the rows between where the move began and the new row are chosen. */
+    move(delta: number, extend = false): void {
+        if (this.ids.length === 0) {
+            return;
+        }
+
         const index = this.ids.indexOf(this.active);
-        this.activate(this.ids[Math.max(0, Math.min(this.ids.length - 1, index + delta))]!);
+        const id = this.ids[Math.max(0, Math.min(this.ids.length - 1, index + delta))]!;
+
+        if (extend && this.spec?.multiple === true) {
+            this.extendTo(id);
+
+            return;
+        }
+
+        this.settle(id);
+    }
+
+    /* Makes `id` the only row the list is on. */
+    private settle(id: string): void {
+        const hadChosen = this.chosen.length > 0;
+
+        this.chosen = [];
+        this.rangeAnchor = null;
+        this.activate(id, hadChosen);
     }
 
-    /* Takes a row, by a click or Enter. */
-    choose(id: string): void {
+    /* Takes a row, by a click or Enter. In a list of several choices a press with Shift chooses the run up to the row, and one with Mod adds or takes away the row. */
+    choose(id: string, modifiers: { readonly toggle?: boolean; readonly range?: boolean } = {}): void {
         const spec = this.spec;
 
         if (spec === null || !this.ids.includes(id) || this.attempting) {
             return;
         }
 
+        if (spec.multiple === true && modifiers.range === true) {
+            this.extendTo(id);
+
+            return;
+        }
+
+        if (spec.multiple === true && modifiers.toggle === true) {
+            this.toggle(id);
+
+            return;
+        }
+
         if (spec.attempt === undefined) {
             this.close();
             spec.accept(id);
@@ -140,29 +199,124 @@ export class PickFeature {
             });
     }
 
-    private activate(id: string): void {
-        if (id === this.active) {
+    private activate(id: string, force = false): void {
+        const moved = id !== this.active;
+
+        this.active = id;
+
+        if (moved) {
+            this.controller?.abort();
+            this.schedulePreview();
+        }
+
+        if (moved || force) {
+            this.publish(null);
+        }
+    }
+
+    private extendTo(id: string): void {
+        const anchor = this.rangeAnchor ?? this.active;
+        const first = this.ids.indexOf(anchor);
+        const last = this.ids.indexOf(id);
+        const run = this.ids.slice(Math.min(first, last), Math.max(first, last) + 1);
+
+        this.rangeAnchor = anchor;
+        this.chosen = run.length > 1 ? run : [];
+        this.activate(id, true);
+    }
+
+    private toggle(id: string): void {
+        const held = this.chosen.length > 0 ? this.chosen : [this.active];
+        const next = held.includes(id) ? held.filter((other) => other !== id) : [...held, id];
+
+        this.chosen = this.ids.filter((other) => next.includes(other));
+        this.rangeAnchor = id;
+        this.activate(id, true);
+    }
+
+    /* Enter: the chosen rows, or the active one when none is chosen. */
+    private takeActive(): void {
+        const spec = this.spec;
+
+        if (spec?.acceptMany === undefined) {
+            this.choose(this.active);
+
             return;
         }
 
-        this.active = id;
+        const ids = this.chosen.length > 0 ? this.chosen : [this.active];
+
+        if (this.active !== '' && !this.attempting) {
+            this.close();
+            spec.acceptMany(ids);
+        }
+    }
+
+    private visibleGroups(): readonly PickGroup[] {
+        const query = this.query.toLowerCase();
+
+        if (query === '') {
+            return this.groups;
+        }
+
+        return this.groups
+            .map((group) => ({ ...group, rows: group.rows.filter((row) => (row.search ?? row.label).toLowerCase().includes(query)) }))
+            .filter((group) => group.rows.length > 0);
+    }
+
+    /* The query changed: the rows it lets through, with the first of them active. */
+    private requery(query: string): void {
+        this.query = query;
+        this.ids = this.visibleGroups().flatMap((group) => group.rows.map((row) => row.id));
+        this.chosen = [];
+        this.rangeAnchor = null;
+        this.active = this.ids[0] ?? '';
+        this.controller?.abort();
+        this.publish(null);
+        this.schedulePreview();
+    }
+
+    /* Takes the chosen rows, or the active one, out of the list; the list closes when no row is left. */
+    private removeChosen(): void {
+        const spec = this.spec;
+
+        if (spec?.remove === undefined || this.active === '') {
+            return;
+        }
+
+        const removed = this.chosen.length > 0 ? this.chosen : [this.active];
+        const index = this.ids.indexOf(removed[0]!);
+        this.groups = spec.remove(removed);
+
+        if (this.groups.every((group) => group.rows.length === 0)) {
+            this.close();
+
+            return;
+        }
+
+        this.ids = this.visibleGroups().flatMap((group) => group.rows.map((row) => row.id));
+        this.chosen = [];
+        this.rangeAnchor = null;
+        this.active = this.ids[Math.min(index, this.ids.length - 1)] ?? '';
         this.controller?.abort();
         this.publish(null);
         this.schedulePreview();
     }
 
     private key(event: KeyboardEvent): boolean {
-        if (this.spec === null || event.metaKey || event.ctrlKey || event.altKey) {
+        const spec = this.spec;
+
+        if (spec === null || event.metaKey || event.ctrlKey || event.altKey) {
             return false;
         }
 
         switch (event.key) {
             case 'ArrowDown':
-                this.move(1);
+                this.move(1, event.shiftKey);
 
                 return true;
             case 'ArrowUp':
-                this.move(-1);
+                this.move(-1, event.shiftKey);
 
                 return true;
             case 'PageDown':
@@ -174,20 +328,31 @@ export class PickFeature {
 
                 return true;
             case 'Home':
-                this.activate(this.ids[0]!);
-
-                return true;
             case 'End':
-                this.activate(this.ids[this.ids.length - 1]!);
+                if (this.ids.length > 0) {
+                    this.settle(event.key === 'Home' ? this.ids[0]! : this.ids[this.ids.length - 1]!);
+                }
 
                 return true;
             case 'Enter':
-                this.choose(this.active);
+                this.takeActive();
 
                 return true;
-            case 'Tab': {
-                const spec = this.spec;
+            case 'Delete':
+                this.removeChosen();
+
+                return spec.remove !== undefined;
+            case 'Backspace':
+                if (this.query !== '') {
+                    this.requery(this.query.slice(0, -1));
 
+                    return true;
+                }
+
+                this.removeChosen();
+
+                return spec.remove !== undefined || spec.filter === true;
+            case 'Tab': {
                 if (spec.onTab !== undefined) {
                     this.close();
                     spec.onTab(event.shiftKey);
@@ -202,15 +367,37 @@ export class PickFeature {
 
                 return true;
             default:
-                return false;
+                if (spec.filter === true && event.key.length === 1) {
+                    this.requery(this.query + event.key);
+
+                    return true;
+                }
+
+                return spec.filter !== true && event.key.length === 1 && this.takeMnemonic(event.key);
         }
     }
 
+    /* Takes the visible row whose mnemonic is the typed character, whatever the case. */
+    private takeMnemonic(character: string): boolean {
+        const wanted = character.toLowerCase();
+        const row = this.visibleGroups()
+            .flatMap((group) => group.rows)
+            .find((candidate) => candidate.mnemonic?.toLowerCase() === wanted);
+
+        if (row === undefined) {
+            return false;
+        }
+
+        this.choose(row.id);
+
+        return true;
+    }
+
     private schedulePreview(): void {
         const spec = this.spec;
         this.timers.clear(this.previewTimer);
 
-        if (spec?.preview === undefined) {
+        if (spec?.preview === undefined || this.active === '') {
             return;
         }
 
@@ -239,6 +426,17 @@ export class PickFeature {
 
         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 } });
+
+        this.language.popups.setState({
+            pick: {
+                anchor: spec.anchor,
+                groups: this.visibleGroups(),
+                active: this.active,
+                preview: shown,
+                title: spec.title ?? null,
+                query: spec.filter === true ? this.query : null,
+                chosen: this.chosen
+            }
+        });
     }
 }

package/src/popups.ts

@@ -82,6 +82,10 @@ export interface PickRow {
     readonly detail: string;
     /* The detail is a path, which gives way from its start before the label gives way at all. */
     readonly path?: boolean;
+    /* What a typed query is matched against, when a list filters; the label without it. */
+    readonly search?: string;
+    /* One character that takes the row when typed in a list that does not filter, such as `1` or `A`. */
+    readonly mnemonic?: string;
 }
 
 export interface PickGroup {
@@ -97,15 +101,22 @@ export interface PickPreview {
     readonly note: string | null;
     /* Why the action cannot be taken here, which the server said; nothing would change. */
     readonly refusal?: string;
+    /* `diff` draws `removed` and `added` as changed lines, which is the default; `text` draws `added` as plain code, such as the content of a clipboard entry. */
+    readonly kind?: 'diff' | 'text';
 }
 
 /* A list under a character of the editor; Enter takes the active row, Escape closes it. */
 export interface PickView {
     readonly anchor: EditorPosition;
+    /* The rows a query lets through. */
     readonly groups: readonly PickGroup[];
     readonly active: string;
     readonly preview: PickPreview | null;
     readonly title: string | null;
+    /* What has been typed to narrow the rows; null for a list that does not filter. */
+    readonly query: string | null;
+    /* The rows chosen as a run or one by one, in list order; empty when none is, and then the active row is the choice. */
+    readonly chosen: readonly string[];
 }
 
 /* One file of a rename in the preview: the lines it changes. */
@@ -192,6 +203,13 @@ export interface AuthorsView {
     readonly openCommit: (() => void) | null;
 }
 
+/* The field that asks for the abbreviation a selection is wrapped in. */
+export interface WrapView {
+    readonly anchor: EditorPosition;
+    /* Why the last abbreviation did not expand; the field stays open for another. */
+    readonly error: string | null;
+}
+
 export interface PopupState {
     readonly hover: HoverView | null;
     readonly completion: CompletionView | null;
@@ -203,6 +221,7 @@ export interface PopupState {
     readonly symbols: SymbolsView | null;
     readonly menu: MenuView | null;
     readonly authors: AuthorsView | null;
+    readonly wrap: WrapView | null;
 }
 
 export type PopupStore = StoreApi<PopupState>;
@@ -218,6 +237,7 @@ export function createPopupStore(): PopupStore {
         callHierarchy: null,
         symbols: null,
         menu: null,
-        authors: null
+        authors: null,
+        wrap: null
     }));
 }

package/src/postfix.ts

@@ -0,0 +1,224 @@
+import type { EditorPosition, EditorPostfixOperand, EditorRange } from '@adecore/editor';
+import type { CompletionItem } from '@adecore/lsp';
+import type { LocalCompletionItem } from './completion.ts';
+import { isIdentifierCharacter } from './completion-model.ts';
+import { comparePositions } from './diagnostics-model.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { lineTextOf, textBeforeOf } from './line-text.ts';
+import type { PickRow } from './popups.ts';
+import { bodyWithIndentUnit, dedentLines, indentUnitOf, insertSnippet } from './snippet-insert.ts';
+import { compileSnippet } from './snippet.ts';
+import { SNIPPET_KIND, sortAfterServer, templateContextAt } from './template-context.ts';
+import type { PostfixTemplate } from './templates.ts';
+
+const MAX_ROW_LENGTH = 80;
+
+/* The postfix templates that apply to the expressions before one dot. */
+interface Candidates {
+    readonly dot: EditorPosition;
+    readonly operands: readonly EditorPostfixOperand[];
+    readonly templates: readonly PostfixTemplate[];
+}
+
+/* A key Tab can expand, starting at the dot that leads it. */
+interface PostfixKey {
+    readonly start: EditorPosition;
+    expand(): boolean;
+}
+
+/* The identifier characters after the last dot of `before`, and where that dot is; null when no dot leads them. */
+function typedKey(before: string): { readonly key: string; readonly dot: number } | null {
+    let index = before.length;
+
+    while (index > 0 && isIdentifierCharacter(before[index - 1]!)) {
+        index--;
+    }
+
+    return index > 0 && before[index - 1] === '.' ? { key: before.slice(index), dot: index - 1 } : null;
+}
+
+/* One line of a chooser row: whitespace collapsed and cut short. */
+function rowLabel(text: string): string {
+    const line = text.replace(/\s+/g, ' ').trim();
+
+    return line.length > MAX_ROW_LENGTH ? `${line.slice(0, MAX_ROW_LENGTH - 1)}…` : line;
+}
+
+/*
+ * Postfix completion: a dot and a key after an expression, and Tab or an accepted row wraps the expression in a
+ * template. The registry holds the templates and `TemplatesFeature` decides whether Tab is ours or a live template's.
+ */
+export class PostfixFeature {
+    private readonly language: EditorLanguage;
+
+    constructor(language: EditorLanguage) {
+        this.language = language;
+    }
+
+    /* The key before the caret that a template of the registry applies to; null where Tab has no postfix template to expand. */
+    key(): PostfixKey | null {
+        const { editor, project } = this.language;
+
+        if (!project.templates.settings.postfix) {
+            return null;
+        }
+
+        const caret = editor.getCaret();
+        const typed = typedKey(textBeforeOf(editor, caret));
+
+        if (typed === null || typed.key === '') {
+            return null;
+        }
+
+        const candidates = this.candidates({ line: caret.line, character: typed.dot }, (template) => template.key === typed.key);
+
+        if (candidates === null) {
+            return null;
+        }
+
+        return { start: candidates.dot, expand: () => this.expandKey(candidates, caret) };
+    }
+
+    /* The rows of the suggestion list after a dot, for the templates whose key the typed characters can lead to. */
+    rows(position: EditorPosition): readonly LocalCompletionItem[] {
+        const { editor, project } = this.language;
+        const { settings } = project.templates;
+        const selections = editor.getSelections();
+
+        if (!settings.postfix || !settings.postfixInCompletion || selections.length !== 1 || comparePositions(selections[0]!.start, selections[0]!.end) !== 0) {
+            return [];
+        }
+
+        const typed = typedKey(textBeforeOf(editor, position));
+
+        if (typed === null) {
+            return [];
+        }
+
+        const candidates = this.candidates({ line: position.line, character: typed.dot }, (template) => template.key.startsWith(typed.key));
+
+        if (candidates === null) {
+            return [];
+        }
+
+        const range = { start: { line: position.line, character: typed.dot + 1 }, end: position };
+
+        return candidates.templates.map((template) => this.row(template, candidates, range, sortAfterServer(template.key)));
+    }
+
+    private row(template: PostfixTemplate, candidates: Candidates, range: EditorRange, sortText: string): LocalCompletionItem {
+        const item: CompletionItem = {
+            label: template.key,
+            kind: SNIPPET_KIND,
+            detail: template.example,
+            documentation: template.description,
+            filterText: template.key,
+            sortText,
+            textEdit: { range, newText: template.key }
+        };
+
+        return { item, accept: () => this.expand(template, candidates, this.language.editor.getCaret()) };
+    }
+
+    /* The templates `matches` lets through that apply to the expressions before `dot`; null when none does. */
+    private candidates(dot: EditorPosition, matches: (template: PostfixTemplate) => boolean): Candidates | null {
+        const { editor, project } = this.language;
+        const operands = editor.postfixOperands?.(dot) ?? [];
+
+        if (operands.length === 0) {
+            return null;
+        }
+
+        const context = templateContextAt(this.language, dot);
+
+        if (context.place !== 'code') {
+            return null;
+        }
+
+        const widest = operands.at(-1)!;
+
+        const templates = project.templates.postfix.filter(
+            (template) =>
+                matches(template) &&
+                template.languages.some((family) => context.families.includes(family)) &&
+                (template.expression !== 'statement' || widest.statement)
+        );
+
+        return templates.length === 0 ? null : { dot, operands, templates };
+    }
+
+    /* Expands the one template of a key, or lists them when several share it. */
+    private expandKey(candidates: Candidates, caret: EditorPosition): boolean {
+        if (candidates.templates.length === 1) {
+            this.expand(candidates.templates[0]!, candidates, caret);
+
+            return true;
+        }
+
+        const start = { line: candidates.dot.line, character: candidates.dot.character + 1 };
+
+        this.language.completion.showItems(
+            candidates.templates.map((template) => this.row(template, candidates, { start, end: caret }, template.id)),
+            start
+        );
+
+        return true;
+    }
+
+    /* Wraps the widest expression for a statement, the only one there is, or the one a person picks from the expressions. */
+    private expand(template: PostfixTemplate, candidates: Candidates, caret: EditorPosition): void {
+        const { operands } = candidates;
+
+        if (template.expression === 'statement' || operands.length === 1) {
+            void this.run(template, template.expression === 'statement' ? operands.at(-1)! : operands[0]!, caret);
+
+            return;
+        }
+
+        const { editor, completion, pick, project } = this.language;
+        const rows = operands.map((operand, index): PickRow => ({ id: String(index), label: rowLabel(editor.textInRange(operand.range)), detail: '' }));
+
+        completion.close();
+
+        pick.open({
+            anchor: caret,
+            title: project.i18n.t('editor:language.postfix.expressions'),
+            groups: [{ title: null, rows }],
+            accept: (id) => void this.run(template, operands[Number(id)]!, caret),
+            preview: (id) => Promise.resolve({ removed: [], added: this.rendered(template, operands[Number(id)]!).split('\n'), note: null, kind: 'text' })
+        });
+    }
+
+    private run(template: PostfixTemplate, operand: EditorPostfixOperand, caret: EditorPosition): Promise<boolean> {
+        const { editor } = this.language;
+        const expression = this.expressionOf(operand);
+
+        return insertSnippet(
+            this.language,
+            bodyWithIndentUnit(template.body, indentUnitOf(editor)),
+            [{ range: { start: operand.range.start, end: caret } }],
+            (name) => (name === 'EXPR' ? expression : undefined)
+        );
+    }
+
+    /* What the template would put in place of the expression, tab stops at their placeholders. */
+    private rendered(template: PostfixTemplate, operand: EditorPostfixOperand): string {
+        const expression = this.expressionOf(operand);
+
+        return compileSnippet(bodyWithIndentUnit(template.body, indentUnitOf(this.language.editor))).render(
+            (name) => (name === 'EXPR' ? expression : undefined),
+            undefined,
+            {
+                indentVariables: true
+            }
+        ).text;
+    }
+
+    /* The text of an expression, with the indentation of its first line taken off the lines after it. */
+    private expressionOf(operand: EditorPostfixOperand): string {
+        const { editor } = this.language;
+        const indent = /^[\t ]*/.exec(lineTextOf(editor, operand.range.start.line))![0];
+
+        return dedentLines(editor.textInRange(operand.range).trimEnd(), indent);
+    }
+}