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

src/app/app.component.html

@@ -8,6 +8,13 @@
     >
       <mat-icon [class.filled]="leftSideOpen()">dock_to_right</mat-icon>
     </button>
+    <button
+      mat-icon-button
+      (click)="previewOpen.set(!previewOpen())"
+      title="Toggle editor preview"
+    >
+      <mat-icon [class.filled]="previewOpen()">dock_to_bottom</mat-icon>
+    </button>
     <button
       mat-icon-button
       (click)="rightSideOpen.set(!rightSideOpen())"
@@ -37,7 +44,10 @@
   </mat-sidenav>
   <mat-sidenav-content>
     @if(selectedMessage()) {
-    <app-editor [selectedMessage]="selectedMessage()!"></app-editor>
+    <app-editor
+      [selectedMessage]="selectedMessage()!"
+      [showRaw]="previewOpen()"
+    ></app-editor>
     }
   </mat-sidenav-content>
 </mat-sidenav-container>

src/app/app.component.scss

@@ -16,6 +16,14 @@ mat-sidenav-container {
   height: 100%;
 }
 
+mat-sidenav-content {
+  display: flex;
+}
+
+app-editor {
+  flex: 1;
+}
+
 .mat-sidenav.mat-drawer-end,
 .mat-sidenav {
   padding: var(--mat-sidenav-container-shape);

src/app/app.component.ts

@@ -41,6 +41,7 @@ export class AppComponent {
   protected selectedMessage = signal<ProtoMessage | undefined>(undefined);
   protected rightSideOpen = signal(true);
   protected leftSideOpen = signal(true);
+  protected previewOpen = signal(true);
 
   protected isMobile = signal(
     this.breakpointObserver.isMatched(mobileBreakpoints)

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]])
           )
         );
       },

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

@@ -1,7 +1,17 @@
 :host {
-  display: block;
+  display: flex;
+  flex-direction: column;
 }
 
 .row-wrapper {
   display: flex;
+  align-items: baseline;
+}
+
+app-proto-field {
+  flex: 1;
+}
+
+.add-button {
+  align-self: flex-end;
 }

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

@@ -35,7 +35,9 @@ import { ProtoFieldComponent } from '../proto-field/proto-field.component';
       </button>
     </div>
     } }
-    <button mat-icon-button (click)="add()"><mat-icon>add</mat-icon></button>`,
+    <button mat-icon-button class="add-button" (click)="add()">
+      <mat-icon>add</mat-icon>
+    </button>`,
   styleUrl: './list-field.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -48,10 +50,10 @@ export class ListFieldComponent {
     const existingValues = this.values();
     if (existingValues) {
       const newValues = [...existingValues];
-      newValues.push(undefined);
+      newValues.push('');
       this.values.set(newValues);
     } else {
-      this.values.set([undefined]);
+      this.values.set(['']);
     }
   }
 

src/app/proto-field/proto-field.component.scss

@@ -1,3 +1,7 @@
 :host {
   display: block;
+
+  & > * {
+    width: 100%;
+  }
 }

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

@@ -76,14 +76,14 @@ export class ProtoFieldComponent {
     if (this.configuration().type === MessageTypeEnum.Enum) {
       return this.configuration() as EnumMessage;
     }
-    return null;
+    return;
   });
 
   protected listConfiguration = computed(() => {
     if (this.configuration().type === MessageTypeEnum.List) {
       return this.configuration() as ListMessage;
     }
-    return null;
+    return;
   });
 
   protected readonly MessageTypeEnum = MessageTypeEnum;