@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -4,6 +4,7 @@ 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';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -285,4 +286,1796 @@ 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: {
+                bold: false,
+              },
+              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: {
+                code: false,
+                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: {
+                code: false,
+                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: {
+                code: false,
+                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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    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,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              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="color: red; 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);
+      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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              annotations: {
+                bold: true,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              id: expect.anything(),
+              text: 'Bold text',
+              type: 'text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: true,
+                strikethrough: false,
+                underline: false,
+              },
+              text: 'Italic text',
+            },
+            {
+              id: expect.anything(),
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: true,
+              },
+              text: 'Underline text',
+              type: 'text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: true,
+                underline: false,
+              },
+              text: 'Strikethrough text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: true,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              text: 'Code text',
+            },
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                textColor: 'green',
+                underline: false,
+                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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: { textStyle: 'paragraph' },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'List item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textAlign: 'left', textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              text: 'Left align',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textAlign: 'right', textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              text: 'Right align',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: {
+            indent: 1,
+            textAlign: 'left',
+            textStyle: 'paragraph',
+            customStyle: {
+              marginLeft: '16px',
+            },
+          },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+              text: 'More indent 2',
+            },
+          ],
+        },
+        {
+          id: expect.anything(),
+          type: 'paragraph',
+          annotations: { textStyle: 'paragraph' },
+          nodes: [
+            {
+              id: expect.anything(),
+              type: 'text',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                link: {
+                  groupKey: expect.anything(),
+                  href: 'https://www.google.com',
+                  customAttribute: {
+                    'href': 'https://www.google.com',
+                    'target': '_blank',
+                    'id': 'a',
+                    'data-link': 'link',
+                  },
+                  customStyle: { color: 'red', fontSize: '8px', display: 'block' },
+                  customClass: ['classA', 'classB'],
+                },
+                strikethrough: false,
+                textColor: 'red',
+                underline: false,
+              },
+              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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    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: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customAttribute: {
+                  id: 'li2-element',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    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: {
+                bold: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customClass: ['li2-class'],
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              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',
+              annotations: {
+                bold: false,
+                code: false,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+              },
+            },
+          ],
+        },
+      ]);
+    });
+    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,
+                italic: false,
+                strikethrough: false,
+                underline: false,
+                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',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+            {
+              id: expect.anything(),
+              type: 'list-item',
+              annotations: {
+                textStyle: 'paragraph',
+                customStyle: {
+                  padding: '20px',
+                },
+              },
+              nodes: [
+                {
+                  id: expect.anything(),
+                  text: 'Item 2',
+                  type: 'text',
+                  annotations: {
+                    bold: false,
+                    code: false,
+                    italic: false,
+                    strikethrough: false,
+                    underline: false,
+                  },
+                },
+              ],
+              children: [],
+            },
+          ],
+          id: expect.anything(),
+          type: 'bullet-list',
+          annotations: {
+            customStyle: {
+              padding: '20px',
+            },
+          },
+        },
+      ]);
+    });
+  });
 });