Merge pull request #200 from stevermeister/paste-service

make possible to filter content that is provided to editor (for example via copy-paste)

README.md

@@ -111,6 +111,14 @@ it's just an attribute directive for textarea:
 Please check an example here
 https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts
 
+
+### Filtering/removing extra styles on paste
+
+Please check an example here
+https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts
+
+
+
 ## Development
 
 To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "lib-build": "ng build ngx-wig",
-    "start": "(ng build ngx-wig --watch ) && sleep 10 && ng serve",
+    "start": "(ng build ngx-wig --watch ) & sleep 10 && ng serve",
     "build": "ng build ngx-wig --configuration production",
     "test": "ng test ngx-wig --browsers=ChromeHeadless --watch=false",
     "lint": "ng lint ngx-wig",

projects/ngx-wig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-wig",
-  "version": "17.0.0",
+  "version": "17.0.2",
   "description": "Light-weight WYSIWYG Editor for Angular",
   "keywords": [
     "Angular",

projects/ngx-wig/src/lib/ngx-wig-component.html

@@ -79,6 +79,7 @@
              class="nw-editor__res"
              [attr.contenteditable]="!disabled"
              [ngClass]="{ disabled: disabled}"
+             (paste)="onPaste($event)"
              (focus)="hasFocus = true"
              (blur)="onBlur()"
              (input)="onContentChange(ngWigEditable.innerHTML)"><!--

projects/ngx-wig/src/lib/ngx-wig-filter-styles.service.spec.ts

@@ -0,0 +1,31 @@
+import { NgxWigFilterStylesService } from './ngx-wig-filter-styles.service';
+
+describe('NgxWigFilterStylesService', () => {
+  let service: NgxWigFilterStylesService;
+
+  beforeEach(() => {
+    service = new NgxWigFilterStylesService();
+  });
+
+  it('should create an instance', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should remove style attributes from HTML string', () => {
+    const htmlString = '<div style="color: red;">Hello, world!</div>';
+    const expectedOutput = '<div>Hello, world!</div>';
+    expect(service.filter(htmlString)).toEqual(expectedOutput);
+  });
+
+  it('should remove style elements from HTML string', () => {
+    const htmlString = '<style>.red { color: red; }</style><div>Hello, world!</div>';
+    const expectedOutput = '<div>Hello, world!</div>';
+    expect(service.filter(htmlString)).toEqual(expectedOutput);
+  });
+
+  it('should handle empty HTML string', () => {
+    const htmlString = '';
+    const expectedOutput = '';
+    expect(service.filter(htmlString)).toEqual(expectedOutput);
+  });
+});

projects/ngx-wig/src/lib/ngx-wig-filter-styles.service.ts

@@ -0,0 +1,30 @@
+import { Injectable } from "@angular/core";
+
+@Injectable({
+  providedIn: "root",
+})
+export class NgxWigFilterStylesService {
+  constructor() {}
+  public filter(htmlString: string): string {
+    // Parse the HTML string into a DOM object
+    const parser: DOMParser = new DOMParser();
+    const doc: Document = parser.parseFromString(htmlString, "text/html");
+
+    // Remove all style attributes from all elements
+    const elementsWithStyle: NodeListOf<Element> =
+      doc.querySelectorAll("[style]");
+    elementsWithStyle.forEach((el: Element) => el.removeAttribute("style"));
+
+    // Remove all <style> elements
+    const styleElements: NodeListOf<HTMLStyleElement> =
+      doc.querySelectorAll("style");
+    styleElements.forEach((el: HTMLStyleElement) =>
+      el.parentNode?.removeChild(el)
+    );
+
+    // Get the inner HTML of the body element
+    const bodyInnerHTML: string = doc.body.innerHTML;
+
+    return bodyInnerHTML;
+  }
+}

projects/ngx-wig/src/lib/ngx-wig-filter.service.spec.ts

@@ -0,0 +1,18 @@
+import { NgxWigFilterService } from './ngx-wig-filter.service';
+
+describe('NgxWigFilterService', () => {
+  let service: NgxWigFilterService;
+
+  beforeEach(() => {
+    service = new NgxWigFilterService();
+  });
+
+  it('should create an instance', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return the same content when filtering', () => {
+    const content = 'Hello, world!';
+    expect(service.filter(content)).toEqual(content);
+  });
+});

projects/ngx-wig/src/lib/ngx-wig-filter.service.ts

@@ -0,0 +1,11 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxWigFilterService {
+  constructor() {}
+  public filter(content: string): string {
+    return content;
+  }
+}

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

@@ -12,12 +12,14 @@ import {
   forwardRef,
   Inject,
   OnDestroy,
+  Optional,
 } from '@angular/core';
 
 import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
 import { NgxWigToolbarService } from './ngx-wig-toolbar.service';
 import { DOCUMENT } from '@angular/common';
 import { TButton, CommandFunction } from './config';
+import { NgxWigFilterService } from './ngx-wig-filter.service';
 
 /** @dynamic */
 @Component({
@@ -30,7 +32,7 @@ import { TButton, CommandFunction } from './config';
       provide: NG_VALUE_ACCESSOR,
       useExisting: forwardRef(() => NgxWigComponent),
       multi: true,
-    },
+    }
   ],
   encapsulation: ViewEncapsulation.None,
 })
@@ -63,6 +65,7 @@ export class NgxWigComponent
 
   public constructor(
     private _ngWigToolbarService: NgxWigToolbarService,
+    @Optional() private _filterService: NgxWigFilterService,
     @Inject(DOCUMENT) private document: any, // cannot set Document here - Angular issue - https://github.com/angular/angular/issues/20351
     @Inject('WINDOW') private window
   ) {}
@@ -145,7 +148,22 @@ export class NgxWigComponent
       this.container.innerHTML = '';
 
       // add the new content
-      this.pasteHtmlAtCaret(changes['content'].currentValue);
+      if (this._filterService){
+        this.pasteHtmlAtCaret(this._filterService.filter(changes['content'].currentValue));
+      } else {
+        this.pasteHtmlAtCaret(changes['content'].currentValue);
+      }
+
+    }
+  }
+
+  onPaste(event: ClipboardEvent) {
+    event.preventDefault();
+    const text = event.clipboardData?.getData('text/plain') ?? '';
+    if (this._filterService){
+      this.pasteHtmlAtCaret(this._filterService.filter(text));
+    } else {
+      this.pasteHtmlAtCaret(text);
     }
   }
 

projects/ngx-wig/src/public_api.ts

@@ -3,6 +3,8 @@
  */
 
 export * from './lib/ngx-wig-toolbar.service';
+export * from './lib/ngx-wig-filter.service';
+export * from './lib/ngx-wig-filter-styles.service';
 export * from './lib/ngx-wig.component';
 export * from './lib/ngx-wig.module';
 export * from './lib/config';