Add overflow to editor, maximise field widths, add toggle for preview

src/app/editor/editor.component.html

@@ -10,4 +10,4 @@
   } }
 </div>
 
-<pre><code #code></code></pre>
+<pre *ngIf="showRaw()"><code #code></code></pre>

src/app/editor/editor.component.scss

@@ -1,3 +1,15 @@
 :host {
   padding: var(--mat-sidenav-container-shape);
+  display: flex;
+  flex-direction: column;
+}
+
+pre,
+div {
+  flex: 1;
+  overflow: auto;
+}
+
+div {
+  padding: 10px;
 }

src/app/editor/editor.component.ts

@@ -26,6 +26,8 @@ export class EditorComponent {
   fileContents = input<string>();
   selectedMessage = input.required<ProtoMessage>();
 
+  showRaw = input<boolean>(true);
+
   protected values = signal<any>(undefined);
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
@@ -53,7 +55,7 @@ export class EditorComponent {
         const message = this.selectedMessage();
         this.values.set(
           Object.fromEntries(
-            message.values.map((value) => [[value.name, null]])
+            message.values.map((value) => [[value.name, undefined]])
           )
         );
       },