Add markdown help to announce box

projects/gameboard-ui/src/app/admin/announce/announce.component.html

@@ -7,7 +7,7 @@
   <div class="form-group" *ngIf="!isLoading; else loading">
     <label class="mb-0" for="input-announce">Announcement</label>
     <div class="input-group">
-      <textarea name="input-announce" id="input-announce" rows="7" [placeholder]="placeholderText" class="form-control"
+      <textarea name="input-announce" id="input-announce" rows="7" [placeholder]="finalPlaceholder" class="form-control"
         [(ngModel)]="message">
       </textarea>
       <div class="input-group-append">

projects/gameboard-ui/src/app/admin/announce/announce.component.ts

@@ -1,33 +1,41 @@
 // Copyright 2021 Carnegie Mellon University. All Rights Reserved.
 // Released under a MIT (SEI)-style license. See LICENSE.md in the project root for license information.
 
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
-import { UserService } from '../../api/user.service';
 import { firstValueFrom } from 'rxjs';
 import { LogService } from '@/services/log.service';
 import { ToastService } from '@/utility/services/toast.service';
 import { AdminService } from '@/api/admin.service';
+import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
 
 @Component({
   selector: 'app-announce',
   templateUrl: './announce.component.html',
   styleUrls: ['./announce.component.scss']
 })
-export class AnnounceComponent {
+export class AnnounceComponent implements OnChanges {
   @Input() teamId = '';
   @Input() placeholderText = "We'd like to inform everyone playing that...";
 
+  private adminService = inject(AdminService);
+  private logService = inject(LogService);
+  private markdownHelpers = inject(MarkdownHelpersService);
+  private toastService = inject(ToastService);
+
   message = '';
   faSend = faPaperPlane;
   errors: any[] = [];
-
+  protected finalPlaceholder = "";
   protected isLoading = false;
 
-  constructor(
-    private adminService: AdminService,
-    private logService: LogService,
-    private toastService: ToastService) { }
+  ngOnInit(): void {
+    this.finalPlaceholder = this.markdownHelpers.getMarkdownPlaceholderHelp(this.placeholderText);
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.finalPlaceholder = this.markdownHelpers.getMarkdownPlaceholderHelp(this.placeholderText);
+  }
 
   async announce(): Promise<void> {
     if (!this.message) {