Bugfix/marp 1689 GitHub alerts cannot render

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",

marketplace-ui/package.json

@@ -29,9 +29,10 @@
     "emoji-toolkit": "^9.0.0",
     "jwt-decode": "^4.0.0",
     "karma-viewport": "^1.0.9",
+    "markdown-it-emoji": "^3.0.0",
+    "markdown-it-github-alerts": "^0.3.0",
     "marked": "^12.0.0",
     "ngx-cookie-service": "^18.0.0",
-    "ngx-markdown": "^18.0.0",
     "ngx-matomo-client": "^6.3.1",
     "ngxtension": "^3.5.5",
     "rxjs": "~7.8.0",
@@ -46,6 +47,8 @@
     "@angular/localize": "^18.1.2",
     "@types/bootstrap": "^5.2.10",
     "@types/jasmine": "~5.1.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/markdown-it-emoji": "^3.0.1",
     "@types/node": "^18.18.0",
     "jasmine": "^5.1.0",
     "jasmine-core": "~5.1.0",

marketplace-ui/src/app/app.config.ts

@@ -3,8 +3,6 @@ import { ApplicationConfig, importProvidersFrom, provideZoneChangeDetection } fr
 import { InMemoryScrollingFeature, InMemoryScrollingOptions, provideRouter, withInMemoryScrolling } from '@angular/router';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { routes } from './app.routes';
-import { MARKED_OPTIONS, MarkdownModule } from 'ngx-markdown';
-import { markedOptionsFactory } from './core/configs/markdown.config';
 import { httpLoaderFactory } from './core/configs/translate.config';
 import { apiInterceptor } from './core/interceptors/api.interceptor';
 import { provideMatomo, withRouter } from 'ngx-matomo-client';
@@ -38,14 +36,6 @@ export const appConfig: ApplicationConfig = {
           deps: [HttpClient]
         }
       })
-    ),
-    importProvidersFrom(
-      MarkdownModule.forRoot({
-        markedOptions: {
-          provide: MARKED_OPTIONS,
-          useFactory: markedOptionsFactory
-        }
-      })
     )
   ]
 };

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.html

@@ -187,14 +187,8 @@ <h4 class="analysis-title text-primary text-capitalize mb-0">
                         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>
               }

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.spec.ts

@@ -9,11 +9,10 @@ import {
   TestBed,
   tick
 } from '@angular/core/testing';
-import { By, Title } from '@angular/platform-browser';
+import { By, DomSanitizer, Title } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { Viewport } from 'karma-viewport/dist/adapter/viewport';
-import { MarkdownModule } from 'ngx-markdown';
 import { of } from 'rxjs';
 import { TypeOption } from '../../../shared/enums/type-option.enum';
 import {
@@ -32,6 +31,9 @@ import { ProductDetailActionType } from '../../../shared/enums/product-detail-ac
 import { LanguageService } from '../../../core/services/language/language.service';
 import { Language } from '../../../shared/enums/language.enum';
 import { MatomoTestingModule } from 'ngx-matomo-client/testing';
+import * as MarkdownIt from 'markdown-it';
+import * as MarkdownItGitHubAlerts from 'markdown-it-github-alerts';
+import { SafeHtml } from '@angular/platform-browser';
 import { AuthService } from '../../../auth/auth.service';
 import { AppModalService } from '../../../shared/services/app-modal.service';
 import { ProductFeedbackService } from './product-detail-feedback/product-feedbacks-panel/product-feedback.service';
@@ -49,12 +51,14 @@ describe('ProductDetailComponent', () => {
   let routingQueryParamService: jasmine.SpyObj<RoutingQueryParamService>;
   let languageService: jasmine.SpyObj<LanguageService>;
   let titleService: Title;
+  let sanitizerSpy: jasmine.SpyObj<DomSanitizer>;
   let mockProductFeedbackService: jasmine.SpyObj<ProductFeedbackService>;
   let mockProductStarRatingService: jasmine.SpyObj<ProductStarRatingService>;
   let mockAuthService: jasmine.SpyObj<AuthService>;
   let mockAppModalService: jasmine.SpyObj<AppModalService>;
 
   beforeEach(async () => {
+    const spy = jasmine.createSpyObj('DomSanitizer', ['bypassSecurityTrustHtml']);
     const routingQueryParamServiceSpy = jasmine.createSpyObj(
       'RoutingQueryParamService',
       ['getDesignerVersionFromSessionStorage', 'isDesignerEnv']
@@ -87,7 +91,6 @@ describe('ProductDetailComponent', () => {
       imports: [
         ProductDetailComponent,
         TranslateModule.forRoot(),
-        MarkdownModule.forRoot(),
         MatomoTestingModule.forRoot()
       ],
       providers: [
@@ -120,7 +123,8 @@ describe('ProductDetailComponent', () => {
           provide: LanguageService,
           useValue: languageServiceSpy
         },
-        Title
+        Title,
+        { provide: DomSanitizer, useValue: spy }
       ]
     })
       .overrideComponent(ProductDetailComponent, {
@@ -138,6 +142,8 @@ describe('ProductDetailComponent', () => {
       LanguageService
     ) as jasmine.SpyObj<LanguageService>;
 
+    sanitizerSpy = TestBed.inject(DomSanitizer) as jasmine.SpyObj<DomSanitizer>;
+
     titleService = TestBed.inject(Title);
     mockProductFeedbackService.getInitFeedbacksObservable.and.returnValue(
       of([MOCK_FEEDBACK_API_RESPONSE] as any as FeedbackApiResponse)
@@ -845,4 +851,14 @@ describe('ProductDetailComponent', () => {
     );
     expect(mavenTab).toBeFalsy();
   });
+
+  it('should render GitHub alert as safe HTML', () => {
+    const value = '**This is a test**';
+    const mockedRenderedHtml = '<strong>This is a test</strong>';
+    sanitizerSpy.bypassSecurityTrustHtml.and.returnValue(mockedRenderedHtml);
+
+    const result = component.renderGithubAlert(value);
+
+    expect(result).toBe(mockedRenderedHtml);
+  });
 });

marketplace-ui/src/app/modules/product/product-detail/product-detail.component.ts

@@ -1,4 +1,7 @@
 import { CommonModule, NgOptimizedImage } from '@angular/common';
+import MarkdownIt from 'markdown-it';
+import MarkdownItGitHubAlerts from 'markdown-it-github-alerts';
+import { full } from 'markdown-it-emoji';
 import {
   Component,
   ElementRef,
@@ -12,7 +15,6 @@ import {
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { MarkdownModule, MarkdownService } from 'ngx-markdown';
 import { forkJoin, map, Observable } from 'rxjs';
 import { AuthService } from '../../../auth/auth.service';
 import { LanguageService } from '../../../core/services/language/language.service';
@@ -50,7 +52,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';
 import { EmptyProductDetailPipe } from '../../../shared/pipes/empty-product-detail.pipe';
 import { LoadingSpinnerComponent } from '../../../shared/components/loading-spinner/loading-spinner.component';
@@ -74,7 +76,6 @@ const DEFAULT_ACTIVE_TAB = 'description';
     CommonModule,
     ProductStarRatingNumberComponent,
     TranslateModule,
-    MarkdownModule,
     ProductDetailInformationTabComponent,
     ProductDetailMavenContentComponent,
     NgbNavModule,
@@ -88,7 +89,7 @@ const DEFAULT_ACTIVE_TAB = 'description';
     EmptyProductDetailPipe,
     LoadingSpinnerComponent
   ],
-  providers: [ProductService, MarkdownService],
+  providers: [ProductService],
   templateUrl: './product-detail.component.html',
   styleUrl: './product-detail.component.scss'
 })
@@ -141,7 +142,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();
@@ -451,4 +452,12 @@ export class ProductDetailComponent {
     }
     return productDetail;
   }
+
+  renderGithubAlert(value: string): SafeHtml {
+    const md = MarkdownIt();
+    md.use(MarkdownItGitHubAlerts);
+    md.use(full); // Add emoji support
+    const result = md.render(value);
+    return this.sanitizer.bypassSecurityTrustHtml(result);
+  }
 }

marketplace-ui/src/app/modules/product/product-detail/product-installation-count-action/product-installation-count-action.component.spec.ts

@@ -1,7 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProductInstallationCountActionComponent } from './product-installation-count-action.component';
-import {MarkdownModule} from "ngx-markdown";
 import {TranslateModule} from "@ngx-translate/core";
 
 describe('ProductInstallationCountActionComponent', () => {
@@ -12,8 +11,7 @@ describe('ProductInstallationCountActionComponent', () => {
     await TestBed.configureTestingModule({
       imports: [
         ProductInstallationCountActionComponent,
-        TranslateModule.forRoot(),
-        MarkdownModule.forRoot()
+        TranslateModule.forRoot()
       ]
     })
     .compileComponents();