additional api and auto-format example

Author: DenysVuika

README.md

@@ -123,6 +123,7 @@ The following options are used by default when Editor Component gets created:
 | loaded              |                             | Raised when editor finished loading all its components.                        |
 | 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 |
+| codeModelChanged    | `CodeModelChangedEvent`     | An event emitted when the code model value is changed.                         |
 
 ## Component API
 
@@ -251,6 +252,22 @@ Other components can now have access to the editor instance:
 </button>
 ```
 
+### Example: auto-formatting on load
+
+```html
+<ngs-code-editor [codeModel]="selectedModel" [options]="options" (codeModelChanged)="onCodeModelChanged($event)"></ngs-code-editor>
+```
+
+```ts
+import { CodeModelChangedEvent } from '@ngstack/code-editor';
+
+onCodeModelChanged(event: CodeModelChangedEvent) {
+  setTimeout(() => {
+    event.sender.formatDocument();
+  }, 100);
+}
+```
+
 ## Offline Setup
 
 ### Editor

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

@@ -21,6 +21,11 @@ import { JsonDefaultsService } from '../services/json-defaults.service';
 import { CodeModel } from '../models/code.model';
 import { editor } from 'monaco-editor';
 
+export interface CodeModelChangedEvent {
+  sender: CodeEditorComponent;
+  value: CodeModel;
+}
+
 @Component({
   // eslint-disable-next-line @angular-eslint/component-selector
   selector: 'ngs-code-editor',
@@ -109,6 +114,12 @@ export class CodeEditorComponent
   @Output()
   valueChanged = new EventEmitter<string>();
 
+  /**
+   * An event emitted when the code model value is changed.
+   */
+  @Output()
+  codeModelChanged = new EventEmitter<CodeModelChangedEvent>();
+
   /**
    * An event emitted when the contents of the underlying editor model have changed.
    */
@@ -119,7 +130,7 @@ export class CodeEditorComponent
    * Raised when editor finished loading all its components.
    */
   @Output()
-  loaded = new EventEmitter();
+  loaded = new EventEmitter<CodeEditorComponent>();
 
   protected editorService = inject(CodeEditorService);
   protected typescriptDefaults = inject(TypescriptDefaultsService);
@@ -165,7 +176,7 @@ export class CodeEditorComponent
 
   async ngAfterViewInit() {
     this.setupEditor();
-    this.loaded.emit();
+    this.loaded.emit(this);
   }
 
   private setupEditor() {
@@ -202,6 +213,7 @@ export class CodeEditorComponent
     });
 
     this.setupDependencies(this.codeModel);
+    this.codeModelChanged.emit({ sender: this, value: this.codeModel });
   }
 
   runEditorAction(id: string, args?: unknown) {
@@ -258,6 +270,7 @@ export class CodeEditorComponent
       this.setEditorValue(model.value);
       this.editorService.setModelLanguage(this._model, model.language);
       this.setupDependencies(model);
+      this.codeModelChanged.emit({ sender: this, value: model });
     }
   }
 }

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

@@ -98,7 +98,8 @@
         [theme]="activeTheme"
         [options]="options"
         (valueChanged)="onCodeChanged($event)"
-        (loaded)="onEditorLoaded()"
+        (loaded)="onEditorLoaded($event)"
+        (codeModelChanged)="onCodeModelChanged($event)"
       >
       </ngs-code-editor>
     </ng-container>

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

@@ -11,7 +11,8 @@ import {
   CodeEditorComponent,
   CodeEditorModule,
   CodeEditorService,
-  CodeModel
+  CodeModel,
+  CodeModelChangedEvent
 } from '@ngstack/code-editor';
 import { Observable } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
@@ -129,7 +130,15 @@ export class CodeEditorDemoComponent implements OnInit {
     */
   }
 
-  onEditorLoaded() {
-    console.log('loaded');
+  onEditorLoaded(editor: CodeEditorComponent) {
+    console.log('loaded', editor);
+  }
+
+  onCodeModelChanged(event: CodeModelChangedEvent) {
+    console.log('code model changed', event);
+
+    setTimeout(() => {
+      event.sender.formatDocument();
+    }, 100);
   }
 }

src/app/code-editor-demo/file-database.ts

@@ -55,8 +55,8 @@ const FILES_DATA: FileNode[] = [
           uri: 'main.json',
           value: [
             '{',
-            '    "$schema": "http://custom/schema.json",',
-            '    "type": "button"',
+            '  "$schema": "http://custom/schema.json",',
+            '      "type": "button"',
             '}'
           ].join('\n'),
           schemas: [