move configs, add extra documentation

Author: samuelcambien

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

@@ -1,6 +1,6 @@
 <ds-metadata-field-wrapper [label]="label | translate">
     <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 *ngTemplateOutlet="(env.markdown.enabled && this.enableMarkdown ? 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>

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

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { MetadataValue } from '../../../core/shared/metadata.models';
 import { environment } from '../../../../environments/environment';
 
@@ -11,7 +11,7 @@ import { environment } from '../../../../environments/environment';
   styleUrls: ['./metadata-values.component.scss'],
   templateUrl: './metadata-values.component.html'
 })
-export class MetadataValuesComponent implements OnChanges {
+export class MetadataValuesComponent {
 
   /**
    * The metadata values to display
@@ -29,17 +29,11 @@ export class MetadataValuesComponent implements OnChanges {
   @Input() label: string;
 
   /**
-   * Whether this metadata should be rendered with markdown.
+   * 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 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;
-  }
+  env = environment;
 }

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

@@ -36,5 +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.spec.ts

@@ -57,7 +57,7 @@ describe('ItemPageFieldComponent', () => {
   describe('when markdown is disabled in the environment config', () => {
 
     beforeEach(() => {
-      environment.enableMarkdown = false;
+      environment.markdown.enabled = false;
     });
 
     describe('and markdown is disabled in this component', () => {
@@ -88,7 +88,7 @@ describe('ItemPageFieldComponent', () => {
   describe('when markdown is enabled in the environment config', () => {
 
     beforeEach(() => {
-      environment.enableMarkdown = true;
+      environment.markdown.enabled = true;
     });
 
     describe('and markdown is disabled in this component', () => {

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';
 
 /**
@@ -19,7 +18,7 @@ export class ItemPageFieldComponent {
     @Input() item: Item;
 
     /**
-     * Whether this metadata should be rendered with markdown.
+     * Whether the {@link MarkdownPipe} should be used to render this metadata.
      */
     enableMarkdown = false;
 

src/app/shared/utils/markdown.pipe.spec.ts

@@ -14,8 +14,10 @@ describe('Markdown Pipe', () => {
         {
           provide: APP_CONFIG,
           useValue: Object.assign(environment, {
-            enableMarkdown: true,
-            enableMathjax: true,
+            markdown: {
+              enabled: true,
+              mathjax: true,
+            }
           })
         },
       ],

src/app/shared/utils/markdown.pipe.ts

@@ -13,6 +13,16 @@ const MATHJAX = new InjectionToken<Mathjax>(
 
 /**
  * Pipe for rendering markdown and mathjax.
+ * - markdown will only be rendered if {@link MarkdownConfig#enabled} is true
+ * - mathjax will only be rendered if both {@link MarkdownConfig#enabled} and {@link MarkdownConfig#mathjax} are true
+ *
+ * This pipe should be used on the 'innerHTML' attribute of a component, in combination with an async pipe.
+ * Example usage:
+ *   <span class="example" [innerHTML]="'# title' | dsMarkdown | async"></span>
+ * Result:
+ *   <span class="example">
+ *     <h1>title</h1>
+ *   </span>
  */
 @Pipe({
   name: 'dsMarkdown'
@@ -26,11 +36,14 @@ export class MarkdownPipe implements PipeTransform {
   }
 
   async transform(value: string): Promise<SafeHtml> {
+    if (!environment.markdown.enabled) {
+      return value;
+    }
     const md = new MarkdownIt({
       html: true,
       linkify: true,
     });
-    if (environment.enableMathjax) {
+    if (environment.markdown.mathjax) {
       md.use(await this.mathjax);
     }
     return this.sanitizer.bypassSecurityTrustHtml(

src/config/app-config.interface.ts

@@ -19,6 +19,7 @@ import { ActuatorsConfig } from './actuators.config';
 import { InfoConfig } from './info-config.interface';
 import { CommunityListConfig } from './community-list-config.interface';
 import { HomeConfig } from './homepage-config.interface';
+import { MarkdownConfig } from './markdown-config.interface';
 
 interface AppConfig extends Config {
   ui: UIServerConfig;
@@ -42,8 +43,7 @@ interface AppConfig extends Config {
   bundle: BundleConfig;
   actuators: ActuatorsConfig
   info: InfoConfig;
-  enableMarkdown: boolean;
-  enableMathjax: boolean;
+  markdown: MarkdownConfig;
 }
 
 /**

src/config/default-app-config.ts

@@ -365,7 +365,8 @@ export class DefaultAppConfig implements AppConfig {
     enablePrivacyStatement: true
   };
 
-  enableMarkdown = false;
-
-  enableMathjax = false;
+  markdown: {
+    enabled: false,
+    mathjax: false,
+  };
 }

src/config/markdown-config.interface.ts

@@ -0,0 +1,21 @@
+import { Config } from './config.interface';
+
+/**
+ * Config related to the {@link MarkdownPipe}.
+ */
+export interface MarkdownConfig extends Config {
+
+  /**
+   * Enable Markdown (https://commonmark.org/) syntax for values passed to the {@link MarkdownPipe}.
+   * - If this is true, values passed to the MarkdownPipe will be transformed to html according to the markdown syntax
+   * rules.
+   * - If this is false, using the MarkdownPipe will have no effect.
+   */
+  enabled: boolean;
+
+  /**
+   * Enable MathJax (https://www.mathjax.org/) syntax for values passed to the {@link MarkdownPipe}.
+   * Requires {@link enabled} to also be true before MathJax will display.
+   */
+  mathjax: boolean;
+}