feat: add support for TrustedHTML

package.json

@@ -57,6 +57,7 @@
     "@floating-ui/core": "^1.2.1",
     "@floating-ui/dom": "^1.2.1",
     "@types/jasmine": "~4.0.0",
+    "@types/trusted-types": "~2.0.3",
     "codemirror": "^6.0.1",
     "eslint": "^8.34.0",
     "eslint-config-pegasus": "^3.5.0",

projects/ngx-editor/src/lib/Editor.ts

@@ -9,9 +9,10 @@ import EditorCommands from './EditorCommands';
 import defautlSchema from './schema';
 import { parseContent } from './parsers';
 import getDefaultPlugins from './defaultPlugins';
+import { HTML } from './trustedTypesUtil';
 
 type JSONDoc = Record<string, any>;
-type Content = string | null | JSONDoc;
+type Content = HTML | null | JSONDoc;
 
 interface Options {
   content?: Content;

projects/ngx-editor/src/lib/EditorCommands.ts

@@ -14,6 +14,8 @@ import HeadingCommand, { HeadingLevels } from './commands/Heading';
 import ImageCommand, { ImageAttrs } from './commands/Image';
 import TextColorCommand from './commands/TextColor';
 import TextAlignCommand, { Align } from './commands/TextAlign';
+import { HTML } from './trustedTypesUtil';
+import { isString } from './stringUtil';
 
 const execMark = (name: string, toggle = false) => {
   return (state: EditorState, dispatch: (tr: Transaction) => void) => {
@@ -226,12 +228,12 @@ class EditorCommands {
     return this;
   }
 
-  insertHTML(html: string): this {
+  insertHTML(html: HTML): this {
     const { selection, schema, tr } = this.state;
     const { from, to } = selection;
 
     const element = document.createElement('div');
-    element.innerHTML = html.trim();
+    element.innerHTML = isString(html) ? (html as string).trim() : html as any;
     const slice = DOMParser.fromSchema(schema).parseSlice(element);
 
     const transaction = tr.replaceRange(from, to, slice);

projects/ngx-editor/src/lib/editor.component.ts

@@ -10,8 +10,9 @@ import { takeUntil } from 'rxjs/operators';
 
 import { NgxEditorError } from 'ngx-editor/utils';
 import * as plugins from './plugins';
-import { toHTML } from './parsers';
+import { emptyDoc, toHTML } from './parsers';
 import Editor from './Editor';
+import { HTML, isHtml } from './trustedTypesUtil';
 
 @Component({
   selector: 'ngx-editor',
@@ -44,12 +45,12 @@ export class NgxEditorComponent implements ControlValueAccessor, OnInit, OnChang
   private onChange: (value: Record<string, any> | string) => void = () => { /** */ };
   private onTouched: () => void = () => { /** */ };
 
-  writeValue(value: Record<string, any> | string | null): void {
-    if (!this.outputFormat && typeof value === 'string') {
+  writeValue(value: Record<string, any> | HTML | null): void {
+    if (!this.outputFormat && isHtml(value)) {
       this.outputFormat = 'html';
     }
 
-    this.editor.setContent(value ?? '');
+    this.editor.setContent(value ?? emptyDoc);
   }
 
   registerOnChange(fn: () => void): void {

projects/ngx-editor/src/lib/editor.service.ts

@@ -4,6 +4,7 @@ import { NgxEditorConfig } from './types';
 import Locals from './Locals';
 import { NgxEditorServiceConfig } from './editor-config.service';
 import Icon from './icons';
+import { HTML } from './trustedTypesUtil';
 
 @Injectable({
   providedIn: 'root',
@@ -19,7 +20,7 @@ export class NgxEditorService {
     return new Locals(this.config.locals);
   }
 
-  getIcon(icon: string): string {
+  getIcon(icon: string): HTML {
     return this.config.icons[icon] ? this.config.icons[icon] : Icon.get(icon);
   }
 }

projects/ngx-editor/src/lib/modules/menu/color-picker/color-picker.component.ts

@@ -8,6 +8,7 @@ import { Observable, Subscription } from 'rxjs';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { TextColor, TextBackgroundColor } from '../MenuCommands';
+import { HTML } from '../../../trustedTypesUtil';
 
 type Command = typeof TextColor | typeof TextBackgroundColor;
 
@@ -30,7 +31,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy {
     return this.getLabel(this.type === 'text_color' ? 'text_color' : 'background_color');
   }
 
-  get icon(): string {
+  get icon(): HTML {
     return this.ngxeService.getIcon(this.type === 'text_color' ? 'text_color' : 'color_fill');
   }
 

projects/ngx-editor/src/lib/modules/menu/image/image.component.ts

@@ -10,6 +10,7 @@ import { Observable, Subscription } from 'rxjs';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { Image as ImageCommand } from '../MenuCommands';
+import { HTML } from '../../../trustedTypesUtil';
 
 @Component({
   selector: 'ngx-image',
@@ -38,7 +39,7 @@ export class ImageComponent implements OnInit, OnDestroy {
     private menuService: MenuService,
   ) { }
 
-  get icon(): string {
+  get icon(): HTML {
     return this.ngxeService.getIcon('image');
   }
 

projects/ngx-editor/src/lib/modules/menu/insert-command/insert-command.component.ts

@@ -6,7 +6,7 @@ import { InsertCommands } from '../MenuCommands';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { TBItems, ToolbarItem } from '../../../types';
-import icons from '../../../icons';
+import { HTML } from '../../../trustedTypesUtil';
 
 @Component({
   selector: 'ngx-insert-command',
@@ -21,7 +21,7 @@ export class InsertCommandComponent implements OnInit, OnDestroy {
     return this.toolbarItem as TBItems;
   }
 
-  html: string;
+  html: HTML;
   editorView: EditorView;
   disabled = false;
   private updateSubscription: Subscription;
@@ -54,7 +54,7 @@ export class InsertCommandComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.html = icons.get(this.name);
+    this.html = this.ngxeService.getIcon(this.name);
 
     this.editorView = this.menuService.editor.view;
 

projects/ngx-editor/src/lib/modules/menu/link/link.component.ts

@@ -9,6 +9,7 @@ import { Observable, Subscription } from 'rxjs';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { Link as LinkCommand } from '../MenuCommands';
+import { HTML } from '../../../trustedTypesUtil';
 
 @Component({
   selector: 'ngx-link',
@@ -31,7 +32,7 @@ export class LinkComponent implements OnInit, OnDestroy {
     private menuService: MenuService,
   ) { }
 
-  get icon(): string {
+  get icon(): HTML {
     return this.ngxeService.getIcon(this.isActive ? 'unlink' : 'link');
   }
 

projects/ngx-editor/src/lib/modules/menu/toggle-command/toggle-command.component.ts

@@ -6,6 +6,7 @@ import { ToggleCommands } from '../MenuCommands';
 import { NgxEditorService } from '../../../editor.service';
 import { MenuService } from '../menu.service';
 import { TBItems, ToolbarItem } from '../../../types';
+import { HTML } from '../../../trustedTypesUtil';
 
 @Component({
   selector: 'ngx-toggle-command',
@@ -20,7 +21,7 @@ export class ToggleCommandComponent implements OnInit, OnDestroy {
     return this.toolbarItem as TBItems;
   }
 
-  html: string;
+  html: HTML;
   editorView: EditorView;
   isActive = false;
   disabled = false;

projects/ngx-editor/src/lib/parsers.ts

@@ -1,6 +1,7 @@
 import { DOMSerializer, Schema, DOMParser, Node as ProseMirrorNode } from 'prosemirror-model';
 
 import defaultSchema from './schema';
+import { HTML, isHtml } from './trustedTypesUtil';
 
 export const emptyDoc = {
   type: 'doc',
@@ -23,24 +24,24 @@ export const toHTML = (json: Record<string, any>, inputSchema?: Schema): string
   return div.innerHTML;
 };
 
-export const toDoc = (html: string, inputSchema?: Schema): Record<string, any> => {
+export const toDoc = (html: HTML, inputSchema?: Schema): Record<string, any> => {
   const schema = inputSchema ?? defaultSchema;
 
   const el = document.createElement('div');
-  el.innerHTML = html;
+  el.innerHTML = html as any;
 
   return DOMParser.fromSchema(schema).parse(el).toJSON();
 };
 
-export const parseContent = (value: string | Record<string, any> | null, schema: Schema): ProseMirrorNode => {
+export const parseContent = (value: HTML | Record<string, any> | null, schema: Schema): ProseMirrorNode => {
   if (!value) {
     return schema.nodeFromJSON(emptyDoc);
   }
 
-  if (typeof value !== 'string') {
+  if (!isHtml(value)) {
     return schema.nodeFromJSON(value);
   }
 
-  const docJson = toDoc(value, schema);
+  const docJson = toDoc(value as HTML, schema);
   return schema.nodeFromJSON(docJson);
 };

projects/ngx-editor/src/lib/pipes/sanitize/sanitize-html.pipe.ts

@@ -1,14 +1,20 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { TrustedHTML } from 'trusted-types/lib';
+import { HTML, isTrustedHtml } from '../../trustedTypesUtil';
 
 @Pipe({
   name: 'sanitizeHtml',
 })
 
 export class SanitizeHtmlPipe implements PipeTransform {
-  constructor(private sanitizer: DomSanitizer) { }
+  constructor(private sanitizer: DomSanitizer) {
+  }
 
-  transform(value: string): SafeHtml {
-    return this.sanitizer.bypassSecurityTrustHtml(value);
+  transform(value: HTML): SafeHtml | TrustedHTML {
+    if (isTrustedHtml(value)) {
+      return value as TrustedHTML;
+    }
+    return this.sanitizer.bypassSecurityTrustHtml(value as string);
   }
 }

projects/ngx-editor/src/lib/stringUtil.ts

@@ -0,0 +1,3 @@
+export const isString = (value: unknown): boolean => {
+  return typeof value === 'string';
+};

projects/ngx-editor/src/lib/trustedTypesUtil.ts

@@ -0,0 +1,16 @@
+import { TrustedTypePolicyFactory, TrustedTypesWindow, TrustedHTML } from 'trusted-types/lib';
+import { isString } from './stringUtil';
+
+export const getTrustedTypes = (): TrustedTypePolicyFactory | undefined => {
+  return (window as unknown as TrustedTypesWindow).trustedTypes;
+};
+
+export const isTrustedHtml = (value: unknown): boolean => {
+  return getTrustedTypes()?.isHTML(value) ?? false;
+};
+
+export const isHtml = (value: unknown): boolean => {
+  return isString(value) || isTrustedHtml(value);
+};
+
+export type HTML = string | TrustedHTML;