Merge pull request #3112 from 4Science/task/main/DURACOM-273

[#3111] fix markdown rendering applying before mathjax rendering

Author: kshepherd

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

@@ -31,7 +31,7 @@ export class ClientMathService extends MathService {
 
   protected mathJaxOptions = {
     tex: {
-      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      inlineMath: [['$', '$'], ['$$', '$$'], ['\\(', '\\)']],
     },
     svg: {
       fontCache: 'global',
@@ -108,7 +108,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

@@ -22,8 +22,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

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

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

@@ -55,32 +55,42 @@ export class MarkdownDirective implements OnInit, OnDestroy {
 
   async render(value: string, forcePreview = false): Promise<SafeHtml> {
     if (isEmpty(value) || (!environment.markdown.enabled && !forcePreview)) {
-      return value;
-    }
-    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.el.innerHTML = value;
+      return;
+    } else {
+      if (environment.markdown.mathjax) {
+        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);
   }