chore: add dompurify

taiga-family · Nov 13, 2023 · 8cc3592 · 8cc3592
1 parent dd5a53a
commit 8cc3592
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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);
+    }
 }