From 8cc3592a51d48c5e0e72ef74425d53a569b05509 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Mon, 13 Nov 2023 12:19:38 +0300
Subject: [PATCH] chore: add dompurify

---
 apps/demo/src/app/app.config.ts            | 7 ++++++-
 apps/demo/src/app/home/home.component.html | 7 ++++++-
 apps/demo/src/app/home/home.component.ts   | 8 +++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/apps/demo/src/app/app.config.ts b/apps/demo/src/app/app.config.ts
index b459935e..417f3206 100644
--- a/apps/demo/src/app/app.config.ts
+++ b/apps/demo/src/app/app.config.ts
@@ -1,9 +1,10 @@
-import {ApplicationConfig, importProvidersFrom} from '@angular/core';
+import {ApplicationConfig, importProvidersFrom, Sanitizer} from '@angular/core';
 import {provideClientHydration} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideRouter} from '@angular/router';
 import {TuiDialogModule, TuiRootModule} from '@taiga-ui/core';
 import {TuiPushModule} from '@taiga-ui/kit';
+import {NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
 
 import {routes} from './app.routes';
 
@@ -13,5 +14,9 @@ export const appConfig: ApplicationConfig = {
         provideRouter(routes),
         provideClientHydration(),
         importProvidersFrom(TuiRootModule, TuiDialogModule, TuiPushModule),
+        {
+            provide: Sanitizer,
+            useClass: NgDompurifySanitizer,
+        },
     ],
 };
diff --git a/apps/demo/src/app/home/home.component.html b/apps/demo/src/app/home/home.component.html
index 4778d7b9..1165f04d 100644
--- a/apps/demo/src/app/home/home.component.html
+++ b/apps/demo/src/app/home/home.component.html
@@ -4,11 +4,16 @@ <h2 class="title">
     components
 </h2>
 <tui-input-tag
-    tuiHintContent="Customizable for any use case"
     class="tui-space_vertical-10"
+    [tuiHintContent]="hint"
     [tuiTextfieldLabelOutside]="true"
     [(ngModel)]="tags"
 ></tui-input-tag>
+
+<ng-template #hint>
+    <span [innerHtml]="purify('Customizable for <b>any use</b> case')"></span>
+</ng-template>
+
 <div class="flex">
     <div class="date">
         <tui-input-date
diff --git a/apps/demo/src/app/home/home.component.ts b/apps/demo/src/app/home/home.component.ts
index 22a3752c..203c4e29 100644
--- a/apps/demo/src/app/home/home.component.ts
+++ b/apps/demo/src/app/home/home.component.ts
@@ -4,6 +4,7 @@ import {
     ChangeDetectorRef,
     Component,
     inject,
+    SecurityContext,
     TemplateRef,
     ViewEncapsulation,
 } from '@angular/core';
@@ -27,7 +28,7 @@ import {
     TuiSliderModule,
     TuiToggleModule,
 } from '@taiga-ui/kit';
-import {NgDompurifyModule} from '@tinkoff/ng-dompurify';
+import {NgDompurifyModule, NgDompurifySanitizer} from '@tinkoff/ng-dompurify';
 
 @Component({
     standalone: true,
@@ -56,6 +57,7 @@ import {NgDompurifyModule} from '@tinkoff/ng-dompurify';
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomeComponent {
+    private readonly dompurifySanitizer = inject(NgDompurifySanitizer);
     private readonly dialogs = inject(TuiDialogService);
     private readonly cd = inject(ChangeDetectorRef);
 
@@ -83,4 +85,8 @@ export class HomeComponent {
         this.notification = open;
         this.cd.detectChanges();
     }
+
+    purify(value: string): string {
+        return this.dompurifySanitizer.sanitize(SecurityContext.HTML, value);
+    }
 }