[UXP-114] refactor markdownPipe to markdownDirective

Andrea Barbasso · Andrea Barbasso · commit ba5c05e75cb2 · 2024-04-16T09:27:35.000+02:00
missing tests and splitting the service into a browser one and a server one
diff --git a/src/app/core/shared/math.directive.ts b/src/app/core/shared/math.directive.ts
diff --git a/src/app/core/shared/math.service.ts b/src/app/core/shared/math.service.ts
@@ -3,16 +3,9 @@ import { Observable, ReplaySubject, Subject } from 'rxjs';
 
 interface MathJaxConfig {
   source: string;
-  integrity: string;
   id: string;
 }
 
-declare global {
-  interface Window {
-    MathJax: any;
-  }
-}
-
 @Injectable({
   providedIn: 'root'
 })
@@ -34,12 +27,10 @@ export class MathService {
 
   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'
   };
 
@@ -58,6 +49,7 @@ export class MathService {
 
   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)};`;
@@ -79,11 +71,7 @@ export class MathService {
     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]);
-    // });
+  render(element: HTMLElement) {
+    (window as any).MathJax.typesetPromise([element]);
   }
 }
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.html b/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>
 
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.ts b/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.
    */
diff --git a/src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.ts b/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;
 }
diff --git a/src/app/item-page/simple/field-components/specific-field/generic/generic-item-page-field.component.ts b/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;
 
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.ts
@@ -26,7 +26,7 @@ export class ItemPageFieldComponent {
     @Input() item: Item;
 
     /**
-     * Whether the {@link MarkdownPipe} should be used to render this metadata.
+     * Whether the {@link MarkdownDirective} should be used to render this metadata.
      */
     enableMarkdown = false;
 
diff --git a/src/app/shared/markdown-viewer/markdown-viewer.component.html b/src/app/shared/markdown-viewer/markdown-viewer.component.html
@@ -1,3 +1 @@
-<span class="dont-break-out" [innerHTML]="value | dsMarkdown: true | async">
-</span>
-<span [dsMath]="value"></span>
+<span [dsMarkdown]="value"></span>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -300,7 +300,6 @@ import { SearchExportCsvComponent } from './search/search-export-csv/search-expo
 import {
   ItemPageTitleFieldComponent
 } from '../item-page/simple/field-components/specific-field/title/item-page-title-field.component';
-import { MarkdownPipe } from './utils/markdown.pipe';
 import { GoogleRecaptchaModule } from '../core/google-recaptcha/google-recaptcha.module';
 import { MenuModule } from './menu/menu.module';
 import {
@@ -352,7 +351,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';
+import { MarkdownDirective } from './utils/markdown.directive';
 
 const MODULES = [
   CommonModule,
@@ -399,7 +398,6 @@ const PIPES = [
   ConsolePipe,
   ObjNgFor,
   BrowserOnlyPipe,
-  MarkdownPipe,
   ShortNumberPipe
 ];
 
@@ -613,7 +611,7 @@ const DIRECTIVES = [
   HoverClassDirective,
   ContextHelpDirective,
   EntityIconDirective,
-  MathDirective
+  MarkdownDirective,
 ];
 
 @NgModule({
diff --git a/src/app/shared/utils/markdown.directive.spec.ts b/src/app/shared/utils/markdown.directive.spec.ts
@@ -0,0 +1,8 @@
+import { MarkdownDirective } from './markdown.directive';
+
+describe('MarkdownDirective', () => {
+  it('should create an instance', () => {
+    const directive = new MarkdownDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/app/shared/utils/markdown.directive.ts b/src/app/shared/utils/markdown.directive.ts
@@ -0,0 +1,77 @@
+import {
+  Directive,
+  ElementRef,
+  Inject,
+  InjectionToken,
+  Input,
+  OnDestroy,
+  OnInit,
+  SecurityContext
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+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>;
+const MARKDOWN_IT = new InjectionToken<LazyMarkdownIt>(
+  'Lazily loaded MarkdownIt',
+  {providedIn: 'root', factory: markdownItLoader}
+);
+
+@Directive({
+  selector: '[dsMarkdown]'
+})
+export class MarkdownDirective implements OnInit, OnDestroy {
+
+  @Input() dsMarkdown: string;
+  private alive$ = new Subject<boolean>();
+
+  el: HTMLElement;
+
+  constructor(
+    protected sanitizer: DomSanitizer,
+    @Inject(MARKDOWN_IT) private markdownIt: LazyMarkdownIt,
+    private mathService: MathService,
+    private elementRef: ElementRef) {
+    this.el = elementRef.nativeElement;
+  }
+
+  ngOnInit() {
+    this.render(this.dsMarkdown);
+  }
+
+  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();
+    }
+  }
+
+  private renderMathjax() {
+    this.mathService.ready().pipe(
+      take(1),
+      takeUntil(this.alive$)
+    ).subscribe(() => {
+      this.mathService.render(this.el);
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive$.next(false);
+  }
+}
diff --git a/src/app/shared/utils/markdown.pipe.spec.ts b/src/app/shared/utils/markdown.pipe.spec.ts
diff --git a/src/app/shared/utils/markdown.pipe.ts b/src/app/shared/utils/markdown.pipe.ts
diff --git a/src/config/markdown-config.interface.ts b/src/config/markdown-config.interface.ts

Original file line number	Diff line number	Diff line change
`@@ -37,7 +37,7 @@ export class ItemPageAbstractFieldComponent extends ItemPageFieldComponent {`
`37`	`37`	`label = 'item.page.abstract';`
`38`	`38`
`39`	`39`	`/**`
`40`		`- * Use the {@link MarkdownPipe} to render dc.description.abstract values`
	`40`	`+ * Use the {@link MarkdownDirective} to render dc.description.abstract values`
`41`	`41`	`*/`
`42`	`42`	`enableMarkdown = true;`
`43`	`43`	`}`