[DSC-1768] fix markdown rendering applying before mathjax rendering

Author: Andrea Barbasso

src/app/core/shared/client-math.service.ts

@@ -22,7 +22,7 @@ export class ClientMathService extends MathService {
 
   protected mathJaxOptions = {
     tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']]
+      inlineMath: [['$', '$'], ['$$', '$$'], ['\\(', '\\)']]
     },
     svg: {
       fontCache: 'global'
@@ -99,7 +99,7 @@ export class ClientMathService extends MathService {
    */
   render(element: HTMLElement) {
     if (environment.markdown.mathjax) {
-      this._window.nativeWindow.MathJax.typesetPromise([element]);
+      return (window as any).MathJax.typesetPromise([element]) as Promise<any>;
     }
   }
 }

src/app/core/shared/math.service.spec.ts

@@ -15,8 +15,8 @@ export class MockMathService extends MathService {
     return of(true);
   }
 
-  render(element: HTMLElement): void {
-    return;
+  render(element: HTMLElement): Promise<any> {
+    return Promise.resolve();
   }
 }
 

src/app/core/shared/math.service.ts

@@ -15,5 +15,5 @@ export abstract class MathService {
 
   protected abstract registerMathJaxAsync(config: MathJaxConfig): Promise<any>;
   abstract ready(): Observable<boolean>;
-  abstract render(element: HTMLElement): void;
+  abstract render(element: HTMLElement): Promise<any>;
 }

src/app/core/shared/server-math.service.ts

@@ -39,6 +39,6 @@ export class ServerMathService extends MathService {
   }
 
   render(element: HTMLElement) {
-    return;
+    return Promise.resolve();
   }
 }

src/app/shared/utils/markdown.directive.ts

@@ -60,31 +60,39 @@ export class MarkdownDirective implements OnChanges, OnDestroy {
       this.el.innerHTML = value;
       return;
     } else {
-      const MarkdownIt = await this.markdownIt;
-      const md = new MarkdownIt({
-        html: true,
-        linkify: true,
-      });
-
-      const html = this.sanitizer.sanitize(SecurityContext.HTML, md.render(value));
-      this.el.innerHTML = html;
-
       if (environment.markdown.mathjax) {
-        this.renderMathjax();
+        this.renderMathjaxThenMarkdown(value);
+      } else {
+        this.renderMarkdown(value);
       }
     }
   }
 
-  private renderMathjax() {
+  private renderMathjaxThenMarkdown(value: string) {
+    const sanitized = this.sanitizer.sanitize(SecurityContext.HTML, value);
+    this.el.innerHTML = sanitized;
     this.mathService.ready().pipe(
       filter((ready) => ready),
       take(1),
       takeUntil(this.alive$)
     ).subscribe(() => {
-      this.mathService.render(this.el);
+      this.mathService.render(this.el)?.then(_ => {
+        this.renderMarkdown(this.el.innerHTML, true);
+      });
     });
   }
 
+  private async renderMarkdown(value: string, alreadySanitized = false) {
+    const MarkdownIt = await this.markdownIt;
+    const md = new MarkdownIt({
+      html: true,
+      linkify: true,
+    });
+
+    const html = alreadySanitized ? md.render(value) : this.sanitizer.sanitize(SecurityContext.HTML, md.render(value));
+    this.el.innerHTML = html;
+  }
+
   ngOnDestroy() {
     this.alive$.next(false);
   }