import { ReactNode } from 'react'; import { BuiltinLanguageId, FeatureId } from './registry'; import { LanguageInput, MonacoApi } from './types'; type MonacoEditorInstance = ReturnType; interface CodeEditorBaseProps { value: string; onChange?: (value: string) => void; /** Replaces DEFAULT_FEATURES entirely when provided. */ features?: FeatureId[]; readOnly?: boolean; height?: number | string; /** * Shows a hint in the corner, while the editor has focus, naming the * keystroke that makes Tab move focus instead of inserting a tab character. * * **Off by default**, and deliberately so. Tab inserting a tab character is a * WCAG 2.1.2 keyboard trap and the escape is undiscoverable, which argues for * advertising it — but the hint is permanent chrome inside the editor for * every user, the overwhelming majority of whom navigate with a pointer, * never press Tab expecting to leave, and read it as noise. Whether that * trade is worth making depends on the surface: a settings form a keyboard * user tabs through end to end is a different case from a modal whose editor * is reached by clicking it. That is the consumer's call, not the design * system's, so it is opt-in. * * Switching this on changes nothing about behaviour — Tab still inserts a tab * character, and the escape keystroke works either way, because * `toggleTabFocusMode` is in `DEFAULT_FEATURES`. The only thing this prop * controls is whether the keystroke is advertised on screen. */ showTabFocusHint?: boolean; /** * Required. Monaco renders a bare textarea to assistive technology, so an * unlabelled editor is unusable with a screen reader. */ ariaLabel: string; /** * Merged over the design system's defaults. Spread LAST — both at create * time and on every options-sync effect — so a consumer who puts * `readOnly` or `ariaLabel` inside `options` silently defeats the * top-level prop of the same name. The same applies to `editContext`, which * is pinned false on purpose — see the create call below before overriding it. */ options?: Parameters[1]; /** Runs after create. May return a cleanup function. */ onMount?: (editor: MonacoEditorInstance, monaco: MonacoApi) => void | (() => void); loadingFallback?: ReactNode; onLoadError?: (error: Error) => void; } /** * At least one of `language` or `languages` must be named — otherwise there is * nothing to tell the editor what to mount as. Modelled as a union of two * "one side required" shapes, rather than both fields being independently * optional, so `` (neither supplied) is * a compile error instead of a runtime surprise (silently mounting as plain * text). `language` alone, `languages` alone, and both together all satisfy * one arm or the other. */ export type CodeEditorLanguageProps = { /** Active language id. Defaults to the sole entry when `languages` has one. */ language: string; /** Languages to make available. Defaults to `[language]` when built-in. */ languages?: LanguageInput[]; } | { /** Active language id. Defaults to the sole entry when `languages` has one. */ language?: string; /** Languages to make available. The sole entry becomes the active language. */ languages: LanguageInput[]; }; export type CodeEditorProps = CodeEditorBaseProps & CodeEditorLanguageProps; export declare function CodeEditor({ value, onChange, language, languages, features, readOnly, height, showTabFocusHint, ariaLabel, options, onMount, loadingFallback, onLoadError, }: Readonly): import("react").JSX.Element; export default CodeEditor;