Start adding editor, fix up sidebar styling

src/app/editor/editor.component.css

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

src/app/editor/editor.component.html

@@ -1 +1,3 @@
-<textarea [(ngModel)]="fileContents" disabled></textarea>
+<!-- <div>@for (item of items; track $index) {} @switch () {}</div> -->
+
+<pre><code class="language-json" #code>{{fileContents()}}</code></pre>

src/app/editor/editor.component.scss

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

src/app/editor/editor.component.ts

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
+import { Component, ElementRef, effect, input, viewChild } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { readTextFile } from '@tauri-apps/api/fs';
-import { parse } from 'protobufjs';
+import hljs from 'highlight.js/lib/core';
+import { ProtoMessage } from '../model/proto-message.model';
+import { ProtoDefinitionService } from '../proto-definition.service';
 
 @Component({
   selector: 'app-editor',
@@ -13,18 +14,15 @@ import { parse } from 'protobufjs';
 })
 export class EditorComponent {
   fileContents = input<string>();
-  selectedProtoPath = input<string>();
+  selectedMessage = input<ProtoMessage>();
+  private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  async loadProtoDefinition() {
-    try {
-      const protoPath = this.selectedProtoPath();
-      if (protoPath) {
-        const protoContents = await readTextFile(protoPath);
-        const definition = await parse(protoContents);
-        console.log(definition);
+  constructor(private protoDefinitionService: ProtoDefinitionService) {
+    effect(() => {
+      const element = this.code()?.nativeElement;
+      if (element) {
+        hljs.highlightElement(element);
       }
-    } catch (err) {
-      console.error(err);
-    }
+    });
   }
 }