@globalpayments/vega 2.70.0 → 2.75.1

package/dist/collection/components/vega-rich-text-editor/test/dto/content-state.test.js

@@ -1,4 +1,5 @@
 import { VegaRTEContent } from '../../dto/content-state';
+import { HTMLContentCleaner } from '../../slimmers/controllers/html-cleaner';
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { RTEImageBlock } from '../../dto/blocks/image-block';
 import { RTEListBlock } from '../../dto/blocks/list-block';
@@ -316,7 +317,7 @@ describe('content state', () => {
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
     });
     it('should convert text node with annotations to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -336,7 +337,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
     });
     it('should convert text block with annotations to HTML with inline styles correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -354,7 +355,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
     });
     it('should convert image block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -399,7 +400,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert number list block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -420,7 +421,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
+      expect(contentState.toHtml()).toEqual(`<ol style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
     });
     it('should convert code block to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -456,7 +457,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
     });
     it('should convert a complex value to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -789,7 +790,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
+      expect(contentState.toHtml()).toEqual(`<div style="font-family: Inter;font-size: 36px;line-height: 40px;min-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;min-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
     });
     it('should convert paragraph with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -818,7 +819,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -868,7 +869,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p id="p-element" dir="dir-p" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
     });
     it('should convert bullet list block with custom attributes to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -904,7 +905,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul id="ul" style="padding-left: 8px;margin-left: 16px;"><li id="list1" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
     });
     it('should convert paragraph with custom class to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1025,7 +1026,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
+      expect(contentState.toHtml()).toEqualHtml(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
     });
     it('should convert text node with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1074,7 +1075,7 @@ describe('content state', () => {
           ],
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
+      expect(contentState.toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
     });
     it('should convert bullet list block with custom style to HTML correctly', () => {
       const contentState = VegaRTEContent.fromJSON([
@@ -1110,7 +1111,7 @@ describe('content state', () => {
           },
         },
       ]);
-      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
+      expect(contentState.toHtml()).toEqual(`<ul style="padding-left: 8px;margin-left: 16px;padding: 60px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
     });
     it('should log warning when call toHtml with deprecated parameter', () => {
       setVegaLogLevel('warn');
@@ -2613,7 +2614,7 @@ describe('content state', () => {
       </footer>
     </article>
     <address>ADDRESS: 123 Main St, City, Country</address>
-    <blockquote cite="https://example.com">BLOCKQUOTE: “This is a quoted text.”ote>
+    <blockquote cite="https://example.com">BLOCKQUOTE: “This is a quoted text.”</blockquote>
     <details>
       <summary>DETAILS / SUMMARY Example</summary>
       <p>Extra information shown when expanded.</p>
@@ -2797,6 +2798,11 @@ Line 1
       const paragraph = content.children[0];
       expect(paragraph.children[1].text).toEqual(' ');
     });
+    it('should convert empty value as expect', async () => {
+      const emptyContent = VegaRTEContent.fromHtml('', { autoMatchFormat: false });
+      expect(emptyContent.toHtml()).toEqual('');
+      expect(emptyContent.toJSON()).toEqual([]);
+    });
   });
   describe('fromJSON', () => {
     it('should translate the paragraph as expect JSON', () => {
@@ -2839,8 +2845,8 @@ Line 1
           nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
         },
       ];
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
       expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
     });
@@ -2950,4 +2956,168 @@ Line 1
       });
     });
   });
+  describe('cleanHtmlWhitespace', () => {
+    const cleaner = new HTMLContentCleaner();
+    const cleanHtmlWhitespace = (html) => {
+      return cleaner.clean(html);
+    };
+    it('should inline a table by removing all whitespace between tags', () => {
+      const input = `<table style="width: 400px; border-collapse: collapse;">   <thead>     <tr>       ` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>       ` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>       ` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>     ` +
+        `</tr>   </thead>   <tbody>     <tr>       <td style="padding: 12px;">Cell 1-1</td>       ` +
+        `<td style="padding: 12px;">Cell 1-2</td>       <td style="padding: 12px;">Cell 1-3</td>     ` +
+        `</tr>     <tr>       <td style="padding: 12px;">Cell 2-1</td>       <td style="padding: 12px;">Cell 2-2</td>       ` +
+        `<td style="padding: 12px;">Cell 2-3</td>     </tr>     <tr>       <td style="padding: 12px;">Cell 3-1</td>       ` +
+        `<td style="padding: 12px;">Cell 3-2</td>       <td style="padding: 12px;">Cell 3-3</td>     ` +
+        `</tr>   </tbody> </table>`;
+      const expected = `<table style="width: 400px; border-collapse: collapse;"><thead><tr>` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>` +
+        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>` +
+        `</tr></thead><tbody><tr>` +
+        `<td style="padding: 12px;">Cell 1-1</td>` +
+        `<td style="padding: 12px;">Cell 1-2</td>` +
+        `<td style="padding: 12px;">Cell 1-3</td>` +
+        `</tr><tr>` +
+        `<td style="padding: 12px;">Cell 2-1</td>` +
+        `<td style="padding: 12px;">Cell 2-2</td>` +
+        `<td style="padding: 12px;">Cell 2-3</td>` +
+        `</tr><tr>` +
+        `<td style="padding: 12px;">Cell 3-1</td>` +
+        `<td style="padding: 12px;">Cell 3-2</td>` +
+        `<td style="padding: 12px;">Cell 3-3</td>` +
+        `</tr></tbody></table>`;
+      expect(cleanHtmlWhitespace(input)).toBe(expected);
+    });
+    it('should remove \\n\\t after opening tag and before closing tag', () => {
+      const input = '<p>\n\t <span>test</span>\n\t </p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p><span>test</span></p>');
+    });
+    it('should remove all \\n and \\t characters', () => {
+      const input = '<p>\n\ttest\n</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>test</p>');
+    });
+    it('should preserve space between matching tags', () => {
+      const input = '<span> </span>';
+      expect(cleanHtmlWhitespace(input)).toBe('<span> </span>');
+    });
+    it('should preserve space with text between matching tags', () => {
+      const input = '<span> test </span>';
+      expect(cleanHtmlWhitespace(input)).toBe('<span> test </span>');
+    });
+    it('should preserve multiple spaces between matching tags', () => {
+      const input = '<span>  </span>';
+      expect(cleanHtmlWhitespace(input)).toBe('<span>  </span>');
+    });
+    it('should remove whitespace between opening tags', () => {
+      const input = '<div>\n\t<p></p></div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><p></p></div>');
+    });
+    it('should remove \\n\\t after opening tag but preserve regular spaces', () => {
+      const input = '<p>\n\t  Hello</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>  Hello</p>');
+    });
+    it('should remove whitespace between multiple closing tags', () => {
+      const input = '<table><tbody><tr></tr> </tbody> </table>';
+      expect(cleanHtmlWhitespace(input)).toBe('<table><tbody><tr></tr></tbody></table>');
+    });
+    it('should remove whitespace between multiple opening tags', () => {
+      const input = '<div> <span></span></div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><span></span></div>');
+    });
+    it('should handle complex nested structure', () => {
+      const input = '<div>\n\t<p>\n\t\t<span>Hello</span>\n\t</p>\n</div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><p><span>Hello</span></p></div>');
+    });
+    it('should preserve regular spaces within text content', () => {
+      const input = '<p>Hello World</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello World</p>');
+    });
+    it('should preserve multiple spaces in text content', () => {
+      const input = '<p>Hello  World</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello  World</p>');
+    });
+    it('should not remove \\n between words in text content', () => {
+      const input = '<p>Hello\nWorld</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello\nWorld</p>');
+    });
+    it('should not remove \\n between words with space in text content', () => {
+      const input = '<p>Hello\n World</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello\n World</p>');
+    });
+    it('should remove newline after img tag', () => {
+      const input = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm">\n</div>';
+      const expected = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm"></div>';
+      expect(cleanHtmlWhitespace(input)).toBe(expected);
+    });
+    it('should handle 4-level deep nesting', () => {
+      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<p>Text</p>\n\t\t</article>\n\t</section>\n</div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><p>Text</p></article></section></div>');
+    });
+    it('should handle 5-level deep nesting', () => {
+      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<p>Text</p>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><main><p>Text</p></main></article></section></div>');
+    });
+    it('should handle 6-level deep nesting', () => {
+      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<aside>\n\t\t\t\t\t<p>Text</p>\n\t\t\t\t</aside>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><main><aside><p>Text</p></aside></main></article></section></div>');
+    });
+    it('should remove whitespace after br and hr tags', () => {
+      const input1 = '<div><br>\n</div>';
+      expect(cleanHtmlWhitespace(input1)).toBe('<div><br></div>');
+      const input2 = '<div><hr>\n\t</div>';
+      expect(cleanHtmlWhitespace(input2)).toBe('<div><hr></div>');
+      const input3 = '<div><input type="text">\n</div>';
+      expect(cleanHtmlWhitespace(input3)).toBe('<div><input type="text"></div>');
+    });
+    it('should remove multiple consecutive \\n characters', () => {
+      const input = '<p>\n\n\n\nHello</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
+    });
+    it('should remove multiple consecutive \\t characters', () => {
+      const input = '<p>\t\t\tHello</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
+    });
+    it('should preserve empty matching tags', () => {
+      const input = '<span></span>';
+      expect(cleanHtmlWhitespace(input)).toBe('<span></span>');
+    });
+    it('should handle mixed spaces, tabs, and newlines', () => {
+      const input = '<div> \n\t <p>Text</p> \n\t </div>';
+      expect(cleanHtmlWhitespace(input)).toBe('<div><p>Text</p></div>');
+    });
+    it('should preserve spaces in attribute values', () => {
+      const input = '<p class="my custom class">Text</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p class="my custom class">Text</p>');
+    });
+    it('should remove newlines after br tags', () => {
+      const input = '<p>Line 1<br>\nLine 2</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Line 1<br>Line 2</p>');
+    });
+    it('should preserve spaces in code blocks between matching tags', () => {
+      const input = '<code>  const x = 1;  </code>';
+      expect(cleanHtmlWhitespace(input)).toBe('<code>  const x = 1;  </code>');
+    });
+    it('should handle empty string', () => {
+      expect(cleanHtmlWhitespace('')).toBe('');
+    });
+    it('should preserve plain text without tags', () => {
+      const input = 'Hello World';
+      expect(cleanHtmlWhitespace(input)).toBe('Hello World');
+    });
+    it('should remove whitespace between different inline elements', () => {
+      const input = '<span>text</span>\n\t<strong>bold</strong>';
+      expect(cleanHtmlWhitespace(input)).toBe('<span>text</span><strong>bold</strong>');
+    });
+    it('should remove \\t\\n combination', () => {
+      const input = '<p>\t\nHello</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
+    });
+    it('should remove complex \\n\\t\\n patterns', () => {
+      const input = '<p>\n\t\n\t\nHello</p>';
+      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
+    });
+  });
 });

package/dist/collection/components/vega-rich-text-editor/test/html-cleaner/html-content-cleaner.test.js

@@ -0,0 +1,186 @@
+import { HTMLContentCleaner } from '../../slimmers/controllers/html-cleaner';
+describe('HTMLContentCleaner', () => {
+  let cleaner;
+  beforeEach(() => {
+    cleaner = new HTMLContentCleaner();
+  });
+  it('should handle empty string', () => {
+    expect(cleaner.clean('')).toBe('');
+  });
+  it('should handle whitespace-only string', () => {
+    expect(cleaner.clean('   ')).toBe('   ');
+  });
+  it('should remove \\n\\t after opening tag and before closing tag', () => {
+    const input = '<div><p>\n\t <span>test</span>\n\t </p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p><span>test</span></p></div>');
+  });
+  it('should remove all \\n and \\t characters between tags', () => {
+    const input = '<div><p>\n\ttest\n</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>test</p></div>');
+  });
+  it('should preserve space between matching tags', () => {
+    const input = '<div><span> </span></div>';
+    expect(cleaner.clean(input)).toBe('<div><span> </span></div>');
+  });
+  it('should preserve space with text between matching tags', () => {
+    const input = '<div><span> test </span></div>';
+    expect(cleaner.clean(input)).toBe('<div><span> test </span></div>');
+  });
+  it('should preserve multiple spaces between matching tags', () => {
+    const input = '<div><span>  </span></div>';
+    expect(cleaner.clean(input)).toBe('<div><span>  </span></div>');
+  });
+  it('should remove whitespace between opening tags', () => {
+    const input = '<div>\n\t<p></p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p></p></div>');
+  });
+  it('should remove \\n\\t after opening tag but preserve regular spaces', () => {
+    const input = '<p>\n\t  Hello</p>';
+    expect(cleaner.clean(input)).toBe('<p>  Hello</p>');
+  });
+  it('should remove whitespace between multiple closing tags', () => {
+    const input = '<table><tbody><tr></tr> </tbody> </table>';
+    expect(cleaner.clean(input)).toBe('<table><tbody><tr></tr></tbody></table>');
+  });
+  it('should remove whitespace between multiple opening tags', () => {
+    const input = '<div> <span></span></div>';
+    expect(cleaner.clean(input)).toBe('<div><span></span></div>');
+  });
+  it('should handle complex nested structure', () => {
+    const input = '<div>\n\t<p>\n\t\t<span>Hello</span>\n\t</p>\n</div>';
+    expect(cleaner.clean(input)).toBe('<div><p><span>Hello</span></p></div>');
+  });
+  it('should preserve regular spaces within text content', () => {
+    const input = '<div><p>Hello World</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello World</p></div>');
+  });
+  it('should preserve multiple spaces in text content', () => {
+    const input = '<div><p>Hello  World</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello  World</p></div>');
+  });
+  it('should not remove \\n between words in text content', () => {
+    const input = '<div><p>Hello\nWorld</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello\nWorld</p></div>');
+  });
+  it('should not remove \\n between words with space in text content', () => {
+    const input = '<div><p>Hello\n World</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello\n World</p></div>');
+  });
+  it('should remove multiple consecutive \\n characters', () => {
+    const input = '<div><p>\n\n\n\nHello</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello</p></div>');
+  });
+  it('should remove multiple consecutive \\t characters', () => {
+    const input = '<div><p>\t\t\tHello</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello</p></div>');
+  });
+  it('should preserve empty matching tags', () => {
+    const input = '<div><span></span></div>';
+    expect(cleaner.clean(input)).toBe('<div><span></span></div>');
+  });
+  it('should handle mixed spaces, tabs, and newlines', () => {
+    const input = '<div> \n\t <p>Text</p> \n\t </div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Text</p></div>');
+  });
+  it('should remove \\t\\n combination', () => {
+    const input = '<div><p>\t\nHello</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello</p></div>');
+  });
+  it('should remove complex \\n\\t\\n patterns', () => {
+    const input = '<div><p>\n\t\n\t\nHello</p></div>';
+    expect(cleaner.clean(input)).toBe('<div><p>Hello</p></div>');
+  });
+  it('should handle 4-level deep nesting', () => {
+    const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<p>Text</p>\n\t\t</article>\n\t</section>\n</div>';
+    expect(cleaner.clean(input)).toBe('<div><section><article><p>Text</p></article></section></div>');
+  });
+  it('should handle 5-level deep nesting', () => {
+    const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<p>Text</p>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
+    expect(cleaner.clean(input)).toBe('<div><section><article><main><p>Text</p></main></article></section></div>');
+  });
+  it('should handle 6-level deep nesting', () => {
+    const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<aside>\n\t\t\t\t\t<p>Text</p>\n\t\t\t\t</aside>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
+    expect(cleaner.clean(input)).toBe('<div><section><article><main><aside><p>Text</p></aside></main></article></section></div>');
+  });
+  it('should remove whitespace after br and hr tags', () => {
+    const input1 = '<div><br>\n</div>';
+    expect(cleaner.clean(input1)).toBe('<div><br></div>');
+    const input2 = '<div><hr>\n\t</div>';
+    expect(cleaner.clean(input2)).toBe('<div><hr></div>');
+    const input3 = '<div><input type="text">\n</div>';
+    expect(cleaner.clean(input3)).toBe('<div><input type="text"></div>');
+  });
+  it('should remove newlines after br tags', () => {
+    const input = '<p>Line 1<br>\nLine 2</p>';
+    expect(cleaner.clean(input)).toBe('<p>Line 1<br>Line 2</p>');
+  });
+  it('should preserve spaces in code blocks between matching tags', () => {
+    const input = '<code>  const x = 1;  </code>';
+    expect(cleaner.clean(input)).toBe('<code>  const x = 1;  </code>');
+  });
+  it('should preserve plain text without tags', () => {
+    const input = 'Hello World';
+    expect(cleaner.clean(input)).toBe('Hello World');
+  });
+  it('should remove whitespace between different inline elements', () => {
+    const input = '<span>text</span>\n\t<strong>bold</strong>';
+    expect(cleaner.clean(input)).toBe('<span>text</span><strong>bold</strong>');
+  });
+  it('should inline a table by removing all whitespace between tags', () => {
+    const input = `<table style="width: 400px; border-collapse: collapse;">   <thead>     <tr>       ` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>       ` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>       ` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>     ` +
+      `</tr>   </thead>   <tbody>     <tr>       <td style="padding: 12px;">Cell 1-1</td>       ` +
+      `<td style="padding: 12px;">Cell 1-2</td>       <td style="padding: 12px;">Cell 1-3</td>     ` +
+      `</tr>     <tr>       <td style="padding: 12px;">Cell 2-1</td>       <td style="padding: 12px;">Cell 2-2</td>       ` +
+      `<td style="padding: 12px;">Cell 2-3</td>     </tr>     <tr>       <td style="padding: 12px;">Cell 3-1</td>       ` +
+      `<td style="padding: 12px;">Cell 3-2</td>       <td style="padding: 12px;">Cell 3-3</td>     ` +
+      `</tr>   </tbody> </table>`;
+    const expected = `<table style="width: 400px; border-collapse: collapse;"><thead><tr>` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>` +
+      `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>` +
+      `</tr></thead><tbody><tr>` +
+      `<td style="padding: 12px;">Cell 1-1</td>` +
+      `<td style="padding: 12px;">Cell 1-2</td>` +
+      `<td style="padding: 12px;">Cell 1-3</td>` +
+      `</tr><tr>` +
+      `<td style="padding: 12px;">Cell 2-1</td>` +
+      `<td style="padding: 12px;">Cell 2-2</td>` +
+      `<td style="padding: 12px;">Cell 2-3</td>` +
+      `</tr><tr>` +
+      `<td style="padding: 12px;">Cell 3-1</td>` +
+      `<td style="padding: 12px;">Cell 3-2</td>` +
+      `<td style="padding: 12px;">Cell 3-3</td>` +
+      `</tr></tbody></table>`;
+    expect(cleaner.clean(input)).toBe(expected);
+  });
+  it('should remove newline after img tag', () => {
+    const input = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm">\n</div>';
+    const expected = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm"></div>';
+    expect(cleaner.clean(input)).toBe(expected);
+  });
+  it('should preserve spaces in attribute values', () => {
+    const input = '<p class="my custom class">Text</p>';
+    expect(cleaner.clean(input)).toBe('<p class="my custom class">Text</p>');
+  });
+  describe('Edge cases', () => {
+    it('should handle self-closing tags', () => {
+      expect(cleaner.clean('<br/>\n<hr/>')).toBe('<br/><hr/>');
+      expect(cleaner.clean('<img src="test.jpg"/>\n<input/>')).toBe('<img src="test.jpg"/><input/>');
+    });
+    it('should handle nested matching tags', () => {
+      expect(cleaner.clean('<div> <div> </div> </div>')).toBe('<div><div> </div></div>');
+    });
+    it('should handle tags with special characters in attributes', () => {
+      expect(cleaner.clean('<a href="http://example.com?a=1&b=2">\nLink</a>')).toBe('<a href="http://example.com?a=1&b=2">Link</a>');
+    });
+    it('should handle HTML entities', () => {
+      expect(cleaner.clean('<div><p>\n&nbsp;&lt;&gt;</p></div>')).toBe('<div><p>&nbsp;&lt;&gt;</p></div>');
+    });
+    it('should handle comments', () => {
+      expect(cleaner.clean('<div>\n<!-- comment -->\n<p>Text</p></div>')).toBe('<div><!-- comment --><p>Text</p></div>');
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/html-cleaner/remove-whitespace-after-opening-tag-processor.test.js

@@ -0,0 +1,22 @@
+import { RemoveWhitespaceAfterOpeningTagProcessor } from '../../slimmers/controllers/html-cleaner';
+describe('RemoveWhitespaceAfterOpeningTagProcessor', () => {
+  let processor;
+  beforeEach(() => {
+    processor = new RemoveWhitespaceAfterOpeningTagProcessor();
+  });
+  it('should remove \\n and \\t after opening tag', () => {
+    expect(processor.process('<div><p>\n\tHello</p></div>')).toBe('<div><p>Hello</p></div>');
+    expect(processor.process('<div><div>\n\n\tWorld</div></div>')).toBe('<div><div>World</div></div>');
+    expect(processor.process('<div><span>\tTest</span></div>')).toBe('<div><span>Test</span></div>');
+  });
+  it('should preserve regular spaces', () => {
+    expect(processor.process('<div><p>  Hello</p></div>')).toBe('<div><p>  Hello</p></div>');
+    expect(processor.process('<div><p> World</p></div>')).toBe('<div><p> World</p></div>');
+  });
+  it('should not affect text without opening tags', () => {
+    expect(processor.process('<div>Hello World</div>')).toBe('<div>Hello World</div>');
+  });
+  it('should handle multiple occurrences', () => {
+    expect(processor.process('<div><p>\nHello</p><div>\tWorld</div></div>')).toBe('<div><p>Hello</p><div>World</div></div>');
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/html-cleaner/remove-whitespace-before-closing-tag-processor.test.js

@@ -0,0 +1,22 @@
+import { RemoveWhitespaceBeforeClosingTagProcessor } from '../../slimmers/controllers/html-cleaner';
+describe('RemoveWhitespaceBeforeClosingTagProcessor', () => {
+  let processor;
+  beforeEach(() => {
+    processor = new RemoveWhitespaceBeforeClosingTagProcessor();
+  });
+  it('should remove \\n and \\t before closing tag', () => {
+    expect(processor.process('<div><p>World\n\t</p></div>')).toBe('<div><p>World</p></div>');
+    expect(processor.process('<div><div>Hello\n</div></div>')).toBe('<div><div>Hello</div></div>');
+    expect(processor.process('<div><span>Test\t</span></div>')).toBe('<div><span>Test</span></div>');
+  });
+  it('should preserve regular spaces', () => {
+    expect(processor.process('<div><p>Hello  </p></div>')).toBe('<div><p>Hello  </p></div>');
+    expect(processor.process('<div><p>World </p></div>')).toBe('<div><p>World </p></div>');
+  });
+  it('should not affect text without closing tags', () => {
+    expect(processor.process('<div>Hello World</div>')).toBe('<div>Hello World</div>');
+  });
+  it('should handle multiple occurrences', () => {
+    expect(processor.process('<div><p>Hello\n</p><div>World\t</div></div>')).toBe('<div><p>Hello</p><div>World</div></div>');
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/html-cleaner/remove-whitespace-between-tags-processor.test.js

@@ -0,0 +1,26 @@
+import { RemoveWhitespaceBetweenTagsProcessor } from '../../slimmers/controllers/html-cleaner';
+describe('RemoveWhitespaceBetweenTagsProcessor', () => {
+  let processor;
+  beforeEach(() => {
+    processor = new RemoveWhitespaceBetweenTagsProcessor();
+  });
+  it('should remove whitespace between different tags', () => {
+    expect(processor.process('<div><p></p>\n\t<div></div></div>')).toBe('<div><p></p><div></div></div>');
+    expect(processor.process('<div><div>\n\t<span></span></div></div>')).toBe('<div><div><span></span></div></div>');
+    expect(processor.process('<div><div></div> <p></p></div>')).toBe('<div><div></div><p></p></div>');
+  });
+  it('should preserve whitespace between matching tags', () => {
+    expect(processor.process('<div><span> </span></div>')).toBe('<div><span> </span></div>');
+    expect(processor.process('<div><span>  </span></div>')).toBe('<div><span>  </span></div>');
+    expect(processor.process('<div><span>\n\t</span></div>')).toBe('<div><span>\n\t</span></div>');
+    expect(processor.process('<div><code> </code></div>')).toBe('<div><code> </code></div>');
+  });
+  it('should handle custom elements with hyphens', () => {
+    expect(processor.process('<div><my-component> </my-component></div>')).toBe('<div><my-component> </my-component></div>');
+    expect(processor.process('<div><my-component></my-component>\n<other-component></other-component></div>')).toBe('<div><my-component></my-component><other-component></other-component></div>');
+  });
+  it('should handle tags with attributes', () => {
+    expect(processor.process('<div><div class="test">\n<span></span></div></div>')).toBe('<div><div class="test"><span></span></div></div>');
+    expect(processor.process('<div><span id="test"> </span></div>')).toBe('<div><span id="test"> </span></div>');
+  });
+});

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -241,7 +241,7 @@ export class VegaSelectionChip {
       "mutable": false,
       "complexType": {
         "original": "VegaSelectionChipTooltipProps",
-        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"hover\" | \"click\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
+        "resolved": "{ size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; positionRelativeTo?: string; minWidth?: ResponsiveType<SizeType>; maxWidth?: ResponsiveType<SizeType>; content?: string; disableInteractive?: boolean; text?: string; placement?: ElementAppenderPlacementType; alignment?: ElementAppenderAlignmentType; }",
         "references": {
           "VegaSelectionChipTooltipProps": {
             "location": "import",