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 * @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 * @memberof UmbCodeEditor */ get position(): UmbCodeEditorCursorPosition | null; /** * Provides positions of all the secondary cursors. * @readonly * @memberof UmbCodeEditor */ get secondaryPositions(): UmbCodeEditorCursorPosition[]; /** * Provides 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 * @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 * @param {CodeEditorConstructorOptions} [options] * @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 * @memberof UmbCodeEditor */ updateOptions(newOptions: CodeEditorConstructorOptions): void; /** * Provides the current selections of the editor. * @returns {*} {UmbCodeEditorSelection[]} * @memberof UmbCodeEditor */ getSelections(): UmbCodeEditorSelection[]; /** * Provides the current positions of the cursor or multiple cursors. * @returns {*} {(UmbCodeEditorCursorPosition | null)} * @memberof UmbCodeEditor */ getPositions(): UmbCodeEditorCursorPosition | null; /** * Inserts text at the current cursor position or multiple cursor positions. * @param {string} text * @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 * @param {CodeEditorSearchOptions} [searchOptions] * @returns {*} {UmbCodeEditorRange[]} * @memberof UmbCodeEditor */ find(searchString: string, searchOptions?: CodeEditorSearchOptions): UmbCodeEditorRange[]; /** * Returns the value of the editor for a given range. * @param {UmbCodeEditorRange} range * @returns {*} {string} * @memberof UmbCodeEditor */ getValueInRange(range: UmbCodeEditorRange): string; /** * Inserts text at a given position. * @param {string} text * @param {UmbCodeEditorCursorPosition} position * @memberof UmbCodeEditor */ insertAtPosition(text: string, position: UmbCodeEditorCursorPosition): void; /** * Selects a range of text in the editor. * @param {UmbCodeEditorRange} range * @memberof UmbCodeEditor */ select(range: UmbCodeEditorRange): void; /** * Changes the theme of the editor. * @template T * @param {(CodeEditorTheme | T)} theme * @memberof UmbCodeEditor */ setTheme(theme: CodeEditorTheme | T): void; /** * Runs callback on change of model content. (for example when typing) * @param {() => void} callback * @memberof UmbCodeEditor */ onChangeModelContent(callback: () => void): void; /** * Runs callback on change of model (when the entire model is replaced ) * @param {() => void} callback * @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 * @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 * @memberof UmbCodeEditor */ onDidChangeCursorSelection(callback: (e: UmbCodeEditorCursorSelectionChangedEvent | undefined) => void): void; }