Merge remote-tracking branch 'atmire/w2p-93963-Add_support_for_line_breaks_markdown_and_mathjax_in_metadata' into w2p-94060_Issue-1720_MyDSpace-support-entities

Author: LotteHofstede

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-uri-values/metadata-uri-values.component.spec.ts

@@ -6,6 +6,8 @@ import { By } from '@angular/platform-browser';
 import { MetadataUriValuesComponent } from './metadata-uri-values.component';
 import { isNotEmpty } from '../../../shared/empty.util';
 import { MetadataValue } from '../../../core/shared/metadata.models';
+import { APP_CONFIG } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment';
 
 let comp: MetadataUriValuesComponent;
 let fixture: ComponentFixture<MetadataUriValuesComponent>;
@@ -33,6 +35,9 @@ describe('MetadataUriValuesComponent', () => {
           useClass: TranslateLoaderMock
         }
       })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+      ],
       declarations: [MetadataUriValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MetadataUriValuesComponent, {

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

@@ -5,6 +5,8 @@ import { TranslateLoaderMock } from '../../../shared/mocks/translate-loader.mock
 import { MetadataValuesComponent } from './metadata-values.component';
 import { By } from '@angular/platform-browser';
 import { MetadataValue } from '../../../core/shared/metadata.models';
+import { APP_CONFIG } from '../../../../config/app-config.interface';
+import { environment } from '../../../../environments/environment';
 
 let comp: MetadataValuesComponent;
 let fixture: ComponentFixture<MetadataValuesComponent>;
@@ -32,8 +34,11 @@ describe('MetadataValuesComponent', () => {
         loader: {
           provide: TranslateLoader,
           useClass: TranslateLoaderMock
-        }
+        },
       })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+      ],
       declarations: [MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(MetadataValuesComponent, {
@@ -58,7 +63,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, Inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { MetadataValue } from '../../../core/shared/metadata.models';
+import { APP_CONFIG, AppConfig } from '../../../../config/app-config.interface';
 
 /**
  * This component renders the configured 'values' into the ds-metadata-field-wrapper component.
@@ -10,7 +11,12 @@ 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 {
+
+  constructor(
+    @Inject(APP_CONFIG) private appConfig: AppConfig,
+  ) {
+  }
 
   /**
    * The metadata values to display
@@ -27,4 +33,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 = !!this.appConfig.markdown.enabled && this.enableMarkdown;
+  }
 }

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

@@ -3,39 +3,44 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ItemPageAbstractFieldComponent } from './item-page-abstract-field.component';
 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';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
+import { By } from '@angular/platform-browser';
 
 let comp: ItemPageAbstractFieldComponent;
 let fixture: ComponentFixture<ItemPageAbstractFieldComponent>;
 
-const mockField = 'dc.description.abstract';
-const mockValue = 'test value';
-
 describe('ItemPageAbstractFieldComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot({
-        loader: {
-          provide: TranslateLoader,
-          useClass: TranslateLoaderMock
-        }
-      })],
-      declarations: [ItemPageAbstractFieldComponent, MetadataValuesComponent],
+      imports: [
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock
+          }
+        }),
+        SharedModule,
+      ],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+      ],
+      declarations: [ItemPageAbstractFieldComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageAbstractFieldComponent, {
       set: { changeDetection: ChangeDetectionStrategy.Default }
     }).compileComponents();
   }));
 
   beforeEach(waitForAsync(() => {
+
     fixture = TestBed.createComponent(ItemPageAbstractFieldComponent);
     comp = fixture.componentInstance;
-    comp.item = mockItemWithMetadataFieldAndValue(mockField, mockValue);
     fixture.detectChanges();
   }));
 
-  it('should display display the correct metadata value', () => {
-    expect(fixture.nativeElement.innerHTML).toContain(mockValue);
+  it('should render a ds-metadata-values', () => {
+    expect(fixture.debugElement.query(By.css('ds-metadata-values'))).toBeDefined();
   });
 });

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/author/item-page-author-field.component.spec.ts

@@ -5,6 +5,8 @@ import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loa
 import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
 import { mockItemWithMetadataFieldAndValue } from '../item-page-field.component.spec';
 import { ItemPageAuthorFieldComponent } from './item-page-author-field.component';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 let comp: ItemPageAuthorFieldComponent;
 let fixture: ComponentFixture<ItemPageAuthorFieldComponent>;
@@ -21,6 +23,9 @@ describe('ItemPageAuthorFieldComponent', () => {
           useClass: TranslateLoaderMock
         }
       })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+      ],
       declarations: [ItemPageAuthorFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageAuthorFieldComponent, {

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

@@ -5,6 +5,8 @@ import { TranslateLoaderMock } from '../../../../../shared/testing/translate-loa
 import { MetadataValuesComponent } from '../../../../field-components/metadata-values/metadata-values.component';
 import { mockItemWithMetadataFieldAndValue } from '../item-page-field.component.spec';
 import { ItemPageDateFieldComponent } from './item-page-date-field.component';
+import { APP_CONFIG } from '../../../../../../config/app-config.interface';
+import { environment } from '../../../../../../environments/environment';
 
 let comp: ItemPageDateFieldComponent;
 let fixture: ComponentFixture<ItemPageDateFieldComponent>;
@@ -21,6 +23,9 @@ describe('ItemPageDateFieldComponent', () => {
           useClass: TranslateLoaderMock
         }
       })],
+      providers: [
+        { provide: APP_CONFIG, useValue: environment },
+      ],
       declarations: [ItemPageDateFieldComponent, MetadataValuesComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).overrideComponent(ItemPageDateFieldComponent, {