Fix value, value highlighting in editor

src/app/editor/editor.component.html

@@ -1,12 +1,13 @@
 <h2>{{ selectedMessage().name }}</h2>
 <div>
-  @for (item of selectedMessage().values; track $index) {
+  @if(values()) { @for (item of selectedMessage().values; track $index) {
   <app-proto-field
     [label]="item.name"
     [configuration]="item.configuration"
-    [(value)]="values()[$index]"
+    [value]="values()[item.name]"
+    (valueChange)="updateValue(item.name, $event)"
   ></app-proto-field>
-  }
+  } }
 </div>
 
-<pre><code class="language-json" #code>{{fileContents()}}</code></pre>
+<pre><code #code></code></pre>

src/app/editor/editor.component.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import {
   Component,
   ElementRef,
+  SecurityContext,
   computed,
   effect,
   input,
@@ -11,6 +12,7 @@ import {
 import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
 import { ProtoFieldComponent } from '../proto-field/proto-field.component';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'app-editor',
@@ -24,19 +26,44 @@ export class EditorComponent {
   fileContents = input<string>();
   selectedMessage = input.required<ProtoMessage>();
 
-  protected values = computed(() => {
-    const message = this.selectedMessage();
-    return message.values.map((value) => null);
-  });
+  protected values = signal<any>(undefined);
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor() {
+  constructor(private sanitizer: DomSanitizer) {
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {
-        hljs.highlightElement(element);
+        if (!this.values()) {
+          return;
+        }
+        const json = JSON.stringify(this.values(), undefined, 2);
+        const highlighted = hljs.highlightAuto(json, ['json']);
+        const sanitized = sanitizer.sanitize(
+          SecurityContext.HTML,
+          highlighted.value
+        );
+        if (sanitized) {
+          element.innerHTML = sanitized;
+        }
       }
     });
+    effect(
+      () => {
+        const message = this.selectedMessage();
+        this.values.set(
+          Object.fromEntries(
+            message.values.map((value) => [[value.name, null]])
+          )
+        );
+      },
+      { allowSignalWrites: true }
+    );
+  }
+
+  protected updateValue(key: string, value: any) {
+    const existingValue = { ...this.values() };
+    existingValue[key] = value;
+    this.values.set(existingValue);
   }
 }

src/app/list-field/list-field.component.ts

@@ -28,6 +28,7 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       <app-proto-field
         [configuration]="configuration().subConfiguration"
         [value]="value"
+        (valueChange)="updateValue($index, $event)"
       ></app-proto-field>
       <button mat-icon-button (click)="remove($index)">
         <mat-icon>remove</mat-icon>
@@ -44,18 +45,25 @@ export class ListFieldComponent {
   values = model<any[]>();
 
   add() {
-    const newValues = this.values();
-    if (newValues) {
-      newValues.push(null);
+    const existingValues = this.values();
+    if (existingValues) {
+      const newValues = [...existingValues];
+      newValues.push(undefined);
       this.values.set(newValues);
     } else {
-      this.values.set([null]);
+      this.values.set([undefined]);
     }
   }
 
   remove(index: number) {
-    const newValues = this.values();
-    newValues?.splice(index, 1);
+    const newValues = [...this.values()!];
+    newValues.splice(index, 1);
     this.values.set(newValues);
   }
+
+  updateValue(index: number, value: any) {
+    let existing = [...this.values()!];
+    existing[index] = value;
+    this.values.set(existing);
+  }
 }