From e0c8d8edeaf85c6da17392ec526a6a92e74c8634 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Mon, 9 Oct 2023 13:59:40 +0300
Subject: [PATCH] fix: add sanitizer

---
 angular.json                                  |  3 +--
 .../src/lib/contenteditable-value-accessor.ts | 26 +++++++++----------
 2 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/angular.json b/angular.json
index a45f60d..3d47013 100644
--- a/angular.json
+++ b/angular.json
@@ -57,8 +57,7 @@
                             "projects/demo/src/assets"
                         ],
                         "styles": ["projects/demo/src/styles.css"],
-                        "scripts": [],
-                        "es5BrowserSupport": true
+                        "scripts": []
                     },
                     "configurations": {
                         "production": {
diff --git a/projects/angular-contenteditable-accessor/src/lib/contenteditable-value-accessor.ts b/projects/angular-contenteditable-accessor/src/lib/contenteditable-value-accessor.ts
index baf8085..40f37ef 100644
--- a/projects/angular-contenteditable-accessor/src/lib/contenteditable-value-accessor.ts
+++ b/projects/angular-contenteditable-accessor/src/lib/contenteditable-value-accessor.ts
@@ -7,8 +7,10 @@ import {
     Inject,
     OnDestroy,
     Renderer2,
+    SecurityContext,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
+import {DomSanitizer} from '@angular/platform-browser';
 
 /*
  * This is a barebones contenteditable {@link ControlValueAccessor} allowing you to use
@@ -39,11 +41,7 @@ export class ContenteditableValueAccessor
      */
     private observer = new MutationObserver(() => {
         setTimeout(() => {
-            this.onChange(
-                ContenteditableValueAccessor.processValue(
-                    this.elementRef.nativeElement.innerHTML,
-                ),
-            );
+            this.onChange(this.processValue(this.elementRef.nativeElement.innerHTML));
         });
     });
 
@@ -60,6 +58,7 @@ export class ContenteditableValueAccessor
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef,
         @Inject(Renderer2) private readonly renderer: Renderer2,
+        @Inject(DomSanitizer) private readonly sanitizer: DomSanitizer,
     ) {}
 
     /*
@@ -88,11 +87,7 @@ export class ContenteditableValueAccessor
     @HostListener('input')
     onInput() {
         this.observer.disconnect();
-        this.onChange(
-            ContenteditableValueAccessor.processValue(
-                this.elementRef.nativeElement.innerHTML,
-            ),
-        );
+        this.onChange(this.processValue(this.elementRef.nativeElement.innerHTML));
     }
 
     /*
@@ -112,7 +107,7 @@ export class ContenteditableValueAccessor
         this.renderer.setProperty(
             this.elementRef.nativeElement,
             'innerHTML',
-            ContenteditableValueAccessor.processValue(value),
+            this.processValue(value),
         );
     }
 
@@ -151,9 +146,14 @@ export class ContenteditableValueAccessor
      * null is treated as empty string to prevent IE11 outputting 'null',
      * also single <br> is replaced with empty string when passed to the control
      */
-    private static processValue(value: unknown): string {
+    private processValue(value: unknown): string {
         const processed = String(value === null || value === undefined ? '' : value);
 
-        return processed.trim() === '<br>' ? '' : processed;
+        return (
+            this.sanitizer.sanitize(
+                SecurityContext.HTML,
+                processed.trim() === '<br>' ? '' : processed,
+            ) ?? ''
+        );
     }
 }