Add copy button, update packages

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);
 }