From 5477d85cd67b29c1fc07f854ddd6158e27266ad2 Mon Sep 17 00:00:00 2001
From: Stefan Hauke <s.hauke@intershop.de>
Date: Wed, 31 Aug 2022 09:50:06 +0200
Subject: [PATCH] fix: render product descriptions with images properly (#1263)

* use `ishServerHtml` directive to handle embedded image resources
---
 .../product-compare-list.component.html                   | 4 +++-
 .../product-compare-list.component.spec.ts                | 2 ++
 .../product-detail-info.component.html                    | 2 +-
 .../product-detail-info.component.spec.ts                 | 4 +++-
 .../product/product-row/product-row.component.html        | 8 +++++---
 .../product/product-row/product-row.component.spec.ts     | 4 +++-
 6 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html b/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html
index 9cd0187e8d..db4cc91d57 100644
--- a/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html
+++ b/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html
@@ -74,7 +74,9 @@
 
           <tr>
             <th>{{ 'product.short_description.label' | translate }}</th>
-            <td *ngFor="let product of visibleProducts">{{ product.shortDescription }}</td>
+            <td *ngFor="let product of visibleProducts">
+              <div [ishServerHtml]="product.shortDescription"></div>
+            </td>
           </tr>
 
           <tr>
diff --git a/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts b/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts
index 6fc2613bb2..b3fc5262f3 100644
--- a/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts
+++ b/src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts
@@ -7,6 +7,7 @@ import { anything, instance, mock, verify, when } from 'ts-mockito';
 
 import { FeatureToggleDirective } from 'ish-core/directives/feature-toggle.directive';
 import { ProductContextDirective } from 'ish-core/directives/product-context.directive';
+import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { ShoppingFacade } from 'ish-core/facades/shopping.facade';
 import { AttributeToStringPipe } from 'ish-core/models/attribute/attribute.pipe';
 import { ProductView, createProductView } from 'ish-core/models/product-view/product-view.model';
@@ -80,6 +81,7 @@ describe('Product Compare List Component', () => {
         MockComponent(ProductPriceComponent),
         MockDirective(FeatureToggleDirective),
         MockDirective(ProductContextDirective),
+        MockDirective(ServerHtmlDirective),
         MockPipe(AttributeToStringPipe),
         ProductCompareListComponent,
       ],
diff --git a/src/app/pages/product/product-detail-info/product-detail-info.component.html b/src/app/pages/product/product-detail-info/product-detail-info.component.html
index 798cdc17e8..6a76c15f1b 100644
--- a/src/app/pages/product/product-detail-info/product-detail-info.component.html
+++ b/src/app/pages/product/product-detail-info/product-detail-info.component.html
@@ -3,7 +3,7 @@
     <li [ngbNavItem]="'DESCRIPTION'" data-testing-id="product-description-tab">
       <a ngbNavLink>{{ 'product.description.heading' | translate }}</a>
       <ng-template ngbNavContent>
-        <div [innerHTML]="product.longDescription"></div>
+        <div [ishServerHtml]="product.longDescription"></div>
       </ng-template>
     </li>
 
diff --git a/src/app/pages/product/product-detail-info/product-detail-info.component.spec.ts b/src/app/pages/product/product-detail-info/product-detail-info.component.spec.ts
index 0a723f44bd..9a8e683662 100644
--- a/src/app/pages/product/product-detail-info/product-detail-info.component.spec.ts
+++ b/src/app/pages/product/product-detail-info/product-detail-info.component.spec.ts
@@ -1,9 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
+import { MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
+import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { FeatureToggleModule } from 'ish-core/feature-toggle.module';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
@@ -23,7 +25,7 @@ describe('Product Detail Info Component', () => {
 
     await TestBed.configureTestingModule({
       imports: [FeatureToggleModule.forTesting('rating'), NgbNavModule, TranslateModule.forRoot()],
-      declarations: [ProductDetailInfoComponent],
+      declarations: [MockDirective(ServerHtmlDirective), ProductDetailInfoComponent],
       providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
     }).compileComponents();
   });
diff --git a/src/app/shared/components/product/product-row/product-row.component.html b/src/app/shared/components/product/product-row/product-row.component.html
index 80e444f883..cee50a28d2 100644
--- a/src/app/shared/components/product/product-row/product-row.component.html
+++ b/src/app/shared/components/product/product-row/product-row.component.html
@@ -15,9 +15,11 @@
 
         <ish-product-id></ish-product-id>
 
-        <div *ngIf="configuration$('description') | async" class="product-description">
-          {{ product.shortDescription }}
-        </div>
+        <div
+          *ngIf="configuration$('description') | async"
+          class="product-description"
+          [ishServerHtml]="product.shortDescription"
+        ></div>
 
         <ish-product-promotion displayType="simpleWithDetail"></ish-product-promotion>
 
diff --git a/src/app/shared/components/product/product-row/product-row.component.spec.ts b/src/app/shared/components/product/product-row/product-row.component.spec.ts
index 41820b41e5..9a9684fb87 100644
--- a/src/app/shared/components/product/product-row/product-row.component.spec.ts
+++ b/src/app/shared/components/product/product-row/product-row.component.spec.ts
@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockComponent } from 'ng-mocks';
+import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
 import { anyString, instance, mock, when } from 'ts-mockito';
 
+import { ServerHtmlDirective } from 'ish-core/directives/server-html.directive';
 import { ProductContextFacade } from 'ish-core/facades/product-context.facade';
 import { ProductView } from 'ish-core/models/product-view/product-view.model';
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
@@ -60,6 +61,7 @@ describe('Product Row Component', () => {
         MockComponent(ProductPromotionComponent),
         MockComponent(ProductQuantityComponent),
         MockComponent(ProductShipmentComponent),
+        MockDirective(ServerHtmlDirective),
         ProductRowComponent,
       ],
       providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],