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

package/src/SignatureCard.tsx

@@ -0,0 +1,42 @@
+import { Markdown } from './Markdown.tsx';
+import type { SignatureViewModel } from './signature-model.ts';
+
+/* The signature with the parameter being typed underlined, and what is said about that parameter below it. */
+export function SignatureCard({ model }: { model: SignatureViewModel }) {
+    const { label, active } = model;
+    const documentation = model.parameterDocumentation !== '' ? model.parameterDocumentation : model.documentation;
+
+    return (
+        <div className="flex w-max max-w-[min(560px,calc(100vw-16px))] min-w-[240px] flex-col divide-y divide-border">
+            <div className="px-3 py-2 font-mono text-code break-words whitespace-pre-wrap text-text-muted">
+                {active === null ? (
+                    label
+                ) : (
+                    <>
+                        {label.slice(0, active.start)}
+                        <span className="font-semibold text-text underline decoration-2 underline-offset-2">{label.slice(active.start, active.end)}</span>
+                        {label.slice(active.end)}
+                    </>
+                )}
+                {model.count > 1 && (
+                    <span className="ml-2 font-sans text-xs text-text-faint">
+                        {model.index + 1}/{model.count}
+                    </span>
+                )}
+            </div>
+            {documentation !== '' && (
+                <div className="flex items-baseline gap-1.5 px-3 py-2 text-xs text-text-muted select-text [&_.adecore-editor-markdown]:text-xs [&_.adecore-editor-markdown_p]:m-0">
+                    {model.parameterName !== '' && model.parameterDocumentation !== '' && (
+                        <>
+                            <span className="shrink-0 font-semibold text-text">{model.parameterName}</span>
+                            <span aria-hidden>·</span>
+                        </>
+                    )}
+                    <div className="min-w-0">
+                        <Markdown text={documentation} />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/SymbolPicker.tsx

@@ -0,0 +1,219 @@
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
+import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
+import { AtSign, Hash } from 'lucide-react';
+import { Icon } from '@adecore/ui';
+import { formatShortcut } from '@adecore/ui';
+import { formatNumber } from '@adecore/ui/format';
+import { basenameOf } from './paths.ts';
+import { fileUriToPath } from '@adecore/lsp';
+import type { EditorLanguage } from './editor-language.ts';
+import type { SymbolsView } from './popups.ts';
+import {
+    filterEntries,
+    groupEntries,
+    letterOfKind,
+    modeOf,
+    toneOfKind,
+    type SymbolEntry,
+    type SymbolTone,
+    type WorkspaceEntry
+} from './symbol-picker-model.ts';
+
+const TONES: Record<SymbolTone, string> = {
+    callable: 'bg-accent-soft text-accent',
+    value: 'bg-status-running/15 text-status-running',
+    type: 'bg-status-idle/15 text-status-idle',
+    other: 'bg-surface-hover text-text-muted'
+};
+
+const SEARCH_DELAY_MS = 200;
+
+function Badge({ kind }: { kind: number }) {
+    return (
+        <span className={`grid size-4 shrink-0 place-items-center rounded-sm font-mono text-xs font-semibold ${TONES[toneOfKind(kind)]}`}>
+            {letterOfKind(kind)}
+        </span>
+    );
+}
+
+/*
+ * The picker of go to symbol, over the editor: an input, the symbols of the file in groups by kind, and the
+ * keys. The input keeps the focus; Enter goes, Escape and the focus leaving close it.
+ */
+export function SymbolPicker({ language, view }: { language: EditorLanguage; view: SymbolsView }) {
+    const { t } = useTranslation('editor');
+    const [input, setInput] = useState('');
+    const [active, setActive] = useState(0);
+    const [found, setFound] = useState<{ text: string; entries: WorkspaceEntry[] }>({ text: '', entries: [] });
+    const activeRow = useRef<HTMLButtonElement>(null);
+    const mode = modeOf(input);
+    const filterText = mode.mode === 'symbol' ? mode.text : '';
+    const searchText = mode.mode === 'workspace' ? mode.text : '';
+
+    const groups = useMemo(() => groupEntries(filterEntries(view.entries, filterText)), [view.entries, filterText]);
+    const flat: SymbolEntry[] = groups.flatMap((group) => group.entries);
+    const places = mode.mode === 'workspace' && found.text === mode.text ? found.entries : [];
+    const count = mode.mode === 'workspace' ? places.length : mode.mode === 'line' ? (mode.line === null ? 0 : 1) : flat.length;
+
+    useEffect(() => {
+        if (searchText === '') {
+            return;
+        }
+        const controller = new AbortController();
+        const text = searchText;
+        const timer = setTimeout(() => {
+            language.symbolPicker
+                .search(text, controller.signal)
+                .then((entries) => !controller.signal.aborted && setFound({ text, entries }))
+                .catch(() => undefined);
+        }, SEARCH_DELAY_MS);
+        return () => {
+            clearTimeout(timer);
+            controller.abort();
+        };
+    }, [language, searchText]);
+
+    useEffect(() => {
+        activeRow.current?.scrollIntoView({ block: 'nearest' });
+    }, [active, input]);
+
+    function choose(index: number): void {
+        if (mode.mode === 'line') {
+            if (mode.line !== null) {
+                language.symbolPicker.goToLine(mode.line);
+            }
+        } else if (mode.mode === 'workspace') {
+            const place = places[index];
+            if (place !== undefined) {
+                language.symbolPicker.goToWorkspace(place);
+            }
+        } else if (flat[index] !== undefined) {
+            language.symbolPicker.goTo(flat[index]!);
+        }
+    }
+
+    function onKeyDown(event: KeyboardEvent<HTMLInputElement>): void {
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            event.stopPropagation();
+            language.symbolPicker.close();
+        } else if (event.key === 'Enter' && !event.nativeEvent.isComposing) {
+            event.preventDefault();
+            event.stopPropagation();
+            choose(active);
+        } else if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            setActive(Math.max(0, Math.min(Math.max(0, count - 1), active + (event.key === 'ArrowDown' ? 1 : -1))));
+        }
+    }
+
+    let offset = 0;
+    return createPortal(
+        <div
+            className="fixed top-[12vh] left-1/2 z-(--z-popup) flex w-[560px] max-w-[calc(100vw-16px)] -translate-x-1/2 flex-col overflow-hidden rounded-lg border border-border bg-surface-raised text-text shadow-(--float-shadow)"
+            onPointerDown={(event) => event.target !== event.currentTarget && (event.target as HTMLElement).tagName !== 'INPUT' && event.preventDefault()}
+        >
+            <div className="flex items-center gap-2 border-b border-border px-3 py-2">
+                <Icon icon={mode.mode === 'workspace' ? Hash : AtSign} size={14} className="shrink-0 text-text-muted" />
+                <input
+                    autoFocus
+                    value={input}
+                    spellCheck={false}
+                    autoComplete="off"
+                    placeholder={t('language.symbols.placeholder', { file: view.file })}
+                    className="min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+                    onChange={(event) => {
+                        setInput(event.target.value);
+                        setActive(0);
+                    }}
+                    onKeyDown={onKeyDown}
+                    onBlur={() => language.symbolPicker.close()}
+                />
+                <span className="shrink-0 text-xs text-text-faint">
+                    {language.shortcuts.goToSymbol === null ? '' : formatShortcut(language.shortcuts.goToSymbol, language.apple)}
+                </span>
+            </div>
+            <div role="listbox" className="max-h-[320px] overflow-y-auto p-1">
+                {mode.mode === 'line' && (
+                    <div className="px-2 py-1.5 text-xs text-text-muted">
+                        {mode.line === null ? t('language.symbols.lineHint') : t('language.symbols.goToLine', { line: formatNumber(mode.line) })}
+                    </div>
+                )}
+                {mode.mode === 'workspace' &&
+                    places.map((place, index) => {
+                        const path = fileUriToPath(place.uri);
+                        return (
+                            <button
+                                key={place.id}
+                                ref={index === active ? activeRow : undefined}
+                                type="button"
+                                role="option"
+                                aria-selected={index === active}
+                                data-active={index === active}
+                                className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"
+                                onClick={() => choose(index)}
+                            >
+                                <Badge kind={place.kind} />
+                                <span className="shrink-0">{place.name}</span>
+                                <span className="min-w-0 truncate font-mono text-text-faint">{place.container}</span>
+                                <span className="ml-auto shrink-0 font-mono text-text-faint">
+                                    {path === null ? '' : basenameOf(path)}:{formatNumber(place.line + 1)}
+                                </span>
+                            </button>
+                        );
+                    })}
+                {mode.mode === 'symbol' &&
+                    groups.map((group) => {
+                        const start = offset;
+                        offset += group.entries.length;
+                        return (
+                            <div key={group.group} role="group">
+                                <div className="px-2 pt-1.5 pb-0.5 text-xs font-medium text-text-faint">{t(`language.symbols.groups.${group.group}`)}</div>
+                                {group.entries.map((entry, index) => {
+                                    const position = start + index;
+                                    return (
+                                        <button
+                                            key={entry.id}
+                                            ref={position === active ? activeRow : undefined}
+                                            type="button"
+                                            role="option"
+                                            aria-selected={position === active}
+                                            data-active={position === active}
+                                            className="flex h-7 w-full items-center gap-2 rounded-md px-2 text-left text-xs cursor-row"
+                                            onClick={() => choose(position)}
+                                        >
+                                            <Badge kind={entry.kind} />
+                                            <span className="shrink-0">{entry.name}</span>
+                                            <span className="min-w-0 truncate font-mono text-text-faint">{entry.detail}</span>
+                                            {entry.container !== '' && <span className="min-w-0 truncate text-text-faint">{entry.container}</span>}
+                                            <span className="ml-auto shrink-0 font-mono text-text-faint">{formatNumber(entry.line + 1)}</span>
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        );
+                    })}
+                {mode.mode === 'symbol' && flat.length === 0 && (
+                    <div className="px-2 py-3 text-center text-xs text-text-muted">{t('language.symbols.none')}</div>
+                )}
+                {mode.mode === 'workspace' && places.length === 0 && (
+                    <div className="px-2 py-3 text-center text-xs text-text-muted">
+                        {mode.text === '' ? t('language.symbols.workspaceHint') : t('language.symbols.none')}
+                    </div>
+                )}
+            </div>
+            <div className="flex items-center gap-3 border-t border-border px-3 py-1.5 text-xs whitespace-nowrap text-text-faint">
+                <span>↑↓ {t('language.symbols.navigate')}</span>
+                <span>↵ {t('language.symbols.open')}</span>
+                <button type="button" className="ml-auto hover:text-text" onClick={() => setInput('#')}>
+                    # {t('language.symbols.workspace')}
+                </button>
+                <button type="button" className="hover:text-text" onClick={() => setInput(':')}>
+                    : {t('language.symbols.line')}
+                </button>
+            </div>
+        </div>,
+        document.body
+    );
+}

package/src/code-actions-model.ts

@@ -0,0 +1,146 @@
+import { applyTextEdits, type CodeAction, type Command, type Diagnostic, type Range, type WorkspaceEdit } from '@adecore/lsp';
+import { comparePositions } from './diagnostics-model.ts';
+import { entriesOf, renamesOf } from './workspace-edit.ts';
+
+export type ActionGroup = 'quickfix' | 'rewrite' | 'extract' | 'inline' | 'move' | 'refactor' | 'source' | 'other';
+
+/* The order of the list under the caret: the fixes and the rewrites that are one keystroke away first, the refactorings after them. */
+export const ACTION_GROUPS: readonly ActionGroup[] = ['quickfix', 'rewrite', 'extract', 'inline', 'move', 'refactor', 'source', 'other'];
+
+/* The order of Refactor This: what changes the structure of the code first, the rewrites after it. */
+export const REFACTOR_GROUPS: readonly ActionGroup[] = ['extract', 'inline', 'move', 'rewrite', 'refactor'];
+
+/* An action of a server with the id its row has in the list. */
+export interface ActionEntry {
+    readonly id: string;
+    readonly action: CodeAction;
+    readonly group: ActionGroup;
+}
+
+/* The kinds nest by dots: `refactor.extract.function` is an extraction and `source.organizeImports` a source action. */
+export function groupOf(kind: string | undefined): ActionGroup {
+    if (kind === 'quickfix' || kind?.startsWith('quickfix.')) {
+        return 'quickfix';
+    }
+    for (const group of ['extract', 'inline', 'move', 'rewrite'] as const) {
+        if (kind === `refactor.${group}` || kind?.startsWith(`refactor.${group}.`)) {
+            return group;
+        }
+    }
+    if (kind === 'refactor' || kind?.startsWith('refactor.')) {
+        return 'refactor';
+    }
+    if (kind === 'source' || kind?.startsWith('source.')) {
+        return 'source';
+    }
+    return 'other';
+}
+
+/*
+ * What a server answered, as the rows of a list. A bare command becomes an action of its own, one a server
+ * marked disabled is left out, and each group lists the preferred actions first, in the order the server gave.
+ */
+export function actionsOf(result: readonly (CodeAction | Command)[] | null, order: readonly ActionGroup[] = ACTION_GROUPS): ActionEntry[] {
+    const entries = (result ?? [])
+        .map((item) => (typeof item.command === 'string' ? ({ title: item.title, command: item as Command } satisfies CodeAction) : (item as CodeAction)))
+        .filter((action) => action.disabled === undefined)
+        .map((action, index) => ({ id: String(index), action, group: groupOf(action.kind) }));
+    return order.flatMap((group) => {
+        const own = entries.filter((entry) => entry.group === group);
+        return [...own.filter((entry) => entry.action.isPreferred === true), ...own.filter((entry) => entry.action.isPreferred !== true)];
+    });
+}
+
+/* Entries from several requests as one list: the same order as a single answer, and an id of its own for each row. Two actions with a title and kind alike are one. */
+export function mergeEntries(lists: readonly (readonly ActionEntry[])[]): ActionEntry[] {
+    const seen = new Set<string>();
+    const unique = lists.flat().filter((entry) => {
+        const key = `${entry.action.kind ?? ''}\0${entry.action.title}`;
+        if (seen.has(key)) {
+            return false;
+        }
+        seen.add(key);
+        return true;
+    });
+    return ACTION_GROUPS.flatMap((group) => {
+        const own = unique.filter((entry) => entry.group === group);
+        return [...own.filter((entry) => entry.action.isPreferred === true), ...own.filter((entry) => entry.action.isPreferred !== true)];
+    }).map((entry, index) => ({ ...entry, id: String(index) }));
+}
+
+/* Whether the lightbulb offers it: a source action such as organizing imports is a command of its own and never a hint. */
+export function isHint(entry: ActionEntry): boolean {
+    return entry.group !== 'source';
+}
+
+/* The problems of a line that are worth a fix: errors and warnings, errors first, in the order of the line. */
+export function fixableOnLine(diagnostics: readonly Diagnostic[], line: number): Diagnostic[] {
+    return diagnostics
+        .filter((diagnostic) => (diagnostic.severity ?? 1) <= 2 && diagnostic.range.start.line <= line && diagnostic.range.end.line >= line)
+        .sort((left, right) => (left.severity ?? 1) - (right.severity ?? 1) || comparePositions(left.range.start, right.range.start));
+}
+
+function touches(range: Range, target: Range): boolean {
+    return comparePositions(range.start, target.end) <= 0 && comparePositions(target.start, range.end) <= 0;
+}
+
+/* The problems an action may be about: the ones that overlap or touch the range it was asked for. */
+export function diagnosticsAt(diagnostics: readonly Diagnostic[], range: Range): Diagnostic[] {
+    return diagnostics.filter((diagnostic) => touches(diagnostic.range, range));
+}
+
+/* What an edit would change in the open file, as the lines it takes away and the lines that stand in their place. */
+export interface EditPreview {
+    readonly removed: readonly string[];
+    readonly added: readonly string[];
+    /* Lines left out of `removed` and `added` to keep the preview short. */
+    readonly hiddenLines: number;
+    /* The other files the edit reaches. */
+    readonly otherFiles: number;
+    /* The files it moves. */
+    readonly moves: number;
+}
+
+const PREVIEW_LINES = 3;
+
+function linesOf(text: string): string[] {
+    return text.split(/\r\n|\r|\n/);
+}
+
+/* Null when the edit changes nothing, or creates or deletes a file, which a preview of lines cannot show. */
+export function previewOf(text: string, edit: WorkspaceEdit, uri: string): EditPreview | null {
+    const entries = entriesOf(edit);
+    if (entries === null) {
+        return null;
+    }
+    const own = entries.get(uri);
+    const moves = renamesOf(edit).length;
+    const otherFiles = [...entries.keys()].filter((key) => key !== uri).length;
+    let removed: string[] = [];
+    let added: string[] = [];
+    if (own !== undefined) {
+        let after: string;
+        try {
+            after = applyTextEdits(text, own.flat());
+        } catch {
+            return null;
+        }
+        const before = linesOf(text);
+        const next = linesOf(after);
+        let head = 0;
+        while (head < before.length && head < next.length && before[head] === next[head]) {
+            head++;
+        }
+        let tail = 0;
+        while (tail < before.length - head && tail < next.length - head && before[before.length - 1 - tail] === next[next.length - 1 - tail]) {
+            tail++;
+        }
+        removed = before.slice(head, before.length - tail);
+        added = next.slice(head, next.length - tail);
+    }
+    if (removed.length === 0 && added.length === 0 && otherFiles === 0 && moves === 0) {
+        return null;
+    }
+    const hiddenLines = Math.max(0, removed.length - PREVIEW_LINES) + Math.max(0, added.length - PREVIEW_LINES);
+    return { removed: removed.slice(0, PREVIEW_LINES), added: added.slice(0, PREVIEW_LINES), hiddenLines, otherFiles, moves };
+}