@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -1,7 +1,6 @@
 import { RTEBlock } from './block.abstract';
 import { RTEImageNode } from '../nodes/image-node';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
-import { isNonNullable } from '../../../../types/type-guard';
 import { generateUUID } from '../../../../utils/misc';
 import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
 import { BlockDeleteImageStrategy } from '../action-handle-strategies/modify-content-strategies/block-delete-image-strategy';
@@ -16,6 +15,9 @@ import { ImageInsertLineBreakWithBlocksStrategy } from '../action-handle-strateg
 import { ImageBlockInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/image-block-insert-image-strategy';
 import { BlockInsertNodesBeforeNodeStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-nodes-before-node-strategy';
 import { BlockInsertNodesAfterNodeStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-nodes-after-node-strategy';
+import { isNonNullable } from '../../../../types/type-guard';
+import { HorizontalAlignmentAnnotationAction } from '../actions/horizontal-alignment-annotation-action';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
 /**
  * Image block
  */
@@ -51,6 +53,17 @@ export class RTEImageBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    return [
+      `<div${attrStr}>`,
+      this.nodes.map((node) => node.toHtml()).join(''),
+      `</div>`,
+    ].join('');
+  }
   /**
    * @inheritDoc
    */
@@ -99,4 +112,5 @@ export class RTEImageBlock extends RTEBlock {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
 })();

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

@@ -9,6 +9,12 @@ import { ListRemoveListItemStrategy } from '../action-handle-strategies/modify-c
 import { ListTransformToListStrategy } from '../action-handle-strategies/modify-content-strategies/list-transform-to-list-strategy';
 import { ListTransformToParagraphStrategy } from '../action-handle-strategies/modify-content-strategies/list-transform-to-paragraph-strategy';
 import { ListInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/list-insert-image-strategy';
+import { BlockAnnotationTypeEnum } from '../annotations/block-annotation.abstract';
+import { ListAnnotation } from '../annotations/list-annotation';
+import { isNonNullable } from '../../../../types/type-guard';
+import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
+import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 /**
  * List block
  */
@@ -18,6 +24,7 @@ export class RTEListBlock extends RTEBlock {
     this.type = 'bullet-list';
     this.blocks = [];
     this.type = type;
+    this.annotationMap.set(BlockAnnotationTypeEnum.LIST, new ListAnnotation());
   }
   /**
    * Converts a VegaRTEListBlock object to an RTEListBlock
@@ -27,6 +34,15 @@ export class RTEListBlock extends RTEBlock {
    */
   static from(block) {
     const listBlock = new RTEListBlock(block.id, block.type);
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listBlock.annotationMap.set(...item);
+        }
+      });
+    }
     listBlock.blocks = block.blocks.map((item) => {
       const listItemBlock = RTEListItemBlock.from(item);
       listItemBlock.parent = listBlock;
@@ -34,12 +50,46 @@ export class RTEListBlock extends RTEBlock {
     });
     return listBlock;
   }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
   /**
    * @inheritDoc
    */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.type === 'number-list' ? 'ol' : 'ul';
+    const attrStr = super.generateAttributeString();
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.blocks.map((block) => block.toHtml()).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
   /**
    * @inheritDoc
    */

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

@@ -4,7 +4,6 @@ import { ModifyContentActionType } from '../actions/modify-content-action.abstra
 import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
 import { generateUUID } from '../../../../utils/misc';
 import { RTETextBlock } from './text-block';
-import { isNonNullable } from '../../../../types/type-guard';
 import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
 import { ListItemDeleteTextContentStrategy } from '../action-handle-strategies/modify-content-strategies/list-item-delete-text-content-strategy';
 import { BlockInsertLineBreakStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-line-break-strategy';
@@ -19,6 +18,7 @@ import { BlockMergeNodesStrategy } from '../action-handle-strategies/modify-cont
 import { ListItemInsertNewParagraphStrategy } from '../action-handle-strategies/modify-content-strategies/list-item-insert-new-paragraph-strategy';
 import { ListItemInsertImageStrategy } from '../action-handle-strategies/modify-content-strategies/list-item-insert-image-strategy';
 import { BlockInsertNodesBeforeNodeStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-nodes-before-node-strategy';
+import { isNonNullable } from '../../../../types/type-guard';
 /**
  * List item block
  */
@@ -62,6 +62,17 @@ export class RTEListItemBlock extends RTETextBlock {
     var _a;
     return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    return [
+      `<li${attrStr}>`,
+      this.nodes.map((node) => node.toHtml()).join(''),
+      `</li>`,
+    ].join('');
+  }
   /**
    * @inheritDoc
    */

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

@@ -1,5 +1,4 @@
 import { RTETextNode } from '../nodes/text-node';
-import { isNonNullable } from '../../../../types/type-guard';
 import { TextStyleAnnotation } from '../annotations/text-style-annotation';
 import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
 import { AppendChildNodesAction } from '../actions/append-child-nodes-action';
@@ -24,6 +23,12 @@ import { BlockDeleteTextContentStrategy } from '../action-handle-strategies/modi
 import { BlockInsertImageIntoTextStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-image-into-text-strategy';
 import { BlockInsertNodesBeforeNodeStrategy } from '../action-handle-strategies/modify-content-strategies/block-insert-nodes-before-node-strategy';
 import { BlockTransformToListStrategy } from '../action-handle-strategies/modify-content-strategies/block-transform-to-list-strategy';
+import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
+import { isNonNullable } from '../../../../types/type-guard';
+import { HorizontalAlignmentAnnotationAction } from '../actions/horizontal-alignment-annotation-action';
+import { BlockUpdateHorizontalAlignmentStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-horizontal-alignment-strategy';
+import { BlockUpdateIndentStrategy } from '../action-handle-strategies/apply-annotation-strategies/block-update-indent-strategy';
+import { IndentAnnotationAction } from '../actions/indent-annotation-action';
 /**
  * Text block
  */
@@ -68,7 +73,7 @@ export class RTETextBlock extends RTEBlock {
    * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
    * that will be used to create the annotation entity. It can be of any type depending on the specific
    * annotation being created.
-   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
    * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
    */
   static createAnnotationEntity(type, value) {
@@ -125,6 +130,36 @@ export class RTETextBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString();
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    let nodesHtml = this.nodes.map((node) => node.toHtml()).join('');
+    if (linkGroupAnnotation && this.nodes.length > 0) {
+      //TODO: should revert to above code while https://gethired.atlassian.net/browse/VD-6513 have be fixed.
+      //  const linkAnnotation: Nullable<LinkAnnotation> =
+      // 	   this.nodes[0].getAnnotationByType<LinkAnnotation>(NodeAnnotationTypeEnum.LINK);
+      let linkAnnotation;
+      this.nodes.find((node) => {
+        const link = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        if (link) {
+          linkAnnotation = link;
+          return true;
+        }
+      });
+      if (linkAnnotation) {
+        nodesHtml = [
+          `<a ${linkGroupAnnotation.toString(linkAnnotation, { standalone: true })}>`,
+          nodesHtml,
+          `</a>`,
+        ].join('');
+      }
+    }
+    return [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
+  }
   /**
    * Clone the nodes to a new block
    *
@@ -171,6 +206,33 @@ export class RTETextBlock extends RTEBlock {
   createNewParagraph() {
     return new RTETextBlock(generateUUID(), 'paragraph');
   }
+  /**
+   * Get the HTML tag for the block based on its type.
+   *
+   * @returns {RTETextBlockTagType} The HTML tag for the block.
+   */
+  getBlockTag() {
+    switch (this.type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'heading-4':
+        return `h4`;
+      case 'heading-5':
+        return `h5`;
+      case 'heading-6':
+        return `h6`;
+      case 'paragraph':
+      default:
+        return 'p';
+    }
+  }
   /**
    * @inheritDoc
    */
@@ -183,6 +245,8 @@ export class RTETextBlock extends RTEBlock {
 }
 (() => {
   ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTETextBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTETextBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+  ActionHandleStrategyRegistry.register(IndentAnnotationAction.name, RTETextBlock.name, new BlockUpdateIndentStrategy());
   ActionHandleStrategyRegistry.register(LinkGroupAnnotationAction.name, RTETextBlock.name, new BlockUpdateLinkGroupStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());

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

@@ -11,6 +11,10 @@ import { BlockRemoveChildBlockStrategy } from './action-handle-strategies/modify
 import { BlockAppendBlocksStrategy } from './action-handle-strategies/modify-content-strategies/block-append-blocks-strategy';
 import { BlockInsertBlocksBeforeStrategy } from './action-handle-strategies/modify-content-strategies/block-insert-blocks-before-strategy';
 import { BlockInsertBlocksAfterStrategy } from './action-handle-strategies/modify-content-strategies/block-insert-blocks-after-strategy';
+import { RTECodeBlock } from './blocks/code-block';
+import { BlockTransformToCodeBlockStrategy } from './action-handle-strategies/modify-content-strategies/block-transform-to-code-block-strategy';
+import ElementToDtoStrategyProcessor from '../slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy-processor';
+import { isNonNullable } from '../../../types/type-guard';
 /**
  * Class representing the content state of the rich text editor.
  */
@@ -43,6 +47,8 @@ export class VegaRTEContent {
         case 'bullet-list':
         case 'number-list':
           return RTEListBlock.from(block);
+        case 'code-block':
+          return RTECodeBlock.from(block);
         default: {
           throw new Error(`[Vega] Unknown block type: ${block.type}`);
         }
@@ -70,6 +76,20 @@ export class VegaRTEContent {
       },
     ]);
   }
+  /**
+   * Converts HTML content to a VegaRTEContent instance.
+   *
+   * @param {string} html - The HTML string to convert.
+   * @returns {VegaRTEContent} The converted content state.
+   */
+  static fromHtml(html) {
+    const body = new DOMParser().parseFromString(html, 'text/html').body;
+    const blocks = ElementToDtoStrategyProcessor.process(Array.from(body.childNodes))
+      .filter(isNonNullable)
+      .map((output) => output.toDto())
+      .filter(isNonNullable);
+    return new VegaRTEContent(blocks);
+  }
   /**
    * Clones the content state.
    *
@@ -89,6 +109,14 @@ export class VegaRTEContent {
   toJSON() {
     return this.blocks.map((block) => block.toJSON());
   }
+  /**
+   * Converts the content state to HTML.
+   *
+   * @returns {string} The HTML representation of the content state.
+   */
+  toHtml() {
+    return this.blocks.map((block) => block.toHtml()).join('');
+  }
   /**
    * Internal method to add the block item, remove the block item
    *
@@ -167,4 +195,5 @@ export class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
 })();

package/dist/collection/components/vega-rich-text-editor/dto/nodes/code-block-node.js

@@ -0,0 +1,56 @@
+import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
+import { NodeTypeEnum, RTENode } from './node.abstract';
+import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
+import { UpdateCodeBlockStrategy } from '../action-handle-strategies/modify-content-strategies/update-code-block-strategy';
+import { SelectionChangeAction } from '../actions/selection-change-action';
+import { CodeNodeSetSelectionRangeAnnotationStrategy } from '../action-handle-strategies/apply-annotation-strategies/code-node-set-selection-range-strategy';
+/**
+ * RTE code node DTO class.
+ */
+export class RTECodeBlockNode extends RTENode {
+  constructor(id, content, language, parentBlock) {
+    super(id);
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parentBlock = parentBlock;
+    this.language = language;
+  }
+  /**
+   * The code node toJSON method will called internal.
+   *
+   * @returns {VegaRTECodeNode} - An object contains content property.
+   */
+  toJSON() {
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    return `<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;'>${this.text}</code>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTECodeBlockNode(this.id, this.text, this.language, this.parentBlock);
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
+})();

package/dist/collection/components/vega-rich-text-editor/dto/nodes/image-node.js

@@ -7,6 +7,7 @@ import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action
 import { ImageSetAnnotationMapStrategy } from '../action-handle-strategies/apply-annotation-strategies/image-set-annotation-map-strategy';
 import { ImageUpdateUrlStrategy } from '../action-handle-strategies/modify-content-strategies/image-update-url-strategy';
 import { AnnotationAction } from '../actions/annotation-action.abstract';
+import { CommonAnnotation } from '../annotations/common-annotation.abstract';
 /**
  * Image node
  */
@@ -34,7 +35,12 @@ export class RTEImageNode extends RTENode {
       annotations = node.annotations;
     }
     imageNode.annotationMap = new Map(Object.keys(annotations)
-      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
+      .map((type) => {
+      if (type === 'size' || type === 'alt') {
+        return ImageAnnotation.from(annotations.size, annotations.alt);
+      }
+      return this.createAnnotationEntity(type, annotations[type]);
+    })
       .filter(isNonNullable));
     return imageNode;
   }
@@ -42,14 +48,13 @@ export class RTEImageNode extends RTENode {
    * @inheritDoc
    */
   toJSON() {
-    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
-    const annotations = {};
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
-      annotations.size = imageAnnotation.size;
-    }
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
-      annotations.alt = imageAnnotation.alt;
-    }
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof CommonAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    if (annotations.alt == '')
+      delete annotations.alt;
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
   /**
@@ -58,6 +63,18 @@ export class RTEImageNode extends RTENode {
   clone() {
     return new RTEImageNode(this.id, this.url, this.parentBlock, super.cloneAnnotations());
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const attrStr = super.generateAttributeString(...[
+      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
+      `src="${this.url}"`,
+      `data-size="${imageAnnotation.size}"`,
+    ].filter(isNonNullable));
+    return `<img${attrStr}>`;
+  }
   /**
    * @inheritDoc
    */

package/dist/collection/components/vega-rich-text-editor/dto/nodes/node.abstract.js

@@ -3,10 +3,18 @@ import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entit
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { ModifyContentAction } from '../actions/modify-content-action.abstract';
+import { NodeAnnotation } from '../annotations/node-annotation.abstract';
+import { camelToDashCase } from '../../../../utils/string';
+import { isNonNullable } from '../../../../types/type-guard';
+import { CustomAttributeAnnotation } from '../annotations/custom-attribute-annotation';
+import { CustomClassAnnotation } from '../annotations/custom-class-annotation';
+import { CommonAnnotationTypeEnum } from '../annotations/common-annotation.abstract';
+import { CustomStyleAnnotation } from '../annotations/custom-style-annotation';
 export var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
 })(NodeTypeEnum || (NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes
@@ -19,6 +27,24 @@ export class RTENode {
       this.annotationMap = annotationMap;
     }
   }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
   /**
    * Get annotation by type
    *
@@ -51,6 +77,61 @@ export class RTENode {
     }
     return this;
   }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
+   */
+  getStyles(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomClassAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {CustomAttributeAnnotation} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+    const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
   /**
    * apply annotation action or modify content action
    *

package/dist/collection/components/vega-rich-text-editor/dto/nodes/text-node.js

@@ -1,5 +1,5 @@
 import { NodeTypeEnum, RTENode } from './node.abstract';
-import { NodeAnnotation } from '../annotations/node-annotation.abstract';
+import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
 import { AnnotationAction } from '../actions/annotation-action.abstract';
 import { TextSplittableAction } from '../actions/splittable-action.abstract';
 import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
@@ -26,6 +26,7 @@ import { NodeUpdateTextStrategy } from '../action-handle-strategies/modify-conte
 import { NodeReplaceSelectedTextStrategy } from '../action-handle-strategies/modify-content-strategies/node-replace-selected-text-strategy';
 import { NodeSplitTextStrategy } from '../action-handle-strategies/apply-annotation-strategies/node-split-text-strategy';
 import { NodeUpdateAnnotationMapStrategy } from '../action-handle-strategies/apply-annotation-strategies/node-update-annotation-map-strategy';
+import { CommonAnnotation } from '../annotations/common-annotation.abstract';
 /**
  * Text node
  */
@@ -83,18 +84,30 @@ export class RTETextNode extends RTENode {
       case 'link':
         return LinkAnnotation.from(value);
     }
+    return RTENode.createAnnotationEntity(type, value);
   }
   /**
    * @inheritDoc
    */
   toJSON() {
     const annotations = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CommonAnnotation)
       .reduce((record, annotation) => {
       return Object.assign(Object.assign({}, record), annotation.toJSON());
     }, {});
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString();
+    return `<${NodeTag}${attrStr}>${this.text}</${NodeTag}>`;
+  }
   /**
    * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
    *

package/dist/collection/components/vega-rich-text-editor/dto/renderers/blocks/block-renderer.abstract.js

@@ -1,6 +1,4 @@
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
-import { BlockAnnotation } from '../../annotations/block-annotation.abstract';
-import { isNonNullable } from '../../../../../types/type-guard';
 export class RTEBlockRenderer {
   registerRef(ref, block) {
     if (ref) {
@@ -8,28 +6,13 @@ export class RTEBlockRenderer {
     }
   }
   /**
-   * Get styles from annotations
+   * The attributes of the element rendered by the block
    *
    * @param {RTEBlock} block - RTE block entity
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {Record<string, string>} - element  props
    */
-  getStyles(block) {
-    return Array.from(block.annotationMap.values())
-      .filter((annotation) => annotation instanceof BlockAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(isNonNullable)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @param {RTEBlock} block - RTE block entity
-   * @returns {string} - Annotation style
-   */
-  getClasses(block) {
-    return Array.from(block.annotationMap.values())
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(isNonNullable)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
+  getCustomAttrs(block) {
+    var _a;
+    return ((_a = block.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()) || {};
   }
 }