83 lines
2.3 KiB
TypeScript
83 lines
2.3 KiB
TypeScript
import { CommonModule } from '@angular/common';
|
|
import {
|
|
Component,
|
|
ElementRef,
|
|
SecurityContext,
|
|
computed,
|
|
effect,
|
|
input,
|
|
signal,
|
|
viewChild,
|
|
} from '@angular/core';
|
|
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, MatButtonModule],
|
|
templateUrl: './editor.component.html',
|
|
styleUrl: './editor.component.scss',
|
|
})
|
|
export class EditorComponent {
|
|
// TODO: This needs to be reworked so we have a local property and implement some kind of auto-save
|
|
fileContents = input<string>();
|
|
selectedMessage = input.required<ProtoMessage>();
|
|
|
|
showRaw = input<boolean>(true);
|
|
|
|
protected values = signal<any>(undefined);
|
|
|
|
private code = viewChild<ElementRef<HTMLElement>>('code');
|
|
|
|
constructor(sanitizer: DomSanitizer, private snackBar: MatSnackBar) {
|
|
effect(() => {
|
|
const element = this.code()?.nativeElement;
|
|
if (element) {
|
|
if (!this.values()) {
|
|
return;
|
|
}
|
|
const json = JSON.stringify(this.values(), undefined, 2);
|
|
const highlighted = hljs.highlightAuto(json, ['json']);
|
|
const sanitized = sanitizer.sanitize(
|
|
SecurityContext.HTML,
|
|
highlighted.value
|
|
);
|
|
if (sanitized) {
|
|
element.innerHTML = sanitized;
|
|
}
|
|
}
|
|
});
|
|
effect(
|
|
() => {
|
|
const message = this.selectedMessage();
|
|
this.values.set(
|
|
Object.fromEntries(
|
|
message.values.map((value) => [[value.name, undefined]])
|
|
)
|
|
);
|
|
},
|
|
{ allowSignalWrites: true }
|
|
);
|
|
}
|
|
|
|
protected updateValue(key: string, value: any) {
|
|
const existingValue = { ...this.values() };
|
|
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,
|
|
});
|
|
}
|
|
}
|