@adecore/editor-react 0.0.1 → 0.17.0-beta.2

package/src/completion-model.ts

@@ -0,0 +1,440 @@
+import type { EditorContentChange, EditorPosition, EditorRange } from '@adecore/editor';
+import type { CompletionItem, CompletionList, CompletionResult, InsertReplaceEdit, MarkupContent, TextEdit } from '@adecore/lsp';
+import { comparePositions } from './diagnostics-model.ts';
+import { isEmptyHover, splitSignatures, type HoverText } from './hover-content.ts';
+import type { CompletionDocs } from './popups.ts';
+import { parseSnippet, tabOrder, type SnippetStop } from './snippet.ts';
+
+const IDENTIFIER_CHARACTER = /[\p{L}\p{N}\p{M}_$]/u;
+
+export function isIdentifierCharacter(character: string): boolean {
+    return IDENTIFIER_CHARACTER.test(character);
+}
+
+let lastBefore = '';
+let lastPrefix = '';
+
+/* The word being typed: the identifier characters at the end of the text before the caret. A list asks it of every item with the same line, so the last answer is kept. */
+export function identifierPrefix(before: string): string {
+    if (before === lastBefore) {
+        return lastPrefix;
+    }
+    const characters = Array.from(before);
+    let start = characters.length;
+    while (start > 0 && IDENTIFIER_CHARACTER.test(characters[start - 1]!)) {
+        start--;
+    }
+    lastBefore = before;
+    lastPrefix = characters.slice(start).join('');
+    return lastPrefix;
+}
+
+export interface MatchDetail {
+    /* Lower is better. */
+    readonly score: number;
+    /* The UTF-16 offsets of the characters of the value the prefix matched, for marking them. */
+    readonly positions: readonly number[];
+}
+
+function run(start: number, length: number): number[] {
+    return Array.from({ length }, (_, offset) => start + offset);
+}
+
+interface LabelShape {
+    readonly lower: string;
+    /* Where each word of the label starts: after an underscore, a dollar sign, a space or a hyphen, and at each capital. */
+    readonly offsets: readonly number[];
+    /* The lowercased first letter of each word. */
+    readonly initials: string;
+}
+
+const SHAPE_LIMIT = 4000;
+const shapes = new Map<string, LabelShape>();
+
+/* What matching reads of a label, which is the same at every keystroke of a word and costs a regular expression pass to find. */
+function shapeOf(value: string): LabelShape {
+    const known = shapes.get(value);
+    if (known !== undefined) {
+        return known;
+    }
+    const boundaries = [...value.matchAll(/(?:^|[_$\s-])([\p{L}\p{N}])|(\p{Lu})/gu)];
+    const shape: LabelShape = {
+        lower: value.toLocaleLowerCase(),
+        offsets: boundaries.map((boundary) => boundary.index! + (boundary[1] ? boundary[0].length - boundary[1].length : 0)),
+        initials: boundaries
+            .map((match) => match[1] ?? match[2])
+            .join('')
+            .toLocaleLowerCase()
+    };
+    if (shapes.size >= SHAPE_LIMIT) {
+        shapes.clear();
+    }
+    shapes.set(value, shape);
+    return shape;
+}
+
+/*
+ * How well a prefix fits a label, lower being better, and which characters it matched, or undefined when
+ * it does not fit. A match that starts the label beats one that ignores case, which beats one at a camel
+ * hump or after an underscore, then the initials of the humps (`gbi` for `getById`), and last the letters
+ * in order for a prefix of two or more.
+ */
+export function matchDetail(value: string, prefix: string): MatchDetail | undefined {
+    if (prefix === '') {
+        return { score: 0, positions: [] };
+    }
+    if (value.startsWith(prefix)) {
+        return { score: 0, positions: run(0, prefix.length) };
+    }
+    const { lower, offsets, initials } = shapeOf(value);
+    const query = prefix.toLocaleLowerCase();
+    if (lower.startsWith(query)) {
+        return { score: 1, positions: run(0, query.length) };
+    }
+    for (const offset of offsets) {
+        if (lower.slice(offset).startsWith(query)) {
+            return { score: 2 + offset / 1000, positions: run(offset, query.length) };
+        }
+    }
+    if (initials.startsWith(query)) {
+        return { score: 3, positions: offsets.slice(0, query.length) };
+    }
+    if (query.length < 2 || lower[0] !== query[0]) {
+        return undefined;
+    }
+    let cursor = 0;
+    const positions: number[] = [];
+    for (const character of query) {
+        const next = lower.indexOf(character, cursor);
+        if (next < 0) {
+            return undefined;
+        }
+        positions.push(next);
+        cursor = next + character.length;
+    }
+    return { score: 4 + cursor / 1000, positions };
+}
+
+export function matchScore(value: string, prefix: string): number | undefined {
+    return matchDetail(value, prefix)?.score;
+}
+
+/* The range an item replaces when it is accepted; for an insert-or-replace edit, the one `replace` asks for. */
+export function editRangeOf(item: CompletionItem, replace: boolean): EditorRange | null {
+    const edit = item.textEdit;
+    if (edit === undefined) {
+        return null;
+    }
+    if ('range' in edit) {
+        return edit.range;
+    }
+    return replace ? edit.replace : edit.insert;
+}
+
+/* Items from a result, with the list's defaults filled in so each carries its own edit range and format. */
+export function itemsOf(result: CompletionResult): { items: CompletionItem[]; incomplete: boolean } {
+    if (result === null) {
+        return { items: [], incomplete: false };
+    }
+    if (Array.isArray(result)) {
+        return { items: result, incomplete: false };
+    }
+    const list: CompletionList = result;
+    const defaults = list.itemDefaults;
+    if (defaults === undefined) {
+        return { items: list.items, incomplete: list.isIncomplete };
+    }
+    return {
+        incomplete: list.isIncomplete,
+        items: list.items.map((item) => {
+            const next: CompletionItem = { ...item };
+            if (defaults.insertTextFormat !== undefined && next.insertTextFormat === undefined) {
+                next.insertTextFormat = defaults.insertTextFormat;
+            }
+            if (defaults.commitCharacters !== undefined && next.commitCharacters === undefined) {
+                next.commitCharacters = defaults.commitCharacters;
+            }
+            if (next.textEdit === undefined && defaults.editRange !== undefined) {
+                const text = item.textEditText ?? item.insertText ?? item.label;
+                next.textEdit =
+                    'start' in defaults.editRange
+                        ? { range: defaults.editRange, newText: text }
+                        : { insert: defaults.editRange.insert, replace: defaults.editRange.replace, newText: text };
+            }
+            return next;
+        })
+    };
+}
+
+/*
+ * What a person has typed of an item: from the start of the range it will replace up to the caret when
+ * the caret is in that range, else the word before the caret. Matching against that is what keeps
+ * `thisArg.` from filtering on the dot.
+ */
+export function prefixFor(item: CompletionItem, caret: EditorPosition, lineBefore: string, textBetween: (range: EditorRange) => string): string {
+    const range = editRangeOf(item, false);
+    if (range !== null && range.start.line === caret.line && comparePositions(range.start, caret) <= 0 && comparePositions(caret, range.end) <= 0) {
+        return textBetween({ start: range.start, end: caret });
+    }
+    return identifierPrefix(lineBefore);
+}
+
+export interface Ranked {
+    readonly item: CompletionItem;
+    readonly score: number;
+    /* What was typed of the item, which its matched characters are found against. */
+    readonly prefix: string;
+}
+
+/*
+ * The items that fit what is typed, best first: by how they match, then one the person chose lately, a
+ * preselected one, and the server's own order. `recency` is higher for a choice made more recently, and 0 for none.
+ */
+export function rankCompletions(
+    items: readonly CompletionItem[],
+    prefixOf: (item: CompletionItem) => string,
+    recency: (item: CompletionItem) => number = () => 0,
+    limit = 150
+): Ranked[] {
+    return items
+        .map((item, index) => {
+            const prefix = prefixOf(item);
+            return { item, index, prefix, score: matchScore(item.filterText ?? item.label, prefix), recent: recency(item) };
+        })
+        .filter((entry): entry is typeof entry & { score: number } => entry.score !== undefined)
+        .sort(
+            (left, right) =>
+                left.score - right.score ||
+                right.recent - left.recent ||
+                Number(right.item.preselect === true) - Number(left.item.preselect === true) ||
+                (left.item.sortText ?? left.item.label).localeCompare(right.item.sortText ?? right.item.label) ||
+                left.index - right.index
+        )
+        .slice(0, limit)
+        .map(({ item, score, prefix }) => ({ item, score, prefix }));
+}
+
+/* The characters of a label to mark for what was typed; none when the label is not what the server filtered on. */
+export function matchedCharacters(label: string, prefix: string): readonly number[] {
+    return matchDetail(label, prefix)?.positions ?? [];
+}
+
+/* The first line of what a server says about where an item comes from, with a PHP `use` made into the namespace it names. */
+function sourceOf(item: CompletionItem): string {
+    const detail = item.detail?.split('\n')[0]?.trim() ?? '';
+    const imported = /^use\s+(.+)$/.exec(detail);
+    return imported === null ? detail : imported[1]!.slice(0, Math.max(0, imported[1]!.lastIndexOf('\\')));
+}
+
+/* What stands right-aligned after a row: the module or namespace the item comes from, else what the server calls its type. */
+export function qualifierOf(item: CompletionItem): string {
+    const description = item.labelDetails?.description?.trim() ?? '';
+    return description !== '' ? description : sourceOf(item);
+}
+
+/*
+ * The qualifier of each row of a list. Items that share a label are told apart however it takes: by the
+ * qualifier, or by what the server says besides, and by a number when a server says nothing that differs.
+ */
+export function qualifiersOf(items: readonly CompletionItem[]): string[] {
+    const result = items.map(qualifierOf);
+    const groups = new Map<string, number[]>();
+    items.forEach((item, index) => groups.set(item.label, [...(groups.get(item.label) ?? []), index]));
+    for (const indexes of groups.values()) {
+        if (indexes.length < 2 || new Set(indexes.map((index) => result[index])).size === indexes.length) {
+            continue;
+        }
+        const alternate = indexes.map((index) => sourceOf(items[index]!) || result[index]!);
+        const distinct = new Set(alternate).size === indexes.length && !alternate.includes('');
+        indexes.forEach((index, position) => {
+            result[index] = distinct ? alternate[position]! : `${result[index] ?? ''} #${position + 1}`.trim();
+        });
+    }
+    return result;
+}
+
+/* A snippet as the plain text it would insert: tab stops and variables vanish, placeholders and choices become their text, and the escapes of the format are undone. */
+export function snippetToText(snippet: string): string {
+    return parseSnippet(snippet).text;
+}
+
+export const METHOD_KIND = 2;
+export const FUNCTION_KIND = 3;
+export const CONSTRUCTOR_KIND = 4;
+export const CLASS_KIND = 7;
+export const SNIPPET_FORMAT = 2;
+
+/* A call snippet with the call cut off, for a name that already has its parentheses: `log(${1:value})$0` becomes `log`. */
+function withoutCall(snippet: string): string {
+    const open = snippet.search(/(?<!\\)\(/);
+    return open > 0 ? snippet.slice(0, open) : snippet;
+}
+
+export interface Insertion {
+    readonly range: EditorRange;
+    readonly text: string;
+    /* Where Tab goes in the inserted text, in order; empty for plain text and for a snippet without stops. */
+    readonly stops: readonly SnippetStop[];
+}
+
+/*
+ * What goes into the text for an item and the range it takes the place of, given the caret. `lineAfter` is
+ * the rest of the line after the caret: an item that would add a call does not when a parenthesis follows.
+ */
+export function insertionOf(item: CompletionItem, caret: EditorPosition, lineBefore: string, replace: boolean, lineAfter = ''): Insertion {
+    const raw = item.textEdit?.newText ?? item.insertText ?? item.label;
+    const edit = editRangeOf(item, replace);
+    const range =
+        edit === null
+            ? { start: { line: caret.line, character: caret.character - identifierPrefix(lineBefore).length }, end: caret }
+            : // The word grew since the answer came, so what was typed since belongs to what is replaced.
+              { start: edit.start, end: comparePositions(edit.end, caret) < 0 && edit.end.line === caret.line ? caret : edit.end };
+    if (item.insertTextFormat !== SNIPPET_FORMAT) {
+        return { range, text: raw, stops: [] };
+    }
+    const followed = range.end.line === caret.line && lineAfter.slice(Math.max(0, range.end.character - caret.character)).startsWith('(');
+    const callable = item.kind === METHOD_KIND || item.kind === FUNCTION_KIND || item.kind === CONSTRUCTOR_KIND;
+    const parsed = parseSnippet(followed && callable ? withoutCall(raw) : raw);
+    return { range, text: parsed.text, stops: tabOrder(parsed) };
+}
+
+/*
+ * The same insertion at every other caret that has the word the primary caret has before it, so a name typed at
+ * several carets is completed at all of them. A caret that is inside a selection, or after other text, is left alone.
+ */
+export function mirroredInsertions(
+    carets: readonly EditorRange[],
+    primary: EditorRange,
+    caret: EditorPosition,
+    text: (range: EditorRange) => string,
+    insertion: Insertion
+): EditorContentChange[] {
+    const before = insertion.range.start.line === caret.line ? caret.character - insertion.range.start.character : -1;
+    const after = insertion.range.end.line === caret.line ? insertion.range.end.character - caret.character : -1;
+    if (before < 0 || after < 0) {
+        return [];
+    }
+    const typed = text({ start: insertion.range.start, end: caret });
+    const replaced = text({ start: caret, end: insertion.range.end });
+    return carets.flatMap((other): EditorContentChange[] => {
+        const at = other.start;
+        if (comparePositions(other.start, primary.start) === 0 && comparePositions(other.end, primary.end) === 0) {
+            return [];
+        }
+        if (comparePositions(other.start, other.end) !== 0 || at.character < before) {
+            return [];
+        }
+        const range = { start: { line: at.line, character: at.character - before }, end: { line: at.line, character: at.character + after } };
+        const preceding = range.start.character > 0 ? text({ start: { line: at.line, character: range.start.character - 1 }, end: range.start }) : '';
+        const startsWord = preceding === '' || !isIdentifierCharacter(preceding);
+        const matches = startsWord && text({ start: range.start, end: at }) === typed && text({ start: at, end: range.end }) === replaced;
+        return matches ? [{ range, text: insertion.text }] : [];
+    });
+}
+
+export function documentationText(documentation: string | MarkupContent | undefined): string {
+    if (documentation === undefined) {
+        return '';
+    }
+    return typeof documentation === 'string'
+        ? documentation
+        : documentation.kind === 'plaintext'
+          ? documentation.value.replace(/([\\`*_{}[\]()#+\-.!|<>~])/g, '\\$1')
+          : documentation.value;
+}
+
+const SOURCE_LINE = /^(?:use\s|Auto import from\b)/;
+
+/*
+ * What is said about a suggestion beside the list, in the shape a hover has: the signature it names and the
+ * documentation split into signature, prose and tags. A first line that only says where the item comes from is
+ * kept apart, since it is no code.
+ */
+export function completionDocsOf(item: CompletionItem, highlightLanguage: string): CompletionDocs | null {
+    const lines = (item.detail ?? '').trim().split('\n');
+    const hasSource = SOURCE_LINE.test(lines[0] ?? '');
+    const source = hasSource ? lines[0]!.trim() : '';
+    const code = (hasSource ? lines.slice(1) : lines).join('\n').trim();
+    const parsed = splitSignatures(documentationText(item.documentation));
+    const text: HoverText = {
+        signatures: code === '' ? parsed.signatures : [{ language: highlightLanguage, code }, ...parsed.signatures],
+        markdown: parsed.markdown
+    };
+    return source === '' && isEmptyHover(text) ? null : { source, text };
+}
+
+export type { InsertReplaceEdit, TextEdit };
+
+const KIND_LETTERS: Record<number, string> = {
+    1: 't',
+    2: 'm',
+    3: 'f',
+    4: 'c',
+    5: 'p',
+    6: 'v',
+    7: 'c',
+    8: 'i',
+    9: 'm',
+    10: 'p',
+    11: 'u',
+    12: 'v',
+    13: 'e',
+    14: 'k',
+    15: 's',
+    16: 'c',
+    17: 'f',
+    18: 'r',
+    19: 'f',
+    20: 'e',
+    21: 'k',
+    22: 's',
+    23: 'e',
+    24: 'o',
+    25: 't'
+};
+
+export type KindTone = 'callable' | 'value' | 'type' | 'other';
+
+const KIND_TONES: Record<number, KindTone> = {
+    2: 'callable',
+    3: 'callable',
+    4: 'callable',
+    5: 'value',
+    6: 'value',
+    10: 'value',
+    12: 'value',
+    20: 'value',
+    21: 'value',
+    7: 'type',
+    8: 'type',
+    9: 'type',
+    13: 'type',
+    22: 'type',
+    25: 'type'
+};
+
+export function kindLetterOf(kind: number | undefined): string {
+    return kind === undefined ? '·' : (KIND_LETTERS[kind] ?? '·');
+}
+
+export function kindToneOf(kind: number | undefined): KindTone {
+    return kind === undefined ? 'other' : (KIND_TONES[kind] ?? 'other');
+}
+
+export interface RowWindow {
+    readonly first: number;
+    /* One past the last row drawn. */
+    readonly last: number;
+}
+
+/*
+ * The rows of a list worth drawing: the ones in view, a few on each side, and the active one with the
+ * same margin, so the rows between never leave a gap. The rest is only space.
+ */
+export function rowWindow(scrollTop: number, active: number, total: number, rowHeight: number, visible: number, margin: number, padding: number): RowWindow {
+    const shown = Math.floor(Math.max(0, scrollTop - padding) / rowHeight);
+    return {
+        first: Math.max(0, Math.min(shown, active) - margin),
+        last: Math.min(total, Math.max(shown + visible + 1, active + 1) + margin)
+    };
+}