From 675309ed7d555eb94068f8c0d0edd857c187b050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=E1=BA=A7n=20V=C4=A9nh=20Thi=E1=BB=87n=20Ph=C3=BAc?=
 <phuc.tranvinhthien@axonactive.com>
Date: Fri, 20 Dec 2024 15:21:56 +0700
Subject: [PATCH] MARP-1689 Add library to update Readme content for !NOTE or
 !IMPORTANT...

---
 marketplace-ui/angular.json                         |  5 ++++-
 marketplace-ui/package.json                         |  2 ++
 .../product-detail/product-detail.component.html    |  9 ++-------
 .../product-detail/product-detail.component.ts      | 13 +++++++++++--
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/marketplace-ui/angular.json b/marketplace-ui/angular.json
index 2999e3a75..216f213fe 100644
--- a/marketplace-ui/angular.json
+++ b/marketplace-ui/angular.json
@@ -30,7 +30,10 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
-              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "node_modules/markdown-it-github-alerts/styles/github-base.css",
+              "node_modules/markdown-it-github-alerts/styles/github-colors-dark-media.css",
+              "node_modules/markdown-it-github-alerts/styles/github-colors-light.css"
             ],
             "scripts": [
               "node_modules/emoji-toolkit/lib/js/joypixels.min.js",
diff --git a/marketplace-ui/package.json b/marketplace-ui/package.json
index 4951035e0..46c1adf46 100644
--- a/marketplace-ui/package.json
+++ b/marketplace-ui/package.json
@@ -29,6 +29,7 @@
     "emoji-toolkit": "^9.0.0",
     "jwt-decode": "^4.0.0",
     "karma-viewport": "^1.0.9",
+    "markdown-it-github-alerts": "^0.3.0",
     "marked": "^12.0.0",
     "ngx-cookie-service": "^18.0.0",
     "ngx-markdown": "^18.0.0",
@@ -47,6 +48,7 @@
     "@types/bootstrap": "^5.2.10",
     "@types/jasmine": "~5.1.0",
     "@types/node": "^18.18.0",
+    "@types/markdown-it": "^14.1.2",
     "jasmine": "^5.1.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
index a7a2515f6..f53a70152 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html
@@ -166,13 +166,8 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                       [selectedVersion]="selectedVersion">
                     </app-product-detail-maven-content>
                   } @else {
-                    <markdown emoji
-                      [lang]="languageService.selectedLanguage()"
-                      class="readme-content"
-                      [data]="
-                        getProductModuleContentValue(displayedTab)
-                          | multilingualism: languageService.selectedLanguage()
-                      "></markdown>
+                    <div class="readme-content" [innerHtml]="renderGithubAlert(getProductModuleContentValue(displayedTab)
+                          | multilingualism: languageService.selectedLanguage())"></div>
                   }
                 </div>
               }
diff --git a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
index eda8701dc..98e586f60 100644
--- a/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
+++ b/marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts
@@ -1,4 +1,6 @@
 import { CommonModule, NgOptimizedImage } from '@angular/common';
+import MarkdownIt from 'markdown-it';
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts';
 import {
   Component,
   ElementRef,
@@ -49,7 +51,7 @@ import { ProductStarRatingNumberComponent } from './product-star-rating-number/p
 import { DisplayValue } from '../../../shared/models/display-value.model';
 import { CookieService } from 'ngx-cookie-service';
 import { ROUTER } from '../../../shared/constants/router.constant';
-import { Title } from '@angular/platform-browser';
+import { SafeHtml, Title ,DomSanitizer} from '@angular/platform-browser';
 import { API_URI } from '../../../shared/constants/api.constant';
 
 export interface DetailTab {
@@ -132,7 +134,7 @@ export class ProductDetailComponent {
     this.updateDropdownSelection();
   }
 
-  constructor(private readonly titleService: Title) {
+  constructor(private readonly titleService: Title, private sanitizer: DomSanitizer) {
     this.scrollToTop();
     this.resizeObserver = new ResizeObserver(() => {
       this.updateDropdownSelection();
@@ -417,4 +419,11 @@ export class ProductDetailComponent {
 
     return productDetail;
   }
+
+  renderGithubAlert(value : string ): SafeHtml {
+    const md = MarkdownIt();
+    md.use(MarkdownItGitHubAlerts);
+    const result = md.render(value)
+    return this.sanitizer.bypassSecurityTrustHtml(result);
+  }
 }