support running editor actions, access editor instance

Author: DenysVuika

README.md

@@ -124,6 +124,14 @@ The following options are used by default when Editor Component gets created:
 | valueChanged        | string                      | An event emitted when the text content of the model have changed.              |
 | modelContentChanged | `IModelContentChangedEvent` | An event emitted when the contents of the underlying editor model have changed |
 
+## Component API
+
+| Name                | Description                                                                                                                                         |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| editor              | returns the instance of the underlying Monaco [ICodeEditor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ICodeEditor.html) |
+| runAction(id, args) | runs the editor actions, for example `editor.action.formatDocument`                                                                                 |
+| formatDocument()    | shortcut function to format the document                                                                                                            |
+
 ## Editor Service
 
 The component comes with a separate `CodeEditorService` service that provides additional APIs for the underlying `monaco` editor:
@@ -210,6 +218,39 @@ export class MyEditorComponent {
 
 The schemas get automatically installed and associated with the corresponding file.
 
+## Accessing Code Editor Instance
+
+You can access the Code Editor component instance API from other components when using with the `@ViewChild`:
+
+```ts
+  private _codeEditor: CodeEditorComponent;
+
+  @ViewChild(CodeEditorComponent, { static: false })
+  set codeEditor(value: CodeEditorComponent) {
+    this._codeEditor = value;
+  }
+
+  get codeEditor(): CodeEditorComponent {
+    return this._codeEditor;
+  }
+```
+
+The code above allows you to use the code editor within the `*ngIf`, for example:
+
+```html
+<ng-container *ngIf="selectedModel">
+  <ngs-code-editor [codeModel]="selectedModel"></ngs-code-editor>
+</ng-container>
+```
+
+Other components can now have access to the editor instance:
+
+```html
+<button mat-icon-button title="Format code" (click)="codeEditor?.formatDocument()">
+  <mat-icon>format_align_left</mat-icon>
+</button>
+```
+
 ## Offline Setup
 
 ### Editor

projects/code-editor/src/lib/code-editor/code-editor.component.ts

@@ -34,7 +34,7 @@ import { editor } from 'monaco-editor';
 export class CodeEditorComponent
   implements OnChanges, OnDestroy, AfterViewInit
 {
-  private _editor: editor.IEditor;
+  private _editor: editor.ICodeEditor;
   private _model: editor.ITextModel;
   // private _value = '';
 
@@ -49,11 +49,11 @@ export class CodeEditorComponent
   /**
    * The instance of the editor.
    */
-  get editor(): editor.IEditor {
+  get editor(): editor.ICodeEditor {
     return this._editor;
   }
 
-  protected set editor(value: editor.IEditor) {
+  protected set editor(value: editor.ICodeEditor) {
     this._editor = value;
   }
 
@@ -204,6 +204,14 @@ export class CodeEditorComponent
     this.setupDependencies(this.codeModel);
   }
 
+  runEditorAction(id: string, args?: unknown) {
+    this.editor.getAction(id)?.run(args);
+  }
+
+  formatDocument() {
+    this.runEditorAction('editor.action.formatDocument');
+  }
+
   private setupDependencies(model: CodeModel) {
     if (!model) {
       return;

projects/code-editor/src/lib/services/code-editor.service.ts

@@ -138,7 +138,7 @@ export class CodeEditorService {
   createEditor(
     containerElement: HTMLElement,
     options?: editor.IEditorConstructionOptions
-  ): editor.IEditor {
+  ): editor.ICodeEditor {
     return this.monaco.editor.create(containerElement, options);
   }
 

src/app/app.module.ts

@@ -21,9 +21,9 @@ const routes: Route[] = [
       initialNavigation: 'enabledBlocking'
     }),
     CodeEditorModule.forRoot({
-      editorVersion: '0.46.0',
+      // editorVersion: '0.46.0',
       // use local Monaco installation
-      // baseUrl: 'assets/monaco',
+      baseUrl: 'assets/monaco',
       // use local Typings Worker
       typingsWorkerUrl: 'assets/workers/typings-worker.js'
     }),

src/app/code-editor-demo/code-editor-demo.component.html

@@ -1,5 +1,5 @@
 <mat-toolbar>
-  <button mat-icon-button [matMenuTriggerFor]="mnuTheme">
+  <button mat-icon-button [matMenuTriggerFor]="mnuTheme" title="Change theme">
     <mat-icon>format_color_fill</mat-icon>
   </button>
 
@@ -12,6 +12,10 @@
       {{ theme.name }}
     </button>
   </mat-menu>
+
+  <button mat-icon-button title="Format code" (click)="codeEditor?.formatDocument()">
+    <mat-icon>format_align_left</mat-icon>
+  </button>
 </mat-toolbar>
 
 <div class="page-layout">

src/app/code-editor-demo/code-editor-demo.component.ts

@@ -1,14 +1,14 @@
 import { NestedTreeControl } from '@angular/cdk/tree';
 import {
   Component,
-  ElementRef,
   HostBinding,
   OnInit,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { MatTreeModule, MatTreeNestedDataSource } from '@angular/material/tree';
 import {
+  CodeEditorComponent,
   CodeEditorModule,
   CodeEditorService,
   CodeModel
@@ -61,8 +61,16 @@ export class CodeEditorDemoComponent implements OnInit {
   isLoading = false;
   isLoading$: Observable<boolean>;
 
-  @ViewChild('file')
-  fileInput: ElementRef;
+  private _codeEditor: CodeEditorComponent;
+
+  @ViewChild(CodeEditorComponent, { static: false })
+  set codeEditor(value: CodeEditorComponent) {
+    this._codeEditor = value;
+  }
+
+  get codeEditor(): CodeEditorComponent {
+    return this._codeEditor;
+  }
 
   @HostBinding('class')
   class = 'app-code-editor-demo';