@globalpayments/vega 2.57.1 → 2.59.0

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

@@ -11,93 +11,225 @@ import { CodeAnnotation } from '../../dto/annotations/code-annotation';
 import { TextColorAnnotation } from '../../dto/annotations/text-color-annotation';
 import { IndentAnnotation } from '../../dto/annotations/indent-annotation';
 import { LinkAnnotation } from '../../dto/annotations/link-annotation';
+import { LinkGroupAnnotation } from '../../dto/annotations/link-group-annotation';
+import { ListAnnotation } from '../../dto/annotations/list-annotation';
+import { CustomAttributeAnnotation } from '../../dto/annotations/custom-attribute-annotation';
+import { CustomClassAnnotation } from '../../dto/annotations/custom-class-annotation';
+import { CustomStyleAnnotation } from '../../dto/annotations/custom-style-annotation';
 describe('annotations', () => {
   it('bold annotation', () => {
-    expect(new BoldAnnotation(true).render()).toEqual({
-      'font-weight': '700',
+    expect(new BoldAnnotation(true).renderStyle({ standalone: true })).toEqual({
+      fontWeight: '700',
     });
-    expect(new BoldAnnotation(false).render()).toEqual(null);
+    expect(new BoldAnnotation(false).renderStyle({ standalone: true })).toEqual(null);
+    expect(new BoldAnnotation(true).renderStyle()).toEqual(null);
+    expect(new BoldAnnotation(false).renderStyle()).toEqual(null);
+    expect(new BoldAnnotation(true).renderClass({ standalone: true })).toEqual(null);
+    expect(new BoldAnnotation(false).renderClass({ standalone: true })).toEqual(null);
+    expect(new BoldAnnotation(true).renderClass()).toEqual('v-rte--bold');
+    expect(new BoldAnnotation(false).renderClass()).toEqual(null);
   });
   it('italic annotation', () => {
-    expect(new ItalicAnnotation(true).render()).toEqual({
-      'font-style': 'italic',
+    expect(new ItalicAnnotation(true).renderStyle({ standalone: true })).toEqual({
+      fontStyle: 'italic',
     });
-    expect(new ItalicAnnotation(false).render()).toEqual(null);
+    expect(new ItalicAnnotation(false).renderStyle({ standalone: true })).toEqual(null);
+    expect(new ItalicAnnotation(true).renderStyle()).toEqual(null);
+    expect(new ItalicAnnotation(false).renderStyle()).toEqual(null);
+    expect(new ItalicAnnotation(true).renderClass({ standalone: true })).toEqual(null);
+    expect(new ItalicAnnotation(false).renderClass({ standalone: true })).toEqual(null);
+    expect(new ItalicAnnotation(true).renderClass()).toEqual('v-rte--italic');
+    expect(new ItalicAnnotation(false).renderClass()).toEqual(null);
   });
   it('text style annotation', () => {
-    expect(new TextStyleAnnotation('paragraph').render()).toEqual({
+    expect(new TextStyleAnnotation('paragraph').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '16px',
       fontWeight: '500',
       lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
     });
-    expect(new TextStyleAnnotation('title').render()).toEqual({
+    expect(new TextStyleAnnotation('title').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '36px',
       fontWeight: '500',
       lineHeight: '40px',
     });
-    expect(new TextStyleAnnotation('subtitle').render()).toEqual({
+    expect(new TextStyleAnnotation('subtitle').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '28px',
       fontWeight: '500',
       lineHeight: '32px',
     });
-    expect(new TextStyleAnnotation('heading-1').render()).toEqual({
+    expect(new TextStyleAnnotation('heading-1').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '22px',
       fontWeight: '500',
       lineHeight: '24px',
+      marginBottom: '0px',
+      marginTop: '0px',
     });
-    expect(new TextStyleAnnotation('heading-2').render()).toEqual({
+    expect(new TextStyleAnnotation('heading-2').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '20px',
       fontWeight: '500',
       lineHeight: '24px',
+      marginBottom: '0px',
+      marginTop: '0px',
     });
-    expect(new TextStyleAnnotation('heading-3').render()).toEqual({
+    expect(new TextStyleAnnotation('heading-3').renderStyle({ standalone: true })).toEqual({
       fontFamily: 'Inter',
       fontSize: '18px',
       fontWeight: '500',
       lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
     });
+    expect(new TextStyleAnnotation('heading-4').renderStyle({ standalone: true })).toEqual({
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      fontWeight: '500',
+      lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
+    });
+    expect(new TextStyleAnnotation('heading-5').renderStyle({ standalone: true })).toEqual({
+      fontFamily: 'Inter',
+      fontSize: '14px',
+      fontWeight: '500',
+      lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
+    });
+    expect(new TextStyleAnnotation('heading-6').renderStyle({ standalone: true })).toEqual({
+      fontFamily: 'Inter',
+      fontSize: '12px',
+      fontWeight: '500',
+      lineHeight: '22px',
+      marginBottom: '0px',
+      marginTop: '0px',
+    });
+    expect(new TextStyleAnnotation('paragraph').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('title').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('subtitle').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-1').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-2').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-3').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-4').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-5').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('heading-6').renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation(null).renderStyle()).toEqual(null);
+    expect(new TextStyleAnnotation('paragraph').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('title').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('subtitle').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-1').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-2').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-3').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-4').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-5').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('heading-6').renderClass({ standalone: true })).toEqual(null);
+    expect(new TextStyleAnnotation('paragraph').renderClass()).toEqual('v-rte--text-style-paragraph');
+    expect(new TextStyleAnnotation('title').renderClass()).toEqual('v-rte--text-style-title');
+    expect(new TextStyleAnnotation('subtitle').renderClass()).toEqual('v-rte--text-style-subtitle');
+    expect(new TextStyleAnnotation('heading-1').renderClass()).toEqual('v-rte--text-style-heading-1');
+    expect(new TextStyleAnnotation('heading-2').renderClass()).toEqual('v-rte--text-style-heading-2');
+    expect(new TextStyleAnnotation('heading-3').renderClass()).toEqual('v-rte--text-style-heading-3');
+    expect(new TextStyleAnnotation('heading-4').renderClass()).toEqual('v-rte--text-style-heading-4');
+    expect(new TextStyleAnnotation('heading-5').renderClass()).toEqual('v-rte--text-style-heading-5');
+    expect(new TextStyleAnnotation('heading-6').renderClass()).toEqual('v-rte--text-style-heading-6');
+    expect(new TextStyleAnnotation(null).renderClass()).toEqual(null);
   });
   it('selection range annotation', () => {
     expect(new SelectionRangeAnnotation({})).toBeDefined();
   });
   it('image annotation', () => {
-    expect(new ImageAnnotation('sm', 'mock-alt').render()).toEqual({ width: '25%' });
-    expect(new ImageAnnotation('md', 'mock-alt').render()).toEqual({ width: '50%' });
-    expect(new ImageAnnotation('lg', 'mock-alt').render()).toEqual({ width: '100%' });
+    expect(new ImageAnnotation('sm', 'mock-alt').renderStyle({ standalone: true })).toEqual({
+      verticalAlign: 'bottom',
+      width: '25%',
+    });
+    expect(new ImageAnnotation('md', 'mock-alt').renderStyle({ standalone: true })).toEqual({
+      verticalAlign: 'bottom',
+      width: '50%',
+    });
+    expect(new ImageAnnotation('lg', 'mock-alt').renderStyle({ standalone: true })).toEqual({
+      verticalAlign: 'bottom',
+      width: '100%',
+    });
+    expect(new ImageAnnotation('sm', 'mock-alt').renderStyle()).toEqual(null);
+    expect(new ImageAnnotation('md', 'mock-alt').renderStyle()).toEqual(null);
+    expect(new ImageAnnotation('lg', 'mock-alt').renderStyle()).toEqual(null);
+    expect(new ImageAnnotation('sm', 'mock-alt').renderClass({ standalone: true })).toEqual(null);
+    expect(new ImageAnnotation('md', 'mock-alt').renderClass({ standalone: true })).toEqual(null);
+    expect(new ImageAnnotation('lg', 'mock-alt').renderClass({ standalone: true })).toEqual(null);
+    expect(new ImageAnnotation('sm', 'mock-alt').renderClass()).toEqual('v-rte--image-size-sm');
+    expect(new ImageAnnotation('md', 'mock-alt').renderClass()).toEqual('v-rte--image-size-md');
+    expect(new ImageAnnotation('lg', 'mock-alt').renderClass()).toEqual('v-rte--image-size-lg');
     expect(new ImageAnnotation('md', 'mock-alt').toJSON()).toEqual({ size: 'md', alt: 'mock-alt' });
     expect(new ImageAnnotation(null, null).toJSON()).toEqual({ size: null });
-    expect(new ImageAnnotation(undefined, 'test').toJSON()).toEqual({ size: 'md', alt: 'test' });
+    expect(new ImageAnnotation(undefined, 'test').toJSON()).toEqual({ size: undefined, alt: 'test' });
   });
   it('underline annotation ', () => {
-    expect(new UnderlineAnnotation(true).render()).toEqual(null);
+    expect(new UnderlineAnnotation(true).renderStyle()).toEqual(null);
+    expect(new UnderlineAnnotation(false).renderStyle()).toEqual(null);
     expect(new UnderlineAnnotation(true).renderClass()).toEqual('v-rte--underline');
     expect(new UnderlineAnnotation(false).renderClass()).toEqual(null);
+    expect(new UnderlineAnnotation(true).renderStyle({ standalone: true })).toEqual({
+      textDecoration: 'underline',
+    });
+    expect(new UnderlineAnnotation(true).renderClass({ standalone: true })).toEqual(null);
+    expect(new UnderlineAnnotation(false).renderStyle({ standalone: true })).toEqual(null);
+    expect(new UnderlineAnnotation(false).renderClass({ standalone: true })).toEqual(null);
   });
   it('strikethrough annotation ', () => {
-    expect(new StrikethroughAnnotation(true).render()).toEqual(null);
+    expect(new StrikethroughAnnotation(true).renderStyle()).toEqual(null);
+    expect(new StrikethroughAnnotation(false).renderStyle()).toEqual(null);
     expect(new StrikethroughAnnotation(true).renderClass()).toEqual('v-rte--strikethrough');
     expect(new StrikethroughAnnotation(false).renderClass()).toEqual(null);
+    expect(new StrikethroughAnnotation(true).renderStyle({ standalone: true })).toEqual({
+      textDecoration: 'line-through',
+    });
+    expect(new StrikethroughAnnotation(false).renderStyle({ standalone: true })).toEqual(null);
+    expect(new StrikethroughAnnotation(true).renderClass({ standalone: true })).toEqual(null);
+    expect(new StrikethroughAnnotation(false).renderClass({ standalone: true })).toEqual(null);
   });
   it('text color annotation ', () => {
     expect(new TextColorAnnotation('black').renderClass()).toEqual(null);
-    expect(new TextColorAnnotation('black').render()).toEqual({
+    expect(new TextColorAnnotation('black').renderStyle()).toEqual({
       color: '#111128',
     });
     expect(new TextColorAnnotation('black').renderClass()).toEqual(null);
     expect(new TextColorAnnotation('green').renderClass()).toEqual(null);
-    expect(new TextColorAnnotation('green').render()).toEqual({
+    expect(new TextColorAnnotation('green').renderStyle()).toEqual({
       color: '#01801F',
     });
     expect(new TextColorAnnotation('green').renderClass()).toEqual(null);
   });
   it('horizontal alignment annotation', () => {
-    expect(new HorizontalAlignmentAnnotation('left').render()).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('left').renderStyle({ standalone: true })).toEqual({
+      textAlign: 'left',
+    });
+    expect(new HorizontalAlignmentAnnotation('left').renderStyle()).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('left').renderClass({ standalone: true })).toEqual(null);
     expect(new HorizontalAlignmentAnnotation('left').renderClass()).toEqual('v-rte--horizontal-alignment-left');
+    expect(new HorizontalAlignmentAnnotation('right').renderStyle({ standalone: true })).toEqual({
+      textAlign: 'right',
+    });
+    expect(new HorizontalAlignmentAnnotation('right').renderStyle()).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('right').renderClass({ standalone: true })).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('right').renderClass()).toEqual('v-rte--horizontal-alignment-right');
+    expect(new HorizontalAlignmentAnnotation('center').renderStyle({ standalone: true })).toEqual({
+      textAlign: 'center',
+    });
+    expect(new HorizontalAlignmentAnnotation('center').renderStyle()).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('center').renderClass({ standalone: true })).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('center').renderClass()).toEqual('v-rte--horizontal-alignment-center');
+    expect(new HorizontalAlignmentAnnotation('justify').renderStyle({ standalone: true })).toEqual({
+      textAlign: 'justify',
+    });
+    expect(new HorizontalAlignmentAnnotation('justify').renderStyle()).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('justify').renderClass({ standalone: true })).toEqual(null);
+    expect(new HorizontalAlignmentAnnotation('justify').renderClass()).toEqual('v-rte--horizontal-alignment-justify');
   });
   it('clear formatting annotation', () => {
     expect(new ClearFormattingAnnotation().items).toEqual([
@@ -107,22 +239,31 @@ describe('annotations', () => {
       'STRIKETHROUGH',
       'TEXT_COLOR',
       'CODE',
+      'CUSTOM_STYLE',
     ]);
   });
   it('code annotation', () => {
-    expect(new CodeAnnotation(true).render()).toEqual(null);
+    expect(new CodeAnnotation(true).renderStyle({ standalone: true })).toEqual({
+      fontFamily: 'Roboto Mono',
+      whiteSpace: 'pre-wrap',
+    });
+    expect(new CodeAnnotation(false).renderStyle({ standalone: true })).toEqual(null);
+    expect(new CodeAnnotation(true).renderClass({ standalone: true })).toEqual(null);
+    expect(new CodeAnnotation(false).renderClass({ standalone: true })).toEqual(null);
+    expect(new CodeAnnotation(true).renderStyle()).toEqual(null);
+    expect(new CodeAnnotation(false).renderStyle()).toEqual(null);
     expect(new CodeAnnotation(true).renderClass()).toEqual('v-rte--code');
     expect(new CodeAnnotation(false).renderClass()).toEqual(null);
   });
   it('indent annotation', () => {
-    expect(new IndentAnnotation(0).render()).toEqual(null);
-    expect(new IndentAnnotation(1).render()).toEqual({ 'margin-left': `16px` });
-    expect(new IndentAnnotation(2).render()).toEqual({ 'margin-left': `32px` });
-    expect(new IndentAnnotation(-20).render()).toEqual(null);
-    expect(new IndentAnnotation(20).render()).toEqual({ 'margin-left': `320px` });
+    expect(new IndentAnnotation(0).renderStyle()).toEqual(null);
+    expect(new IndentAnnotation(1).renderStyle()).toEqual({ marginLeft: `16px` });
+    expect(new IndentAnnotation(2).renderStyle()).toEqual({ marginLeft: `32px` });
+    expect(new IndentAnnotation(-20).renderStyle()).toEqual(null);
+    expect(new IndentAnnotation(20).renderStyle()).toEqual({ marginLeft: `320px` });
   });
   it('link annotation', () => {
-    expect(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }).render()).toEqual(null);
+    expect(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }).renderStyle()).toEqual(null);
     expect(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }).toJSON()).toEqual({
       link: { href: 'www.google.com', groupKey: '123' },
     });
@@ -131,4 +272,93 @@ describe('annotations', () => {
     });
     expect(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }).toEqual(new LinkAnnotation({ href: 'www.google.com', groupKey: '123' }))).toEqual(true);
   });
+  it('link group annotation', () => {
+    const linkGroupAnnotation = new LinkGroupAnnotation('123');
+    const linkAnnotation = new LinkAnnotation({
+      href: 'www.google.com',
+      groupKey: '123',
+      customAttribute: { id: 'a', dataLink: 'link' },
+      customClass: ['classA', 'classB'],
+      customStyle: { color: 'red', fontSize: '18px', display: 'block' },
+    });
+    expect(linkGroupAnnotation.toString(linkAnnotation)).toEqual('id="a" data-link="link" href="www.google.com" target="_blank" class="classA classB v-rte--link" style="color: red; font-size: 18px; display: block;"');
+    expect(linkGroupAnnotation.toString(linkAnnotation, { standalone: true })).toEqual('id="a" data-link="link" href="www.google.com" target="_blank" class="classA classB" style="color: rgba(var(--v-text-link, 19, 98, 226, 1)); font-size: 18px; display: block;"');
+    const emptyLinkAnnotation = new LinkAnnotation({
+      href: 'www.google.com',
+      groupKey: '123',
+    });
+    expect(linkGroupAnnotation.toString(emptyLinkAnnotation)).toEqual('href="www.google.com" target="_blank" class="v-rte--link"');
+    expect(linkGroupAnnotation.toString(emptyLinkAnnotation, { standalone: true })).toEqual('href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"');
+    expect(linkGroupAnnotation.toString(LinkAnnotation.from({
+      href: 'www.google.com',
+      groupKey: '123',
+    })[1])).toEqual('href="www.google.com" target="_blank" class="v-rte--link"');
+    expect(linkGroupAnnotation.toString(LinkAnnotation.from({
+      href: 'www.google.com',
+      groupKey: '123',
+    }, false)[1])).toEqual('href="www.google.com" target="_blank"');
+  });
+  it('list annotation', () => {
+    expect(new ListAnnotation().renderStyle()).toEqual(null);
+    expect(new ListAnnotation().renderClass()).toEqual('v-rte--list');
+    expect(new ListAnnotation().renderStyle({ standalone: true })).toEqual({
+      marginLeft: '16px',
+      paddingLeft: '8px',
+    });
+    expect(new ListAnnotation().renderClass({ standalone: true })).toEqual(null);
+    expect(new ListAnnotation().toJSON()).toEqual(undefined);
+    const listAnnotation = new ListAnnotation();
+    expect(listAnnotation.clone()).toEqual(listAnnotation);
+    expect(listAnnotation.clone()).not.toBe(listAnnotation);
+  });
+  it('customize attributes annotation', () => {
+    const customizeAttributes = {
+      id: 'element-id',
+      dir: 'element-dir',
+    };
+    expect(new CustomAttributeAnnotation(customizeAttributes).toString()).toEqual([
+      'id="element-id"',
+      'dir="element-dir"',
+    ]);
+    expect(new CustomAttributeAnnotation(customizeAttributes).toJSON()).toEqual({
+      customAttribute: {
+        id: 'element-id',
+        dir: 'element-dir',
+      },
+    });
+    expect(new CustomAttributeAnnotation(customizeAttributes).render()).toEqual({
+      id: 'element-id',
+      dir: 'element-dir',
+    });
+  });
+  it('custom class annotation', () => {
+    expect(new CustomClassAnnotation(['test-class']).toString()).toEqual('class="test-class"');
+    expect(new CustomClassAnnotation(['test-class']).toJSON()).toEqual({
+      customClass: ['test-class'],
+    });
+    expect(new CustomClassAnnotation(['test-class']).renderClass()).toEqual(['test-class']);
+    const customClassAnnotation = new CustomClassAnnotation(['test-class']);
+    expect(customClassAnnotation.clone()).not.toBe(customClassAnnotation);
+  });
+  it('customize style annotation', () => {
+    const customStyle = {
+      textAlign: 'center',
+      fontWeight: '700',
+    };
+    expect(new CustomStyleAnnotation(customStyle).toJSON()).toEqual({
+      customStyle: {
+        textAlign: 'center',
+        fontWeight: '700',
+      },
+    });
+    expect(new CustomStyleAnnotation(customStyle).renderStyle()).toEqual({
+      textAlign: 'center',
+      fontWeight: '700',
+    });
+    expect(new CustomStyleAnnotation(customStyle).removeStyles(['fontWeight'])).toEqual({
+      textAlign: 'center',
+    });
+    const customStyleAnnotation = new CustomStyleAnnotation(customStyle);
+    expect(new CustomStyleAnnotation(customStyle).clone()).not.toBe(customStyleAnnotation);
+  });
 });

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/html-block.test.js

@@ -0,0 +1,124 @@
+import { RTEHtmlBlock } from '../../../dto/blocks/html-block';
+import { VegaRTEContent } from '../../../dto/content-state';
+describe('HTMLBlock', () => {
+  beforeAll(() => {
+    // Register all the dto classes into the internalRTEManager by VegaRTEContent static method.
+    new VegaRTEContent([]);
+  });
+  describe('toHtml', () => {
+    it('toHtml should work as expect with text block', () => {
+      expect(RTEHtmlBlock.from({
+        id: 'section-1',
+        type: 'html-block',
+        htmlTag: 'section',
+        annotations: { customClass: ['custom-container'] },
+        children: [
+          {
+            id: 'child-1',
+            type: 'paragraph',
+            annotations: { customClass: ['custom-p'] },
+            nodes: [
+              {
+                id: 'child-1-1',
+                type: 'text',
+                text: 'This is a ',
+              },
+              {
+                id: 'child-1-1',
+                type: 'text',
+                text: 'Bold',
+                annotations: { bold: true },
+              },
+              {
+                id: 'child-1-1',
+                type: 'text',
+                text: ' text.',
+              },
+            ],
+          },
+        ],
+      }, { autoMatchFormat: false }).toHtml()).toMatchSnapshot();
+    });
+  });
+  describe('public methods', () => {
+    let htmlBlock;
+    beforeEach(() => {
+      htmlBlock = RTEHtmlBlock.from({
+        id: 'section-1',
+        type: 'html-block',
+        htmlTag: 'section',
+        annotations: { customClass: ['custom-container'] },
+        children: [
+          {
+            id: 'child-1',
+            type: 'paragraph',
+            annotations: { customClass: ['custom-p'] },
+            nodes: [
+              {
+                id: 'child-1-1',
+                type: 'text',
+                text: 'This is a ',
+              },
+              {
+                id: 'child-1-2',
+                type: 'text',
+                text: 'Bold',
+                annotations: { bold: true },
+              },
+              {
+                id: 'child-1-3',
+                type: 'text',
+                text: ' text.',
+              },
+            ],
+          },
+        ],
+      }, { autoMatchFormat: false });
+    });
+    it('getLastNode should work as expect', () => {
+      expect(htmlBlock.getLastNode().toJSON()).toEqual({
+        id: 'child-1-3',
+        type: 'text',
+        text: ' text.',
+      });
+    });
+    it('isNotEmpty should work as expect', () => {
+      expect(htmlBlock.isNotEmpty()).toBe(true);
+      htmlBlock.children = [];
+      expect(htmlBlock.isNotEmpty()).toBe(false);
+    });
+    it('toJSON', () => {
+      expect(htmlBlock.toJSON()).toEqual({
+        id: 'section-1',
+        type: 'html-block',
+        htmlTag: 'section',
+        annotations: { customClass: ['custom-container'] },
+        children: [
+          {
+            id: 'child-1',
+            type: 'paragraph',
+            annotations: { customClass: ['custom-p'] },
+            nodes: [
+              {
+                id: 'child-1-1',
+                type: 'text',
+                text: 'This is a ',
+              },
+              {
+                id: 'child-1-2',
+                type: 'text',
+                text: 'Bold',
+                annotations: { bold: true },
+              },
+              {
+                id: 'child-1-3',
+                type: 'text',
+                text: ' text.',
+              },
+            ],
+          },
+        ],
+      });
+    });
+  });
+});

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/image-block.test.js

@@ -17,6 +17,16 @@ describe('image block', () => {
       type: 'image',
       nodes: [{ id: '1', url: 'mock-url', type: 'image' }],
     }) instanceof RTEImageBlock).toBe(true);
+    expect(RTEImageBlock.from({
+      id: 'block-1',
+      type: 'image',
+      nodes: [{ id: '1', url: 'mock-url', type: 'image' }],
+    }).toHtml()).toEqual(`<div><img style="vertical-align: bottom;width: 50%;" src="mock-url" data-size="md"></div>`);
+    expect(RTEImageBlock.from({
+      id: 'block-1',
+      type: 'image',
+      nodes: [{ id: '1', url: 'mock-url', type: 'image' }],
+    }, { autoMatchFormat: false }).toHtml()).toEqual(`<div><img src="mock-url"></div>`);
   });
   it('toJSON method should work as expect', () => {
     expect(RTEImageBlock.from({

package/dist/collection/components/vega-rich-text-editor/test/dto/blocks/text-block.test.js

@@ -2,6 +2,7 @@ import { RTETextBlock } from '../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../dto/nodes/text-node';
 import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annotation-action';
 import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
+import '../../../dto/setup';
 describe('text block', () => {
   it('new RTETextBlock should work as expect', () => {
     const textBlock = new RTETextBlock('block-1', 'paragraph');
@@ -131,4 +132,62 @@ describe('text block', () => {
     textNode.text = '';
     expect(textBlock.isNotEmpty()).toEqual(false);
   });
+  it('cloneWithNodes should work as expect', () => {
+    const block = RTETextBlock.from({
+      id: 'block-1',
+      type: 'paragraph',
+      nodes: [{ id: '1', text: 'This is a paragraph.', type: 'text' }],
+      annotations: { customStyle: { marginTop: '16px', marginBottom: '16px' } },
+    });
+    const clonedBlock = block.cloneWithNodes([
+      new RTETextNode('1', 'This is a ', block),
+      new RTETextNode('2', 'paragraph.', block),
+    ]);
+    expect(clonedBlock.toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { textStyle: 'paragraph', customStyle: { marginTop: '16px', marginBottom: '16px' } },
+      nodes: [
+        { id: '1', text: 'This is a ', type: 'text' },
+        { id: '2', text: 'paragraph.', type: 'text' },
+      ],
+    });
+  });
+  it('cloneWithNodes should work as expect when autoMatchFormat is false', () => {
+    const block = RTETextBlock.from({
+      id: 'block-1',
+      type: 'paragraph',
+      nodes: [{ id: '1', text: 'This is a paragraph.', type: 'text' }],
+      annotations: { customStyle: { marginTop: '16px', marginBottom: '16px' } },
+    }, { autoMatchFormat: false });
+    const clonedBlock = block.cloneWithNodes([
+      new RTETextNode('1', 'This is a ', block),
+      new RTETextNode('2', 'paragraph.', block),
+    ]);
+    expect(clonedBlock.toJSON()).toEqual({
+      id: expect.anything(),
+      type: 'paragraph',
+      annotations: { customStyle: { marginTop: '16px', marginBottom: '16px' } },
+      nodes: [
+        { id: '1', text: 'This is a ', type: 'text' },
+        { id: '2', text: 'paragraph.', type: 'text' },
+      ],
+    });
+  });
+  it('toHtml should work as expect', () => {
+    const textBlock = {
+      id: 'block-1',
+      type: 'paragraph',
+      nodes: [
+        {
+          id: '1',
+          text: 'This is a text.',
+          type: 'text',
+          annotations: { link: { href: 'www.google.com', groupKey: 'google' } },
+        },
+      ],
+    };
+    expect(RTETextBlock.from(textBlock).toHtml()).toEqual(`<p style="font-family: Inter;font-size: 16px;line-height: 22px;font-weight: 500;margin-top: 0px;margin-bottom: 0px;"><a href="www.google.com" target="_blank" style="color: rgba(var(--v-text-link, 19, 98, 226, 1));"><span>This is a text.</span></a></p>`);
+    expect(RTETextBlock.from(textBlock, { autoMatchFormat: false }).toHtml({ autoMatchFormat: false })).toEqual(`<p><a href="www.google.com"><span>This is a text.</span></a></p>`);
+  });
 });