fix: Allow inline styling propagation from CMS

projects/storefrontlib/cms-components/content/paragraph/paragraph.component.html

@@ -1,4 +1,4 @@
 <div
   *ngIf="component.data$ | async as data"
-  [innerHTML]="data.content ?? '' | cxSupplementHashAnchors"
+  [innerHTML]="data.content ?? '' | cxSupplementHashAnchors | cxSafeHtml"
 ></div>

projects/storefrontlib/cms-components/content/paragraph/paragraph.component.spec.ts

@@ -1,12 +1,12 @@
 import { DebugElement, Pipe, PipeTransform } from '@angular/core';
-import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { By, SafeHtml } from '@angular/platform-browser';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { CmsComponent, CmsParagraphComponent } from '@spartacus/core';
+import { CmsComponentData } from '@spartacus/storefront';
 import { BehaviorSubject } from 'rxjs';
 import { ParagraphComponent } from './paragraph.component';
-import { CmsComponentData } from '@spartacus/storefront';
-import { CmsParagraphComponent, CmsComponent } from '@spartacus/core';
-import { RouterTestingModule } from '@angular/router/testing';
-import { Router } from '@angular/router';
 
 @Pipe({ name: 'cxSupplementHashAnchors' })
 export class MockAnchorPipe implements PipeTransform {
@@ -15,6 +15,13 @@ export class MockAnchorPipe implements PipeTransform {
   }
 }
 
+@Pipe({ name: 'cxSafeHtml' })
+export class MockSafeHtmlPipe implements PipeTransform {
+  public transform(html: string): SafeHtml {
+    return html;
+  }
+}
+
 describe('CmsParagraphComponent in CmsLib', () => {
   let paragraphComponent: ParagraphComponent;
   let fixture: ComponentFixture<ParagraphComponent>;
@@ -41,7 +48,7 @@ describe('CmsParagraphComponent in CmsLib', () => {
     waitForAsync(() => {
       TestBed.configureTestingModule({
         imports: [RouterTestingModule],
-        declarations: [MockAnchorPipe, ParagraphComponent],
+        declarations: [MockAnchorPipe, ParagraphComponent, MockSafeHtmlPipe],
         providers: [
           {
             provide: CmsComponentData,

projects/storefrontlib/cms-components/content/paragraph/paragraph.module.ts

@@ -4,15 +4,21 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
 import { CmsConfig, provideDefaultConfig } from '@spartacus/core';
+import { SafeHtmlModule } from '../../../shared/pipes/safe-html/safe-html.module';
 import { SupplementHashAnchorsModule } from '../../../shared/pipes/suplement-hash-anchors/supplement-hash-anchors.module';
 import { ParagraphComponent } from './paragraph.component';
-import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, SupplementHashAnchorsModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    SupplementHashAnchorsModule,
+    SafeHtmlModule,
+  ],
   providers: [
     provideDefaultConfig(<CmsConfig>{
       cmsComponents: {

projects/storefrontlib/shared/pipes/index.ts

@@ -4,5 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+export * from './safe-html/safe-html.module';
+export * from './safe-html/safe-html.pipe';
 export * from './suplement-hash-anchors/supplement-hash-anchors.module';
 export * from './suplement-hash-anchors/supplement-hash-anchors.pipe';

projects/storefrontlib/shared/pipes/safe-html/safe-html.module.ts

@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { NgModule } from '@angular/core';
+import { SafeHtmlPipe } from './safe-html.pipe';
+
+@NgModule({
+  declarations: [SafeHtmlPipe],
+  exports: [SafeHtmlPipe],
+})
+export class SafeHtmlModule {}

projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.spec.ts

@@ -0,0 +1,40 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { TestBed } from '@angular/core/testing';
+import { DomSanitizer } from '@angular/platform-browser';
+import { SafeHtmlPipe } from './safe-html.pipe';
+
+describe('SafeHtmlPipe', () => {
+  let safeHtmlPipe: SafeHtmlPipe;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        SafeHtmlPipe,
+        {
+          provide: DomSanitizer,
+          useValue: {
+            bypassSecurityTrustHtml: (value: string) => value,
+          },
+        },
+      ],
+    });
+
+    safeHtmlPipe = TestBed.inject(SafeHtmlPipe);
+  });
+
+  it('should create an instance', () => {
+    expect(safeHtmlPipe).toBeTruthy();
+  });
+
+  it('should bypass security and return SafeHtml', () => {
+    const htmlString = '<div>Some HTML content</div>';
+    const sanitizedHtml = safeHtmlPipe.transform(htmlString);
+
+    expect(sanitizedHtml).toBeDefined();
+  });
+});

projects/storefrontlib/shared/pipes/safe-html/safe-html.pipe.ts

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2023 SAP Spartacus team <[email protected]>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+/*
+ * Pipe for bypassing security trust html
+ */
+@Pipe({ name: 'cxSafeHtml' })
+export class SafeHtmlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+
+  public transform(html: string = ''): SafeHtml {
+    return this.sanitizer.bypassSecurityTrustHtml(html);
+  }
+}