Add save as, support for downloading in the browser and workaround for tauri bug

src/app/editor/editor.component.html

@@ -1,6 +1,6 @@
 <div class="proto-title">
   <h2>{{ selectedMessage().name }}</h2>
-  <button mat-icon-button matTooltip="Save configuration" (click)="save()">
+  <button mat-icon-button title="Save configuration" (click)="save()">
     <mat-icon>save</mat-icon>
   </button>
 </div>
@@ -22,3 +22,5 @@
 </div>
 <pre><code #code></code></pre>
 }
+
+<a #downloader [href]="saveHref()" [download]="downloadName()"></a>

src/app/editor/editor.component.ts

@@ -3,31 +3,28 @@ import {
   Component,
   ElementRef,
   SecurityContext,
+  computed,
   effect,
   input,
   signal,
   viewChild,
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { DomSanitizer } from '@angular/platform-browser';
 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';
+import { save } from '@tauri-apps/api/dialog';
+
+declare const __TAURI__: any;
 
 @Component({
   selector: 'app-editor',
   standalone: true,
-  imports: [
-    CommonModule,
-    ProtoFieldComponent,
-    MatButtonModule,
-    MatIconModule,
-    MatTooltipModule,
-  ],
+  imports: [CommonModule, ProtoFieldComponent, MatButtonModule, MatIconModule],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
@@ -35,10 +32,22 @@ export class EditorComponent {
   selectedFile = input<string>();
   selectedMessage = input.required<ProtoMessage>();
   indentSize = input<number>(2);
-
   showRaw = input<boolean>(true);
 
   protected values = signal<any>(undefined);
+  protected downloadName = computed(
+    () => this.selectedFile() ?? `${this.selectedMessage.name}.json`
+  );
+  private serialisedValues = computed(() =>
+    JSON.stringify(this.values(), undefined, this.indentSize())
+  );
+  protected saveHref = computed(() => {
+    const blob = new Blob([this.serialisedValues()], {
+      type: 'application/json',
+    });
+    return URL.createObjectURL(blob);
+  });
+  protected downloader = viewChild<ElementRef<HTMLAnchorElement>>('downloader');
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
@@ -49,11 +58,7 @@ export class EditorComponent {
         if (!this.values()) {
           return;
         }
-        const json = JSON.stringify(
-          this.values(),
-          undefined,
-          this.indentSize()
-        );
+        const json = this.serialisedValues();
         const highlighted = hljs.highlightAuto(json, ['json']);
         const sanitized = sanitizer.sanitize(
           SecurityContext.HTML,
@@ -78,7 +83,6 @@ export class EditorComponent {
 
     effect(async () => {
       const selectedFile = this.selectedFile();
-      console.log('selected file' + selectedFile);
       if (selectedFile) {
         const fileContents = await readTextFile(selectedFile);
         try {
@@ -106,9 +110,7 @@ export class EditorComponent {
   }
 
   protected async copyToClipboard() {
-    await navigator.clipboard.writeText(
-      JSON.stringify(this.values(), undefined, this.indentSize())
-    );
+    await navigator.clipboard.writeText(this.serialisedValues());
     this.snackBar.open('Successully copied to clipboard', 'Close', {
       duration: 2000,
     });
@@ -116,16 +118,25 @@ export class EditorComponent {
 
   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);
+    if (__TAURI__) {
+      const serialised = this.serialisedValues();
+      // TODO: Tauri is bugged on mac atm, remove this when resolved: https://github.com/tauri-apps/tauri/issues/4633
+      if (selectedFile) {
+        try {
+          await writeTextFile(selectedFile, serialised);
+        } catch (err) {
+          console.error('Failed to write to file ${this.selectedFile()}', err);
+        }
+      } else {
+        const filePath = await save({
+          defaultPath: `${this.selectedMessage().name}.json`,
+        });
+        if (filePath) {
+          await writeTextFile(filePath, serialised);
+        }
+      }
+    } else {
+      this.downloader()?.nativeElement.click();
     }
   }
 }