myrta-ui 1.1.78 → 1.1.81

package/fesm2020/myrta-ui.mjs

@@ -10589,8 +10589,12 @@ class EditorComponent {
             beautifyHTML: true,
             addNewLine: true,
             createAttributes: {},
+            disablePlugins: ['paste'],
             events: {
                 getIcon: changeIconsFunction,
+                paste: (event) => {
+                    this.handlePaste(event);
+                },
             },
             // uploader: {
             //   insertImageAsBase64URI: true
@@ -10752,6 +10756,70 @@ class EditorComponent {
             this.updateValue(this.editorElementRef.editor.value);
         }
     }
+    handlePaste(event) {
+        if (!event.clipboardData) {
+            return;
+        }
+        const { clipboardData } = event;
+        const htmlData = clipboardData.getData('text/html');
+        const hasHtmlImage = htmlData?.includes('<img');
+        const hasImage = Array.from(clipboardData.items).some(item => item.type.startsWith('image/'));
+        if (!hasImage && !hasHtmlImage) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const { editor } = this.editorElementRef;
+        const plainText = clipboardData.getData('text/plain');
+        if (htmlData) {
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = htmlData;
+            this.removeImageNodes(tempDiv);
+            if (this.hasContent(tempDiv)) {
+                this.insertNodes(editor, tempDiv);
+                return;
+            }
+        }
+        if (plainText) {
+            editor.s.insertHTML(plainText);
+        }
+    }
+    removeImageNodes(container) {
+        container.querySelectorAll('img').forEach(img => img.remove());
+        const comments = [];
+        const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT, null);
+        let node;
+        while (node = walker.nextNode()) {
+            comments.push(node);
+        }
+        comments.forEach(comment => comment.parentNode?.removeChild(comment));
+        const emptyElements = container.querySelectorAll('p, div, span, br');
+        emptyElements.forEach(el => {
+            if (el.tagName === 'BR' && !el.nextSibling && !el.previousSibling) {
+                el.remove();
+            }
+            else if (!el.textContent?.trim() && el.children.length === 0) {
+                el.remove();
+            }
+        });
+        container.querySelectorAll('p, div').forEach(el => {
+            if (el.children.length === 1 && el.innerHTML.trim() === '<br>') {
+                el.remove();
+            }
+        });
+    }
+    hasContent(container) {
+        return !!container.textContent?.trim() || container.children.length > 0;
+    }
+    insertNodes(editor, container) {
+        const nodes = Array.from(container.childNodes).map(node => node.cloneNode(true));
+        nodes.forEach(node => {
+            if (node.nodeType === Node.ELEMENT_NODE ||
+                (node.nodeType === Node.TEXT_NODE && node.textContent?.trim())) {
+                editor.s.insertNode(node);
+            }
+        });
+    }
 }
 EditorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: EditorComponent, selector: "mrx-editor", inputs: { fields: "fields", toolbar: "toolbar", maxLength: "maxLength", minHeight: "minHeight", customClasses: "customClasses", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", iframe: "iframe", config: "config", defaultInlineStyle: "defaultInlineStyle", defaultActionOnPaste: "defaultActionOnPaste", askBeforePasteHTML: "askBeforePasteHTML", editHTMLDocumentMode: "editHTMLDocumentMode", askBeforePasteFromWord: "askBeforePasteFromWord", defaultMode: "defaultMode", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [