@adecore/editor-react

Language features for @adecore/editor, over a LanguageService: suggestions and snippets, hover cards, signature help, problems, go to definition, peek, rename, code actions, symbols, semantic colors, inlay hints, folds and code vision, with the React cards that show them. The package starts no language server and touches no file; the app hands it a service and the file operations it allows.

import { EditorView, ProjectLanguage } from '@adecore/editor-react';

const project = new ProjectLanguage(service, { folder: '/shop', keymap, openPlace });

<EditorView engine={engine} options={options} project={project} uri="file:///shop/src/order.ts" languageId="typescript" className="h-96" />;

import { LanguageFrame } from '../shared/editor-frame.tsx';
import { useDemoLanguage } from '../shared/editor.ts';
import {
    reportProblems,
    respondCodeActions,
    respondCompletion,
    respondHighlights,
    respondHover,
    respondNavigation,
    respondRename,
    respondSignatureHelp,
    respondSymbols
} from '../shared/order-service.ts';
import type { FakeLanguageService } from '@adecore/editor-react/testing';

/* Every feature the fake service answers for, as a real TypeScript server would. */
function configure(service: FakeLanguageService): void {
    respondCompletion(service);
    respondSignatureHelp(service);
    respondHover(service);
    respondNavigation(service);
    respondSymbols(service);
    respondHighlights(service);
    respondRename(service);
    respondCodeActions(service);
    reportProblems(service);
}

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

    return (
        <LanguageFrame
            project={project}
            onMount={onMount}
            className="h-96"
            toolbar={
                <span className="px-1 text-xs text-text-muted">
                    Type `line.` for suggestions, rest the pointer on a name, Ctrl+click `orderTotal`, or right-click.
                </span>
            }
        />
    );
}

The demos on these pages run over FakeLanguageService, with answers worked out from the text of the file in docs/demos/shared/order-service.ts. No server runs.

What is in it

• Getting started: install, styles, translations and a first editor with a fake service.
• Projects and documents: ProjectLanguage, the operations the app hands it, shared documents, workspace edits and the problems of a project.
• EditorView: the component, EditorLanguage for an editor mounted by hand, LanguagePopups and AnchoredPopup.
• Completion and signatures, Hover and problems, Navigation and Rename and code actions: the features and their cards.
• FindReplace: a find and replace bar.
• Reviews and agents: ChangeReview, AttributionCard and React in editor rows.
• Code vision: usages and authors above declarations.
• Models: the pure functions behind the features.
• View state: where a file was scrolled, folded and left.
• Testing: FakeLanguageService and ManualTimers.

Entry points

Import	What it holds
@adecore/editor-react	The components, ProjectLanguage, EditorLanguage, the hosts and every model
@adecore/editor-react/models	Only the models, without React
@adecore/editor-react/testing	FakeLanguageService, ManualTimers and the LanguageCall type
@adecore/editor-react/editor-react.css	The styles of the cards
@adecore/editor-react/locales/en.json, nl.json	The words of the editor namespace

Limits

• What works depends on what the service supports. A feature asks only for methods the service supports; a command for one it does not support tells the person so through the app's notify.
• The view's limits hold: no bidirectional text, no tested screen reader support, and the performance limits of the editor.
• Snippets are a subset: tab stops, placeholders and the first value of a choice. Variables insert nothing or their default, and transforms are skipped. Stops with the same number are not edited together.
• Inlay hints flatten a label with parts to its text and ignore padding, tooltips, commands and edits.
• Semantic tokens are asked in full after each pause in typing; the delta and range requests of the protocol are not used.
• A workspace edit that deletes a file, or creates one over a file that is there, is refused, versions in the edit are not checked, and a failure halfway does not roll back the steps before it. See workspace edits.
• Code vision rows are skipped in files over 20,000 lines.

The package is FSL-1.1-MIT.