[DURACOM-240] Assure the MathJax script has been registered before rendering

Author: atarix83

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

@@ -1,11 +1,21 @@
-import { Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import {
+  Inject,
+  Injectable,
+} from '@angular/core';
 import { Observable, ReplaySubject, Subject } from 'rxjs';
 import { environment } from 'src/environments/environment';
-import { MathJaxConfig, MathService } from './math.service';
+import {
+  NativeWindowRef,
+  NativeWindowService,
+} from '../services/window.service';import { MathJaxConfig, MathService } from './math.service';
 
 @Injectable({
   providedIn: 'root'
 })
+/**
+ * Provide the MathService for CSR
+ */
 export class ClientMathService extends MathService {
 
   protected isReady$: Subject<boolean>;
@@ -31,7 +41,10 @@ export class ClientMathService extends MathService {
     id: 'MathJaxBackupScript'
   };
 
-  constructor() {
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    @Inject(NativeWindowService) protected _window: NativeWindowRef,
+  ) {
     super();
 
     this.isReady$ = new ReplaySubject<boolean>();
@@ -44,36 +57,49 @@ export class ClientMathService extends MathService {
       });
   }
 
+  /**
+   * Register the specified MathJax script in the document
+   *
+   * @param config The configuration object for the script
+   */
   protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
     if (environment.markdown.mathjax) {
       return new Promise<void>((resolve, reject) => {
 
-        const optionsScript: HTMLScriptElement = document.createElement('script');
+        const optionsScript: HTMLScriptElement = this._document.createElement('script');
         optionsScript.type = 'text/javascript';
         optionsScript.text = `MathJax = ${JSON.stringify(this.mathJaxOptions)};`;
-        document.head.appendChild(optionsScript);
+        this._document.head.appendChild(optionsScript);
 
-        const script: HTMLScriptElement = document.createElement('script');
+        const script: HTMLScriptElement = this._document.createElement('script');
         script.id = config.id;
         script.type = 'text/javascript';
         script.src = config.source;
         script.crossOrigin = 'anonymous';
         script.async = true;
         script.onload = () => resolve();
         script.onerror = error => reject(error);
-        document.head.appendChild(script);
+        this._document.head.appendChild(script);
       });
     }
     return Promise.resolve();
   }
 
+  /**
+   * Return the status of the script registration
+   */
   ready(): Observable<boolean> {
     return this.isReady$;
   }
 
+  /**
+   * Render the specified element using the MathJax JavaScript
+   *
+   * @param element The element to render with MathJax
+   */
   render(element: HTMLElement) {
     if (environment.markdown.mathjax) {
-      (window as any).MathJax.typesetPromise([element]);
+      this._window.nativeWindow.MathJax.typesetPromise([element]);
     }
   }
 }

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

@@ -5,6 +5,9 @@ export interface MathJaxConfig {
   id: string;
 }
 
+/**
+ * This service is used to provide the MathJax library with the ability to render markdown code
+ */
 export abstract class MathService {
   protected abstract mathJaxOptions: any;
   protected abstract mathJax: MathJaxConfig;

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

@@ -5,6 +5,9 @@ import { MathJaxConfig, MathService } from './math.service';
 @Injectable({
   providedIn: 'root'
 })
+/**
+ * Provide the MathService for SSR
+ */
 export class ServerMathService extends MathService {
 
   protected signal: Subject<boolean>;

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

@@ -8,12 +8,20 @@ import {
   OnInit,
   SecurityContext
 } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import {
+  DomSanitizer,
+  SafeHtml,
+} from '@angular/platform-browser';
+import { Subject } from 'rxjs';
+import {
+  filter,
+  take,
+  takeUntil,
+} from 'rxjs/operators';
+
+import { environment } from '../../../environments/environment';
 import { MathService } from '../../core/shared/math.service';
 import { isEmpty } from '../empty.util';
-import { environment } from '../../../environments/environment';
-import { Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
 
 const markdownItLoader = async () => (await import('markdown-it')).default;
 type LazyMarkdownIt = ReturnType<typeof markdownItLoader>;
@@ -33,8 +41,8 @@ export class MarkdownDirective implements OnInit, OnDestroy {
   el: HTMLElement;
 
   constructor(
-    protected sanitizer: DomSanitizer,
     @Inject(MARKDOWN_IT) private markdownIt: LazyMarkdownIt,
+    protected sanitizer: DomSanitizer,
     private mathService: MathService,
     private elementRef: ElementRef) {
     this.el = elementRef.nativeElement;
@@ -66,6 +74,7 @@ export class MarkdownDirective implements OnInit, OnDestroy {
 
   private renderMathjax() {
     this.mathService.ready().pipe(
+      filter((ready) => ready),
       take(1),
       takeUntil(this.alive$)
     ).subscribe(() => {