Add preview support for notes editor

src/app/editor/editor.html

@@ -110,7 +110,14 @@
       <!-- <button mat-stroked-button type="button" disabled="disabled">Save Draft</button>&nbsp; -->
       <button mat-flat-button [disabled]="!noteForm.valid" type="submit" color="primary">Publish Note</button>
     </div>
+
   </form>
+
+  <div *ngIf="event">
+    <h2>Preview</h2>
+    <app-event [event]="event"></app-event>
+  </div>
+
   <!-- </mat-card-content>
   </mat-card> -->
 </div>

src/app/editor/editor.ts

@@ -3,10 +3,10 @@ import { FormBuilder, FormControl, UntypedFormGroup, Validators } from '@angular
 import { NavigationService } from '../services/navigation';
 import { Location } from '@angular/common';
 import { ApplicationState } from '../services/applicationstate';
-import { BlogEvent } from '../services/interfaces';
-import { Event } from 'nostr-tools';
+import { BlogEvent, NostrEvent } from '../services/interfaces';
+import { Event, Kind } from 'nostr-tools';
 import { Subscription } from 'rxjs';
-import { Utilities } from '../services/utilities';
+import { now, Utilities } from '../services/utilities';
 import { QueueService } from '../services/queue.service';
 import { ArticleService } from '../services/article';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -87,8 +87,34 @@ export class EditorComponent {
         }
       })
     );
+
+    this.subscriptions.push(
+      this.noteForm.controls.content.valueChanges.subscribe((text) => {
+        this.updateEvent(text);
+      })
+    );
   }
 
+  updateEvent(content: string | null) {
+    if (!content) {
+      this.event = undefined;
+    } else {
+      this.event = {
+        contentCut: false,
+        tagsCut: false,
+        kind: Kind.Text,
+        content: content ? content : '',
+        tags: [],
+        created_at: now(),
+        id: '',
+        sig: '',
+        pubkey: this.appState.getPublicKey(),
+      };
+    }
+  }
+
+  event?: NostrEvent;
+
   selectedArticle: string = '';
 
   changedArticle() {

src/app/shared/content/content.ts

@@ -21,7 +21,18 @@ interface MediaItem {
   styleUrls: ['./content.css'],
 })
 export class ContentComponent {
-  @Input() event?: NostrEventDocument;
+  // @Input() event?: NostrEventDocument;
+
+  #event?: NostrEventDocument | undefined;
+
+  @Input() set event(value: NostrEventDocument | undefined) {
+    this.#event = value;
+    this.initialize();
+  }
+  get event(): any {
+    return this.#event;
+  }
+
   @Input() displayRepliesTo: boolean = true;
 
   profileName = '';
@@ -68,7 +79,11 @@ export class ContentComponent {
     return (token as TokenKeyword).word;
   }
 
-  async ngOnInit() {
+  ngOnInit() {
+    this.initialize();
+  }
+
+  initialize() {
     if (!this.event) {
       return;
     }
@@ -218,6 +233,8 @@ export class ContentComponent {
 
     if (text.length < 9) {
       this.bigSize = true;
+    } else {
+      this.bigSize = false;
     }
 
     // var regex = /#\[(.*?)\]/g;

src/app/shared/event/event.ts

@@ -14,7 +14,16 @@ import { Circle, NostrEventDocument, ThreadEntry } from '../../services/interfac
 })
 export class EventComponent {
   @Input() threadEntry?: ThreadEntry | undefined;
-  @Input() event?: NostrEventDocument | undefined;
+  // @Input() event?: NostrEventDocument | undefined;
+
+  #event?: NostrEventDocument | undefined;
+
+  @Input() set event(value: NostrEventDocument | undefined) {
+    this.#event = value;
+  }
+  get event(): any {
+    return this.#event;
+  }
 
   imagePath = '/assets/profile.png';
   tooltip = '';