Adding a paste filter on richtext editor

front/app/src/common/crud/types/richtext.type.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from "@angular/core";
 import { FormlyFieldInput } from "@ngx-formly/bootstrap/input";
 
+
 @Component({
     selector: 'formly-richtext-type',
     template: `        
@@ -42,11 +43,19 @@ export class RichtextTypeComponent extends FormlyFieldInput implements OnInit {
         statusbar: false,
         autoresize_bottom_margin: 0,
         body_class: "contract-body",
-        content_style: ".contract-body { font-family: 'Century Schoolbook', 'sans-serif' }"
+        content_style: ".contract-body { font-family: 'Century Schoolbook', 'sans-serif' }",
+        paste_preprocess: function (plugin: any, args: any) {
+            console.log(args.content)
+            let container = document.createElement('div');
+            container.innerHTML = args.content.trim();
+            cleanPastedElement(container)
+            console.log(container.innerHTML);
+            args.content = container.innerHTML;
+        }
     }
 
     init_multiline = {
-        plugins: 'lists image imagetools table code searchreplace autoresize',
+        plugins: 'lists image imagetools table code searchreplace paste autoresize',
         menubar: 'edit insert format tools table',
         menu: {
             edit: { title: 'Edit', items: 'undo redo | cut copy paste | selectall | searchreplace' },
@@ -59,7 +68,7 @@ export class RichtextTypeComponent extends FormlyFieldInput implements OnInit {
     }
 
     init_singleline = {
-        plugins: 'autoresize',
+        plugins: 'paste autoresize',
         menubar: '',
         toolbar: 'undo redo | bold italic underline',
     }
@@ -92,7 +101,49 @@ export class RichtextTypeComponent extends FormlyFieldInput implements OnInit {
             }
         }
     }
-
-
-
+}
+
+function cleanPastedElement(htmlElement: HTMLElement): string {
+    if (! htmlElement.innerHTML) {
+        return "";
+    }
+
+    let innerHtml = ""
+    for(let i = 0; i < htmlElement.childNodes.length; i++){
+        const childNode = htmlElement.childNodes[i] as HTMLElement
+        if (childNode.nodeName == "#text") {
+            innerHtml += childNode.nodeValue;
+        } else {
+            innerHtml += cleanPastedElement(childNode);
+        }
+    }
+    htmlElement.innerHTML = innerHtml
+
+    if (htmlElement.tagName == "SPAN") {
+        let text = htmlElement.innerHTML
+        const style = htmlElement.style
+
+        if (style.fontWeight == "700") {
+            let strong = document.createElement('b');
+            strong.innerHTML = text
+            text = strong.outerHTML;
+        }
+        if (style.textDecoration == "underline") {
+            let underline = document.createElement('u');
+            underline.innerHTML = text;
+            text = underline.outerHTML;
+        }
+        if (style.fontStyle == "italic") {
+            let italic = document.createElement('em');
+            italic.innerHTML = text;
+            text = italic.outerHTML;
+        }
+
+        return text;
+    }
+
+    htmlElement.style.removeProperty("line-height")
+    htmlElement.style.removeProperty("margin")
+
+    return htmlElement.outerHTML
 }