MARP-1689 Add library to update Readme content for !NOTE or !IMPORTAN…

…T...
axonivy-market · Dec 20, 2024 · 675309e · 675309e
1 parent e781fda
commit 675309e
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
+  }
 }