[UXP-114] working directive

need to change markdown pipe to markdown directive and put everything in there

Author: Andrea Barbasso

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

@@ -0,0 +1,8 @@
+// import { MathDirective } from './math.directive';
+
+describe('MathDirective', () => {
+  it('should create an instance', () => {
+    // const directive = new MathDirective();
+    // expect(directive).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,47 @@
+import { Directive, OnChanges, OnInit, Input, ElementRef, OnDestroy, SimpleChanges } from '@angular/core';
+import { Subject } from 'rxjs';
+import { MathService } from './math.service';
+import { take, takeUntil } from 'rxjs/operators';
+
+@Directive({
+  selector: '[dsMath]'
+})
+export class MathDirective implements OnInit, OnChanges, OnDestroy {
+  @Input() dsMath: string;
+  private alive$ = new Subject<boolean>();
+  private readonly el: HTMLElement;
+
+  constructor(private mathService: MathService, private elementRef: ElementRef) {
+    this.el = elementRef.nativeElement;
+  }
+
+  ngOnInit() {
+    this.render();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes?.dsMath?.currentValue) {
+      this.render();
+    }
+  }
+
+  private render() {
+    this.mathService.ready().pipe(
+      take(1),
+      takeUntil(this.alive$)
+    ).subscribe(() => {
+      // if this.dsMath begins with "The observation of the"
+      if (this.dsMath.startsWith('The observation of the')) {
+        console.warn('rendering math after ready');
+        console.warn('this.dsMath', this.dsMath);
+        console.warn('this.el', this.el);
+      }
+      this.mathService.render(this.el, this.dsMath);
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive$.next(false);
+  }
+
+}

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

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MathService } from './math.service';
+
+describe('MathService', () => {
+  let service: MathService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MathService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,89 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+
+interface MathJaxConfig {
+  source: string;
+  integrity: string;
+  id: string;
+}
+
+declare global {
+  interface Window {
+    MathJax: any;
+  }
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MathService {
+
+  private signal: Subject<boolean>;
+
+  private mathJaxOptions = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']]
+    },
+    svg: {
+      fontCache: 'global'
+    },
+    startup: {
+      typeset: false
+    }
+  };
+
+  private mathJax: MathJaxConfig = {
+    source: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
+    integrity: 'sha256-CnzfCXjFj1REmPHgWvm/OQv8gFaxwbLKUi41yCU7N2s=',
+    id: 'MathJaxScript'
+  };
+  private mathJaxFallback: MathJaxConfig = {
+    source: 'assets/mathjax/mml-chtml.js',
+    integrity: 'sha256-CnzfCXjFj1REmPHgWvm/OQv8gFaxwbLKUi41yCU7N2s=',
+    id: 'MathJaxBackupScript'
+  };
+
+  constructor() {
+
+    this.signal = new ReplaySubject<boolean>();
+
+    void this.registerMathJaxAsync(this.mathJax)
+      .then(() => this.signal.next(true))
+      .catch(_ => {
+        void this.registerMathJaxAsync(this.mathJaxFallback)
+          .then(() => this.signal.next(true))
+          .catch((error) => console.log(error));
+      });
+  }
+
+  private async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return new Promise<void>((resolve, reject) => {
+      const optionsScript: HTMLScriptElement = document.createElement('script');
+      optionsScript.type = 'text/javascript';
+      optionsScript.text = `MathJax = ${JSON.stringify(this.mathJaxOptions)};`;
+      document.head.appendChild(optionsScript);
+
+      const script: HTMLScriptElement = 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);
+    });
+  }
+
+  ready(): Observable<boolean> {
+    return this.signal;
+  }
+
+  render(element: HTMLElement, value: string) {
+    // Take initial typesetting which MathJax performs into account
+    // window.MathJax.startup.promise.then(() => {
+      element.innerHTML = value;
+      window.MathJax.typesetPromise([element]);
+    // });
+  }
+}

src/app/shared/markdown-viewer/markdown-viewer.component.html

@@ -1,2 +1,3 @@
 <span class="dont-break-out" [innerHTML]="value | dsMarkdown: true | async">
 </span>
+<span [dsMath]="value"></span>

src/app/shared/shared.module.ts

@@ -352,6 +352,7 @@ import {
 import { ItemCollectionComponent } from './object-collection/shared/mydspace-item-collection/item-collection.component';
 import { ThemedItemListPreviewComponent } from './object-list/my-dspace-result-list-element/item-list-preview/themed-item-list-preview.component';
 import { ItemListPreviewComponent } from './object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component';
+import { MathDirective } from '../core/shared/math.directive';
 
 const MODULES = [
   CommonModule,
@@ -612,6 +613,7 @@ const DIRECTIVES = [
   HoverClassDirective,
   ContextHelpDirective,
   EntityIconDirective,
+  MathDirective
 ];
 
 @NgModule({

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

@@ -1,5 +1,6 @@
 import { Inject, InjectionToken, Pipe, PipeTransform, SecurityContext } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { MathService } from 'src/app/core/shared/math.service';
 
 import { environment } from '../../../environments/environment';
 import { isEmpty } from '../empty.util';
@@ -48,6 +49,7 @@ export class MarkdownPipe implements PipeTransform {
     @Inject(MARKDOWN_IT) private markdownIt: LazyMarkdownIt,
     @Inject(MATHJAX) private mathjax: Mathjax,
     @Inject(SANITIZE_HTML) private sanitizeHtml: SanitizeHtml,
+    private mathService: MathService
   ) {
   }
 
@@ -63,9 +65,6 @@ export class MarkdownPipe implements PipeTransform {
 
     let html: string;
     if (environment.markdown.mathjax) {
-      // TODO: instead of using md.use with mathjax, use ng-katex rendering from its service
-      md.use(await this.mathjax);
-      // TODO: keep this as is
       const sanitizeHtml = await this.sanitizeHtml;
       html = sanitizeHtml(md.render(value), {
         // sanitize-html doesn't let through SVG by default, so we extend its allowlists to cover MathJax SVG

src/config/default-app-config.ts

@@ -501,8 +501,8 @@ export class DefaultAppConfig implements AppConfig {
   // Whether to enable Markdown (https://commonmark.org/) and MathJax (https://www.mathjax.org/)
   // display in supported metadata fields. By default, only dc.description.abstract is supported.
   markdown: MarkdownConfig = {
-    enabled: false,
-    mathjax: false,
+    enabled: true,
+    mathjax: true,
   };
 
   // Which vocabularies should be used for which search filters