/// /** Angular */ import * as ng from "@angular/core"; /** Core */ import { CoreComponent } from "cmf.core/src/core"; /** Nested components */ import { MonacoEditorLoader } from "./monacoLoader"; import { CODE_EDITOR_LANGUAGE_PROVIDER, CODE_EDITOR_THEME_RULES_PROVIDER, CMF_CUSTOM_THEME, CodeEditorMode, CustomEditorThemes, CodeEditorLanguage, CODE_EDITOR_COMPLETION_ITEM_PROVIDER } from "./codeEditorStructure"; export { CODE_EDITOR_LANGUAGE_PROVIDER, CODE_EDITOR_THEME_RULES_PROVIDER, CMF_CUSTOM_THEME, CODE_EDITOR_COMPLETION_ITEM_PROVIDER, CodeEditorMode, CustomEditorThemes, CodeEditorLanguage }; export declare type CodeEditorLanguageProvider = () => void; export declare type CodeEditorThemeRulesProvider = () => monaco.editor.ITokenThemeRule[]; export declare type CodeEditorCompletionItemProvider = () => monaco.languages.CompletionItemProvider; /** * @whatItDoes * High productivity code editor which, when combined with programming language services, * gives you the power of an IDE and the speed of a text editor. * * @howToUse * This component is used with the inputs and outputs mentioned below. * * ### Inputs * `CodeEditorLanguage | string` : **language** - Editor language (HTML, Javascript, Typescript and CSharp support) ; * `boolean` : **disabled** - If true, editor is readOnly ; * `string` : **value** - Initial text on the editor (default empty string) ; * `CodeEditorMode` : **mode** - Editor mode (single file and diff modes supported) ; * `string` : **original** - Original text to diff with value (only valid when mode is diff) ; * `monaco.editor.BuiltinTheme | string` : **theme** - Default codeEditor theme ; * `boolean` : **autoIndent** - Should the editor auto indent the code ; * `boolean` : **allowHorizontalScroll** - Control the wrapping strategy of the editor. Allow the horizontal scroll if content don't fit the editor ; * `boolean` : **splitDiff** - Diff inline preview ; * `boolean` : **enableSplitViewResizing** - Allow user to increase split size in diff mode . * * ### Outputs * `string` : **valueChange** - Value Change Event Emitter ; * `monaco.editor.ICommonCodeEditor | monaco.editor.ICommonDiffEditor` : **editorChange** - Triggered when the monaco editor changes . * * ### Example * To use the component, assume this HTML Template as an example: * * ```HTML * * ``` * */ export declare class CodeEditor extends CoreComponent implements ng.OnInit, ng.OnDestroy, ng.OnChanges, ng.AfterViewInit { private _monacoLoader; private _ngZone; private _customLanguageProvider; private _customThemeRulesProvider; private _completionItemProvider; private _editorContainer; /** * Language that will be provided to monaco */ private _language; /** * Keeps the current value of the code for internal usage */ private _value; /** * On theme update callback */ private _onThemeUpdateCallback; /** * Default codeEditor theme */ theme: monaco.editor.BuiltinTheme | string; /** * Code Editor Mode */ mode: CodeEditorMode; /** * Sets the Code Editor language - can work with the provided enum or string directly */ /** * Gets the Code Editor language as string */ language: CodeEditorLanguage | string; /** * Gets or sets the current editor value. */ value: string; /** * Gets or sets the original editor code (used for diffing) */ original: string; /** * Value Change Event Emitter */ valueChange: ng.EventEmitter; /** * Is the code editor disabled? */ disabled: boolean; /** * diff inline preview? */ splitDiff: boolean; /** * Should the editor auto indent the code? */ autoIndent: boolean; /** * Control the wrapping strategy of the editor. Allow the horizontal scroll if content don't fit the editor */ allowHorizontalScroll: boolean; /** * allow user to increase split size in diff mode */ enableSplitViewResizing: boolean; /** * Gets or sets the editor model */ editor: monaco.editor.ICommonCodeEditor | monaco.editor.ICommonDiffEditor; /** * Triggered when the monaco editor changes */ editorChange: ng.EventEmitter; /** * Code Editor constructor * * @param _elementRef Angular ElementRef * @param _monacoLoader Monaco Loader service */ constructor(_elementRef: ng.ElementRef, _monacoLoader: MonacoEditorLoader, _ngZone: ng.NgZone, _customLanguageProvider: CodeEditorLanguageProvider, _customThemeRulesProvider: CodeEditorThemeRulesProvider, _completionItemProvider: CodeEditorCompletionItemProvider); /** * On Init method */ ngOnInit(): void; /** * After view init method */ ngAfterViewInit(): void; ngOnChanges(changes: ng.SimpleChanges): void; /** * On Destroy method */ ngOnDestroy(): void; /** * Code editor setup */ private setup; /** * Editor Model changed event handler * @param eventArgs Monaco event arguments */ private editorModelChanged; private setupCustomLanguages; /** * Registers the CMF LOG Language */ private initCmfLog; /** * Registers the CMF EXPR Language */ private initCmfExpressionLanguage; /** * When the theme changes * @param colorTheme current cmf theme */ onThemeUpdate(colorTheme: string): void; defineCustomTheme(baseTheme: monaco.editor.BuiltinTheme, rules?: monaco.editor.ITokenThemeRule[]): void; /** * Here are defined the custom themes of cmf editor * @param customTheme the name of the custom theme * @param baseTheme the theme it will follow (ex: vs, vs-dark) */ setupCustomThemes(): void; /** * Here are set all the colors for the themes */ private getThemeColors; /** * Opacity for the colors on the codeEditor (0 - 100) "#XXXXXX" + XX the extra values on the hexa represents the opacity * @param hexaColor the original hexa color * @param opacity the opacity that will be aplied */ private setHexaOpacity; scrollToBottom(): void; /** * Formats the editor content */ formatContent(): void; /** * Dispose method */ dispose(): void; /** * Convert code editor language into a language known by Monaco editor. * * @param lang Code editor language * @return Language known by monaco. */ private monacoLanguageConverter; } export declare class CodeEditorModule { }