ngx-rich-text-pro 1.0.3 → 1.0.4

package/README.md

@@ -409,6 +409,7 @@ editor.setBackgroundColor('#fef08a');
 | `highlightHashtags` | `boolean` | `true` | Enable or disable real-time hashtag highlighting |
 | `outputFormat` | `'html' \| 'markdown'` | `'html'` | Format emitted by `[(ngModel)]` / `formControl` / `(valueChange)`. When `'markdown'`, outputs clean markdown syntax (`__underline__`, `**bold**`, `*italic*`, `- list`, `1. list`, `#tag`) |
 | `exclusiveInlineFormats` | `boolean` | `true` | When `true`, enforces mutually exclusive inline formatting (only one of bold, italic, or underline can be active at a time; clicking bold turns off italic and underline) |
+| `stripPastedStyles` | `boolean` | `true` | When `true`, strips external formatting styles (bold, italic, underline, fonts, colors) on copy-paste and inserts clean text without foreign styles |
 | `maxCharacters` | `number` | `undefined` | Hard maximum character limit |
 | `characterCountWarn` | `number` | `undefined` | Threshold to show a warning badge as limit approaches |
 | `customClass` | `string` | `''` | Custom CSS class applied to host container |

package/fesm2022/ngx-rich-text-pro.mjs

@@ -88,6 +88,7 @@ const DEFAULT_EDITOR_CONFIG = {
     highlightHashtags: true,
     outputFormat: 'html',
     exclusiveInlineFormats: true,
+    stripPastedStyles: true,
     toolbar: DEFAULT_TOOLBAR_CONFIG,
 };
 
@@ -905,6 +906,7 @@ class NgxRichTextEditorComponent {
     highlightHashtags = true;
     outputFormat = 'html';
     exclusiveInlineFormats = true;
+    stripPastedStyles = true;
     config = {};
     valueChange = new EventEmitter();
     markdownChange = new EventEmitter();
@@ -966,7 +968,8 @@ class NgxRichTextEditorComponent {
             changes['hashtagColor'] ||
             changes['highlightHashtags'] ||
             changes['outputFormat'] ||
-            changes['exclusiveInlineFormats']) {
+            changes['exclusiveInlineFormats'] ||
+            changes['stripPastedStyles']) {
             this.mergeConfig();
             if (changes['hashtagColor'] && this.hashtagColor) {
                 this.setHashtagColor(this.hashtagColor);
@@ -1137,6 +1140,9 @@ class NgxRichTextEditorComponent {
         if (this.exclusiveInlineFormats !== undefined) {
             this.computedConfig.exclusiveInlineFormats = this.exclusiveInlineFormats;
         }
+        if (this.stripPastedStyles !== undefined) {
+            this.computedConfig.stripPastedStyles = this.stripPastedStyles;
+        }
     }
     isMarkdownMode() {
         return this.computedConfig.outputFormat === 'markdown' || this.outputFormat === 'markdown';
@@ -1253,28 +1259,64 @@ class NgxRichTextEditorComponent {
         }
         event.preventDefault();
         const clipboard = event.clipboardData;
-        const rawHtml = clipboard.getData('text/html');
-        const plainText = clipboard.getData('text/plain');
+        const shouldStripStyles = this.stripPastedStyles ?? this.computedConfig.stripPastedStyles ?? true;
         let htmlToInsert = '';
-        // 1. Try extracting and cleaning rich HTML from clipboard
-        if (rawHtml && rawHtml.trim()) {
-            htmlToInsert = this.cleanPastedHtml(rawHtml);
-        }
-        // 2. If no valid HTML or plain text copy (e.g. from markdown/unicode/chat/plain editors)
-        if (!htmlToInsert || !htmlToInsert.trim()) {
-            if (plainText && plainText.trim()) {
-                const hasNewlines = plainText.includes('\n') || plainText.includes('\r');
-                const hasListMarkers = /^\s*(-\s|\d+\.\s)/m.test(plainText);
+        if (shouldStripStyles) {
+            let text = clipboard.getData('text/plain');
+            if (!text && clipboard.getData('text/html')) {
+                const rawHtml = clipboard.getData('text/html');
+                if (typeof DOMParser !== 'undefined') {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(rawHtml, 'text/html');
+                    text = doc.body.textContent || doc.body.innerText || '';
+                }
+            }
+            if (text) {
+                text = this.stripUnicodeFormatting(text);
+                const hasNewlines = text.includes('\n') || text.includes('\r');
+                const hasListMarkers = /^\s*(-\s|\d+\.\s)/m.test(text);
                 if (hasNewlines || hasListMarkers) {
-                    htmlToInsert = this.modelTextToEditorHtml(plainText);
+                    htmlToInsert = this.plainTextToCleanEditorHtml(text);
                 }
                 else {
-                    htmlToInsert = this.modelInlineTextToHtml(plainText);
+                    htmlToInsert = this.escapeHtml(text);
+                }
+            }
+        }
+        else {
+            const rawHtml = clipboard.getData('text/html');
+            const plainText = clipboard.getData('text/plain');
+            // 1. Try extracting and cleaning rich HTML from clipboard
+            if (rawHtml && rawHtml.trim()) {
+                htmlToInsert = this.cleanPastedHtml(rawHtml);
+            }
+            // 2. If no valid HTML or plain text copy
+            if (!htmlToInsert || !htmlToInsert.trim()) {
+                if (plainText && plainText.trim()) {
+                    const hasNewlines = plainText.includes('\n') || plainText.includes('\r');
+                    const hasListMarkers = /^\s*(-\s|\d+\.\s)/m.test(plainText);
+                    if (hasNewlines || hasListMarkers) {
+                        htmlToInsert = this.modelTextToEditorHtml(plainText);
+                    }
+                    else {
+                        htmlToInsert = this.modelInlineTextToHtml(plainText);
+                    }
                 }
             }
         }
         if (htmlToInsert) {
             this.focusEditor();
+            if (shouldStripStyles) {
+                const sel = window.getSelection();
+                if (sel && !sel.isCollapsed && sel.rangeCount > 0) {
+                    try {
+                        document.execCommand('removeFormat', false);
+                    }
+                    catch {
+                        // ignore
+                    }
+                }
+            }
             this.commandService.insertHtml(htmlToInsert);
             if (this.highlightHashtags) {
                 this.highlightHashtagsInElement();
@@ -1463,6 +1505,28 @@ class NgxRichTextEditorComponent {
         });
         const temp = document.createElement('div');
         temp.appendChild(fragment);
+        if (isExclusive) {
+            const formats = temp.querySelectorAll('b, strong, i, em, u, ins');
+            formats.forEach((el) => {
+                let parent = el.parentElement;
+                let hasParentFormat = false;
+                while (parent && parent !== temp) {
+                    const pTag = parent.tagName.toLowerCase();
+                    if (['b', 'strong', 'i', 'em', 'u', 'ins'].includes(pTag)) {
+                        hasParentFormat = true;
+                        break;
+                    }
+                    parent = parent.parentElement;
+                }
+                if (hasParentFormat) {
+                    const p = el.parentNode;
+                    while (el.firstChild) {
+                        p?.insertBefore(el.firstChild, el);
+                    }
+                    p?.removeChild(el);
+                }
+            });
+        }
         return temp.innerHTML;
     }
     onEditorKeydown(event) {
@@ -2471,6 +2535,122 @@ class NgxRichTextEditorComponent {
         flushList();
         return html.join('') || '<p><br></p>';
     }
+    plainTextToCleanEditorHtml(text) {
+        if (!text)
+            return '<p><br></p>';
+        const lines = text.replace(/\r\n?/g, '\n').split('\n');
+        const html = [];
+        let listKind = null;
+        let listStart = 1;
+        let listItems = [];
+        const flushList = () => {
+            if (!listKind)
+                return;
+            const tag = listKind === 'numbered' ? 'ol' : 'ul';
+            const start = listKind === 'numbered' && listStart !== 1 ? ` start="${listStart}"` : '';
+            const listClass = listKind === 'numbered' ? 'ngx-editor-ordered-list' : 'ngx-editor-bullet-list';
+            const items = listItems.map((item) => `<li>${item || '<br>'}</li>`).join('');
+            html.push(`<${tag} class="${listClass}"${start}>${items}</${tag}>`);
+            listKind = null;
+            listStart = 1;
+            listItems = [];
+        };
+        for (const line of lines) {
+            const bullet = line.match(/^-\s?(.*)$/);
+            const numbered = line.match(/^(\d+)\.\s?(.*)$/);
+            if (bullet) {
+                if (listKind !== 'bullet') {
+                    flushList();
+                    listKind = 'bullet';
+                }
+                listItems.push(this.escapeHtml(bullet[1] ?? ''));
+                continue;
+            }
+            if (numbered) {
+                if (listKind !== 'numbered') {
+                    flushList();
+                    listKind = 'numbered';
+                    listStart = Number(numbered[1]);
+                }
+                listItems.push(this.escapeHtml(numbered[2] ?? ''));
+                continue;
+            }
+            flushList();
+            if (!line.trim()) {
+                html.push('<p><br></p>');
+            }
+            else {
+                html.push(`<p>${this.escapeHtml(line)}</p>`);
+            }
+        }
+        flushList();
+        return html.join('') || '<p><br></p>';
+    }
+    stripUnicodeFormatting(text) {
+        if (!text)
+            return '';
+        // Remove combining underline (\u0332) and combining strikethrough (\u0336)
+        let processed = text.replace(/[\u0332\u0336]/g, '');
+        const chars = [...processed];
+        let result = '';
+        for (let i = 0; i < chars.length; i++) {
+            const ch = chars[i];
+            const cp = ch.codePointAt(0);
+            // Mathematical Bold or Bold Italic Latin / Digits
+            if (cp >= 0x1d400 && cp <= 0x1d419) {
+                result += String.fromCharCode(cp - 0x1d400 + 65);
+            }
+            else if (cp >= 0x1d41a && cp <= 0x1d433) {
+                result += String.fromCharCode(cp - 0x1d41a + 97);
+            }
+            else if (cp >= 0x1d7ce && cp <= 0x1d7d7) {
+                result += String.fromCharCode(cp - 0x1d7ce + 48);
+            }
+            else if (cp >= 0x1d468 && cp <= 0x1d481) {
+                result += String.fromCharCode(cp - 0x1d468 + 65);
+            }
+            else if (cp >= 0x1d482 && cp <= 0x1d49b) {
+                result += String.fromCharCode(cp - 0x1d482 + 97);
+                // Mathematical Italic Latin
+            }
+            else if (cp >= 0x1d434 && cp <= 0x1d44d) {
+                result += String.fromCharCode(cp - 0x1d434 + 65);
+            }
+            else if (cp >= 0x1d44e && cp <= 0x1d467) {
+                result += String.fromCharCode(cp - 0x1d44e + 97);
+            }
+            else if (ch === '\u210e' || cp === 0x1d455) {
+                result += 'h';
+                // Mathematical Sans-serif Bold / Italic
+            }
+            else if (cp >= 0x1d5d4 && cp <= 0x1d5ed) {
+                result += String.fromCharCode(cp - 0x1d5d4 + 65);
+            }
+            else if (cp >= 0x1d5ee && cp <= 0x1d607) {
+                result += String.fromCharCode(cp - 0x1d5ee + 97);
+            }
+            else if (cp >= 0x1d608 && cp <= 0x1d621) {
+                result += String.fromCharCode(cp - 0x1d608 + 65);
+            }
+            else if (cp >= 0x1d622 && cp <= 0x1d63b) {
+                result += String.fromCharCode(cp - 0x1d622 + 97);
+            }
+            else {
+                result += ch;
+            }
+        }
+        return result;
+    }
+    escapeHtml(text) {
+        let escaped = text
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;');
+        if (this.computedConfig.highlightHashtags ?? this.highlightHashtags) {
+            escaped = escaped.replace(/(^|[\s>])#([a-zA-Z0-9_\u0080-\uFFFF]+)/g, '$1<span class="ngx-editor-hashtag post-content-hashtag">#$2</span>');
+        }
+        return escaped;
+    }
     isCursorInsideTag(tagName) {
         const sel = window.getSelection();
         if (!sel || !sel.anchorNode)
@@ -2516,7 +2696,7 @@ class NgxRichTextEditorComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.22", ngImport: i0, type: NgxRichTextEditorComponent, deps: [{ token: EditorCommandService }, { token: i2.DomSanitizer }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NgxRichTextEditorComponent, isStandalone: true, selector: "ngx-rich-text-pro, ngx-rich-text-editor", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", showToolbar: "showToolbar", showStatusBar: "showStatusBar", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", tools: "tools", maxCharacters: "maxCharacters", fontFamily: "fontFamily", fontSize: "fontSize", fontFamilies: "fontFamilies", customClass: "customClass", editorStyle: "editorStyle", contentStyle: "contentStyle", hashtagColor: "hashtagColor", highlightHashtags: "highlightHashtags", outputFormat: "outputFormat", exclusiveInlineFormats: "exclusiveInlineFormats", config: "config" }, outputs: { valueChange: "valueChange", markdownChange: "markdownChange", textChange: "textChange", editorFocus: "editorFocus", editorBlur: "editorBlur" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.22", type: NgxRichTextEditorComponent, isStandalone: true, selector: "ngx-rich-text-pro, ngx-rich-text-editor", inputs: { value: "value", placeholder: "placeholder", disabled: "disabled", readonly: "readonly", showToolbar: "showToolbar", showStatusBar: "showStatusBar", height: "height", minHeight: "minHeight", maxHeight: "maxHeight", tools: "tools", maxCharacters: "maxCharacters", fontFamily: "fontFamily", fontSize: "fontSize", fontFamilies: "fontFamilies", customClass: "customClass", editorStyle: "editorStyle", contentStyle: "contentStyle", hashtagColor: "hashtagColor", highlightHashtags: "highlightHashtags", outputFormat: "outputFormat", exclusiveInlineFormats: "exclusiveInlineFormats", stripPastedStyles: "stripPastedStyles", config: "config" }, outputs: { valueChange: "valueChange", markdownChange: "markdownChange", textChange: "textChange", editorFocus: "editorFocus", editorBlur: "editorBlur" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => NgxRichTextEditorComponent),
@@ -2581,6 +2761,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.22", ngImpo
                 type: Input
             }], exclusiveInlineFormats: [{
                 type: Input
+            }], stripPastedStyles: [{
+                type: Input
             }], config: [{
                 type: Input
             }], valueChange: [{