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

package/src/definition-link.ts

@@ -0,0 +1,106 @@
+import type { EditorPosition } from '@adecore/editor';
+import { isIdentifierCharacter } from './completion-model.ts';
+import type { EditorLanguage } from './editor-language.ts';
+import { locationsOf } from './hover-content.ts';
+import { wordRangeAt } from './rename-model.ts';
+
+/*
+ * 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.
+ */
+export class DefinitionLinkFeature {
+    private readonly language: EditorLanguage;
+    private held = false;
+    private pointer: EditorPosition | null = null;
+    private shownKey = '';
+    private drawn = false;
+    private request = 0;
+    private lookup: AbortController | null = null;
+
+    constructor(language: EditorLanguage) {
+        this.language = language;
+        const { editor } = language;
+        const offs = [
+            editor.onHover((hover) => {
+                this.pointer = hover?.position ?? null;
+                this.update();
+            }),
+            editor.onTextChange(() => this.clear()),
+            editor.onViewChange(() => this.clear())
+        ];
+        if (typeof window !== 'undefined') {
+            const modKey = language.apple ? 'Meta' : 'Control';
+            const keys = (event: KeyboardEvent): void => {
+                if (event.key === modKey) {
+                    this.setModHeld(event.type === 'keydown');
+                }
+            };
+            const lost = (): void => this.setModHeld(false);
+            window.addEventListener('keydown', keys);
+            window.addEventListener('keyup', keys);
+            window.addEventListener('blur', lost);
+            offs.push(() => {
+                window.removeEventListener('keydown', keys);
+                window.removeEventListener('keyup', keys);
+                window.removeEventListener('blur', lost);
+            });
+        }
+        language.onDispose(() => {
+            for (const off of offs) {
+                off();
+            }
+            this.clear();
+        });
+    }
+
+    setModHeld(held: boolean): void {
+        if (held !== this.held) {
+            this.held = held;
+            this.update();
+        }
+    }
+
+    private clear(): void {
+        this.request++;
+        this.lookup?.abort();
+        this.shownKey = '';
+        if (this.drawn) {
+            this.drawn = false;
+            this.language.editor.setLink(null);
+        }
+    }
+
+    private update(): void {
+        const { pointer } = this;
+        if (!this.held || pointer === null || !this.language.project.service.supports('textDocument/definition', this.language.uri)) {
+            this.clear();
+            return;
+        }
+        const { editor, project, uri } = this.language;
+        const line = editor.textInRange({ start: { line: pointer.line, character: 0 }, end: { line: pointer.line, character: Number.MAX_SAFE_INTEGER } });
+        const word = isIdentifierCharacter(line[pointer.character] ?? '') ? wordRangeAt(line, pointer) : null;
+        if (word === null) {
+            this.clear();
+            return;
+        }
+        const key = `${word.start.line}:${word.start.character}`;
+        if (key === this.shownKey) {
+            return;
+        }
+        this.clear();
+        this.shownKey = key;
+        const request = ++this.request;
+        const controller = new AbortController();
+        this.lookup = controller;
+        project.service
+            .definition(uri, pointer, { signal: controller.signal })
+            .then((result) => {
+                if (request === this.request && locationsOf(result).length > 0) {
+                    this.drawn = true;
+                    editor.setLink(word);
+                }
+            })
+            .catch(() => undefined);
+    }
+}

package/src/diagnostics-model.ts

@@ -0,0 +1,102 @@
+import type { EditorContentChange, EditorMarker, EditorMarkerSeverity, EditorPosition, EditorRange } from '@adecore/editor';
+import type { Diagnostic } from '@adecore/lsp';
+
+/* A diagnostic and the language server process that reported it. */
+export interface Problem {
+    readonly diagnostic: Diagnostic;
+    readonly server: string;
+}
+
+const SEVERITIES: Record<number, EditorMarkerSeverity> = { 1: 'error', 2: 'warning', 3: 'info', 4: 'hint' };
+const UNNECESSARY = 1;
+const DEPRECATED = 2;
+/* The scroll track's tip is a line or two, so a long message is cut where it stops being a tip. */
+const TICK_MESSAGE_LENGTH = 300;
+
+/* A report that names no severity is an error, which is the safer side to be wrong on. */
+export function severityOf(diagnostic: Diagnostic): EditorMarkerSeverity {
+    return SEVERITIES[diagnostic.severity ?? 1] ?? 'error';
+}
+
+export function markerOf(diagnostic: Diagnostic): EditorMarker {
+    return {
+        range: diagnostic.range,
+        severity: severityOf(diagnostic),
+        unnecessary: diagnostic.tags?.includes(UNNECESSARY) === true,
+        deprecated: diagnostic.tags?.includes(DEPRECATED) === true,
+        message: diagnostic.message.length > TICK_MESSAGE_LENGTH ? `${diagnostic.message.slice(0, TICK_MESSAGE_LENGTH)}…` : diagnostic.message
+    };
+}
+
+export function comparePositions(left: EditorPosition, right: EditorPosition): number {
+    return left.line === right.line ? left.character - right.character : left.line - right.line;
+}
+
+/* Where an insertion of `text` at `start` ends, counting a line break of any kind once. */
+function endOfInsertion(start: EditorPosition, text: string): EditorPosition {
+    const lines = text.split(/\r\n|\r|\n/);
+    return lines.length === 1
+        ? { line: start.line, character: start.character + text.length }
+        : { line: start.line + lines.length - 1, character: lines[lines.length - 1]!.length };
+}
+
+/* Where a position is once one change is applied to the text it was in. One inside the replaced range lands after the new text. */
+export function shiftPosition(position: EditorPosition, change: EditorContentChange): EditorPosition {
+    const { start, end } = change.range;
+    if (comparePositions(position, start) < 0) {
+        return position;
+    }
+    const inserted = endOfInsertion(start, change.text);
+    if (comparePositions(position, end) < 0) {
+        return inserted;
+    }
+    return position.line === end.line
+        ? { line: inserted.line, character: inserted.character + (position.character - end.character) }
+        : { line: position.line + (inserted.line - end.line), character: position.character };
+}
+
+export function shiftRange(range: EditorRange, changes: readonly EditorContentChange[]): EditorRange {
+    let start = range.start;
+    let end = range.end;
+    for (const change of changes) {
+        start = shiftPosition(start, change);
+        end = shiftPosition(end, change);
+    }
+    return { start, end };
+}
+
+/* A range holds a position from its start up to and including its end, so a caret at either edge of a word is on it. An empty range holds only its own place. */
+export function rangeHolds(range: EditorRange, position: EditorPosition): boolean {
+    return comparePositions(range.start, position) <= 0 && comparePositions(position, range.end) <= 0;
+}
+
+/* The problems under a position, worst first. A hint is not a problem, so it is left to the colors and the faded text. */
+export function problemsAt(problems: readonly Problem[], position: EditorPosition): Problem[] {
+    const rank = (problem: Problem): number => problem.diagnostic.severity ?? 1;
+    return problems
+        .filter((problem) => (problem.diagnostic.severity ?? 1) < 4 && rangeHolds(problem.diagnostic.range, position))
+        .sort((left, right) => rank(left) - rank(right));
+}
+
+/* The start of the first problem after the position, or the last one before it when `direction` is back; it wraps round the document. */
+export function neighborProblem(problems: readonly Problem[], from: EditorPosition, direction: 1 | -1): Problem | null {
+    const candidates = problems
+        .filter((problem) => (problem.diagnostic.severity ?? 1) < 4)
+        .sort((left, right) => comparePositions(left.diagnostic.range.start, right.diagnostic.range.start));
+    if (candidates.length === 0) {
+        return null;
+    }
+    if (direction === 1) {
+        return candidates.find((problem) => comparePositions(problem.diagnostic.range.start, from) > 0) ?? candidates[0]!;
+    }
+    return [...candidates].reverse().find((problem) => comparePositions(problem.diagnostic.range.start, from) < 0) ?? candidates[candidates.length - 1]!;
+}
+
+/* `ts(2551)`, or the code alone, or the source alone, whichever the server gave. */
+export function codeLabelOf(diagnostic: Diagnostic): string {
+    const code = diagnostic.code === undefined ? '' : String(diagnostic.code);
+    if (diagnostic.source !== undefined && code !== '') {
+        return `${diagnostic.source}(${code})`;
+    }
+    return code !== '' ? code : (diagnostic.source ?? '');
+}

package/src/diagnostics.ts

@@ -0,0 +1,117 @@
+import type { Diagnostic } from '@adecore/lsp';
+import type { EditorContentChange, EditorPosition } from '@adecore/editor';
+import type { EditorLanguage } from './editor-language.ts';
+import { isShortcut } from './shortcut-keys.ts';
+import { comparePositions, markerOf, neighborProblem, problemsAt, shiftRange, type Problem } from './diagnostics-model.ts';
+
+export interface ProblemCounts {
+    readonly error: number;
+    readonly warning: number;
+    readonly info: number;
+}
+
+/*
+ * The problems the servers report for one file. A report from a server replaces the one before it
+ * from the same server, the editor draws them, and each one follows its text through edits made
+ * before the server reports again, so what is under a squiggle is still what it was about.
+ */
+export class DiagnosticsFeature {
+    private readonly language: EditorLanguage;
+    private readonly reports = new Map<string, readonly Diagnostic[]>();
+    private readonly listeners = new Set<() => void>();
+    private list: readonly Problem[] = [];
+
+    constructor(language: EditorLanguage) {
+        this.language = language;
+        const { editor, project, uri } = language;
+        const reports = project.service.onDiagnostics((report) => {
+            if (report.uri === uri) {
+                this.reports.set(report.source, report.diagnostics);
+                this.rebuild(true);
+            }
+        });
+        const edits = editor.onTextChange((change) => this.shift(change.changes));
+        // These keys are the editor's while it has the keyboard; elsewhere the menu's commands answer.
+        const keys = editor.onKeyDown((event) => {
+            const next = isShortcut(this.language.shortcuts.nextProblem, event);
+            if (!next && !isShortcut(this.language.shortcuts.previousProblem, event)) {
+                return false;
+            }
+            this.step(next ? 1 : -1);
+            return true;
+        });
+        language.onDispose(() => {
+            keys();
+            reports.dispose();
+            edits();
+            this.listeners.clear();
+            editor.setMarkers([]);
+        });
+    }
+
+    get problems(): readonly Problem[] {
+        return this.list;
+    }
+
+    counts(): ProblemCounts {
+        const count = (severity: number): number => this.list.filter((problem) => (problem.diagnostic.severity ?? 1) === severity).length;
+        return { error: count(1), warning: count(2), info: count(3) };
+    }
+
+    at(position: EditorPosition): Problem[] {
+        return problemsAt(this.list, position);
+    }
+
+    /* Puts the caret on the next problem, or the one before; false when there is none. */
+    step(direction: 1 | -1): boolean {
+        const { editor } = this.language;
+        const target = neighborProblem(this.list, editor.getCaret(), direction);
+        if (target === null) {
+            return false;
+        }
+        editor.setCaret(target.diagnostic.range.start, comparePositions(target.diagnostic.range.start, editor.getCaret()) > 0 ? 'centerDown' : 'centerUp');
+        editor.focus();
+        this.language.hover.showProblemsAt(editor.getCaret());
+        return true;
+    }
+
+    /* Puts the caret on the first problem of the file. */
+    goToFirst(): boolean {
+        const { editor } = this.language;
+        const target = neighborProblem(this.list, { line: -1, character: 0 }, 1);
+        if (target === null) {
+            return false;
+        }
+        editor.setCaret(target.diagnostic.range.start, 'center');
+        editor.focus();
+        this.language.hover.showProblemsAt(editor.getCaret());
+        return true;
+    }
+
+    onChange(listener: () => void): () => void {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+
+    private shift(changes: readonly EditorContentChange[]): void {
+        for (const [server, diagnostics] of this.reports) {
+            this.reports.set(
+                server,
+                diagnostics.map((diagnostic) => ({ ...diagnostic, range: shiftRange(diagnostic.range, changes) }))
+            );
+        }
+        this.rebuild(false);
+    }
+
+    private rebuild(draw: boolean): void {
+        this.list = [...this.reports].flatMap(([server, diagnostics]) => diagnostics.map((diagnostic): Problem => ({ diagnostic, server })));
+        if (draw) {
+            this.language.editor.setMarkers(this.list.map((problem) => markerOf(problem.diagnostic)));
+        }
+        for (const listener of [...this.listeners]) {
+            listener();
+        }
+    }
+}

package/src/editor-language.ts

@@ -0,0 +1,189 @@
+import { KEYMAP, type Keymap } from '@adecore/editor/keymap';
+import { shortcutsOf } from './shortcut-keys.ts';
+import type { Editor, EditorPosition } from '@adecore/editor';
+import type { Location } from '@adecore/lsp';
+import { CodeActionsFeature } from './code-actions.ts';
+import { CodeVisionFeature } from './code-vision.ts';
+import { CompletionFeature } from './completion.ts';
+import { ContextMenuFeature } from './context-menu.ts';
+import { DefinitionLinkFeature } from './definition-link.ts';
+import { DiagnosticsFeature } from './diagnostics.ts';
+import { FoldingFeature } from './folding.ts';
+import { HighlightsFeature } from './highlights.ts';
+import { HistoryFeature } from './history.ts';
+import { HoverFeature } from './hover.ts';
+import { NavigationFeature, locationRow } from './navigation.ts';
+import { PeekFeature } from './peek.ts';
+import { PickFeature } from './pick.ts';
+import { SymbolPickerFeature } from './symbol-picker.ts';
+import { RenameFeature } from './rename.ts';
+import { createPopupStore } from './popups.ts';
+import { realTimers, type Timers } from './timers.ts';
+import { InlayHintsFeature } from './inlay-hints.ts';
+import { SelectionRangesFeature } from './selection-ranges.ts';
+import { SemanticTokensFeature } from './semantic-tokens.ts';
+import { SignatureFeature } from './signature.ts';
+import { SnippetFeature } from './snippet-session.ts';
+import { SymbolsFeature } from './symbols.ts';
+import type { Place } from './navigation-history.ts';
+import type { LanguageDocumentHandle, ProjectLanguage } from './project-language.ts';
+
+/*
+ * The one place that connects an editor to the language servers: it opens the file's document for
+ * the editor and lets go of it again. Every language feature of the editor hangs off this object.
+ */
+export class EditorLanguage {
+    readonly editor: Editor;
+    readonly apple: boolean;
+    readonly keymap: Keymap;
+    readonly shortcuts: ReturnType<typeof shortcutsOf>;
+    readonly project: ProjectLanguage;
+    readonly document: LanguageDocumentHandle;
+    readonly languageId: string;
+    /* What the features of this editor have open over it: the hover card, the suggestions, the signature. */
+    readonly popups = createPopupStore();
+    readonly diagnostics: DiagnosticsFeature;
+    readonly hover: HoverFeature;
+    readonly completion: CompletionFeature;
+    readonly signature: SignatureFeature;
+    readonly snippets: SnippetFeature;
+    readonly highlights: HighlightsFeature;
+    readonly pick: PickFeature;
+    readonly codeActions: CodeActionsFeature;
+    readonly rename: RenameFeature;
+    readonly navigation: NavigationFeature;
+    readonly peek: PeekFeature;
+    readonly symbolPicker: SymbolPickerFeature;
+    readonly contextMenu: ContextMenuFeature;
+    readonly history: HistoryFeature;
+    readonly definitionLink: DefinitionLinkFeature;
+    readonly symbols: SymbolsFeature;
+    readonly codeVision: CodeVisionFeature;
+    private readonly disposers: Array<() => void> = [];
+    private disposed = false;
+
+    constructor(project: ProjectLanguage, editor: Editor, uri: string, languageId: string, timers: Timers = realTimers) {
+        this.editor = editor;
+        this.apple = project.host.apple ?? false;
+        this.keymap = project.host.keymap ?? KEYMAP;
+        this.shortcuts = shortcutsOf(this.keymap, this.apple);
+        this.project = project;
+        this.languageId = languageId;
+        this.document = project.acquire(uri, languageId, editor);
+        this.pick = new PickFeature(this, timers);
+        this.diagnostics = new DiagnosticsFeature(this);
+        this.hover = new HoverFeature(this, timers);
+        this.completion = new CompletionFeature(this, timers);
+        this.snippets = new SnippetFeature(this);
+        this.signature = new SignatureFeature(this, timers);
+        this.highlights = new HighlightsFeature(this, timers);
+        this.symbols = new SymbolsFeature(this, timers);
+        new SelectionRangesFeature(this);
+        new SemanticTokensFeature(this, timers);
+        new InlayHintsFeature(this, timers);
+        this.codeActions = new CodeActionsFeature(this, timers);
+        this.rename = new RenameFeature(this);
+        this.navigation = new NavigationFeature(this);
+        this.peek = new PeekFeature(this);
+        this.symbolPicker = new SymbolPickerFeature(this);
+        this.contextMenu = new ContextMenuFeature(this);
+        this.history = new HistoryFeature(this);
+        this.definitionLink = new DefinitionLinkFeature(this);
+        this.codeVision = new CodeVisionFeature(this, (listener) => this.symbols.onResult(listener), timers);
+        new FoldingFeature(this, (listener) => this.symbols.onResult(listener), timers);
+        this.placeOpenedCaret(editor.getCaret());
+        this.onDispose(editor.onCaret((position) => this.placeOpenedCaret(position)));
+    }
+
+    /* A file opened from another one lands on the line; this puts the caret on the column the jump meant. */
+    private placeOpenedCaret(position: EditorPosition): void {
+        const column = this.project.takeCaret(this.uri, position.line);
+        if (column !== null && column.character !== position.character) {
+            this.editor.setCaret(column);
+            return;
+        }
+        this.project.noteCaret({ uri: this.uri, position });
+    }
+
+    get uri(): string {
+        return this.document.uri;
+    }
+
+    get isDisposed(): boolean {
+        return this.disposed;
+    }
+
+    /* Where the caret is, as a place the history can come back to. */
+    get place(): Place {
+        return { uri: this.uri, position: this.editor.getCaret() };
+    }
+
+    /* Takes the caret to a place the servers named, in this file or in another one that opens beside it, and remembers where it was. */
+    goTo(location: Location): void {
+        this.project.history.record(this.place);
+        this.visit({ uri: location.uri, position: location.range.start });
+    }
+
+    /* Takes the caret to a position of this file and remembers where it was. */
+    jump(position: EditorPosition): void {
+        this.goTo({ uri: this.uri, range: { start: position, end: position } });
+    }
+
+    /* Goes to a place without touching the history, which is how Back and Forward move. */
+    visit(place: Place): void {
+        if (place.uri === this.uri) {
+            this.editor.setCaret(place.position, 'center');
+            this.editor.focus();
+        } else {
+            this.project.openPlace(place);
+        }
+    }
+
+    /* Lists places under a position to choose from; choosing one goes there. */
+    locations(places: readonly Location[], anchor: EditorPosition, title: string): void {
+        const rows = places.map((place, index) => ({ id: String(index), ...locationRow(place, this.project.pathOfLocation(place.uri)) }));
+        this.pick.open({ anchor, title, groups: [{ title: null, rows }], accept: (id) => this.goTo(places[Number(id)]!) });
+    }
+
+    /*
+     * Runs `listener` once the document is open and again whenever the service says what it can ask for
+     * this document changed. A service that is ready before the document opens never says so, so the
+     * opening counts as the first change.
+     */
+    onProvidersChanged(listener: () => void): () => void {
+        let listening = true;
+        void this.document.ready.then(
+            () => {
+                if (listening && !this.disposed) {
+                    listener();
+                }
+            },
+            () => undefined
+        );
+        const providers = this.project.service.onProvidersChanged((uri) => {
+            if (uri === this.uri) {
+                listener();
+            }
+        });
+        return () => {
+            listening = false;
+            providers.dispose();
+        };
+    }
+
+    /* Runs `dispose` when the editor lets go of its document. */
+    onDispose(dispose: () => void): void {
+        this.disposers.push(dispose);
+    }
+
+    dispose(): void {
+        if (this.disposed) {
+            return;
+        }
+        this.disposed = true;
+        for (const dispose of this.disposers.splice(0).reverse()) {
+            dispose();
+        }
+        this.document.release();
+    }
+}

package/src/editor-react.css

@@ -0,0 +1,43 @@
+.peek-hatch {
+    flex-shrink: 0;
+    background: repeating-linear-gradient(135deg, transparent 0 6px, var(--editor-hatch) 6px 7px);
+}
+.adecore-editor-markdown {
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+.adecore-editor-markdown p {
+    margin: 0;
+}
+.adecore-editor-markdown pre {
+    overflow: auto;
+    font-family: var(--font-mono);
+}
+.adecore-editor-markdown a {
+    color: var(--accent);
+    text-decoration: underline;
+}
+.adecore-editor-find {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 8px;
+    background: var(--surface-raised);
+    color: var(--text);
+}
+.adecore-editor-find-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.adecore-editor-find-row input[type='text'] {
+    min-width: 0;
+    flex: 1;
+}
+.adecore-editor-find :focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+.adecore-editor-find output {
+    font-variant-numeric: tabular-nums;
+}

package/src/find-query.ts

@@ -0,0 +1,74 @@
+export interface FindOptions {
+    caseSensitive: boolean;
+    wholeWord: boolean;
+    regex: boolean;
+}
+
+export interface FindQuery extends FindOptions {
+    text: string;
+    /* A surface that can search a selection only: just the text selected when this turned on. */
+    inSelection?: boolean;
+}
+
+export const EMPTY_FIND_QUERY: FindQuery = { text: '', caseSensitive: false, wholeWord: false, regex: false };
+
+export interface TextMatch {
+    start: number;
+    end: number;
+}
+
+export type CompiledFind = { kind: 'empty' } | { kind: 'invalid' } | { kind: 'pattern'; pattern: RegExp };
+
+/* Past this a count stops meaning anything to a reader, and marking every one would stall the page. */
+export const MATCH_LIMIT = 10000;
+
+// A letter or digit in any script, so a whole word in Dutch ends at the same place as one in English.
+const WORD_CHAR = '[\\p{L}\\p{N}_]';
+
+function escapeRegExp(text: string): string {
+    return text.replace(/[.*+?^${}()|[\]\\/]/g, '\\$&');
+}
+
+/* `u` in both modes, since a whole word needs Unicode classes; a pattern that only parses without it counts as invalid. */
+export function compileFind(query: FindQuery): CompiledFind {
+    if (query.text === '') {
+        return { kind: 'empty' };
+    }
+    const body = query.regex ? query.text : escapeRegExp(query.text);
+    const source = query.wholeWord ? `(?<!${WORD_CHAR})(?:${body})(?!${WORD_CHAR})` : body;
+    // Multiline, so `^` and `$` in a pattern mean a line, the way an editor's find reads them.
+    const flags = `gmu${query.caseSensitive ? '' : 'i'}`;
+    try {
+        return { kind: 'pattern', pattern: new RegExp(source, flags) };
+    } catch {
+        return { kind: 'invalid' };
+    }
+}
+
+/* Every match in a text, in order. An empty match (`a*` between two letters) is nothing to show, so it is stepped over. */
+export function matchesIn(text: string, pattern: RegExp, limit: number = MATCH_LIMIT): TextMatch[] {
+    const matches: TextMatch[] = [];
+    const global = new RegExp(pattern.source, pattern.flags.includes('g') ? pattern.flags : `${pattern.flags}g`);
+    let found = global.exec(text);
+    while (found !== null && matches.length < limit) {
+        if (found[0] === '') {
+            // A `u` pattern moves a lastIndex inside a surrogate pair back to its start, so one step would never leave it.
+            global.lastIndex = found.index + ((text.codePointAt(found.index) ?? 0) > 0xffff ? 2 : 1);
+        } else {
+            matches.push({ start: found.index, end: found.index + found[0].length });
+        }
+        found = global.exec(text);
+    }
+    return matches;
+}
+
+/* The step from one match to the next or the one before, round at either end. */
+export function stepIndex(current: number | null, count: number, direction: 1 | -1): number | null {
+    if (count === 0) {
+        return null;
+    }
+    if (current === null) {
+        return direction === 1 ? 0 : count - 1;
+    }
+    return (current + direction + count) % count;
+}