Add monaco editor for json editing and diff view (#4)

Reviewed-on: #4

src/app/editor/editor.component.ts

@@ -18,13 +18,26 @@ import hljs from 'highlight.js/lib/core';
 import { ProtoMessage } from '../model/proto-message.model';
 import { ProtoFieldComponent } from './proto-field/proto-field.component';
 import { save } from '@tauri-apps/api/dialog';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
+import { FormsModule } from '@angular/forms';
 
 declare const __TAURI__: any;
 
+type PreviewType = 'raw' | 'edit' | 'diff';
+
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [CommonModule, ProtoFieldComponent, MatButtonModule, MatIconModule],
+  imports: [
+    CommonModule,
+    ProtoFieldComponent,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatIconModule,
+    MonacoEditorModule,
+    FormsModule,
+  ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
@@ -34,11 +47,16 @@ export class EditorComponent {
   indentSize = input<number>(2);
   showRaw = input<boolean>(true);
 
+  protected editorOptions = {
+    theme: 'vs-dark',
+    language: 'json',
+    automaticLayout: true,
+  };
   protected values = signal<any>(undefined);
   protected downloadName = computed(
     () => this.selectedFile() ?? `${this.selectedMessage().name}.json`
   );
-  private serialisedValues = computed(() =>
+  protected serialisedValues = computed(() =>
     JSON.stringify(this.values(), undefined, this.indentSize())
   );
   protected saveHref = computed(() => {
@@ -48,6 +66,16 @@ export class EditorComponent {
     return URL.createObjectURL(blob);
   });
   protected downloader = viewChild<ElementRef<HTMLAnchorElement>>('downloader');
+  protected previewType = signal<PreviewType>('raw');
+  protected currentFileContents = signal<string>('');
+  protected originalModel = computed(() => ({
+    code: this.currentFileContents(),
+    language: 'json',
+  }));
+  protected currentModel = computed(() => ({
+    code: this.serialisedValues(),
+    language: 'json',
+  }));
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
@@ -85,24 +113,23 @@ export class EditorComponent {
       const selectedFile = this.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 }
-          );
-        }
+        this.currentFileContents.set(fileContents);
+        this.updateValuesFromText(fileContents, selectedFile);
       }
     });
   }
 
+  protected updateValuesFromText(text: string, selectedFile?: string) {
+    try {
+      const parsed = JSON.parse(text);
+      this.values.set(parsed);
+    } catch (err) {
+      if (selectedFile) {
+        console.error(`Failed to parse contents of file ${selectedFile}`, err);
+      }
+    }
+  }
+
   protected updateValue(key: string, value: any) {
     const existingValue = { ...this.values() };
     existingValue[key] = value;