@umbraco-cms/backoffice
    Preparing search index...

    Interface UmbCodeEditorController

    This is a wrapper class for the 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 #3217 currently fixed by a hack , razor syntax highlight UmbCodeEditor

    interface UmbCodeEditorController {
        _host: UmbControllerHost;
        get controllerAlias(): UmbControllerAlias;
        get monacoEditor(): undefined | IStandaloneCodeEditor;
        get monacoModel(): null | ITextModel;
        get options(): CodeEditorConstructorOptions;
        get position(): null | UmbCodeEditorCursorPosition;
        get secondaryPositions(): UmbCodeEditorCursorPosition[];
        get value(): string;
        set value(newValue: string): void;
        addEventListener(
            type: string,
            callback: null | EventListenerOrEventListenerObject,
            options?: boolean | AddEventListenerOptions,
        ): void;
        addUmbController(controller: UmbController): void;
        consumeContext<
            BaseType extends UmbContextMinimal = UmbContextMinimal,
            ResultType extends UmbContextMinimal = BaseType,
        >(
            alias: string | UmbContextToken<BaseType, ResultType>,
            callback: UmbContextCallback<ResultType>,
        ): UmbContextConsumerController<BaseType, ResultType>;
        destroy(): void;
        dispatchEvent(event: Event): boolean;
        find(
            searchString: string,
            searchOptions?: CodeEditorSearchOptions,
        ): UmbCodeEditorRange[];
        getContext<
            BaseType extends UmbContextMinimal = UmbContextMinimal,
            ResultType extends UmbContextMinimal = BaseType,
        >(
            alias: string | UmbContextToken<BaseType, ResultType>,
            options?: UmbClassGetContextOptions,
        ): Promise<undefined | ResultType>;
        getHostElement(): Element;
        getPositions(): null | UmbCodeEditorCursorPosition;
        getSelections(): UmbCodeEditorSelection[];
        getUmbControllers(
            filterMethod: (ctrl: UmbController) => boolean,
        ): UmbController[];
        getValueInRange(range: UmbCodeEditorRange): string;
        hasUmbController(controller: UmbController): boolean;
        hostConnected(): void;
        hostDisconnected(): void;
        insert(text: string): void;
        insertAtPosition(text: string, position: UmbCodeEditorCursorPosition): void;
        observe<
            ObservableType extends undefined
            | Observable<T>,
            T,
            SpecificT = ObservableType extends Observable<U>
                ? ObservableType<ObservableType> extends undefined ? undefined | U : U
                : undefined,
            SpecificR = ObservableType extends undefined
                ? undefined
                | UmbObserverController<SpecificT>
                : UmbObserverController<SpecificT>,
        >(
            source: ObservableType,
            callback?: ObserverCallback<SpecificT>,
            controllerAlias?: null | UmbControllerAlias,
        ): SpecificR;
        onChangeModelContent(callback: () => void): void;
        onDidChangeCursorPosition(
            callback: (
                e: undefined | UmbCodeEditorCursorPositionChangedEvent,
            ) => void,
        ): void;
        onDidChangeCursorSelection(
            callback: (
                e: undefined | UmbCodeEditorCursorSelectionChangedEvent,
            ) => void,
        ): void;
        onDidChangeModel(callback: () => void): void;
        provideContext<R extends UmbContextMinimal = UmbContextMinimal>(
            alias: string | UmbContextToken<R, R>,
            instance: R,
        ): UmbContextProviderController<R>;
        removeEventListener(
            type: string,
            callback: null | EventListenerOrEventListenerObject,
            options?: boolean | EventListenerOptions,
        ): void;
        removeUmbController(controller: UmbController): void;
        removeUmbControllerByAlias(unique: UmbControllerAlias): void;
        select(range: UmbCodeEditorRange): void;
        setTheme<T extends string>(theme: CodeEditorTheme | T): void;
        updateOptions(newOptions: CodeEditorConstructorOptions): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    _host

    Accessors

    controllerAlias monacoEditor monacoModel options position secondaryPositions value

    Methods

    addEventListener addUmbController consumeContext destroy dispatchEvent find getContext getHostElement getPositions getSelections getUmbControllers getValueInRange hasUmbController hostConnected hostDisconnected insert insertAtPosition observe onChangeModelContent onDidChangeCursorPosition onDidChangeCursorSelection onDidChangeModel provideContext removeEventListener removeUmbController removeUmbControllerByAlias select setTheme updateOptions

    Properties

    _host

    _host: UmbControllerHost

    Accessors

    • get monacoEditor(): undefined | IStandaloneCodeEditor

      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.

      Returns undefined | IStandaloneCodeEditor

      UmbCodeEditor

    Methods

    • The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.

      MDN Reference

      Parameters

      • type: string
      • callback: null | EventListenerOrEventListenerObject
      • Optionaloptions: boolean | AddEventListenerOptions

      Returns void

    • The dispatchEvent() method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.

      MDN Reference

      Parameters

      • event: Event

      Returns boolean

    • The removeEventListener() method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.

      MDN Reference

      Parameters

      • type: string
      • callback: null | EventListenerOrEventListenerObject
      • Optionaloptions: boolean | EventListenerOptions

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Accessors
    Methods