@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/vega-rich-text-editor-renderer.js

@@ -4,12 +4,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { h, Host } from '@stencil/core';
+import { Fragment, h, Host } from '@stencil/core';
 import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
 import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import CodeFormatter from '../../../../helpers/code-format/code-formatter';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -20,6 +21,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return (h("div", { class: {
           'rich-text-editor-container': true,
           'disabled': this.disabled,
+          'vega-hidden': this.sourceView,
         }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
         h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
         this.renderCharacterCounter()));
@@ -38,6 +40,16 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
+    this.renderSourceViewContent = () => {
+      if (this.toolbarItems && !this.toolbarItems.flat().includes('sourceEdit'))
+        return;
+      const sourceViewValue = this.value.toHtml();
+      return (h("div", { class: {
+          'source-view-container': true,
+          'vega-hidden': !this.sourceView,
+        } },
+        h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: CodeFormatter.format(sourceViewValue) } })));
+    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -56,7 +68,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   /**
    * Returns the HTMLElement reference of the rich text content area.
    *
-   * @returns {HTMLVegaRichTextContentElement} An HTMLVegaRichTextContentElement is being returned.
+   * @returns {Nullable<HTMLVegaRichTextContentElement>} An HTMLVegaRichTextContentElement is being returned.
    */
   getRichTextContentRef() {
     return this.richTextContentRef;
@@ -79,6 +91,11 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -87,12 +104,17 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       this.renderLabel(),
       this.hint && this.renderHintMessage(),
       this.toolbarRenderer.render(),
-      this.renderTextContent(),
+      this.renderContent(),
       this.renderErrorMessage()));
   }
   renderLabel() {
     return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
+  renderContent() {
+    return (h(Fragment, null,
+      this.renderTextContent(),
+      this.renderSourceViewContent()));
+  }
 }
 __decorate([
   MapToComponentField()
@@ -121,6 +143,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
+__decorate([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
 __decorate([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/code-block-strategy-registry.test.js

@@ -0,0 +1,21 @@
+import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { CodeNodeSetSelectionRangeAnnotationStrategy } from '../../../dto/action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy';
+import { BlockRemoveNodeStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-remove-node-strategy';
+import { CodeBlockRemoveSelfStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/code-block-remove-self-strategy';
+import { SwitchOutFromCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/switch-out-from-code-block-strategy';
+import { UpdateCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/update-code-block-strategy';
+import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
+import { SelectionChangeAction } from '../../../dto/actions/selection-change-action';
+import { RTECodeBlock } from '../../../dto/blocks/code-block';
+import { RTECodeBlockNode } from '../../../dto/nodes/code-block-node';
+test('RTECodeBlock action strategy should register properly', () => {
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name) instanceof CodeBlockRemoveSelfStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name) instanceof SwitchOutFromCodeBlockStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name) instanceof
+    BlockRemoveNodeStrategy).toBeTruthy();
+});
+test('RTECodeBlockNode action strategy should register properly', () => {
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name) instanceof UpdateCodeBlockStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(SelectionChangeAction.name, RTECodeBlockNode.name) instanceof
+    CodeNodeSetSelectionRangeAnnotationStrategy).toBeTruthy();
+});

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/content-state-strategy-registry.test.js

@@ -3,6 +3,7 @@ import { BlockAppendBlocksStrategy } from '../../../dto/action-handle-strategies
 import { BlockInsertBlocksAfterStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-insert-blocks-after-strategy';
 import { BlockInsertBlocksBeforeStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-insert-blocks-before-strategy';
 import { BlockRemoveChildBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-remove-child-block-strategy';
+import { BlockTransformToCodeBlockStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-transform-to-code-block-strategy';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 import { VegaRTEContent } from '../../../dto/content-state';
 test('VegaRTEContent action strategy should register properly', () => {
@@ -11,4 +12,5 @@ test('VegaRTEContent action strategy should register properly', () => {
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name) instanceof BlockAppendBlocksStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name) instanceof BlockInsertBlocksBeforeStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name) instanceof BlockInsertBlocksAfterStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name) instanceof BlockTransformToCodeBlockStrategy).toBeTruthy();
 });

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/image-block-strategy-register.test.js

@@ -1,4 +1,5 @@
 import { ActionHandleStrategyRegistry } from '../../../dto/action-handle-strategies/action-handle-strategy-registry';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../../../dto/action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
 import { BlockAppendNodesStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-append-nodes-strategy';
 import { BlockDeleteImageStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-delete-image-strategy';
 import { BlockInsertNodesAfterNodeStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/block-insert-nodes-after-node-strategy';
@@ -11,6 +12,7 @@ import { ImageBlockInsertImageStrategy } from '../../../dto/action-handle-strate
 import { ImageInsertLineBreakStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/image-insert-line-break-strategy';
 import { ImageInsertLineBreakWithBlocksStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/image-insert-line-break-with-blocks-strategy';
 import { ImageInsertNewParagraphStrategy } from '../../../dto/action-handle-strategies/modify-content-strategies/image-insert-new-paragraph-strategy';
+import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
 import { ModifyContentActionType } from '../../../dto/actions/modify-content-action.abstract';
 import { RTEImageBlock } from '../../../dto/blocks/image-block';
 test('RTEImageBlock should register action handle strategy properly', () => {
@@ -27,4 +29,5 @@ test('RTEImageBlock should register action handle strategy properly', () => {
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name) instanceof ImageBlockInsertImageStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name) instanceof BlockInsertNodesBeforeNodeStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name) instanceof BlockInsertNodesAfterNodeStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name) instanceof BlockUpdateHorizontalAlignmentStrategy).toBeTruthy();
 });

package/dist/collection/components/vega-rich-text-editor/test/dto/action-handle-strategies/text-block-strategy-register.test.js

@@ -18,13 +18,22 @@ import { BlockUpdateTextStyleStrategy } from '../../../dto/action-handle-strateg
 import { LinkGroupAnnotationAction } from '../../../dto/actions/link-group-annotation-action';
 import { TextStyleAnnotationAction } from '../../../dto/actions/text-style-annotation-action';
 import { InternalAnnotationTypeEnum } from '../../../dto/annotations/annotation.abstract';
+import { HorizontalAlignmentAnnotationAction } from '../../../dto/actions/horizontal-alignment-annotation-action';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../../../dto/action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
+import { IndentAnnotationAction } from '../../../dto/actions/indent-annotation-action';
+import { BlockUpdateIndentStrategy } from '../../../dto/action-handle-strategies/apply-annotation-strategies/block-update-indent-strategy';
+import { CustomStyleAnnotationAction } from '../../../dto/actions/custom-style-annotation-action';
+import { CommonAnnotationTypeEnum } from '../../../dto/annotations/common-annotation.abstract';
 test('RTETextBlock annotation strategy should register properly', () => {
   expect(ActionHandleStrategyRegistry.get(TextStyleAnnotationAction.name, RTETextBlock.name) instanceof
     BlockUpdateTextStyleStrategy).toBeTruthy();
   expect(ActionHandleStrategyRegistry.get(LinkGroupAnnotationAction.name, RTETextBlock.name) instanceof
     BlockUpdateLinkGroupStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(HorizontalAlignmentAnnotationAction.name, RTETextBlock.name) instanceof BlockUpdateHorizontalAlignmentStrategy).toBeTruthy();
+  expect(ActionHandleStrategyRegistry.get(IndentAnnotationAction.name, RTETextBlock.name) instanceof
+    BlockUpdateIndentStrategy).toBeTruthy();
 });
-test('RTETextBlock apply annotation action should work properly', () => {
+test.only('RTETextBlock apply annotation action should work properly', () => {
   const textBlock = RTETextBlock.from({
     id: '1',
     type: 'subtitle',
@@ -37,6 +46,19 @@ test('RTETextBlock apply annotation action should work properly', () => {
   expect(textBlock.annotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)).toBeFalsy();
   textBlock.apply(new LinkGroupAnnotationAction('1', textBlock.nodes));
   expect(textBlock.annotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)).toBeTruthy();
+  expect(textBlock.annotationMap.has(CommonAnnotationTypeEnum.CUSTOM_STYLE)).toBeFalsy();
+  textBlock.apply(new CustomStyleAnnotationAction({ textAlign: 'center', marginLeft: '20px' }));
+  expect(textBlock.annotationMap.has(CommonAnnotationTypeEnum.CUSTOM_STYLE)).toBeTruthy();
+  textBlock.apply(new HorizontalAlignmentAnnotationAction('left'));
+  expect(textBlock.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE).toJSON()).toEqual({
+    customStyle: {
+      marginLeft: '20px',
+    },
+  });
+  textBlock.apply(new IndentAnnotationAction(1));
+  expect(textBlock.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE).toJSON()).toEqual({
+    customStyle: {},
+  });
 });
 test('RTETextBlock should register action handle strategy properly', () => {
   expect(ActionHandleStrategyRegistry.get(ModifyContentActionType.DELETE_CHILD, RTETextBlock.name) instanceof

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

@@ -11,93 +11,223 @@ 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('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');
   });
   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' });
   });
   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 +237,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 +270,85 @@ 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));"');
+  });
+  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/code-block.test.js

@@ -0,0 +1,54 @@
+import { RTECodeBlock } from '../../../dto/blocks/code-block';
+describe('RTECodeBlock', () => {
+  it('initial', () => {
+    const codeBlock = RTECodeBlock.from({
+      id: '1',
+      type: 'code-block',
+      language: 'js',
+      content: 'const',
+    });
+    expect(codeBlock.id).toEqual('1');
+    expect(codeBlock.type).toEqual('code-block');
+    expect(codeBlock.getLastNode()['language']).toEqual('js');
+    expect(codeBlock.getLastNode()['text']).toEqual('const');
+  });
+  it('toJSON', () => {
+    const codeBlock = RTECodeBlock.from({
+      id: '1',
+      type: 'code-block',
+      language: 'js',
+      content: 'const',
+    });
+    expect(codeBlock.nodes[0].toJSON()).toEqual({
+      id: '1-1',
+      type: 'text',
+      language: 'js',
+      text: 'const',
+    });
+    expect(codeBlock.toJSON()).toEqual({ id: '1', type: 'code-block', language: 'js', content: 'const' });
+  });
+  it('isNotEmpty', () => {
+    const codeBlock = RTECodeBlock.from({
+      id: '1',
+      type: 'code-block',
+      language: 'js',
+      content: 'const',
+    });
+    expect(codeBlock.isNotEmpty()).toBeTruthy();
+  });
+  it('clone', () => {
+    const codeBlock = RTECodeBlock.from({
+      id: '1',
+      type: 'code-block',
+      language: 'js',
+      content: 'const',
+    });
+    const cloneBlock = codeBlock.clone();
+    const cloneNode = codeBlock.nodes[0].clone();
+    expect(cloneBlock.id).toEqual(codeBlock.id);
+    expect(cloneBlock.type).toEqual(codeBlock.type);
+    expect(cloneNode.type).toEqual(codeBlock.nodes[0].type);
+    expect(cloneNode.text).toEqual(codeBlock.nodes[0].text);
+    expect(cloneNode.language).toEqual(codeBlock.nodes[0].language);
+  });
+});