Add load from file

src/app/editor/editor.component.ts

@@ -3,18 +3,18 @@ import {
   Component,
   ElementRef,
   SecurityContext,
-  computed,
   effect,
   input,
   signal,
   viewChild,
 } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { DomSanitizer } from '@angular/platform-browser';
+import { readTextFile } from '@tauri-apps/api/fs';
 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';
-import { MatButtonModule } from '@angular/material/button';
-import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-editor',
@@ -24,8 +24,7 @@ import { MatSnackBar } from '@angular/material/snack-bar';
   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>();
+  selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
 
   showRaw = input<boolean>(true);
@@ -63,6 +62,28 @@ export class EditorComponent {
       },
       { allowSignalWrites: true }
     );
+
+    effect(async () => {
+      const selectedFile = this.selectedFile();
+      console.log('selected file' + selectedFile);
+      if (selectedFile) {
+        const fileContents = await readTextFile(selectedFile);
+        try {
+          const parsed = JSON.parse(fileContents);
+          this.values.set(parsed);
+        } catch (err) {
+          console.error(
+            `Failed to parse contents of file ${selectedFile}`,
+            err
+          );
+          this.snackBar.open(
+            `Failed to parse contents of file ${selectedFile}, please check the file is correctly formatted`,
+            'Dismiss',
+            { duration: 5000 }
+          );
+        }
+      }
+    });
   }
 
   protected updateValue(key: string, value: any) {