Merge pull request DSpace#1851 from atmire/w2p-93963-Add_support_for_line_breaks_markdown_and_mathjax_in_metadata

Add support for line breaks markdown and mathjax in metadata

Author: tdonohue

package.json

@@ -104,6 +104,8 @@
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.10",
     "lodash": "^4.17.21",
+    "markdown-it": "^13.0.1",
+    "markdown-it-mathjax3": "^4.3.1",
     "mirador": "^3.3.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.11.0",
@@ -116,20 +118,21 @@
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
     "ngx-sortablejs": "^11.1.0",
+    "ngx-ui-switch": "^11.0.1",
     "nouislider": "^14.6.3",
     "pem": "1.14.4",
     "postcss-cli": "^9.1.0",
     "prop-types": "^15.7.2",
     "react-copy-to-clipboard": "^5.0.1",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^7.5.5",
+    "sanitize-html": "^2.7.2",
     "sortablejs": "1.13.0",
     "tslib": "^2.0.0",
     "url-parse": "^1.5.6",
     "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
-    "zone.js": "~0.11.5",
-    "ngx-ui-switch": "^11.0.1"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "~13.1.0",
@@ -155,6 +158,7 @@
     "@types/js-cookie": "2.2.6",
     "@types/lodash": "^4.14.165",
     "@types/node": "^14.14.9",
+    "@types/sanitize-html": "^2.6.2",
     "@typescript-eslint/eslint-plugin": "5.11.0",
     "@typescript-eslint/parser": "5.11.0",
     "axe-core": "^4.3.3",

src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html

@@ -26,7 +26,7 @@
 <td class="w-100">
     <div class="value-field">
         <div *ngIf="!(editable | async)">
-            <span class="dont-break-out">{{metadata?.value}}</span>
+            <span class="dont-break-out preserve-line-breaks">{{metadata?.value}}</span>
         </div>
         <div *ngIf="(editable | async)" class="field-container">
             <textarea class="form-control" type="textarea" attr.aria-labelledby="fieldValue" [(ngModel)]="metadata.value" [dsDebounce]

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

@@ -1,5 +1,18 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <span class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;">
-        {{mdValue.value}}<span *ngIf="!last" [innerHTML]="separator"></span>
-    </span>
+    <ng-container *ngFor="let mdValue of mdValues; let last=last;">
+      <ng-container *ngTemplateOutlet="(renderMarkdown ? markdown : simple); context: {value: mdValue.value, classes: 'dont-break-out preserve-line-breaks'}">
+      </ng-container>
+      <span class="separator" *ngIf="!last" [innerHTML]="separator"></span>
+    </ng-container>
 </ds-metadata-field-wrapper>
+
+<ng-template #markdown let-value="value" let-classes="classes">
+  <span class="{{classes}}" [innerHTML]="value | dsMarkdown | async">
+  </span>
+</ng-template>
+
+<ng-template #simple let-value="value" let-classes="classes">
+  <span class="{{classes}}">
+    {{value}}
+  </span>
+</ng-template>

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

@@ -58,7 +58,7 @@ describe('MetadataValuesComponent', () => {
   });
 
   it('should contain separators equal to the amount of metadata values minus one', () => {
-    const separators = fixture.debugElement.queryAll(By.css('span>span'));
+    const separators = fixture.debugElement.queryAll(By.css('span.separator'));
     expect(separators.length).toBe(mockMetadata.length - 1);
   });
 

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

@@ -1,5 +1,6 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { MetadataValue } from '../../../core/shared/metadata.models';
+import { environment } from '../../../../environments/environment';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -10,7 +11,7 @@ import { MetadataValue } from '../../../core/shared/metadata.models';
   styleUrls: ['./metadata-values.component.scss'],
   templateUrl: './metadata-values.component.html'
 })
-export class MetadataValuesComponent {
+export class MetadataValuesComponent implements OnChanges {
 
   /**
    * The metadata values to display
@@ -27,4 +28,19 @@ export class MetadataValuesComponent {
    */
   @Input() label: string;
 
+  /**
+   * Whether the {@link MarkdownPipe} 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.
+   */
+  @Input() enableMarkdown = false;
+
+  /**
+   * This variable will be true if both {@link environment.markdown.enabled} and {@link enableMarkdown} are true.
+   */
+  renderMarkdown;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.renderMarkdown = !!environment.markdown.enabled && this.enableMarkdown;
+  }
 }

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

@@ -5,6 +5,7 @@ import { ItemPageAbstractFieldComponent } from './item-page-abstract-field.compo
 import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loader.mock';
 import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
 import { mockItemWithMetadataFieldAndValue } from '../item-page-field.component.spec';
+import { SharedModule } from '../../../../../shared/shared.module';
 
 let comp: ItemPageAbstractFieldComponent;
 let fixture: ComponentFixture<ItemPageAbstractFieldComponent>;
@@ -15,12 +16,15 @@ const mockValue = 'test value';
 describe('ItemPageAbstractFieldComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      })],
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+        SharedModule,
+      ],
       declarations: [ItemPageAbstractFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageAbstractFieldComponent, {

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

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

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

@@ -1,3 +1,8 @@
 <div class="item-page-field">
-  <ds-metadata-values [mdValues]="item?.allMetadata(fields)" [separator]="separator" [label]="label"></ds-metadata-values>
+  <ds-metadata-values
+    [mdValues]="item?.allMetadata(fields)"
+    [separator]="separator"
+    [label]="label"
+    [enableMarkdown]="enableMarkdown"
+  ></ds-metadata-values>
 </div>

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

@@ -8,9 +8,14 @@ import { MetadataValuesComponent } from '../../../field-components/metadata-valu
 import { MetadataMap, MetadataValue } from '../../../../core/shared/metadata.models';
 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';
 
 let comp: ItemPageFieldComponent;
 let fixture: ComponentFixture<ItemPageFieldComponent>;
+let markdownSpy;
 
 const mockValue = 'test value';
 const mockField = 'dc.test';
@@ -20,17 +25,24 @@ const mockFields = [mockField];
 describe('ItemPageFieldComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      })],
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+        SharedModule,
+      ],
+      providers: [
+        { provide: APP_CONFIG, useValue: Object.assign({}, environment) },
+      ],
       declarations: [ItemPageFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageFieldComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
+    markdownSpy = spyOn(MarkdownPipe.prototype, 'transform');
   }));
 
   beforeEach(waitForAsync(() => {
@@ -45,6 +57,68 @@ describe('ItemPageFieldComponent', () => {
   it('should display display the correct metadata value', () => {
     expect(fixture.nativeElement.innerHTML).toContain(mockValue);
   });
+
+  describe('when markdown is disabled in the environment config', () => {
+
+    beforeEach(() => {
+      TestBed.inject(APP_CONFIG).markdown.enabled = false;
+    });
+
+    describe('and markdown is disabled in this component', () => {
+
+      beforeEach(() => {
+        comp.enableMarkdown = false;
+        fixture.detectChanges();
+      });
+
+      it('should not use the Markdown Pipe', () => {
+        expect(markdownSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('and markdown is enabled in this component', () => {
+
+      beforeEach(() => {
+        comp.enableMarkdown = true;
+        fixture.detectChanges();
+      });
+
+      it('should not use the Markdown Pipe', () => {
+        expect(markdownSpy).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('when markdown is enabled in the environment config', () => {
+
+    beforeEach(() => {
+      TestBed.inject(APP_CONFIG).markdown.enabled = true;
+    });
+
+    describe('and markdown is disabled in this component', () => {
+
+      beforeEach(() => {
+        comp.enableMarkdown = false;
+        fixture.detectChanges();
+      });
+
+      it('should not use the Markdown Pipe', () => {
+        expect(markdownSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('and markdown is enabled in this component', () => {
+
+      beforeEach(() => {
+        comp.enableMarkdown = true;
+        fixture.detectChanges();
+      });
+
+      it('should use the Markdown Pipe', () => {
+        expect(markdownSpy).toHaveBeenCalled();
+      });
+    });
+  });
 });
 
 export function mockItemWithMetadataFieldAndValue(field: string, value: string): Item {

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

@@ -1,5 +1,4 @@
 import { Component, Input } from '@angular/core';
-
 import { Item } from '../../../../core/shared/item.model';
 
 /**
@@ -18,6 +17,11 @@ export class ItemPageFieldComponent {
      */
     @Input() item: Item;
 
+    /**
+     * Whether the {@link MarkdownPipe} should be used to render this metadata.
+     */
+    enableMarkdown = false;
+
     /**
      * Fields (schema.element.qualifier) used to render their values.
      */