diff --git a/README.md b/README.md
index 1b7ee084..63804ab9 100644
--- a/README.md
+++ b/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:
```
+### Example: auto-formatting on load
+
+```html
+
+```
+
+```ts
+import { CodeModelChangedEvent } from '@ngstack/code-editor';
+
+onCodeModelChanged(event: CodeModelChangedEvent) {
+ setTimeout(() => {
+ event.sender.formatDocument();
+ }, 100);
+}
+```
+
## Offline Setup
### Editor
diff --git a/projects/code-editor/src/lib/code-editor/code-editor.component.ts b/projects/code-editor/src/lib/code-editor/code-editor.component.ts
index 1fb7f7b9..0e17aec0 100644
--- a/projects/code-editor/src/lib/code-editor/code-editor.component.ts
+++ b/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();
+ /**
+ * An event emitted when the code model value is changed.
+ */
+ @Output()
+ codeModelChanged = new EventEmitter();
+
/**
* 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();
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 });
}
}
}
diff --git a/src/app/code-editor-demo/code-editor-demo.component.html b/src/app/code-editor-demo/code-editor-demo.component.html
index d25341a3..cb53957e 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.html
+++ b/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)"
>
diff --git a/src/app/code-editor-demo/code-editor-demo.component.ts b/src/app/code-editor-demo/code-editor-demo.component.ts
index fc00840f..37a602d8 100644
--- a/src/app/code-editor-demo/code-editor-demo.component.ts
+++ b/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);
}
}
diff --git a/src/app/code-editor-demo/file-database.ts b/src/app/code-editor-demo/file-database.ts
index d856f9a9..15ccaf9e 100644
--- a/src/app/code-editor-demo/file-database.ts
+++ b/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: [