Merged in ux-plus-2023_02_x-UXP-114 (pull request DSpace#1383)

Fix issue with markdown preview

Author: atarix83

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

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ClientMathService extends MathService {
+
+  protected isReady$: Subject<boolean>;
+
+  protected mathJaxOptions = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']]
+    },
+    svg: {
+      fontCache: 'global'
+    },
+    startup: {
+      typeset: false
+    }
+  };
+
+  protected mathJax: MathJaxConfig = {
+    source: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
+    id: 'MathJaxScript'
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js',
+    id: 'MathJaxBackupScript'
+  };
+
+  constructor() {
+    super();
+
+    this.isReady$ = new ReplaySubject<boolean>();
+
+    void this.registerMathJaxAsync(this.mathJax)
+      .then(() => this.isReady$.next(true))
+      .catch(_ => {
+        void this.registerMathJaxAsync(this.mathJaxFallback)
+          .then(() => this.isReady$.next(true));
+      });
+  }
+
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    if (environment.markdown.mathjax) {
+      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);
+      });
+    }
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return this.isReady$;
+  }
+
+  render(element: HTMLElement) {
+    if (environment.markdown.mathjax) {
+      (window as any).MathJax.typesetPromise([element]);
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import { TestBed } from '@angular/core/testing';
+import { Observable, of } from 'rxjs';
+import { MathService, MathJaxConfig } from './math.service';
+
+export class MockMathService extends MathService {
+  protected mathJaxOptions: any = {};
+  protected mathJax: MathJaxConfig = { source: '', id: '' };
+  protected mathJaxFallback: MathJaxConfig = { source: '', id: '' };
+
+  protected registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return of(true);
+  }
+
+  render(element: HTMLElement): void {
+    return;
+  }
+}
+
+describe('MathService', () => {
+  let service: MockMathService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = new MockMathService();
+    spyOn(service, 'render');
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should be ready', (done) => {
+    service.ready().subscribe(isReady => {
+      expect(isReady).toBe(true);
+      done();
+    });
+  });
+
+  it('should render', () => {
+    service.render(document.createElement('div'));
+    expect(service.render).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { Observable } from 'rxjs';
+
+export interface MathJaxConfig {
+  source: string;
+  id: string;
+}
+
+export abstract class MathService {
+  protected abstract mathJaxOptions: any;
+  protected abstract mathJax: MathJaxConfig;
+  protected abstract mathJaxFallback: MathJaxConfig;
+
+  protected abstract registerMathJaxAsync(config: MathJaxConfig): Promise<any>;
+  abstract ready(): Observable<boolean>;
+  abstract render(element: HTMLElement): void;
+}

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

@@ -0,0 +1,41 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServerMathService extends MathService {
+
+  protected signal: Subject<boolean>;
+
+  protected mathJaxOptions = {};
+
+  protected mathJax: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+
+  constructor() {
+    super();
+
+    this.signal = new ReplaySubject<boolean>();
+    this.signal.next(true);
+  }
+
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return this.signal;
+  }
+
+  render(element: HTMLElement) {
+    return;
+  }
+}

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -12,7 +12,7 @@
 
 <!-- Render value as markdown -->
 <ng-template #markdown let-value="value">
-  <span class="dont-break-out" [innerHTML]="value | dsMarkdown | async">
+  <span class="dont-break-out" [dsMarkdown]="value">
   </span>
 </ng-template>
 

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -37,7 +37,7 @@ export class MetadataValuesComponent implements OnChanges {
   @Input() label: string;
 
   /**
-   * Whether the {@link MarkdownPipe} should be used to render these metadata values.
+   * Whether the {@link MarkdownDirective} should be used to render these metadata values.
    * This will only have effect if {@link MarkdownConfig#enabled} is true.
    * Mathjax will only be rendered if {@link MarkdownConfig#mathjax} is true.
    */

src/app/item-page/item-page.module.ts

@@ -62,6 +62,7 @@ import {
   ThemedFullFileSectionComponent
 } from './full/field-components/file-section/themed-full-file-section.component';
 import { UnpaywallVersionsComponent } from './unpaywall-versions/unpaywall-versions.component';
+import { MarkdownViewerModule } from '../shared/markdown-viewer/markdown-viewer.module';
 
 
 const ENTRY_COMPONENTS = [
@@ -126,6 +127,7 @@ const DECLARATIONS = [
     CrisItemPageModule,
     ContextMenuModule.withEntryComponents(),
     MiradorViewerModule,
+    MarkdownViewerModule,
   ],
   declarations: [
     ...DECLARATIONS,

src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.ts

@@ -37,7 +37,7 @@ export class ItemPageAbstractFieldComponent extends ItemPageFieldComponent {
     label = 'item.page.abstract';
 
     /**
-     * Use the {@link MarkdownPipe} to render dc.description.abstract values
+     * Use the {@link MarkdownDirective} to render dc.description.abstract values
      */
     enableMarkdown = true;
 }

src/app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component.ts

@@ -36,7 +36,7 @@ export class GenericItemPageFieldComponent extends ItemPageFieldComponent {
   @Input() label: string;
 
   /**
-   * Whether the {@link MarkdownPipe} should be used to render this metadata.
+   * Whether the {@link MarkdownDirective} should be used to render this metadata.
    */
   @Input() enableMarkdown = false;
 

src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts

@@ -9,13 +9,14 @@ import { MetadataMap, MetadataValue } from '../../../../core/shared/metadata.mod
 import { createSuccessfulRemoteDataObject$ } from '../../../../shared/remote-data.utils';
 import { createPaginatedList } from '../../../../shared/testing/utils.test';
 import { environment } from '../../../../../environments/environment';
-import { MarkdownPipe } from '../../../../shared/utils/markdown.pipe';
 import { SharedModule } from '../../../../shared/shared.module';
 import { APP_CONFIG } from '../../../../../config/app-config.interface';
 import { By } from '@angular/platform-browser';
 import { BrowseDefinitionDataService } from '../../../../core/browse/browse-definition-data.service';
 import { BrowseDefinitionDataServiceStub } from '../../../../shared/testing/browse-definition-data-service.stub';
 import { RouterTestingModule } from '@angular/router/testing';
+import { MarkdownDirective } from '../../../../shared/utils/markdown.directive';
+import { MathService } from '../../../../core/shared/math.service';
 
 let comp: ItemPageFieldComponent;
 let fixture: ComponentFixture<ItemPageFieldComponent>;
@@ -51,14 +52,15 @@ describe('ItemPageFieldComponent', () => {
       ],
       providers: [
         { provide: APP_CONFIG, useValue: appConfig },
-        { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub }
+        { provide: BrowseDefinitionDataService, useValue: BrowseDefinitionDataServiceStub },
+        { provide: MathService, useValue: {} }
       ],
       declarations: [ItemPageFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageFieldComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
-    markdownSpy = spyOn(MarkdownPipe.prototype, 'transform');
+    markdownSpy = spyOn(MarkdownDirective.prototype, 'render');
     fixture = TestBed.createComponent(ItemPageFieldComponent);
     comp = fixture.componentInstance;
     comp.item = mockItemWithMetadataFieldsAndValue(mockFields, mockValue);