issue DSpace#1404, issue DSpace#1762, issue DSpace#1763 Add support for line breaks, markdown and mathjax in metadata

samuelcambien · samuelcambien · commit 2f71dc358b60 · 2022-09-23T13:37:11.000+02:00
diff --git a/package.json b/package.json
@@ -97,6 +97,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",
@@ -114,6 +116,7 @@
     "postcss-cli": "^8.3.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
+    "sanitize-html": "^2.7.2",
     "sortablejs": "1.13.0",
     "tslib": "^2.0.0",
     "url-parse": "^1.5.3",
diff --git a/src/app/item-page/edit-item-page/item-metadata/edit-in-place-field/edit-in-place-field.component.html b/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]
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
@@ -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>
diff --git a/src/app/item-page/field-components/metadata-values/metadata-values.component.spec.ts b/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);
   });
 
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
@@ -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,18 @@ export class MetadataValuesComponent {
    */
   @Input() label: string;
 
+  /**
+   * Whether this metadata should be rendered with markdown.
+   */
+  @Input() enableMarkdown = false;
+
+  /**
+   * This variable will be true if this metadata should be rendered with markdown, and if markdown is enabled in the
+   * environment config.
+   */
+  renderMarkdown = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.renderMarkdown = !!environment.enableMarkdown && this.enableMarkdown;
+  }
 }
diff --git a/src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.spec.ts b/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, {
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
@@ -36,4 +36,5 @@ export class ItemPageAbstractFieldComponent extends ItemPageFieldComponent {
      */
     label = 'item.page.abstract';
 
+    enableMarkdown = true;
 }
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.html b/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>
diff --git a/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts b/src/app/item-page/simple/field-components/specific-field/item-page-field.component.spec.ts
@@ -8,9 +8,13 @@ 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';
 
 let comp: ItemPageFieldComponent;
 let fixture: ComponentFixture<ItemPageFieldComponent>;
+let markdownSpy;
 
 const mockValue = 'test value';
 const mockField = 'dc.test';
@@ -20,17 +24,21 @@ 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,
+      ],
       declarations: [ItemPageFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageFieldComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
+    markdownSpy = spyOn(MarkdownPipe.prototype, 'transform');
   }));
 
   beforeEach(waitForAsync(() => {
@@ -45,6 +53,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(() => {
+      environment.enableMarkdown = 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(() => {
+      environment.enableMarkdown = 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 {
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
@@ -18,6 +18,11 @@ export class ItemPageFieldComponent {
      */
     @Input() item: Item;
 
+    /**
+     * Whether this metadata should be rendered with markdown.
+     */
+    enableMarkdown = false;
+
     /**
      * Fields (schema.element.qualifier) used to render their values.
      */
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -177,6 +177,7 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/
 import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component';
 import { DsSelectComponent } from './ds-select/ds-select.component';
 import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component';
+import { MarkdownPipe } from './utils/markdown.pipe';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -220,7 +221,8 @@ const PIPES = [
   ObjectKeysPipe,
   ObjectValuesPipe,
   ConsolePipe,
-  ObjNgFor
+  ObjNgFor,
+  MarkdownPipe,
 ];
 
 const COMPONENTS = [
diff --git a/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html b/src/app/shared/truncatable/truncatable-part/truncatable-part.component.html
@@ -1,5 +1,5 @@
 <div class="clamp-{{background}}-{{lines}} min-{{minLines}} {{type}} {{fixedHeight ? 'fixedHeight' : ''}}">
-    <div class="content dont-break-out">
+    <div class="content dont-break-out preserve-line-breaks">
         <ng-content></ng-content>
     </div>
 </div>
diff --git a/src/app/shared/utils/markdown.pipe.spec.ts b/src/app/shared/utils/markdown.pipe.spec.ts
@@ -0,0 +1,66 @@
+import { MarkdownPipe } from './markdown.pipe';
+import { TestBed } from '@angular/core/testing';
+import { APP_CONFIG } from '../../../config/app-config.interface';
+import { environment } from '../../../environments/environment';
+
+describe('Markdown Pipe', () => {
+
+  let markdownPipe: MarkdownPipe;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        MarkdownPipe,
+        {
+          provide: APP_CONFIG,
+          useValue: Object.assign(environment, {
+            enableMarkdown: true,
+            enableMathjax: true,
+          })
+        },
+      ],
+    }).compileComponents();
+
+    markdownPipe = TestBed.inject(MarkdownPipe);
+  });
+
+  it('should render markdown', async () => {
+    await testTransform(
+      '# Header',
+      '<h1>Header</h1>'
+    );
+  });
+
+  it('should render mathjax', async () => {
+    await testTransform(
+      '$\\sqrt{2}^2$',
+      '<svg.*?>.*</svg>'
+    );
+  });
+
+  it('should render regular links', async () => {
+    await testTransform(
+      /*eslint-disable quotemark*/
+      '<a href="https://www.dspace.com">DSpace</a>',
+      '<a href="https://www.dspace.com">DSpace</a>'
+      /* eslint-enable quotemark */
+    );
+  });
+
+  it('should not render javascript links', async () => {
+    await testTransform(
+      /*eslint-disable quotemark*/
+      '<a href="javascript:window.alert(\'bingo!\');">exploit</a>',
+      '<a>exploit</a>'
+      /* eslint-enable quotemark */
+    );
+  });
+
+  async function testTransform(input: string, output: string) {
+    expect(
+      await markdownPipe.transform(input)
+    ).toMatch(
+      new RegExp('.*' + output + '.*')
+    );
+  }
+});
diff --git a/src/app/shared/utils/markdown.pipe.ts b/src/app/shared/utils/markdown.pipe.ts
diff --git a/src/config/app-config.interface.ts b/src/config/app-config.interface.ts
diff --git a/src/config/default-app-config.ts b/src/config/default-app-config.ts
diff --git a/src/environments/environment.test.ts b/src/environments/environment.test.ts
diff --git a/src/styles/_global-styles.scss b/src/styles/_global-styles.scss
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -36,4 +36,5 @@ export class ItemPageAbstractFieldComponent extends ItemPageFieldComponent {`
`36`	`36`	`*/`
`37`	`37`	`label = 'item.page.abstract';`
`38`	`38`
	`39`	`+ enableMarkdown = true;`
`39`	`40`	`}`