import type { UmbLitElement } from '../../core/lit-element/index.js'; export type CodeEditorLanguage = 'csharp' | 'razor' | 'typescript' | 'javascript' | 'css' | 'markdown' | 'json' | 'html'; export declare enum CodeEditorTheme { Light = "umb-light", Dark = "umb-dark", HighContrastLight = "umb-hc-light", HighContrastDark = "umb-hc-dark" } export interface UmbCodeEditorHost extends UmbLitElement { container: HTMLElement; language: CodeEditorLanguage; theme: CodeEditorTheme; code: string; readonly: boolean; label?: string; } export interface UmbCodeEditorCursorPosition { column: number; lineNumber: number; } export interface UmbCodeEditorRange { startLineNumber: number; startColumn: number; endLineNumber: number; endColumn: number; } export interface UmbCodeEditorSelection { startLineNumber: number; startColumn: number; endLineNumber: number; endColumn: number; positionColumn: number; positionLineNumber: number; selectionStartColumn: number; selectionStartLineNumber: number; } export interface UmbCodeEditorCursorPositionChangedEvent { position: UmbCodeEditorCursorPosition; secondaryPositions: UmbCodeEditorCursorPosition[]; } export interface UmbCodeEditorCursorSelectionChangedEvent { selection: UmbCodeEditorSelection; secondarySelections: UmbCodeEditorSelection[]; } export interface CodeEditorConstructorOptions { /** * The initial value of the auto created model in the editor. */ value?: string; /** * The initial language of the auto created model in the editor. */ language?: CodeEditorLanguage; /** * Initial theme to be used for rendering. * The current out-of-the-box available themes are: 'vs' (default), 'vs-dark', 'hc-black', 'hc-light. * You can create custom themes via `monaco.editor.defineTheme`. * To switch a theme, use `monaco.editor.setTheme`. * **NOTE**: The theme might be overwritten if the OS is in high contrast mode, unless `autoDetectHighContrast` is set to false. */ theme?: CodeEditorTheme; /** * Container element to use for ARIA messages. * Defaults to document.body. */ ariaContainerElement?: HTMLElement; /** * The aria label for the editor's textarea (when it is focused). */ ariaLabel?: string; /** * The `tabindex` property of the editor's textarea */ tabIndex?: number; /** * Control the rendering of line numbers. * Defaults to `true`. */ lineNumbers?: boolean; /** * Class name to be added to the editor. */ extraEditorClassName?: string; /** * Should the editor be read only. See also `domReadOnly`. * Defaults to false. */ readOnly?: boolean; /** * Control the behavior and rendering of the minimap. */ minimap?: boolean; /** * Enable that the editor will install a ResizeObserver to check if its container dom node size has changed. * Defaults to false. */ automaticLayout?: boolean; /** * Control the wrapping of the editor. * When `wordWrap` = "off", the lines will never wrap. * When `wordWrap` = "on", the lines will wrap at the viewport width. * When `wordWrap` = "wordWrapColumn", the lines will wrap at `wordWrapColumn`. * When `wordWrap` = "bounded", the lines will wrap at min(viewport width, wordWrapColumn). * Defaults to "off". */ wordWrap?: 'off' | 'on' | 'wordWrapColumn' | 'bounded'; /** * Enable detecting links and making them clickable. * Defaults to true. */ links?: boolean; /** * Enable inline color decorators and color picker rendering. */ colorDecorators?: boolean; /** * Controls the max number of color decorators that can be rendered in an editor at once. */ colorDecoratorsLimit?: number; /** * Enable custom contextmenu. * Defaults to true. */ contextmenu?: boolean; /** * The modifier to be used to add multiple cursors with the mouse. * Defaults to 'alt' */ multiCursorModifier?: 'ctrlCmd' | 'alt'; /** * Controls the max number of text cursors that can be in an active editor at once. */ multiCursorLimit?: number; /** * Controls the number of lines in the editor that can be read out by a screen reader */ accessibilityPageSize?: number; /** * Controls the spacing around the editor. * @type {{bottom: number; top: number}} * @memberof CodeEditorConstructorOptions */ padding?: { bottom: number; top: number; }; /** * Controls if the editor should allow to move selections via drag and drop. * Defaults to false. */ dragAndDrop?: boolean; /** * Show code lens * Defaults to true. */ codeLens?: boolean; /** * Control the behavior and rendering of the code action lightbulb. */ lightbulb?: boolean; /** * Enable code folding. * Defaults to true. */ folding?: boolean; /** * The font family */ fontFamily?: string; /** * The font weight */ fontWeight?: string; /** * The font size */ fontSize?: number; /** * The line height */ lineHeight?: number; /** * The letter spacing */ letterSpacing?: number; } export interface CodeEditorSearchOptions { /** * Limit the searching to only search inside the editable range of the model. * @type {boolean} * @memberof CodeEditorSearchOptions */ searchOnlyEditableRange?: boolean; /** * Used to indicate that searchString is a regular expression. * @type {boolean} * @memberof CodeEditorSearchOptions */ isRegex?: boolean; /** * Force the matching to match lower/upper case exactly. * @type {boolean} * @memberof CodeEditorSearchOptions */ matchCase?: boolean; /** * Force the matching to match entire words only. Pass null otherwise. * @type {string} * @memberof CodeEditorSearchOptions */ wordSeparators?: string | null; /** * The result will contain the captured groups. * @type {boolean} * @memberof CodeEditorSearchOptions */ captureMatches?: boolean; }