DSC-2212 Updated rendering for the item-search-result-list-element.component.ts to use a pipe for the html escaping

Author: Mattia Vianelli

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html

@@ -23,9 +23,9 @@
         <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
                  [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
+         [innerHTML]="dsoTitle | dsEscapeHtml" role="link" tabindex="0"></a>
       <span *ngIf="linkType === linkTypes.None" class="lead item-list-title dont-break-out"
-                [innerHTML]="dsoTitle"></span>
+                [innerHTML]="dsoTitle | dsEscapeHtml"></span>
           <ds-in-workflow-statistics  *ngIf="showWorkflowStatistics" [item]="dso"></ds-in-workflow-statistics>
           <span class="text-muted">
             <ds-truncatable-part [id]="dso.id" [minLines]="1">

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.ts

@@ -57,6 +57,7 @@ import { MetricBadgesComponent } from '../../../../metric-badges/metric-badges.c
 import { MetricDonutsComponent } from '../../../../metric-donuts/metric-donuts.component';
 import { AdditionalMetadataComponent } from '../../../additional-metadata/additional-metadata.component';
 import { SearchResultListElementComponent } from '../../../search-result-list-element.component';
+import {EscapeHtmlPipe} from "../../../../../utils/escape-html.pipe";
 
 @listableObjectComponent('PublicationSearchResult', ViewMode.ListElement)
 @listableObjectComponent(ItemSearchResult, ViewMode.ListElement)
@@ -66,7 +67,7 @@ import { SearchResultListElementComponent } from '../../../search-result-list-el
   styleUrls: ['./item-search-result-list-element.component.scss'],
   templateUrl: './item-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule, AdditionalMetadataComponent, MetadataLinkViewComponent, MetricBadgesComponent, MetricDonutsComponent, VarDirective, InWorkflowStatisticsComponent],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule, AdditionalMetadataComponent, MetadataLinkViewComponent, MetricBadgesComponent, MetricDonutsComponent, VarDirective, InWorkflowStatisticsComponent, EscapeHtmlPipe],
 })
 /**
  * The component for displaying a list element for an item search result of the type Publication
@@ -107,10 +108,6 @@ export class ItemSearchResultListElementComponent extends SearchResultListElemen
   ngOnInit(): void {
     super.ngOnInit();
     this.itemPageRoute = getItemPageRoute(this.dso);
-    // Escape < and > in dsoTitle if it exists
-    if (this.dsoTitle) {
-      this.dsoTitle = this.dsoTitle.replace(/</g, '&lt;').replace(/>/g, '&gt;');
-    }
   }
 
   /**

src/app/shared/utils/escape-html.pipe.ts

@@ -0,0 +1,26 @@
+import {
+  Pipe,
+  PipeTransform,
+} from '@angular/core';
+
+@Pipe({
+  name: 'dsEscapeHtml',
+  standalone: true,
+})
+export class EscapeHtmlPipe implements PipeTransform {
+  /**
+   * Escape HTML special characters and convert newlines to <br>
+   * @param value - The string to escape
+   * @returns The escaped string safe for innerHTML rendering
+   */
+  transform(value: string): string {
+    if (!value) {
+      return value;
+    }
+    const newlineRegex = /\n/g;
+    return value
+      .replace(/>/g, '&gt;')
+      .replace(/</g, '&lt;')
+      .replace(newlineRegex, '<br>');
+  }
+}

src/themes/custom/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.ts

@@ -21,6 +21,7 @@ import { AdditionalMetadataComponent } from '../../../../../../../../../app/shar
 import { ItemSearchResultListElementComponent as BaseComponent } from '../../../../../../../../../app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../../../../../app/shared/truncatable/truncatable.component';
 import { TruncatablePartComponent } from '../../../../../../../../../app/shared/truncatable/truncatable-part/truncatable-part.component';
+import { EscapeHtmlPipe } from '../../../../../../../../../app/shared/utils/escape-html.pipe';
 import { ThemedThumbnailComponent } from '../../../../../../../../../app/thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('PublicationSearchResult', ViewMode.ListElement, Context.Any, 'custom')
@@ -32,7 +33,7 @@ import { ThemedThumbnailComponent } from '../../../../../../../../../app/thumbna
   // templateUrl: './item-search-result-list-element.component.html',
   templateUrl: '../../../../../../../../../app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule, AdditionalMetadataComponent, MetadataLinkViewComponent, MetricBadgesComponent, MetricDonutsComponent, InWorkflowStatisticsComponent],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule, AdditionalMetadataComponent, MetadataLinkViewComponent, MetricBadgesComponent, MetricDonutsComponent, InWorkflowStatisticsComponent, EscapeHtmlPipe],
 
 })
 export class ItemSearchResultListElementComponent extends BaseComponent {