@heartlandone/vega 2.79.0 → 2.80.0

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

@@ -1,3375 +0,0 @@
-import { VegaRTEContent } from '../../dto/content-state';
-import { HTMLContentCleaner } from '../../slimmers/controllers/html-cleaner';
-import { RTETextBlock } from '../../dto/blocks/text-block';
-import { RTEImageBlock } from '../../dto/blocks/image-block';
-import { RTEListBlock } from '../../dto/blocks/list-block';
-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';
-import { setVegaLogLevel } from '../../../../utils/log';
-import { RTEHtmlBlock } from '../../dto/blocks/html-block';
-describe('content state', () => {
-  it('fromJSON should work as expect', () => {
-    expect(() => VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'error-type',
-        nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-      },
-    ])).toThrowError('[Vega] Unknown block type: error-type');
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-      },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      { id: '2', type: 'title', nodes: [{ id: '2-1', type: 'text', text: 'This is a title' }] },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '3',
-        type: 'subtitle',
-        nodes: [{ id: '3-1', type: 'text', text: 'This is a subtitle' }],
-      },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '4',
-        type: 'heading-1',
-        nodes: [{ id: '4-1', type: 'text', text: 'This is a heading-1' }],
-      },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '5',
-        type: 'heading-2',
-        nodes: [{ id: '5-1', type: 'text', text: 'This is a heading-2' }],
-      },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '6',
-        type: 'heading-3',
-        nodes: [{ id: '6-1', type: 'text', text: 'This is a heading-3' }],
-      },
-    ]).children[0] instanceof RTETextBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '7',
-        type: 'image',
-        nodes: [{ id: '7-1', type: 'image', url: 'mock-url' }],
-      },
-    ]).children[0] instanceof RTEImageBlock).toBeTruthy();
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '8',
-        type: 'bullet-list',
-        blocks: [
-          {
-            id: '8-1',
-            type: 'list-item',
-            nodes: [
-              {
-                id: '1-1-1-1-1',
-                type: 'text',
-                text: 'This is a bullet-list 3-1.',
-              },
-            ],
-          },
-        ],
-      },
-    ]).children[0] instanceof RTEListBlock).toBeTruthy();
-  });
-  it('toJSON method should work as expect', () => {
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-      },
-    ]).toJSON()).toEqual([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [{ id: '1-1', text: 'This is a paragraph', type: 'text' }],
-        annotations: {
-          textStyle: 'paragraph',
-        },
-      },
-    ]);
-    expect(VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [
-          { id: '1-1', type: 'text', text: 'This is a paragraph', annotations: { bold: true } },
-        ],
-        annotations: { textAlign: 'right', indent: 2 },
-      },
-    ]).toJSON()).toEqual([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [
-          { id: '1-1', text: 'This is a paragraph', type: 'text', annotations: { bold: true } },
-        ],
-        annotations: { textAlign: 'right', indent: 2, textStyle: 'paragraph' },
-      },
-    ]);
-  });
-  it('clone method should work as expect', () => {
-    const contentState = VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-      },
-    ]);
-    const clonedContentState = contentState.clone();
-    expect(clonedContentState).not.toBe(contentState);
-    expect(clonedContentState).toEqual(contentState);
-  });
-  it('should deep clone content state', () => {
-    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: ', 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' },
-                },
-              },
-            },
-          },
-        ],
-      },
-    ]);
-    const clonedContentState = contentState.clone(true);
-    expect(clonedContentState).not.toBe(contentState);
-    expect(clonedContentState).toEqual(contentState);
-    const block = contentState.children[0];
-    const clonedBlock = clonedContentState.children[0];
-    expect(clonedBlock).toEqual(block);
-    expect(clonedBlock).not.toBe(block);
-    const node = block.children[0];
-    const clonedNode = clonedBlock.children[0];
-    expect(clonedNode).toEqual(node);
-    expect(clonedNode).not.toBe(node);
-    const blockAnnotations = block.annotationMap;
-    const clonedBlockAnnotations = clonedBlock.annotationMap;
-    expect(clonedBlockAnnotations).toEqual(blockAnnotations);
-    expect(clonedBlockAnnotations).not.toBe(blockAnnotations);
-    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).toEqual(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
-    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).not.toBe(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
-    const nodeAnnotations = node.annotationMap;
-    const clonedNodeAnnotations = clonedNode.annotationMap;
-    expect(clonedNodeAnnotations).toEqual(nodeAnnotations);
-    expect(clonedNodeAnnotations).not.toBe(nodeAnnotations);
-    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
-    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
-  });
-  it('the parent property should set as properly when create VegaRTEContent', () => {
-    const contentState = VegaRTEContent.fromJSON([
-      {
-        id: '1',
-        type: 'paragraph',
-        nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-      },
-      {
-        id: '2',
-        type: 'image',
-        nodes: [{ id: '2-1', type: 'image', url: 'image url' }],
-      },
-      {
-        id: '3',
-        type: 'bullet-list',
-        blocks: [
-          {
-            id: '3-1',
-            type: 'list-item',
-            nodes: [],
-            children: [
-              {
-                id: '4-1',
-                type: 'bullet-list',
-                blocks: [{ id: '4-1', type: 'list-item', nodes: [] }],
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-    const paragraphBlock = contentState.children[0];
-    const imageBlock = contentState.children[1];
-    const listBlock = contentState.children[2];
-    const listItemBlock = listBlock.children[0];
-    const nestedListBlock = listItemBlock.nestList[0];
-    const nestedListItemBlock = nestedListBlock.children[0];
-    expect(paragraphBlock.parent).toEqual(contentState);
-    expect(imageBlock.parent).toEqual(contentState);
-    expect(listBlock.parent).toEqual(contentState);
-    expect(listItemBlock.parent).toEqual(listBlock);
-    expect(nestedListBlock.parent).toEqual(listItemBlock);
-    expect(nestedListItemBlock.parent).toEqual(nestedListBlock);
-  });
-  describe('findNodeById', () => {
-    let content;
-    beforeAll(() => {
-      content = VegaRTEContent.fromJSON([
-        {
-          id: '1',
-          type: 'paragraph',
-          nodes: [
-            { id: '1-1', type: 'text', text: 'This ' },
-            { id: '1-2', type: 'text', text: 'is a ' },
-            { id: '1-3', type: 'text', text: 'paragraph.' },
-          ],
-        },
-        {
-          id: '2',
-          type: 'image',
-          nodes: [{ id: '2-1', type: 'image', url: 'img.png' }],
-        },
-        {
-          id: '3',
-          type: 'bullet-list',
-          blocks: [
-            {
-              id: '3-1',
-              type: 'list-item',
-              nodes: [{ id: '3-1-1', type: 'text', text: 'List item 1' }],
-              children: [
-                {
-                  id: '3-2',
-                  type: 'number-list',
-                  blocks: [
-                    {
-                      id: '3-2-1',
-                      type: 'list-item',
-                      nodes: [
-                        { id: '3-2-1-1', type: 'text', text: 'Nested list item' },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ]);
-    });
-    it('should find the node in text block', () => {
-      expect(content.findNodeById('1-2').toJSON()).toEqual({ id: '1-2', type: 'text', text: 'is a ' });
-    });
-    it('should find the node in image block', () => {
-      expect(content.findNodeById('2-1').toJSON()).toEqual({
-        id: '2-1',
-        type: 'image',
-        url: 'img.png',
-        annotations: {
-          size: 'md',
-        },
-      });
-    });
-    it('should find the node in list item', () => {
-      expect(content.findNodeById('3-1-1').toJSON()).toEqual({
-        id: '3-1-1',
-        type: 'text',
-        text: 'List item 1',
-      });
-    });
-    it('should find the node in nested list item', () => {
-      expect(content.findNodeById('3-2-1-1').toJSON()).toEqual({
-        id: '3-2-1-1',
-        type: 'text',
-        text: 'Nested list item',
-      });
-    });
-    it('should return null for non-existent node', () => {
-      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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-top: 0px; margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-    });
-    it('should convert text node with annotations to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span> text</span></p>`);
-    });
-    it('should convert text block with annotations to HTML with inline styles correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;text-decoration: underline;">This is a paragraph</span></p>`);
-    });
-    it('should convert image block to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
-    });
-    it('should convert number list block to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ol>`);
-    });
-    it('should convert code block to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://example.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a link</span></a></p>`);
-    });
-    it('should convert a complex value to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 40px;font-weight: 500;"><span style="font-weight: 700;">Title</span></div><div style="font-family: Inter;font-size: 28px;line-height: 32px;min-height: 32px;font-weight: 500;"><span>Subtitle</span></div><h1 style="font-family: Inter;font-size: 22px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 1</span></h1><h2 style="font-family: Inter;font-size: 20px;line-height: 24px;min-height: 24px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 2</span></h2><h3 style="font-family: Inter;font-size: 18px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Heading 3</span></h3><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Paragraph</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-weight: 700;">Bold text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="font-style: italic;">Italic text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Underline text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="text-decoration: underline;">Strikethrough text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><code style="font-family: Roboto Mono;white-space: pre-wrap;">Code text</code></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span style="color: #BD2947;">Color text</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: left;"><span>Left align</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span>Right align</span></p><ul style="padding-left: 8px;margin-left: 16px;"><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>list item 2</span></li></ul><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;margin-left: 32px;"><span>More indent</span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="https://www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>Link text</span></a></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p><p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span></span></p>`);
-    });
-    it('should convert paragraph with custom attributes to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500; margin-top: 0px; margin-bottom: 0px;"><span id="span-element" dir="dir-span">This is a paragraph</span></p>`);
-    });
-    it('should convert text node with custom attributes to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span id="text1" style="font-weight: 700;">This is a paragraph.</span><code id="text2" style="font-family: Roboto Mono;white-space: pre-wrap;"> code</code><span id="text3"> text</span></p>`);
-    });
-    it('should convert bullet list block with custom attributes to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 1</span></li><li id="list2" style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>Item 2</span></li></ul>`);
-    });
-    it('should convert paragraph with custom class to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 700; margin-top: 0px; margin-bottom: 0px;"><span style="font-weight: 700">This is a paragraph</span></p>`);
-    });
-    it('should convert text node with custom style to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;text-align: right;"><span style="font-weight: 700;padding: 20px;">This is a paragraph.</span><code style="font-family: Roboto Mono;white-space: pre-wrap;padding: 30px;"> code</code><span style="padding: 40px;"> text</span></p>`);
-    });
-    it('should convert bullet list block with custom style to HTML correctly', () => {
-      const contentState = VegaRTEContent.fromJSON([
-        {
-          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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 40px;"><span>Item 1</span></li><li style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;padding: 50px;"><span>Item 2</span></li></ul>`);
-    });
-    it('should log warning when call toHtml with deprecated parameter', () => {
-      setVegaLogLevel('warn');
-      console.warn = jest.fn();
-      const content = VegaRTEContent.fromJSON([
-        {
-          id: '1',
-          type: 'paragraph',
-          nodes: [{ id: '1-1', type: 'text', text: 'This is a paragraph' }],
-        },
-      ]);
-      content.toHtml({ autoMatchFormat: false });
-      expect(console.warn).toBeCalledTimes(1);
-      expect(console.warn).toHaveBeenCalledWith('%c[Vega]', 'font-weight: bold', "The 'options' parameter in toHtml method is deprecated and will be removed in the future.");
-    });
-  });
-  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()).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()).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()).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()).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()).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()).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()).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()).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()).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()).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();
-      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()).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()).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()).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()).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()).toEqual(`<section><a href="https://example.com">link</a></section>`);
-      data[0].children[0].annotations = { textAlign: 'center' };
-      expect(VegaRTEContent.fromJSON(data, { autoMatchFormat: false }).toHtml()).toEqual(`<section><p style="text-align: center;"><a href="https://example.com">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()).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()).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()).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()).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()).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()).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()).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.”</blockquote>
-    <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())).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()).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()).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()).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()).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()).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()).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()).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()).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()).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(' ');
-    });
-    it('should convert empty value as expect', async () => {
-      const emptyContent = VegaRTEContent.fromHtml('', { autoMatchFormat: false });
-      expect(emptyContent.toHtml()).toEqual('');
-      expect(emptyContent.toJSON()).toEqual([]);
-    });
-    it('should convert the table with children elements to html block DTOs', () => {
-      const html = `<table>
-				<caption>Table Caption</caption>
-				<thead>
-					<tr>
-						<th>Header 1</th>
-						<th>Header 2</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>Cell 1</td>
-						<td>Cell 2</td>
-					</tr>
-					<tr>
-						<td>Cell 3</td>
-						<td>Cell 4</td>
-					</tr>
-				</tbody>
-			</table>`;
-      const value = VegaRTEContent.fromHtml(html, { autoMatchFormat: false });
-      const table = value.children[0];
-      const caption = table.children[0];
-      const thead = table.children[1];
-      const tbody = table.children[2];
-      const theadRow = thead.children[0];
-      const theadCell = theadRow.children[0];
-      const tbodyRow = tbody.children[0];
-      const tbodyCell = tbodyRow.children[0];
-      expect(table).toBeInstanceOf(RTEHtmlBlock);
-      expect(caption).toBeInstanceOf(RTEHtmlBlock);
-      expect(thead).toBeInstanceOf(RTEHtmlBlock);
-      expect(tbody).toBeInstanceOf(RTEHtmlBlock);
-      expect(theadRow).toBeInstanceOf(RTEHtmlBlock);
-      expect(theadCell).toBeInstanceOf(RTEHtmlBlock);
-      expect(tbodyRow).toBeInstanceOf(RTEHtmlBlock);
-      expect(tbodyCell).toBeInstanceOf(RTEHtmlBlock);
-      expect(value.toJSON()).toEqual([
-        {
-          id: expect.anything(),
-          type: 'html-block',
-          htmlTag: 'table',
-          children: [
-            {
-              id: expect.anything(),
-              type: 'html-block',
-              htmlTag: 'caption',
-              children: [
-                {
-                  id: expect.anything(),
-                  annotations: {
-                    internalWrapper: true,
-                  },
-                  type: 'paragraph',
-                  nodes: [
-                    {
-                      id: expect.anything(),
-                      annotations: {
-                        plainText: true,
-                      },
-                      type: 'text',
-                      text: 'Table Caption',
-                    },
-                  ],
-                },
-              ],
-            },
-            {
-              id: expect.anything(),
-              type: 'html-block',
-              htmlTag: 'thead',
-              children: [
-                {
-                  id: expect.anything(),
-                  type: 'html-block',
-                  htmlTag: 'tr',
-                  children: [
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'th',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Header 1',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'th',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Header 2',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-            {
-              id: expect.anything(),
-              type: 'html-block',
-              htmlTag: 'tbody',
-              children: [
-                {
-                  id: expect.anything(),
-                  type: 'html-block',
-                  htmlTag: 'tr',
-                  children: [
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'td',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Cell 1',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'td',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Cell 2',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  ],
-                },
-                {
-                  id: expect.anything(),
-                  type: 'html-block',
-                  htmlTag: 'tr',
-                  children: [
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'td',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Cell 3',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                    {
-                      id: expect.anything(),
-                      type: 'html-block',
-                      htmlTag: 'td',
-                      children: [
-                        {
-                          id: expect.anything(),
-                          annotations: {
-                            internalWrapper: true,
-                          },
-                          type: 'paragraph',
-                          nodes: [
-                            {
-                              id: expect.anything(),
-                              annotations: {
-                                plainText: true,
-                              },
-                              type: 'text',
-                              text: 'Cell 4',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  ],
-                },
-              ],
-            },
-          ],
-        },
-      ]);
-      expect(value.toHtml()).toEqualHtml(html);
-    });
-  });
-  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;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;min-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
-      expect(VegaRTEContent.fromJSON(content, { autoMatchFormat: false }).toHtml()).toEqual(`<p><span>This is a paragraph</span></p>`);
-    });
-    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();
-    });
-    it('should getLastNode work properly', () => {
-      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....',
-                },
-              ],
-            },
-          ],
-        },
-      ];
-      let instance = VegaRTEContent.fromJSON([]);
-      expect(instance.getLastNode()).toBeNull();
-      instance = VegaRTEContent.fromJSON(content);
-      expect(instance.getLastNode().toJSON()).toEqual({
-        id: '1753954266500',
-        type: 'text',
-        text: 'The World Wide Fund for Nature (WWF) is....',
-      });
-    });
-  });
-  describe('cleanHtmlWhitespace', () => {
-    const cleaner = new HTMLContentCleaner();
-    const cleanHtmlWhitespace = (html) => {
-      return cleaner.clean(html);
-    };
-    it('should inline a table by removing all whitespace between tags', () => {
-      const input = `<table style="width: 400px; border-collapse: collapse;">   <thead>     <tr>       ` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>       ` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>       ` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>     ` +
-        `</tr>   </thead>   <tbody>     <tr>       <td style="padding: 12px;">Cell 1-1</td>       ` +
-        `<td style="padding: 12px;">Cell 1-2</td>       <td style="padding: 12px;">Cell 1-3</td>     ` +
-        `</tr>     <tr>       <td style="padding: 12px;">Cell 2-1</td>       <td style="padding: 12px;">Cell 2-2</td>       ` +
-        `<td style="padding: 12px;">Cell 2-3</td>     </tr>     <tr>       <td style="padding: 12px;">Cell 3-1</td>       ` +
-        `<td style="padding: 12px;">Cell 3-2</td>       <td style="padding: 12px;">Cell 3-3</td>     ` +
-        `</tr>   </tbody> </table>`;
-      const expected = `<table style="width: 400px; border-collapse: collapse;"><thead><tr>` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 1</th>` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 2</th>` +
-        `<th style="padding: 12px; text-align: left; font-weight: bold;">Header 3</th>` +
-        `</tr></thead><tbody><tr>` +
-        `<td style="padding: 12px;">Cell 1-1</td>` +
-        `<td style="padding: 12px;">Cell 1-2</td>` +
-        `<td style="padding: 12px;">Cell 1-3</td>` +
-        `</tr><tr>` +
-        `<td style="padding: 12px;">Cell 2-1</td>` +
-        `<td style="padding: 12px;">Cell 2-2</td>` +
-        `<td style="padding: 12px;">Cell 2-3</td>` +
-        `</tr><tr>` +
-        `<td style="padding: 12px;">Cell 3-1</td>` +
-        `<td style="padding: 12px;">Cell 3-2</td>` +
-        `<td style="padding: 12px;">Cell 3-3</td>` +
-        `</tr></tbody></table>`;
-      expect(cleanHtmlWhitespace(input)).toBe(expected);
-    });
-    it('should remove \\n\\t after opening tag and before closing tag', () => {
-      const input = '<p>\n\t <span>test</span>\n\t </p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p><span>test</span></p>');
-    });
-    it('should remove all \\n and \\t characters', () => {
-      const input = '<p>\n\ttest\n</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>test</p>');
-    });
-    it('should preserve space between matching tags', () => {
-      const input = '<span> </span>';
-      expect(cleanHtmlWhitespace(input)).toBe('<span> </span>');
-    });
-    it('should preserve space with text between matching tags', () => {
-      const input = '<span> test </span>';
-      expect(cleanHtmlWhitespace(input)).toBe('<span> test </span>');
-    });
-    it('should preserve multiple spaces between matching tags', () => {
-      const input = '<span>  </span>';
-      expect(cleanHtmlWhitespace(input)).toBe('<span>  </span>');
-    });
-    it('should remove whitespace between opening tags', () => {
-      const input = '<div>\n\t<p></p></div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><p></p></div>');
-    });
-    it('should remove \\n\\t after opening tag but preserve regular spaces', () => {
-      const input = '<p>\n\t  Hello</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>  Hello</p>');
-    });
-    it('should remove whitespace between multiple closing tags', () => {
-      const input = '<table><tbody><tr></tr> </tbody> </table>';
-      expect(cleanHtmlWhitespace(input)).toBe('<table><tbody><tr></tr></tbody></table>');
-    });
-    it('should remove whitespace between multiple opening tags', () => {
-      const input = '<div> <span></span></div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><span></span></div>');
-    });
-    it('should handle complex nested structure', () => {
-      const input = '<div>\n\t<p>\n\t\t<span>Hello</span>\n\t</p>\n</div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><p><span>Hello</span></p></div>');
-    });
-    it('should preserve regular spaces within text content', () => {
-      const input = '<p>Hello World</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello World</p>');
-    });
-    it('should preserve multiple spaces in text content', () => {
-      const input = '<p>Hello  World</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello  World</p>');
-    });
-    it('should not remove \\n between words in text content', () => {
-      const input = '<p>Hello\nWorld</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello\nWorld</p>');
-    });
-    it('should not remove \\n between words with space in text content', () => {
-      const input = '<p>Hello\n World</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello\n World</p>');
-    });
-    it('should remove newline after img tag', () => {
-      const input = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm">\n</div>';
-      const expected = '<div><img id="image-id" class="img-class" style="vertical-align: bottom; width: 25%; padding: 20px" alt="test alt" src="data:image/svg+xml;base64,xxx=" data-size="sm"></div>';
-      expect(cleanHtmlWhitespace(input)).toBe(expected);
-    });
-    it('should handle 4-level deep nesting', () => {
-      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<p>Text</p>\n\t\t</article>\n\t</section>\n</div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><p>Text</p></article></section></div>');
-    });
-    it('should handle 5-level deep nesting', () => {
-      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<p>Text</p>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><main><p>Text</p></main></article></section></div>');
-    });
-    it('should handle 6-level deep nesting', () => {
-      const input = '<div>\n\t<section>\n\t\t<article>\n\t\t\t<main>\n\t\t\t\t<aside>\n\t\t\t\t\t<p>Text</p>\n\t\t\t\t</aside>\n\t\t\t</main>\n\t\t</article>\n\t</section>\n</div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><section><article><main><aside><p>Text</p></aside></main></article></section></div>');
-    });
-    it('should remove whitespace after br and hr tags', () => {
-      const input1 = '<div><br>\n</div>';
-      expect(cleanHtmlWhitespace(input1)).toBe('<div><br></div>');
-      const input2 = '<div><hr>\n\t</div>';
-      expect(cleanHtmlWhitespace(input2)).toBe('<div><hr></div>');
-      const input3 = '<div><input type="text">\n</div>';
-      expect(cleanHtmlWhitespace(input3)).toBe('<div><input type="text"></div>');
-    });
-    it('should remove multiple consecutive \\n characters', () => {
-      const input = '<p>\n\n\n\nHello</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
-    });
-    it('should remove multiple consecutive \\t characters', () => {
-      const input = '<p>\t\t\tHello</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
-    });
-    it('should preserve empty matching tags', () => {
-      const input = '<span></span>';
-      expect(cleanHtmlWhitespace(input)).toBe('<span></span>');
-    });
-    it('should handle mixed spaces, tabs, and newlines', () => {
-      const input = '<div> \n\t <p>Text</p> \n\t </div>';
-      expect(cleanHtmlWhitespace(input)).toBe('<div><p>Text</p></div>');
-    });
-    it('should preserve spaces in attribute values', () => {
-      const input = '<p class="my custom class">Text</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p class="my custom class">Text</p>');
-    });
-    it('should remove newlines after br tags', () => {
-      const input = '<p>Line 1<br>\nLine 2</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Line 1<br>Line 2</p>');
-    });
-    it('should preserve spaces in code blocks between matching tags', () => {
-      const input = '<code>  const x = 1;  </code>';
-      expect(cleanHtmlWhitespace(input)).toBe('<code>  const x = 1;  </code>');
-    });
-    it('should handle empty string', () => {
-      expect(cleanHtmlWhitespace('')).toBe('');
-    });
-    it('should preserve plain text without tags', () => {
-      const input = 'Hello World';
-      expect(cleanHtmlWhitespace(input)).toBe('Hello World');
-    });
-    it('should remove whitespace between different inline elements', () => {
-      const input = '<span>text</span>\n\t<strong>bold</strong>';
-      expect(cleanHtmlWhitespace(input)).toBe('<span>text</span><strong>bold</strong>');
-    });
-    it('should remove \\t\\n combination', () => {
-      const input = '<p>\t\nHello</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
-    });
-    it('should remove complex \\n\\t\\n patterns', () => {
-      const input = '<p>\n\t\n\t\nHello</p>';
-      expect(cleanHtmlWhitespace(input)).toBe('<p>Hello</p>');
-    });
-  });
-});