import type { CodeEditorConstructorOptions, CodeEditorSearchOptions, CodeEditorTheme, UmbCodeEditorCursorPosition, UmbCodeEditorCursorPositionChangedEvent, UmbCodeEditorCursorSelectionChangedEvent, UmbCodeEditorHost, UmbCodeEditorRange, UmbCodeEditorSelection } from './models/code-editor.model.js'; import { monaco } from '../../external/monaco-editor/index.js'; import { UmbControllerBase } from '../../libs/class-api/index.js'; /** * This is a wrapper class for the [monaco editor](https://microsoft.github.io/monaco-editor). It exposes some of the monaco editor API. It also handles the creation of the monaco editor. * It allows access to the entire monaco editor object through `monacoEditor` property, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility. * Through the UmbCodeEditorHost interface it can be used in a custom element. * By using monaco library directly you can access the entire monaco API along with code completions, actions etc. This class creates some level of abstraction over the monaco editor. It only provides basic functionality, that should be enough for most of the use cases and should be possible to implement with any code editor library. * * Current issues: [shadow DOM related issues](https://github.com/microsoft/monaco-editor/labels/editor-shadow-dom) #3217 currently fixed by a hack , [razor syntax highlight](https://github.com/microsoft/monaco-editor/issues/1997) * @class UmbCodeEditor */ export declare class UmbCodeEditorController extends UmbControllerBase { #private; /** * The monaco editor object. This is the actual monaco editor object. It is exposed for advanced usage, but mind the fact that editor might be swapped in the future for a different library, so use on your own responsibility. For more information see [monaco editor API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IStandaloneCodeEditor.html). * @readonly * @returns {monaco.editor.IStandaloneCodeEditor | undefined} The monaco editor instance. * @memberof UmbCodeEditor */ get monacoEditor(): monaco.editor.IStandaloneCodeEditor | undefined; /** * The options used to create the editor. * @readonly * @type {CodeEditorConstructorOptions} * @memberof UmbCodeEditor */ get options(): CodeEditorConstructorOptions; /** * Provides the current position of the cursor. * @readonly * @returns {UmbCodeEditorCursorPosition | null} The current cursor position. * @memberof UmbCodeEditor */ get position(): UmbCodeEditorCursorPosition | null; /** * Provides positions of all the secondary cursors. * @readonly * @returns {UmbCodeEditorCursorPosition[]} The positions of the secondary cursors. * @memberof UmbCodeEditor */ get secondaryPositions(): UmbCodeEditorCursorPosition[]; /** * Provides the current value of the editor. * @returns {string} The current value of the editor. * @memberof UmbCodeEditor */ get value(): string; set value(newValue: string); /** * Provides the current model of the editor. For advanced usage. Bare in mind that in case of the monaco library being swapped in the future, this might not be available. For more information see [monaco editor model API](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ITextModel.html). * @readonly * @returns {monaco.editor.ITextModel | null} The current monaco text model. * @memberof UmbCodeEditor */ get monacoModel(): monaco.editor.ITextModel | null; /** * Creates an instance of UmbCodeEditor. You should instantiate this class through the `UmbCodeEditorHost` interface and that should happen when inside DOM nodes of the host container are available, otherwise the editor will not be able to initialize, for example in lit `firstUpdated` lifecycle hook. It will make host emit change and input events when the value of the editor changes. * @param {UmbCodeEditorHost} host The host element the editor will be created in. * @param {CodeEditorConstructorOptions} [options] The options used to create the editor. * @memberof UmbCodeEditor */ constructor(host: UmbCodeEditorHost, options?: CodeEditorConstructorOptions); /** * Updates the options of the editor. This is useful for updating the options after the editor has been created. * @param {CodeEditorConstructorOptions} newOptions The new options to apply to the editor. * @memberof UmbCodeEditor */ updateOptions(newOptions: CodeEditorConstructorOptions): void; /** * Provides the current selections of the editor. * @returns {UmbCodeEditorSelection[]} The current selections. * @memberof UmbCodeEditor */ getSelections(): UmbCodeEditorSelection[]; /** * Provides the current positions of the cursor or multiple cursors. * @returns {(UmbCodeEditorCursorPosition | null)} The current cursor position. * @memberof UmbCodeEditor */ getPositions(): UmbCodeEditorCursorPosition | null; /** * Inserts text at the current cursor position or multiple cursor positions. * @param {string} text The text to insert. * @memberof UmbCodeEditor */ insert(text: string): void; /** * Looks for a string or matching strings in the editor and returns the ranges of the found strings. Can use regex, case sensitive and more. If you want regex set the isRegex to true in the options. * @param {string} searchString The string or pattern to search for. * @param {CodeEditorSearchOptions} [searchOptions] The options to use when searching. * @returns {UmbCodeEditorRange[]} The ranges of the found strings. * @memberof UmbCodeEditor */ find(searchString: string, searchOptions?: CodeEditorSearchOptions): UmbCodeEditorRange[]; /** * Returns the value of the editor for a given range. * @param {UmbCodeEditorRange} range The range to get the value for. * @returns {string} The value of the editor for the given range. * @memberof UmbCodeEditor */ getValueInRange(range: UmbCodeEditorRange): string; /** * Inserts text at a given position. * @param {string} text The text to insert. * @param {UmbCodeEditorCursorPosition} position The position to insert the text at. * @memberof UmbCodeEditor */ insertAtPosition(text: string, position: UmbCodeEditorCursorPosition): void; /** * Selects a range of text in the editor. * @param {UmbCodeEditorRange} range The range to select. * @memberof UmbCodeEditor */ select(range: UmbCodeEditorRange): void; /** * Changes the theme of the editor. * @template T * @param {(CodeEditorTheme | T)} theme The theme to apply to the editor. * @memberof UmbCodeEditor */ setTheme(theme: CodeEditorTheme | T): void; /** * Runs callback on change of model content. (for example when typing) * @param {() => void} callback The callback to run. * @memberof UmbCodeEditor */ onChangeModelContent(callback: () => void): void; /** * Runs callback on change of model (when the entire model is replaced ) * @param {() => void} callback The callback to run. * @memberof UmbCodeEditor */ onDidChangeModel(callback: () => void): void; /** * Runs callback on change of cursor position. Gives as parameter the new position. * @param {((e: UmbCodeEditorCursorPositionChangedEvent | undefined) => void)} callback The callback to run. * @memberof UmbCodeEditor */ onDidChangeCursorPosition(callback: (e: UmbCodeEditorCursorPositionChangedEvent | undefined) => void): void; /** * Runs callback on change of cursor selection. Gives as parameter the new selection. * @param {((e: UmbCodeEditorCursorSelectionChangedEvent | undefined) => void)} callback The callback to run. * @memberof UmbCodeEditor */ onDidChangeCursorSelection(callback: (e: UmbCodeEditorCursorSelectionChangedEvent | undefined) => void): void; }