additional api and auto-format example

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: [