Add copy button, update packages

package.json

@@ -11,36 +11,36 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^18.0.2",
-    "@angular/common": "^18.0.0",
-    "@angular/compiler": "^18.0.0",
-    "@angular/core": "^18.0.0",
-    "@angular/forms": "^18.0.0",
-    "@angular/material": "^18.0.2",
-    "@angular/platform-browser": "^18.0.0",
-    "@angular/platform-browser-dynamic": "^18.0.0",
-    "@angular/router": "^18.0.0",
-    "@tauri-apps/api": "^1.5.6",
-    "highlight.js": "^11.9.0",
-    "protobufjs": "~7.3.0",
-    "rxjs": "~7.8.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.14.2"
+    "@angular/animations": "^18.1.0",
+    "@angular/cdk": "^18.1.0",
+    "@angular/common": "^18.1.0",
+    "@angular/compiler": "^18.1.0",
+    "@angular/core": "^18.1.0",
+    "@angular/forms": "^18.1.0",
+    "@angular/material": "^18.1.0",
+    "@angular/platform-browser": "^18.1.0",
+    "@angular/platform-browser-dynamic": "^18.1.0",
+    "@angular/router": "^18.1.0",
+    "@tauri-apps/api": "^1.6.0",
+    "highlight.js": "^11.10.0",
+    "protobufjs": "^7.3.2",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.6.3",
+    "zone.js": "^0.14.7"
   },
   "devDependencies": {
-    "@angular/build": "^18.0.1",
-    "@angular/cli": "^18.0.1",
-    "@angular/compiler-cli": "^18.0.0",
-    "@tauri-apps/cli": "^1.5.14",
-    "@types/jasmine": "~5.1.0",
+    "@angular/build": "^18.1.0",
+    "@angular/cli": "^18.1.0",
+    "@angular/compiler-cli": "^18.1.0",
+    "@tauri-apps/cli": "^1.6.0",
+    "@types/jasmine": "^5.1.4",
     "@types/protobufjs": "^6.0.0",
-    "jasmine-core": "~5.1.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.2.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.4.5"
+    "jasmine-core": "^5.1.2",
+    "karma": "^6.4.3",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "typescript": "^5.4.5"
   }
 }

src/app/editor/editor.component.html

@@ -10,4 +10,8 @@
   } }
 </div>
 
+<h2>Preview</h2>
+<div class="actions">
+  <button mat-flat-button (click)="copyToClipboard()">Copy</button>
+</div>
 <pre *ngIf="showRaw()"><code #code></code></pre>

src/app/editor/editor.component.scss

@@ -13,3 +13,7 @@ div {
 div {
   padding: 10px;
 }
+
+.actions {
+  flex: 0 0 auto;
+}

src/app/editor/editor.component.ts

@@ -13,11 +13,13 @@ 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',
   standalone: true,
-  imports: [CommonModule, ProtoFieldComponent],
+  imports: [CommonModule, ProtoFieldComponent, MatButtonModule],
   templateUrl: './editor.component.html',
   styleUrl: './editor.component.scss',
 })
@@ -32,7 +34,7 @@ export class EditorComponent {
 
   private code = viewChild<ElementRef<HTMLElement>>('code');
 
-  constructor(sanitizer: DomSanitizer) {
+  constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
     effect(() => {
       const element = this.code()?.nativeElement;
       if (element) {
@@ -68,4 +70,13 @@ export class EditorComponent {
     existingValue[key] = value;
     this.values.set(existingValue);
   }
+
+  protected async copyToClipboard() {
+    await navigator.clipboard.writeText(
+      JSON.stringify(this.values(), undefined, 2)
+    );
+    this.snackBar.open('Successully copied to clipboard', 'Close', {
+      duration: 2000,
+    });
+  }
 }

src/styles.scss

@@ -29,6 +29,7 @@ html {
   @include mat.form-field-theme(theme.$rose-theme);
   @include mat.list-theme(theme.$rose-theme);
   @include mat.select-theme(theme.$rose-theme);
+  @include mat.snack-bar-theme(theme.$rose-theme);
   @include custom-colours(theme.$rose-theme);
 }