Add initial components to proto message field

src/app/editor/editor.component.html

@@ -1,3 +1,10 @@
-<!-- <div>@for (item of items; track $index) {} @switch () {}</div> -->
+<div>
+  @for (item of selectedMessage().values; track $index) {
+  <app-proto-field
+    [configuration]="item.configuration"
+    [(value)]="values()[$index]"
+  ></app-proto-field>
+  }
+</div>
 
 <pre><code class="language-json" #code>{{fileContents()}}</code></pre>

src/app/editor/editor.component.ts

@@ -1,23 +1,32 @@
 import { CommonModule } from '@angular/common';
-import { Component, ElementRef, effect, input, viewChild } from '@angular/core';
-import { FormsModule } from '@angular/forms';
+import {
+  Component,
+  ElementRef,
+  effect,
+  input,
+  signal,
+  viewChild,
+} from '@angular/core';
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
-import { ProtoDefinitionService } from '../proto-definition.service';
+import { ProtoFieldComponent } from '../proto-field/proto-field.component';
 
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule, ProtoFieldComponent],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
+  // TODO: This needs to be reworked so we have a local property and implement some kind of auto-save
   fileContents = input<string>();
-  selectedMessage = input<ProtoMessage>();
+  selectedMessage = input.required<ProtoMessage>();
+  // TODO: This needs to start with the parsed file contents, and get updated when the code value changes
+  protected values = signal([]);
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(private protoDefinitionService: ProtoDefinitionService) {
+  constructor() {
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {