fix: render product descriptions with images properly (#1263)

* use `ishServerHtml` directive to handle embedded image resources
intershop · Sep 2, 2022 · 5477d85 · 5477d85
1 parent 9b3ec42
commit 5477d85
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 7 deletions.
diff --git a/...extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html b/...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/...ensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts b/...ensions/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
@@ -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
@@ -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
@@ -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
@@ -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) }],