Add file save

src/app/editor/editor.component.html

@@ -1,5 +1,10 @@
-<h2>{{ selectedMessage().name }}</h2>
-<div>
+<div class="proto-title">
+  <h2>{{ selectedMessage().name }}</h2>
+  <button mat-icon-button matTooltip="Save configuration" (click)="save()">
+    <mat-icon>save</mat-icon>
+  </button>
+</div>
+<div class="editor-items">
   @if(values()) { @for (item of selectedMessage().values; track $index) {
   <app-proto-field
     [label]="item.name"

src/app/editor/editor.component.scss

@@ -5,15 +5,20 @@
 }
 
 pre,
-div {
+.editor-items {
   flex: 1;
   overflow: auto;
 }
 
-div {
+.editor-items {
   padding: 16px;
 }
 
 .actions {
   flex: 0 0 auto;
 }
+
+.proto-title {
+  display: flex;
+  justify-content: space-between;
+}

src/app/editor/editor.component.ts

@@ -11,21 +11,30 @@ import {
 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 { readTextFile, writeTextFile } 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 { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [CommonModule, ProtoFieldComponent, MatButtonModule],
+  imports: [
+    CommonModule,
+    ProtoFieldComponent,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+  ],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
 export class EditorComponent {
   selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
+  indentSize = input<number>(2);
 
   showRaw = input<boolean>(true);
 
@@ -40,7 +49,11 @@ export class EditorComponent {
         if (!this.values()) {
           return;
         }
-        const json = JSON.stringify(this.values(), undefined, 2);
+        const json = JSON.stringify(
+          this.values(),
+          undefined,
+          this.indentSize()
+        );
         const highlighted = hljs.highlightAuto(json, ['json']);
         const sanitized = sanitizer.sanitize(
           SecurityContext.HTML,
@@ -94,10 +107,25 @@ export class EditorComponent {
 
   protected async copyToClipboard() {
     await navigator.clipboard.writeText(
-      JSON.stringify(this.values(), undefined, 2)
+      JSON.stringify(this.values(), undefined, this.indentSize())
     );
     this.snackBar.open('Successully copied to clipboard', 'Close', {
       duration: 2000,
     });
   }
+
+  protected async save() {
+    const selectedFile = this.selectedFile();
+    if (!selectedFile) {
+      return;
+    }
+    try {
+      await writeTextFile(
+        selectedFile,
+        JSON.stringify(this.values(), undefined, this.indentSize())
+      );
+    } catch (err) {
+      console.error('Failed to write to file ${this.selectedFile()}', err);
+    }
+  }
 }