From f1823fb7594740793bb4380e44463abed25e1958 Mon Sep 17 00:00:00 2001
From: Sakura Akeno Isayeki <sakura.isayeki@nodsoft.net>
Date: Sun, 25 Feb 2024 21:14:09 +0100
Subject: [PATCH] feat(web): Add Markdown support for displaying formatted text

- Added "marked" package as a dependency in the package.json file
- Imported and added "MarkdownModule" to the app.module.ts file
- Updated the profile.component.html file to use the "markdown" directive for displaying clan descriptions
- Updated the view-post.component.html file to use the "markdown" directive for displaying mod action reasons
- Updated the post.component.html file to use the "markdown" directive for displaying post content
- Added CSS styles for markdown rendering in styles.scss
---
 wowskarma.app/package.json                               | 2 ++
 wowskarma.app/src/app/app.module.ts                      | 4 +++-
 .../src/app/pages/clan/profile/profile.component.html    | 2 +-
 .../src/app/pages/post/view/view-post.component.html     | 4 ++--
 wowskarma.app/src/app/shared/post/post.component.html    | 8 ++++----
 wowskarma.app/src/styles.scss                            | 9 +++++++++
 6 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/wowskarma.app/package.json b/wowskarma.app/package.json
index f1356f58..9b638ba4 100644
--- a/wowskarma.app/package.json
+++ b/wowskarma.app/package.json
@@ -30,7 +30,9 @@
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "bootswatch": "^5.3.2",
+    "marked": "^9.0.0",
     "ng-openapi-gen": "^0.51.0",
+    "ngx-markdown": "^17.1.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"
diff --git a/wowskarma.app/src/app/app.module.ts b/wowskarma.app/src/app/app.module.ts
index d627179e..a5ab3c74 100644
--- a/wowskarma.app/src/app/app.module.ts
+++ b/wowskarma.app/src/app/app.module.ts
@@ -66,6 +66,7 @@ import { ProfileModActionsViewComponent } from './shared/modals/profile-mod-acti
 import { ProfilePlatformBansViewComponent } from './shared/modals/profile-platform-bans-view/profile-platform-bans-view.component';
 import { UserRolesComponent } from './shared/components/icons/user-roles/user-roles.component';
 import { NgOptimizedImage } from "@angular/common";
+import { MarkdownComponent, MarkdownModule } from "ngx-markdown";
 
 @NgModule({
     declarations: [
@@ -138,7 +139,8 @@ import { NgOptimizedImage } from "@angular/common";
     NgbPaginationModule,
     NgbTooltipModule,
     NgbModule,
-    NgOptimizedImage
+    NgOptimizedImage,
+    MarkdownModule.forRoot()
   ],
     providers: [
         AuthService,
diff --git a/wowskarma.app/src/app/pages/clan/profile/profile.component.html b/wowskarma.app/src/app/pages/clan/profile/profile.component.html
index 5ea074fe..64456e23 100644
--- a/wowskarma.app/src/app/pages/clan/profile/profile.component.html
+++ b/wowskarma.app/src/app/pages/clan/profile/profile.component.html
@@ -9,7 +9,7 @@ <h1 id="clan-name" class="mb-5">
 
         <div class="my-5">
           <hr/>
-          <p class="my-3" style="white-space: pre-line;">{{clan.description}}</p>
+          <div markdown class="my-3" [data]="clan.description"></div>
           <hr/>
         </div>
       </div>
diff --git a/wowskarma.app/src/app/pages/post/view/view-post.component.html b/wowskarma.app/src/app/pages/post/view/view-post.component.html
index 2b6a5f6d..1157b624 100644
--- a/wowskarma.app/src/app/pages/post/view/view-post.component.html
+++ b/wowskarma.app/src/app/pages/post/view/view-post.component.html
@@ -49,10 +49,10 @@ <h4>Mod Action</h4>
                 <dd class="col-sm-9 col-lg-10">{{ modAction.modUsername }}</dd>
 
                 <dt class="col-sm-3 col-lg-2">Reason</dt>
-                <dd class="col-sm-9 col-lg-10" style="white-space: pre-wrap;">{{ modAction.reason }}</dd>
+                <dd class="col-sm-9 col-lg-10" markdown [data]="modAction.reason"></dd>
             </dl>
         </div>
-        
+
         <div *ngIf="p.replay as replay">
             <h2>Replay
                 <a class="btn btn-primary btn-lg ms-5 px-4" [href]="p.replay.downloadUri">Download Replay</a>
diff --git a/wowskarma.app/src/app/shared/post/post.component.html b/wowskarma.app/src/app/shared/post/post.component.html
index a45bcadf..0d2502c5 100644
--- a/wowskarma.app/src/app/shared/post/post.component.html
+++ b/wowskarma.app/src/app/shared/post/post.component.html
@@ -11,7 +11,7 @@ <h5 class="my-2">{{ p.title }}</h5>
         </div>
 
         <div class="card-body">
-            <p class="card-text" style="white-space: pre-wrap;">{{ p.content }}</p>
+            <markdown class="card-text markdown" [data]="p.content" />
         </div>
 
         <div class="card-body py-0 my-1" style="line-height: normal;">
@@ -28,15 +28,15 @@ <h5 class="my-2">{{ p.title }}</h5>
                         @case (2) {
                             <a class="text-body" [routerLink]="['/posts', 'view', p.id]">
                                 <i class="bi bi-camera-video text-success lead mx-1"></i>
-                            </a> 
+                            </a>
                         }
-                        
+
                         @case (1) {
                             <a class="text-body" [routerLink]="['/posts', 'view', p.id]" title="Replay minimap is being processed.">
                                 <i class="bi bi-camera-video text-warning lead mx-1"></i>
                             </a>
                         }
-                        
+
                         @case (0) {
                             <i class="bi bi-camera-video-off text-danger lead mx-1"></i>
                         }
diff --git a/wowskarma.app/src/styles.scss b/wowskarma.app/src/styles.scss
index 4f7a7e64..8bbd2e62 100644
--- a/wowskarma.app/src/styles.scss
+++ b/wowskarma.app/src/styles.scss
@@ -128,3 +128,12 @@ body {
   --bs-tooltip-color: #fff;
   --bs-tooltip-bg: #222;
 }
+
+
+.markdown {
+  img {
+    display: block;
+    width: 100%;
+    object-fit: contain;
+  }
+}