Refactor markdown helper text into a pipe

cmu-sei · Feb 17, 2025 · a8198df · a8198df
1 parent cdc3176
commit a8198df
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 37 deletions.
diff --git a/projects/gameboard-ui/src/app/admin/admin.module.ts b/projects/gameboard-ui/src/app/admin/admin.module.ts
@@ -91,6 +91,7 @@ import { CertificateTemplatePickerComponent } from '@/certificates/components/ce
 import { CertificatePreviewerComponent } from '@/certificates/components/certificate-previewer/certificate-previewer.component';
 import { GameCenterPracticeTeamContextMenuComponent } from './components/game-center/game-center-practice-team-context-menu/game-center-practice-team-context-menu.component';
 import { SystemAdminComponent } from './components/system-admin/system-admin.component';
+import { MarkdownPlaceholderPipe } from '@/core/pipes/markdown-placeholder.pipe';
 
 @NgModule({
   declarations: [
@@ -219,6 +220,7 @@ import { SystemAdminComponent } from './components/system-admin/system-admin.com
     GameCenterPracticeTeamContextMenuComponent,
     GameInfoBubblesComponent,
     IfHasPermissionDirective,
+    MarkdownPlaceholderPipe,
     SafeUrlPipe,
     SpinnerComponent,
     ToSupportCodePipe,

diff --git a/projects/gameboard-ui/src/app/admin/announce/announce.component.html b/projects/gameboard-ui/src/app/admin/announce/announce.component.html
@@ -7,8 +7,8 @@
   <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]="finalPlaceholder" class="form-control"
-        [(ngModel)]="message">
+      <textarea name="input-announce" id="input-announce" rows="7" [placeholder]="placeholderText | markdownPlaceholder"
+        class="form-control" [(ngModel)]="message">
       </textarea>
       <div class="input-group-append">
         <button class="btn btn-success" (click)="announce()" [disabled]="!message">

diff --git a/projects/gameboard-ui/src/app/admin/announce/announce.component.ts b/projects/gameboard-ui/src/app/admin/announce/announce.component.ts
@@ -1,26 +1,24 @@
 // 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, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 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 implements OnChanges {
+export class AnnounceComponent {
   @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 = '';
@@ -29,14 +27,6 @@ export class AnnounceComponent implements OnChanges {
   protected finalPlaceholder = "";
   protected isLoading = false;
 
-  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) {
       return;

diff --git a/...ts/gameboard-ui/src/app/admin/components/support-settings/support-settings.component.html b/...ts/gameboard-ui/src/app/admin/components/support-settings/support-settings.component.html
@@ -8,7 +8,8 @@ <h3>Greeting</h3>
     </p>
 
     <label for="supportPageGreeting">Enter a greeting (allows markdown)</label>
-    <textarea id="supportPageGreeting" rows="8" [placeholder]="placeholder" class="form-control"
+    <textarea id="supportPageGreeting" rows="8"
+        [placeholder]="'Welcome to ' + this.appName + ' Support!' | markdownPlaceholder" class="form-control"
         name="supportPageGreeting" [(ngModel)]="settings.supportPageGreeting"
         (input)="handleSettingsChanged()"></textarea>
 

diff --git a/...ects/gameboard-ui/src/app/admin/components/support-settings/support-settings.component.ts b/...ects/gameboard-ui/src/app/admin/components/support-settings/support-settings.component.ts
@@ -4,7 +4,6 @@ import { SupportSettings } from '@/api/support-models';
 import { SupportService } from '@/api/support.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { ConfigService } from '@/utility/config.service';
-import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
 
 @Component({
   selector: 'app-support-settings',
@@ -20,7 +19,6 @@ export class SupportSettingsComponent implements OnInit {
 
   constructor(
     config: ConfigService,
-    private markdownHelpers: MarkdownHelpersService,
     private supportService: SupportService,
     private unsub: UnsubscriberService) {
     // use the app name to personalize the placeholder
@@ -38,7 +36,6 @@ export class SupportSettingsComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     this.load();
-    this.placeholder = this.markdownHelpers.getMarkdownPlaceholderHelp(`Welcome to ${this.appName} Support!`);
   }
 
   protected async handleSettingsChanged() {

diff --git a/...ts/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html b/...ts/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.html
@@ -6,7 +6,8 @@ <h2>Practice Page Greeting</h2>
             to customize it to your needs.
         </p>
 
-        <textarea class="form-control" [placeholder]="ctx.introTextPlaceholder"
+        <textarea class="form-control"
+            [placeholder]="'Enter your **Intro to the Practice Area** text here!' | markdownPlaceholder"
             [(ngModel)]="ctx.settings.introTextMarkdown" (input)="handleSettingsChanged(ctx.settings)"
             rows="5"></textarea>
     </div>

diff --git a/...ects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts b/...ects/gameboard-ui/src/app/admin/practice/practice-settings/practice-settings.component.ts
@@ -1,14 +1,12 @@
 import { CertificateTemplateView } from '@/certificates/certificates.models';
 import { PracticeModeSettings } from '@/prac/practice.models';
-import { MarkdownHelpersService } from '@/services/markdown-helpers.service';
 import { ModalConfirmService } from '@/services/modal-confirm.service';
 import { PracticeService } from '@/services/practice.service';
 import { UnsubscriberService } from '@/services/unsubscriber.service';
 import { Component, OnInit } from '@angular/core';
 import { Subject, debounceTime, firstValueFrom, map } from 'rxjs';
 
 interface PracticeSettingsContext {
-  introTextPlaceholder: string;
   settings: PracticeModeSettings;
 }
 
@@ -26,7 +24,6 @@ export class PracticeSettingsComponent implements OnInit {
 
   constructor(
     private modalService: ModalConfirmService,
-    private markdownHelpers: MarkdownHelpersService,
     private practiceService: PracticeService,
     private unsub: UnsubscriberService) {
     this.unsub.add(this._startUpdate$.pipe(
@@ -37,7 +34,6 @@ export class PracticeSettingsComponent implements OnInit {
 
   async ngOnInit(): Promise<void> {
     this.ctx = {
-      introTextPlaceholder: this.markdownHelpers.getMarkdownPlaceholderHelp(`Enter your "intro to the Practice Area" text here!`),
       settings: await firstValueFrom(this.practiceService.getSettings())
     };
 

diff --git a/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts b/projects/gameboard-ui/src/app/core/pipes/markdown-placeholder.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'markdownPlaceholder',
+  standalone: true
+})
+export class MarkdownPlaceholderPipe implements PipeTransform {
+  transform(header: string): string {
+    const paragraphs: string[] = [];
+
+    if (header) {
+      paragraphs.push(header);
+    }
+    paragraphs.push("This is a markdown field. You can surround text with _underscores_ to make it italic or double **asterisks** to make it bold. You can also link to content using [this syntax](https://google.com).");
+
+    return paragraphs.join("\n\n").trim();
+  }
+}
diff --git a/projects/gameboard-ui/src/app/services/markdown-helpers.service.ts b/projects/gameboard-ui/src/app/services/markdown-helpers.service.ts
@@ -18,17 +18,6 @@ export class MarkdownHelpersService {
     return items.map((item, index) => `${index + 1}. ${item.trim() || falseyText}`).join("\n\n");
   }
 
-  getMarkdownPlaceholderHelp(header?: string): string {
-    const paragraphs: string[] = [];
-
-    if (header) {
-      paragraphs.push(header);
-    }
-    paragraphs.push("This is a markdown field. You can surround text with _underscores_ to make it italic or double **asterisks** to make it bold. You can also [link to content using this syntax](https://google.com).");
-
-    return paragraphs.join("\n\n").trim();
-  }
-
   async toHtml(markdownContent: string): Promise<string> {
     return this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(await this.mdService.parse(markdownContent, { disableSanitizer: true }))) || "";
   }

diff --git a/...reate-edit-system-notification-modal/create-edit-system-notification-modal.component.html b/...reate-edit-system-notification-modal/create-edit-system-notification-modal.component.html
@@ -17,8 +17,8 @@ <h2 class="modal-title pull-left">
 
         <div class="form-group">
             <label for="markdown-content">Content (allows markdown)</label>
-            <textarea class="form-control" id="markdown-content" name="markdown-content" rows="5"
-                placeholder="What do you want to tell your players?"
+            <textarea class="form-control" id="markdown-content" name="markdown-content" rows="10"
+                [placeholder]="'What do you want to tell your players?' | markdownPlaceholder"
                 [(ngModel)]="context.model.markdownContent"></textarea>
         </div>
 

diff --git a/projects/gameboard-ui/src/app/system-notifications/system-notifications.module.ts b/projects/gameboard-ui/src/app/system-notifications/system-notifications.module.ts
@@ -7,6 +7,7 @@ import { FormsModule } from '@angular/forms';
 import { CoreModule } from '@/core/core.module';
 import { SystemNotificationsComponent } from './components/system-notifications/system-notifications.component';
 import { NotificationTypeToAlertTypePipe } from './pipes/notification-type-to-alert-type.pipe';
+import { MarkdownPlaceholderPipe } from '@/core/pipes/markdown-placeholder.pipe';
 
 const DECLARED = [
   AdminSystemNotificationsComponent,
@@ -20,7 +21,9 @@ const DECLARED = [
   imports: [
     CommonModule,
     FormsModule,
-    CoreModule
+    CoreModule,
+    // standalones
+    MarkdownPlaceholderPipe
   ],
   exports: [...DECLARED]
 })