Hover and problems

import { Button } from '@adecore/ui';
import type { FakeLanguageService } from '@adecore/editor-react/testing';
import { LanguageFrame } from '../shared/editor-frame.tsx';
import { useDemoLanguage } from '../shared/editor.ts';
import { reportProblems, respondHover } from '../shared/order-service.ts';

function configure(service: FakeLanguageService): void {
    respondHover(service);
    reportProblems(service);
}

export default function HoverDemo() {
    const { project, language, onMount } = useDemoLanguage(configure);

    const show = (line: number, character: number): void => {
        language?.editor.setCaret({ line, character });
        language?.editor.focus();
        language?.hover.quickInfo();
    };

    return (
        <LanguageFrame
            project={project}
            onMount={onMount}
            toolbar={
                <>
                    <Button size="xs" variant="secondary" onClick={() => show(13, 40)}>
                        Quick info on `formatNumber`
                    </Button>
                    <Button size="xs" variant="secondary" onClick={() => show(3, 36)}>
                        The problem on line 4
                    </Button>
                </>
            }
        />
    );
}

Hover cards

Resting the pointer on a name for 300 milliseconds asks the service for its hover; the card closes 250 milliseconds after the pointer leaves the name and the card. hover.quickInfo() opens the card for the caret, as Ctrl+J on a Mac and Ctrl+Q elsewhere do, and it stays until the caret moves. hover.keep() pins the open card, hover.hide() closes it, and hover.showRange(range) opens an empty card over a range for the app to fill.

HoverCard splits the answer into its parts: the signature in code, the documentation as Markdown with its @param and other tags set apart, a browser-support baseline where the server gives one, and the problems at that place. A type name in the signature is a link to its definition, and the card counts the references of the name after half a second, where the service supports them. Markdown is GitHub-flavored without raw HTML. Code is colored through EditorRenderingProvider.

Problems

The DiagnosticsFeature (language.diagnostics) turns the service's diagnostics into markers. A report replaces the earlier one of the same source, so two servers of a document do not erase each other. The markers follow the text until the next report. Diagnostic tags draw unused code faded and deprecated code struck through.

Member	What it does
problems	The problems of the file, as Problems
counts()	{ error, warning, info }
at(position)	The problems at a position
step(direction)	Puts the caret on the next or previous problem, as F2 and Alt+Shift+F2 do
goToFirst()	Puts the caret on the first problem
onChange(listener)	Called when the problems change

useProblemCounts(language) reads counts() in a component and renders again when it changes; null gives zeros. For the problems of the whole project, see ProjectProblems.

Semantic tokens, inlay hints and folds

These run without a field on EditorLanguage, after a pause in typing and when the service says its providers changed:

• Semantic tokens are asked in full, 200 milliseconds after an edit, and need a legend in the provider options. decodeSemanticTokens and scopesOf turn them into the scopes the editor colors through scopeColors.
• Inlay hints are asked for the lines in view plus 60 lines on each side, 300 milliseconds after an edit or a scroll.
• Folding ranges and document symbols become fold hints, and symbols become the blocks of sticky scroll and the breadcrumb.
• Selection ranges let Extend Selection grow through the server's ranges.