Add configuration editor for messages, monaco editor to string type

src/app/proto-definition-selector/definition-editor/definition-editor.component.ts

@@ -0,0 +1,66 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import {
+  EDITABLE_MESSAGE_TYPES,
+  ListMessage,
+  MessageConfiguration,
+  MessageTypeEnum,
+  ObjectMessage,
+  ProtoMessage,
+} from '../../model/proto-message.model';
+import { DefinitionEditorFieldComponent } from './definition-editor-field/definition-editor-field.component';
+
+@Component({
+  selector: 'app-definition-editor',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatDialogModule,
+    DefinitionEditorFieldComponent,
+  ],
+  template: `
+    <h2 mat-dialog-title>{{ protoMessage.name }}</h2>
+    <mat-dialog-content>
+      @for (field of editableMessages; track $index) {
+      <h3>{{ field.name }}</h3>
+      <app-definition-editor-field
+        [fieldConfiguration]="field.configuration"
+      ></app-definition-editor-field>
+      }
+    </mat-dialog-content>
+    <mat-dialog-actions>
+      <button mat-button mat-dialog-close>Close</button>
+    </mat-dialog-actions>
+  `,
+  styleUrl: './definition-editor.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DefinitionEditorComponent {
+  protected editableMessages = this.protoMessage.values.filter((message) =>
+    this.filterMessageConfiguration(message.configuration)
+  );
+
+  private filterMessageConfiguration(
+    configuration: MessageConfiguration
+  ): boolean {
+    if (configuration.type === MessageTypeEnum.List) {
+      return this.filterMessageConfiguration(
+        (configuration as ListMessage).subConfiguration
+      );
+    }
+    if (configuration.type === MessageTypeEnum.Object) {
+      // Ensure at least one nested message can be configured
+      return !!(configuration as ObjectMessage).messageDefinition.values.find(
+        (message) => this.filterMessageConfiguration(message.configuration)
+      );
+    }
+
+    // Note: Map can always be configured, as key needs to be a string or numeric type
+    return EDITABLE_MESSAGE_TYPES.includes(configuration.type);
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) protected protoMessage: ProtoMessage) {}
+}