@globalpayments/vega 2.58.0 → 2.59.1

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

@@ -4,6 +4,8 @@ import { RTEImageBlock } from '../../dto/blocks/image-block';
 import { RTEListBlock } from '../../dto/blocks/list-block';
 import { BlockAnnotationTypeEnum } from '../../dto/annotations/block-annotation.abstract';
 import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.abstract';
+import '../../../../polyfill/test-polyfill/unit/index';
+import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -137,6 +139,24 @@ describe('content state', () => {
         },
         nodes: [
           { id: '1-1', type: 'text', text: 'This is a paragraph', annotations: { bold: true } },
+          {
+            id: '1-2',
+            type: 'text',
+            text: ', and inline HTML',
+            annotations: {
+              plainText: true,
+              inlineHtml: {
+                htmlTag: 'b',
+                customAttribute: { id: 'b-element' },
+                customClass: ['my-class-1', 'my-class-2'],
+                customStyle: { background: 'yellow', color: 'red' },
+                child: {
+                  htmlTag: 's',
+                  customAttribute: { id: 's-element' },
+                },
+              },
+            },
+          },
         ],
       },
     ]);
@@ -285,4 +305,2597 @@ describe('content state', () => {
       expect(content.findNodeById('not-exist')).toBeNull();
     });
   });
+  describe('toHtml', () => {
+    it('should convert paragraph to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          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>`);
+    });
+    it('should convert text node with annotations to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph.',
+              annotations: { bold: true },
+            },
+            { id: '1-2', type: 'text', text: ' code', annotations: { code: true } },
+            { id: '1-3', type: 'text', text: ' text', annotations: { code: false } },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert text block with annotations to HTML with inline styles correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph', textAlign: 'right' },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph',
+              annotations: { bold: true, underline: true },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert image block to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'image',
+          nodes: [{ id: '1-1', type: 'image', url: 'https://example.com/image.jpg' }],
+        },
+        {
+          id: '2',
+          type: 'image',
+          nodes: [
+            {
+              id: '2-1',
+              type: 'image',
+              url: 'https://example.com/image.jpg',
+              annotations: {
+                alt: 'example',
+              },
+            },
+          ],
+        },
+      ]);
+      expect(contentState.toHtml()).toEqual(`<div><img style="vertical-align: bottom;width: 50%;" src="https://example.com/image.jpg" data-size="md"></div><div><img style="vertical-align: bottom;width: 50%;" alt="example" src="https://example.com/image.jpg" data-size="md"></div>`);
+    });
+    it('should convert bullet list block to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '1-1',
+              type: 'list-item',
+              nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+            },
+            {
+              id: '1-2',
+              type: 'list-item',
+              nodes: [{ id: '1-2-1', type: 'text', text: 'Item 2' }],
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert number list block to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'number-list',
+          blocks: [
+            {
+              id: '1-1',
+              type: 'list-item',
+              nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+            },
+            {
+              id: '1-2',
+              type: 'list-item',
+              nodes: [{ id: '1-2-1', type: 'text', text: 'Item 2' }],
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert code block to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1750424321364',
+          type: 'code-block',
+          content: '<div>This is a Plain Text.</div>',
+        },
+        {
+          id: '1750424321364',
+          type: 'code-block',
+          content: '<div>This is an HTML.</div>',
+          language: 'html',
+        },
+      ]);
+      expect(contentState.toHtml()).toEqual(`<pre data-language="plainText" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px"><code style='box-sizing: border-box;color: rgba(var(--v-text-primary, 32, 54, 69, 1));text-align: left;font-family: "Roboto Mono";font-weight: 400;line-height: 22px;font-size: 16px;white-space: pre-wrap;min-height: 22px;tab-size: 2px;'><div>This is a Plain Text.</div></code></pre><pre data-language="html" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px"><code style='box-sizing: border-box;color: rgba(var(--v-text-primary, 32, 54, 69, 1));text-align: left;font-family: "Roboto Mono";font-weight: 400;line-height: 22px;font-size: 16px;white-space: pre-wrap;min-height: 22px;tab-size: 2px;'><div>This is an HTML.</div></code></pre>`);
+    });
+    it('should convert text with the link annotations to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a link',
+              annotations: {
+                link: { href: 'https://example.com', groupKey: 'link-group-1' },
+              },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert a complex value to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1750041983988',
+          annotations: {
+            textStyle: 'title',
+          },
+          type: 'title',
+          nodes: [
+            {
+              id: '1750041978250',
+              annotations: {
+                bold: true,
+              },
+              type: 'text',
+              text: 'Title',
+            },
+          ],
+        },
+        {
+          id: '1750041984711',
+          annotations: {
+            textStyle: 'subtitle',
+          },
+          type: 'subtitle',
+          nodes: [
+            {
+              id: '1750041980352',
+              type: 'text',
+              text: 'Subtitle',
+            },
+          ],
+        },
+        {
+          id: '1750041981840',
+          annotations: {
+            textStyle: 'heading-1',
+          },
+          type: 'heading-1',
+          nodes: [
+            {
+              id: '1750041978195',
+              annotations: {
+                bold: true,
+              },
+              type: 'text',
+              text: 'Heading 1',
+            },
+          ],
+        },
+        {
+          id: '1750041975899',
+          annotations: {
+            textStyle: 'heading-2',
+          },
+          type: 'heading-2',
+          nodes: [
+            {
+              id: '1750041981732',
+              annotations: {
+                bold: true,
+              },
+              type: 'text',
+              text: 'Heading 2',
+            },
+          ],
+        },
+        {
+          id: '1750041983133',
+          annotations: {
+            textStyle: 'heading-3',
+          },
+          type: 'heading-3',
+          nodes: [
+            {
+              id: '1750041980106',
+              annotations: {
+                bold: true,
+              },
+              type: 'text',
+              text: 'Heading 3',
+            },
+          ],
+        },
+        {
+          id: '1750041984506',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041974956',
+              annotations: {},
+              type: 'text',
+              text: 'Paragraph',
+            },
+          ],
+        },
+        {
+          id: '1750041983082',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041983587',
+              annotations: {
+                bold: true,
+              },
+              type: 'text',
+              text: 'Bold text',
+            },
+          ],
+        },
+        {
+          id: '1750041980108',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041983935',
+              annotations: {
+                italic: true,
+              },
+              type: 'text',
+              text: 'Italic text',
+            },
+          ],
+        },
+        {
+          id: '1750041978100',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041978568',
+              annotations: {
+                underline: true,
+              },
+              type: 'text',
+              text: 'Underline text',
+            },
+          ],
+        },
+        {
+          id: '1750041984220',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041982817',
+              annotations: {
+                underline: true,
+              },
+              type: 'text',
+              text: 'Strikethrough text',
+            },
+          ],
+        },
+        {
+          id: '1750041979619',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041982051',
+              annotations: {
+                code: true,
+              },
+              type: 'text',
+              text: 'Code text',
+            },
+          ],
+        },
+        {
+          id: '1750041977487',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041983700',
+              annotations: {
+                textColor: 'red',
+              },
+              type: 'text',
+              text: 'Color text',
+            },
+          ],
+        },
+        {
+          id: '1750041981507',
+          annotations: {
+            textStyle: 'paragraph',
+            textAlign: 'left',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041979308',
+              type: 'text',
+              text: 'Left align',
+            },
+          ],
+        },
+        {
+          id: '1750041977501',
+          annotations: {
+            textStyle: 'paragraph',
+            textAlign: 'right',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041976836',
+              type: 'text',
+              text: 'Right align',
+            },
+          ],
+        },
+        {
+          id: '1750041983771',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '1750041977027',
+              annotations: {
+                textStyle: 'paragraph',
+              },
+              type: 'list-item',
+              nodes: [
+                {
+                  id: '1750041982061',
+                  type: 'text',
+                  text: 'list item 1',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: '1750041975174',
+              annotations: {
+                textStyle: 'paragraph',
+              },
+              type: 'list-item',
+              nodes: [
+                {
+                  id: '1750041978832',
+                  type: 'text',
+                  text: 'list item 2',
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+        {
+          id: '1750041992884',
+          annotations: {
+            textStyle: 'paragraph',
+            indent: 2,
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041987297',
+              type: 'text',
+              text: 'More indent',
+            },
+          ],
+        },
+        {
+          id: '1750042019645',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750042020364',
+              annotations: {
+                link: {
+                  href: 'https://www.google.com',
+                  groupKey: '1750042026536',
+                },
+              },
+              type: 'text',
+              text: 'Link text',
+            },
+          ],
+        },
+        {
+          id: '1750042030016',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750042032454',
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+        {
+          id: '1750041979184',
+          annotations: {
+            textStyle: 'paragraph',
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: '1750041981796',
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert paragraph with custom attributes to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customAttribute: {
+              id: 'p-element',
+              dir: 'dir-p',
+            },
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph',
+              annotations: {
+                customAttribute: {
+                  id: 'span-element',
+                  dir: 'dir-span',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert text node with custom attributes to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customAttribute: {
+              id: 'p-element',
+              dir: 'dir-p',
+            },
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph.',
+              annotations: {
+                bold: true,
+                customAttribute: {
+                  id: 'text1',
+                },
+              },
+            },
+            {
+              id: '1-2',
+              type: 'text',
+              text: ' code',
+              annotations: {
+                code: true,
+                customAttribute: {
+                  id: 'text2',
+                },
+              },
+            },
+            {
+              id: '1-3',
+              type: 'text',
+              text: ' text',
+              annotations: {
+                customAttribute: {
+                  id: 'text3',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert bullet list block with custom attributes to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '1-1',
+              type: 'list-item',
+              nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+              annotations: {
+                customAttribute: {
+                  id: 'list1',
+                },
+              },
+            },
+            {
+              id: '1-2',
+              type: 'list-item',
+              nodes: [{ id: '1-2-1', type: 'text', text: 'Item 2' }],
+              annotations: {
+                customAttribute: {
+                  id: 'list2',
+                },
+              },
+            },
+          ],
+          annotations: {
+            customAttribute: {
+              id: '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;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>`);
+    });
+    it('should convert paragraph with custom class to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customClass: ['p-class'],
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph',
+              annotations: {
+                customClass: ['span-class'],
+              },
+            },
+          ],
+        },
+      ]);
+      expect(contentState.toHtml()).toMatchSnapshot();
+    });
+    it('should convert text node with custom class to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customClass: ['p-class'],
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph.',
+              annotations: {
+                bold: true,
+                customClass: ['span1-class'],
+              },
+            },
+            {
+              id: '1-2',
+              type: 'text',
+              text: ' code',
+              annotations: {
+                code: true,
+                customClass: ['span2-class'],
+              },
+            },
+            {
+              id: '1-3',
+              type: 'text',
+              text: ' text',
+              annotations: {
+                customClass: ['span3-class'],
+              },
+            },
+          ],
+        },
+      ]);
+      expect(contentState.toHtml()).toMatchSnapshot();
+    });
+    it('should convert bullet list block with custom class to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '1-1',
+              type: 'list-item',
+              nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+              annotations: {
+                customClass: ['li1-class'],
+              },
+            },
+            {
+              id: '1-2',
+              type: 'list-item',
+              nodes: [{ id: '1-2-1', type: 'text', text: 'Item 2' }],
+              annotations: {
+                customClass: ['li2-class'],
+              },
+            },
+          ],
+          annotations: {
+            customClass: ['ul-class'],
+          },
+        },
+      ]);
+      expect(contentState.toHtml()).toMatchSnapshot();
+    });
+    it('should convert paragraph with custom style to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customStyle: {
+              fontWeight: '700',
+            },
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph',
+              annotations: {
+                customStyle: {
+                  fontWeight: '700',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert text node with custom style to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customStyle: {
+              textAlign: 'right',
+            },
+          },
+          nodes: [
+            {
+              id: '1-1',
+              type: 'text',
+              text: 'This is a paragraph.',
+              annotations: {
+                bold: true,
+                customStyle: {
+                  padding: '20px',
+                },
+              },
+            },
+            {
+              id: '1-2',
+              type: 'text',
+              text: ' code',
+              annotations: {
+                code: true,
+                customStyle: {
+                  padding: '30px',
+                },
+              },
+            },
+            {
+              id: '1-3',
+              type: 'text',
+              text: ' text',
+              annotations: {
+                customStyle: {
+                  padding: '40px',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+      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>`);
+    });
+    it('should convert bullet list block with custom style to HTML correctly', () => {
+      const contentState = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '1-1',
+              type: 'list-item',
+              nodes: [{ id: '1-1-1', type: 'text', text: 'Item 1' }],
+              annotations: {
+                customStyle: {
+                  padding: '40px',
+                },
+              },
+            },
+            {
+              id: '1-2',
+              type: 'list-item',
+              nodes: [{ id: '1-2-1', type: 'text', text: 'Item 2' }],
+              annotations: {
+                customStyle: {
+                  padding: '50px',
+                },
+              },
+            },
+          ],
+          annotations: {
+            customStyle: {
+              padding: '60px',
+            },
+          },
+        },
+      ]);
+      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>`);
+    });
+  });
+  describe('fromHtml', () => {
+    it('should convert a simple paragraph element to the expected RTEContentBlock', () => {
+      const sourceCode = '<p>Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a bold text element to the expected RTEContentBlock', () => {
+      const sourceCode = '<span style="font-weight: 700;">Bold</span>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Bold',
+              annotations: {
+                bold: true,
+                customStyle: {
+                  fontWeight: '700',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a list element to the expected RTEContentBlock', () => {
+      const sourceCode = '<ul><li>Item 1</li><li>Item 2</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+          id: expect.anything(),
+          type: 'bullet-list',
+        },
+      ]);
+    });
+    it('should convert a heading element to the expected RTEContentBlock', () => {
+      const sourceCode = '<h1>Heading</h1>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'heading-1',
+          annotations: { textStyle: 'heading-1' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Heading',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a complex html with RTE classes to DTO correctly', () => {
+      const sourceCode = `<div class='v-rte--text-style-title'>Title</div>
+			<div class='v-rte--text-style-subtitle'>Subtitle</div>
+			<h1 class='v-rte--text-style-heading-1'>Heading 1</h1>
+			<h2 class='v-rte--text-style-heading-2'>Heading 2</h2>
+			<h3 class='v-rte--text-style-heading-3'>Heading 3</h3>
+			<p class='v-rte--text-style-paragraph'>Paragraph</p>
+			<p class='v-rte--text-style-paragraph'>
+				<span class='v-rte--bold'>Bold text</span>
+				<span class='v-rte--italic'>Italic text</span>
+				<span class='v-rte--underline'>Underline text</span>
+				<span class='v-rte--strikethrough'>Strikethrough text</span>
+				<code class='v-rte--code'>Code text</code>
+				<span style="color: rgb(1, 128, 31);">Color text</span>
+			</p>
+			<ul>
+				<li class='v-rte--text-style-paragraph'>List item 1</li>
+				<li class='v-rte--text-style-paragraph'>List item 2</li>
+			</ul>
+			<ol>
+				<li class='v-rte--text-style-paragraph'>List item 1</li>
+				<li class='v-rte--text-style-paragraph'>List item 2</li>
+			</ol>
+			<p class="v-rte--text-style-paragraph v-rte--horizontal-alignment-left"><span class="">Left align</span></p>
+			<p class="v-rte--text-style-paragraph v-rte--horizontal-alignment-right"><span class="">Right align</span></p>
+			<p class="v-rte--text-style-paragraph v-rte--horizontal-alignment-left" style="margin-left: 16px;"><span class="">More indent 1</span></p>
+			<p class="v-rte--text-style-paragraph v-rte--horizontal-alignment-left" style="margin-left: 32px;"><span class="">More indent 2</span></p>
+			<p class="v-rte--text-style-paragraph"><a href="https://www.google.com" target="_blank" class="v-rte--link classA classB" id="a" data-link="link" style="fontSize: 8px; display: block;"><span class="">Link text</span></a></p>
+			<div><img src="mock-img-url" style="width: 100%;"></div>`;
+      const content = VegaRTEContent.fromHtml(sourceCode.replace(/[\t\n]/g, ''));
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'title',
+          annotations: { textStyle: 'title' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Title',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'subtitle',
+          annotations: { textStyle: 'subtitle' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Subtitle',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'heading-1',
+          annotations: { textStyle: 'heading-1' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Heading 1',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'heading-2',
+          annotations: { textStyle: 'heading-2' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Heading 2',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'heading-3',
+          annotations: { textStyle: 'heading-3' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Heading 3',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Paragraph',
+              type: 'text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              annotations: {
+                bold: true,
+              },
+              id: expect.anything(),
+              text: 'Bold text',
+              type: 'text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                italic: true,
+              },
+              text: 'Italic text',
+            },
+            {
+              id: expect.anything(),
+              annotations: {
+                underline: true,
+              },
+              text: 'Underline text',
+              type: 'text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                strikethrough: true,
+              },
+              text: 'Strikethrough text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                code: true,
+              },
+              text: 'Code text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                textColor: 'green',
+                customStyle: {
+                  color: 'rgb(1, 128, 31)',
+                },
+              },
+              text: 'Color text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'number-list',
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textAlign: 'left', textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Left align',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textAlign: 'right', textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Right align',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            indent: 1,
+            textAlign: 'left',
+            textStyle: 'paragraph',
+            customStyle: {
+              marginLeft: '16px',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'More indent 1',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            indent: 2,
+            textAlign: 'left',
+            textStyle: 'paragraph',
+            customStyle: {
+              marginLeft: '32px',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'More indent 2',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                link: {
+                  groupKey: expect.anything(),
+                  href: 'https://www.google.com',
+                  customAttribute: {
+                    'href': 'https://www.google.com',
+                    'target': '_blank',
+                    'id': 'a',
+                    'data-link': 'link',
+                  },
+                  customStyle: { fontSize: '8px', display: 'block' },
+                  customClass: ['classA', 'classB'],
+                },
+              },
+              text: 'Link text',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'image',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'image',
+              annotations: {
+                size: 'md',
+                customAttribute: {
+                  src: 'mock-img-url',
+                },
+                customStyle: {
+                  width: '100%',
+                },
+              },
+              url: 'mock-img-url',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a paragraph element with custom attributes to the expected RTEContentBlock', () => {
+      const sourceCode = '<p id="block-element" dir="block-dir">Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customAttribute: {
+              id: 'block-element',
+              dir: 'block-dir',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a text code element with custom attributes to the expected RTEContentBlock', () => {
+      const sourceCode = '<p id="p-element"><code id="code">Hello</code></p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customAttribute: {
+              id: 'p-element',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+              annotations: {
+                code: true,
+                customAttribute: {
+                  id: 'code',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a list element with custom attributes to the expected RTEContentBlock', () => {
+      const sourceCode = '<ul id="ul-element"><li id="li1-element">Item 1</li><li id="li2-element">Item 2</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customAttribute: {
+                  id: 'li1-element',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customAttribute: {
+                  id: 'li2-element',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+          id: expect.anything(),
+          type: 'bullet-list',
+          annotations: {
+            customAttribute: {
+              id: 'ul-element',
+            },
+          },
+        },
+      ]);
+    });
+    it('should convert a heading element with custom class to the expected RTEContentBlock', () => {
+      const sourceCode = '<h1 class="v-rte-class h1-class">Heading</h1>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'heading-1',
+          annotations: {
+            textStyle: 'heading-1',
+            customClass: ['h1-class'],
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Heading',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a paragraph element with custom class to the expected RTEContentBlock', () => {
+      const sourceCode = '<p class="p-class1 p-class2">Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customClass: ['p-class1', 'p-class2'],
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a text code element with custom class to the expected RTEContentBlock', () => {
+      const sourceCode = '<p class="p-class"><code class="code-class">Hello</code></p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            customClass: ['p-class'],
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+              annotations: {
+                code: true,
+                customClass: ['code-class'],
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a list element with custom class to the expected RTEContentBlock', () => {
+      const sourceCode = '<ul class="ul-class"><li class="li1-class">Item 1</li><li class="li2-class">Item 2</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customClass: ['li1-class'],
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customClass: ['li2-class'],
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+          id: expect.anything(),
+          type: 'bullet-list',
+          annotations: {
+            customClass: ['ul-class'],
+          },
+        },
+      ]);
+    });
+    it('should convert a heading element with custom attributes to the expected RTEContentBlock', () => {
+      const sourceCode = '<h1 id="h1-element">Heading</h1>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'heading-1',
+          annotations: {
+            textStyle: 'heading-1',
+            customAttribute: {
+              id: 'h1-element',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Heading',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a paragraph element with custom style to the expected RTEContentBlock', () => {
+      const sourceCode = '<p style="text-align: center;">Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            textAlign: 'center',
+            customStyle: {
+              textAlign: 'center',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a text code element with custom style to the expected RTEContentBlock', () => {
+      const sourceCode = '<p style="text-align: center;"><code style="font-weight: 700;">Hello</code></p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            textStyle: 'paragraph',
+            textAlign: 'center',
+            customStyle: {
+              textAlign: 'center',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+              annotations: {
+                bold: true,
+                code: true,
+                customStyle: {
+                  fontWeight: '700',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert a list element with custom style to the expected RTEContentBlock', () => {
+      const sourceCode = '<ul style="padding: 20px;"><li style="text-align: center;">Item 1</li><li style="padding: 20px;">Item 2</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                textAlign: 'center',
+                customStyle: {
+                  textAlign: 'center',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 1',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customStyle: {
+                  padding: '20px',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                },
+              ],
+              children: [],
+            },
+          ],
+          id: expect.anything(),
+          type: 'bullet-list',
+          annotations: {
+            customStyle: {
+              padding: '20px',
+            },
+          },
+        },
+      ]);
+    });
+    it('should convert the li elements into list block', () => {
+      const sourceCode = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      expect(content.toHtml()).toMatchSnapshot();
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [{ id: expect.anything(), type: 'text', text: 'Item 1' }],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [{ id: expect.anything(), type: 'text', text: 'Item 2' }],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [{ id: expect.anything(), type: 'text', text: 'Item 3' }],
+            },
+          ],
+        },
+      ]);
+    });
+  });
+  describe('fromHtml with autoMatchFormat false', () => {
+    it('should not match bold style', () => {
+      const sourceCode = '<p style="font-weight: 700;">Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="font-weight: 700;">Hello</p>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            customStyle: {
+              fontWeight: '700',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match color style', () => {
+      const sourceCode = '<p style="color: red">Hello</p>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="color: red;">Hello</p>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            customStyle: {
+              color: 'red',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Hello',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match link style', () => {
+      const sourceCode = `<p><a href="https://example.com">Link</a></p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p><a href="https://example.com">Link</a></p>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'Link',
+              annotations: {
+                plainText: true,
+                link: {
+                  customAttribute: {
+                    href: 'https://example.com',
+                  },
+                  groupKey: expect.anything(),
+                  href: 'https://example.com',
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match heading', () => {
+      const sourceCode = '<h1><span>Hello</span></h1>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<h1><span>Hello</span></h1>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          nodes: [{ id: expect.anything(), text: 'Hello', type: 'text' }],
+          type: 'heading-1',
+        },
+      ]);
+    });
+    it('should not match image style', () => {
+      const sourceCode = '<img src="https://example.com/image.jpg">';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<img src="https://example.com/image.jpg">`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'image',
+          annotations: { internalWrapper: true },
+          nodes: [
+            {
+              annotations: {
+                customAttribute: { src: 'https://example.com/image.jpg' },
+                size: undefined,
+              },
+              id: expect.anything(),
+              type: 'image',
+              url: 'https://example.com/image.jpg',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match list style', () => {
+      const sourceCode = '<ul><li>Item 1</li><li>Item 2</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li></ul>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              children: [],
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 1',
+                  type: 'text',
+                  annotations: { plainText: true },
+                },
+              ],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              children: [],
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                  annotations: { plainText: true },
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match div to internal style', () => {
+      const sourceCode = "<div class='my-class'><span> I want this be a sentence </span><span class='my-another-class'> I want this be another sentence </span></div>";
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<div class="my-class"><span> I want this be a sentence </span><span class="my-another-class"> I want this be another sentence </span></div>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'div',
+          annotations: { customClass: ['my-class'] },
+          children: [
+            {
+              id: expect.anything(),
+              type: 'paragraph',
+              annotations: { internalWrapper: true },
+              nodes: [
+                { id: expect.anything(), text: ' I want this be a sentence ', type: 'text' },
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: { customClass: ['my-another-class'] },
+                  text: ' I want this be another sentence ',
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+    it('should not match parent style', () => {
+      const sourceCode = `<p style="font-weight: bold;font-style: italic;text-decoration: line-through;color: pink;text-shadow: 2px 2px 5px gray;font-size: 24px;">mix</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p style="font-weight: bold;font-style: italic;text-decoration: line-through;color: pink;text-shadow: 2px 2px 5px gray;font-size: 24px;">mix</p>`);
+    });
+    it('should not match parent link style', () => {
+      const sourceCode = `<a id="readMoreLink" class="link read-more" href="https://example.com" style="color: #2980b9; text-decoration: underline;">Read more</a>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<a id="readMoreLink" href="https://example.com" class="link read-more" style="color: #2980b9; text-decoration: underline;">Read more</a>`);
+    });
+    it('should not match code style', () => {
+      const sourceCode = `<p>This is <code>code text</code>.</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              annotations: { plainText: true },
+              text: 'This is ',
+              type: 'text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'code text',
+              annotations: { code: true },
+            },
+            { id: expect.anything(), type: 'text', annotations: { plainText: true }, text: '.' },
+          ],
+        },
+      ]);
+    });
+    it('should preserve plain text nodes correctly', () => {
+      const sourceCode = `<p>Plain text <span>with span</span> and <strong>bold</strong> text.</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      const htmlOutput = content.toHtml({ autoMatchFormat: false });
+      expect(htmlOutput).toEqual(sourceCode);
+      const jsonData = content.toJSON();
+      expect(jsonData).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              text: 'Plain text ',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+            { id: expect.anything(), text: 'with span', type: 'text' },
+            {
+              id: expect.anything(),
+              text: ' and ',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+            {
+              id: expect.anything(),
+              text: 'bold',
+              type: 'text',
+              annotations: {
+                inlineHtml: {
+                  htmlTag: 'strong',
+                },
+                plainText: true,
+              },
+            },
+            {
+              id: expect.anything(),
+              text: ' text.',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+          ],
+        },
+      ]);
+      expect(VegaRTEContent.fromJSON(jsonData, { autoMatchFormat: false }).toHtml({
+        autoMatchFormat: false,
+      })).toEqual(htmlOutput);
+    });
+    it('should convert the html block to RTEContentBlock', () => {
+      const sourceCode = `
+				<div class='custom-container'>
+					<p class='custom-p'>
+						<span>Google Chrome is a free, </span><span style='font-weight: 700;'>open-source</span><span> web browser developed by Google, released in 2008.</span>
+					</p>
+				</div>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'div',
+          annotations: { customClass: ['custom-container'] },
+          children: [
+            {
+              id: expect.anything(),
+              type: 'paragraph',
+              annotations: { customClass: ['custom-p'] },
+              nodes: [
+                { id: expect.anything(), type: 'text', text: 'Google Chrome is a free, ' },
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  text: 'open-source',
+                  annotations: { bold: true, customStyle: { fontWeight: '700' } },
+                },
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  text: ' web browser developed by Google, released in 2008.',
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert the html block with RTE node as expect', () => {
+      const sourceCode = `<section>111<span> 222 </span>333</section>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'paragraph',
+              annotations: { internalWrapper: true },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: { plainText: true },
+                  text: '111',
+                },
+                { id: expect.anything(), type: 'text', text: ' 222 ' },
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: { plainText: true },
+                  text: '333',
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+    });
+    it('should convert the html block with an internal block wrapper to include the text nodes', () => {
+      const sourceCode = `<section>111<span> 222 </span>333</section>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'paragraph',
+              annotations: { internalWrapper: true },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: { plainText: true },
+                  text: '111',
+                },
+                { id: expect.anything(), type: 'text', text: ' 222 ' },
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: { plainText: true },
+                  text: '333',
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+    });
+    it('should convert the img element with an internal block wrapper', () => {
+      const sourceCode = `<section><img src="mocked-url"></section><div><img src="mocked-url-2"></div><img src="mocked-url-3">`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'image',
+              annotations: { internalWrapper: true },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  type: 'image',
+                  url: 'mocked-url',
+                  annotations: { customAttribute: { src: 'mocked-url' }, size: undefined },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'image',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'image',
+              url: 'mocked-url-2',
+              annotations: { customAttribute: { src: 'mocked-url-2' }, size: undefined },
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'image',
+          annotations: { internalWrapper: true },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'image',
+              url: 'mocked-url-3',
+              annotations: { customAttribute: { src: 'mocked-url-3' }, size: undefined },
+            },
+          ],
+        },
+      ]);
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+    });
+    it('should show the internal block wrapper if the block has annotations', () => {
+      const data = [
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'paragraph',
+              annotations: { internalWrapper: true },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  type: 'text',
+                  annotations: {
+                    plainText: true,
+                    link: { href: 'https://example.com', groupKey: 'link-group-1' },
+                  },
+                  text: 'link',
+                },
+              ],
+            },
+          ],
+        },
+      ];
+      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<section><a href="https://example.com" target="_blank">link</a></section>`);
+      data[0].children[0].annotations = { textAlign: 'center' };
+      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<section><p style="text-align: center;"><a href="https://example.com" target="_blank">link</a></p></section>`);
+    });
+    it('should covert nested html block as expect', () => {
+      const sourceCode = `<section><nav>React<span> Vue </span>Angular</nav></section>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: expect.anything(),
+              type: 'html-block',
+              htmlTag: 'nav',
+              children: [
+                {
+                  id: expect.anything(),
+                  type: 'paragraph',
+                  annotations: { internalWrapper: true },
+                  nodes: [
+                    {
+                      id: expect.anything(),
+                      type: 'text',
+                      annotations: { plainText: true },
+                      text: 'React',
+                    },
+                    { id: expect.anything(), type: 'text', text: ' Vue ' },
+                    {
+                      id: expect.anything(),
+                      type: 'text',
+                      annotations: { plainText: true },
+                      text: 'Angular',
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+    });
+    it('should not covert the unsupported html', () => {
+      const sourceCode = `<section><abc>test </abc>123</section>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<section>test 123</section>`);
+    });
+    it('should convert as expect if it is internal element', () => {
+      const sourceCode = `<h1>123</h1>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<h1>123</h1>`);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'heading-1',
+          nodes: [
+            {
+              id: expect.anything(),
+              text: '123',
+              type: 'text',
+              annotations: { plainText: true },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert nested inline html node as expect', () => {
+      const sourceCode = `<p><b><u><s>111</s></u></b></p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: '111',
+              annotations: {
+                plainText: true,
+                inlineHtml: {
+                  htmlTag: 'b',
+                  child: {
+                    htmlTag: 'u',
+                    child: {
+                      htmlTag: 's',
+                    },
+                  },
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert the inline html node with custom attrs', () => {
+      const sourceCode = `<p><b id="b-element" class="my-class-1 my-class-2" style="color: red; background: yellow;">text</b></p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'text',
+              annotations: {
+                plainText: true,
+                inlineHtml: {
+                  htmlTag: 'b',
+                  customAttribute: { id: 'b-element' },
+                  customClass: ['my-class-1', 'my-class-2'],
+                  customStyle: { background: 'yellow', color: 'red' },
+                },
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert the inline html node with text node as expect', () => {
+      const sourceCode = `<p>Do not forget to buy <mark>milk</mark> today.</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: { plainText: true },
+              text: 'Do not forget to buy ',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'milk',
+              annotations: { inlineHtml: { htmlTag: 'mark' }, plainText: true },
+            },
+            {
+              id: expect.anything(),
+              annotations: { plainText: true },
+              type: 'text',
+              text: ' today.',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert the span as inline html when it includes not text node', () => {
+      const sourceCode = `<p>This is a <span style="color: red;"><b>red</b></span> word.</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'This is a ',
+              annotations: { plainText: true },
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              text: 'red',
+              annotations: {
+                plainText: true,
+                inlineHtml: {
+                  child: { htmlTag: 'b' },
+                  customStyle: { color: 'red' },
+                  htmlTag: 'span',
+                },
+              },
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: { plainText: true },
+              text: ' word.',
+            },
+          ],
+        },
+      ]);
+    });
+    it('should convert the supported block html as expected', () => {
+      const sourceCode = `<header>
+    <h1>HEADER Example</h1>
+  </header>
+  <nav>
+    <ul>
+      <li>NAV Item 1</li>
+      <li>NAV Item 2</li>
+    </ul>
+  </nav>
+  <main>
+    <article>
+      <header>
+        <h2>ARTICLE Title (HX)</h2>
+      </header>
+      <section>
+        <h3>SECTION Heading</h3>
+        <p>This is inside a section.</p>
+      </section>
+      <aside>
+        <p>This is an ASIDE.</p>
+      </aside>
+      <footer>
+        <p>ARTICLE Footer</p>
+      </footer>
+    </article>
+    <address>ADDRESS: 123 Main St, City, Country</address>
+    <blockquote cite="https://example.com">BLOCKQUOTE: “This is a quoted text.”ote>
+    <details>
+      <summary>DETAILS / SUMMARY Example</summary>
+      <p>Extra information shown when expanded.</p>
+    </details>
+    <dl>
+      <dt>DT: Term</dt>
+      <dd>DD: Description of the term.</dd>
+    </dl>
+    <form>
+      <fieldset>
+        <legend>LEGEND Example</legend>
+        <label>
+          INPUT: <input type="text" placeholder="Enter text">
+        </label>
+        <button type="submit">BUTTON Submit</button>
+      </fieldset>
+    </form>
+    <pre>
+PRE Example:
+Line 1
+  Line 2
+    Line 3
+    </pre>
+    <hr>
+    <figure>
+      <img src="https://via.placeholder.com/150" alt="Placeholder image">
+      <figcaption>FIGCAPTION Example</figcaption>
+    </figure>
+    <table border="1">
+      <caption>CAPTION Example</caption>
+      <colgroup>
+        <col span="1" style="background: #eee;">
+        <col span="1" style="background: #ddd;">
+      </colgroup>
+      <thead>
+        <tr>
+          <th>TH 1</th>
+          <th>TH 2</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>TD A</td>
+          <td>TD B</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <td colspan="2">TFOOT Example</td>
+        </tr>
+      </tfoot>
+    </table>
+  </main>
+  <footer>
+    <p>FOOTER Example</p>
+  </footer>
+`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(CodeFormatter.format(content.toHtml({ autoMatchFormat: false }))).toMatchSnapshot();
+    });
+    it('should convert the supported inline html as expected', () => {
+      const sourceCode = `<p>
+		      <abbr>Abbreviation</abbr>
+		      <audio src="audio.mp3"></audio>
+		      <b>Bold</b>
+		      <bdi>BDI</bdi>
+		      <bdo dir="rtl">BDO</bdo>
+		      <cite>Citation</cite>
+		      <del>Deleted</del>
+		      <dfn>Definition</dfn>
+		      <embed src="embed.mp4"></embed>
+		      <em>Emphasis</em>
+		      <i>Italic</i>
+		      <ins>Inserted</ins>
+		      <kbd>Keyboard</kbd>
+		      <mark>Marked</mark>
+		      <meter value="0.5">Meter</meter>
+		      <output>Output</output>
+		      <progress value="50" max="100">Progress</progress>
+		      <q>Quote</q>
+		      <s>Strikethrough</s>
+		      <small>Small</small>
+		      <span></span>
+		      <span>Span</span>
+		      <strong>Strong</strong>
+		      <sub>Subscript</sub>
+		      <sup>Superscript</sup>
+		      <time>Time</time>
+		      <u>Underline</u>
+		      <var>Variable</var>
+		      <video src="video.mp4"></video>
+		    </p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toMatchSnapshot();
+    });
+    it('should convert the code as inline html', () => {
+      const sourceCode = `<code>1111</code>
+      <code>
+        <b>222</b>
+      </code>
+      <b>
+        <code>333</code>
+      </b>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toMatchSnapshot();
+    });
+    it('should convert the link that allow plain text', () => {
+      const sourceCode = `<p><a href="https://example.com">Example <b>link</b></a></p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+      expect(content.toJSON()).toEqual([
+        {
+          id: expect.anything(),
+          nodes: [
+            {
+              annotations: {
+                plainText: true,
+                link: {
+                  customAttribute: { href: 'https://example.com' },
+                  groupKey: expect.anything(),
+                  href: 'https://example.com',
+                },
+              },
+              id: expect.anything(),
+              text: 'Example ',
+              type: 'text',
+            },
+            {
+              annotations: {
+                plainText: true,
+                inlineHtml: { htmlTag: 'b' },
+                link: {
+                  customAttribute: { href: 'https://example.com' },
+                  groupKey: expect.anything(),
+                  href: 'https://example.com',
+                },
+              },
+              id: expect.anything(),
+              text: 'link',
+              type: 'text',
+            },
+          ],
+          type: 'paragraph',
+        },
+      ]);
+    });
+    // TODO: will be tracked in https://gethired.atlassian.net/browse/VD-7062
+    it('should split the multiple nested inline html', () => {
+      const sourceCode = `<p><b><s>111</s><u>222</u></b></p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<p><b><s>111</s></b><b><u>222</u></b></p>`);
+    });
+    it('should convert li elements into a list block by default', () => {
+      const sourceCode = '<li>Item 1</li><li>Item 2</li><li>Item 3</li>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
+    });
+    it('should convert all the ul children to list item', () => {
+      const sourceCode = '<ul><li>Item 1</li>Item 2<li>Item 3</li></ul>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>`);
+    });
+    it('should correctly handle both standalone li elements and li elements with ul/ol', () => {
+      const sourceCode = `<li>111</li><li>222</li><li>333</li><ol>444</ol><p>555</p>`;
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>111</li><li>222</li><li>333</li></ul><ol><li>444</li></ol><p>555</p>`);
+    });
+    it('should handle non-contiguous li elements as separate lists', () => {
+      const sourceCode = '<li>Item 1</li><p>Middle</p>Plain text<li>Item 2</li><li>Item 3</li>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(`<ul><li>Item 1</li></ul><p>Middle</p>Plain text<ul><li>Item 2</li><li>Item 3</li></ul>`);
+    });
+    it('should not merge bold annotation with custom attr', () => {
+      const sourceCode = '<span style="font-weight: bold;">bold text</span>';
+      const content = VegaRTEContent.fromHtml(sourceCode, { autoMatchFormat: false });
+      expect(content.toHtml({ autoMatchFormat: false })).toEqual(sourceCode);
+    });
+    it('should not remove blank space between elements', () => {
+      const sourceCode = '<p><span>A</span><span> </span><span>paragraph</span></p>';
+      const content = VegaRTEContent.fromHtml(sourceCode);
+      const paragraph = content.children[0];
+      expect(paragraph.children[1].text).toEqual(' ');
+    });
+  });
+  describe('fromJSON', () => {
+    it('should translate the paragraph as expect JSON', () => {
+      const content = [
+        {
+          id: '1',
+          type: 'paragraph',
+          nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
+        },
+      ];
+      expect(VegaRTEContent.fromJSON(content).toJSON()).toEqual([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [{ id: '1-1', text: 'This is a paragraph', type: 'text' }],
+        },
+      ]);
+      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: true }).toJSON()).toEqual([
+        {
+          id: '1',
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [{ id: '1-1', text: 'This is a paragraph', type: 'text' }],
+        },
+      ]);
+      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toJSON()).toEqual([
+        {
+          id: '1',
+          type: 'paragraph',
+          nodes: [{ id: '1-1', text: 'This is a paragraph', type: 'text' }],
+        },
+      ]);
+    });
+    it('should translate the paragraph as expect html', () => {
+      const content = [
+        {
+          id: '1',
+          type: 'paragraph',
+          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({ autoMatchFormat: false })).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, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
+      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml({
+        autoMatchFormat: false,
+      })).toEqual(`<p><span>This is a paragraph</span></p>`);
+    });
+    it('should translate the html block as expect html', () => {
+      const content = [
+        {
+          id: '1753954267610',
+          type: 'html-block',
+          htmlTag: 'section',
+          children: [
+            {
+              id: '1753954266383',
+              type: 'heading-1',
+              nodes: [
+                {
+                  id: '1753954273029',
+                  type: 'text',
+                  text: 'WWF',
+                },
+              ],
+            },
+            {
+              id: '1753954263572',
+              type: 'paragraph',
+              nodes: [
+                {
+                  id: '1753954266500',
+                  type: 'text',
+                  text: 'The World Wide Fund for Nature (WWF) is....',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          id: '1753954266216',
+          type: 'html-block',
+          htmlTag: 'article',
+          children: [
+            {
+              id: '1753954270592',
+              type: 'heading-1',
+              nodes: [
+                {
+                  id: '1753954272730',
+                  type: 'text',
+                  text: 'Google Chrome',
+                },
+              ],
+            },
+            {
+              id: '1753954265150',
+              type: 'paragraph',
+              nodes: [
+                {
+                  id: '1753954272365',
+                  type: 'text',
+                  text: 'Google Chrome is a free, open-source web browser developed by Google, released in 2008.',
+                },
+              ],
+            },
+          ],
+        },
+      ];
+      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toMatchSnapshot();
+      expect(VegaRTEContent.fromJSON(content).toHtml()).toMatchSnapshot();
+    });
+  });
 });