@globalpayments/vega 2.60.0 → 2.62.0

package/dist/collection/components/vega-date-picker/vega-date-picker.js

@@ -24,12 +24,13 @@ import { VegaDatePickerElementAppenderController } from './slimmers/controllers/
 import { VegaDatePickerKeyboardController } from './slimmers/controllers/vega-date-picker-keyboard-controller';
 import { ComponentLoadRequired } from '../../decorators/method-decorators/component-load-required';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaChange, VegaMonthYearChange } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaDatePickerRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-date-picker/runtime-metrics-payload-definition';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaDatePickerMonthYearDropdownRenderer } from './slimmers/renderers/vega-date-picker-calendar-month-year-dropdown-renderer';
+import { VegaDatePickerMonthYearChangeEventController } from './slimmers/controllers/vega-date-picker-month-year-change-event-controller';
 /**
  * @vegaVersion 1.3.0
  */
@@ -84,10 +85,12 @@ export class VegaDatePicker {
         ].filter(Boolean);
       },
     });
+    this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaMonthYearChange);
     this.changeEventEmitter = createEventEmitSlimmer(VegaDatePicker, VegaChange);
     this.inputEventPrevent = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaDatePickerRenderer.getDatePickerContainer());
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDatePickerRuntimeMetricsPayloadDefinition);
     this.monthYearDropdownRenderer = new VegaDatePickerMonthYearDropdownRenderer();
+    this.vegaDatePickerMonthYearChangeEventController = new VegaDatePickerMonthYearChangeEventController();
     /**
      * Specifies the selection mode of the date picker.
      *
@@ -798,6 +801,55 @@ export class VegaDatePicker {
         "resolved": "string | string[]",
         "references": {}
       }
+    }, {
+      "method": "vegaMonthYearChange",
+      "name": "vegaMonthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
+    }, {
+      "method": "monthYearChange",
+      "name": "monthYearChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.61.0"
+          }],
+        "text": "An event emitter notifying the month and year change when the navigation buttons are clicked or the month and year dropdowns are selected in the date picker,"
+      },
+      "complexType": {
+        "original": "DatePickerMonthYearTypes",
+        "resolved": "DatePickerMonthYearType[] | { month: string; year: string; }",
+        "references": {
+          "DatePickerMonthYearTypes": {
+            "location": "import",
+            "path": "./types"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "doClose": {
@@ -923,6 +975,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "formFieldController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "monthYearChangeEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "changeEventEmitter", void 0);
@@ -935,6 +990,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePicker.prototype, "monthYearDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePicker.prototype, "vegaDatePickerMonthYearChangeEventController", void 0);
 __decorate([
   ComponentLoadRequired()
 ], VegaDatePicker.prototype, "watchValue", null);

package/dist/collection/components/vega-input/vega-input.css

@@ -283,6 +283,10 @@ input[type=number] {
   -moz-appearance: textfield;
 }
 
+input[type=password]::-ms-reveal {
+  display: none;
+}
+
 .vega-input-container.compact-input-width {
   gap: 0px;
 }

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

@@ -27,6 +27,13 @@ export class VegaRichTextContent {
      * @vegaVersion 2.34.0
      */
     this.contentEditable = false;
+    /**
+     * Defines the configuration for rich text content extensions.
+     * It enables support for custom nodes, ensuring that extended content is rendered correctly.
+     *
+     * @vegaVersion 2.62.0
+     */
+    this.extensions = [];
   }
   watchValueUpdate() {
     methodPlaceholder();
@@ -77,6 +84,30 @@ export class VegaRichTextContent {
           }],
         "text": "Specifies the text or formatted information displayed by the rich text content, which can be either VegaRTEContent or VegaRTEContentBlock.\nIt is recommended to use the VegaRTEContent type.\nOnly in exceptional cases should the original data in the VegaRTEContentBlock type be used."
       }
+    },
+    "extensions": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaRTEExtension[]",
+        "resolved": "VegaRTEExtension[]",
+        "references": {
+          "VegaRTEExtension": {
+            "location": "import",
+            "path": "../vega-rich-text-editor/extensions/extension.abstract"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.62.0"
+          }],
+        "text": "Defines the configuration for rich text content extensions.\nIt enables support for custom nodes, ensuring that extended content is rendered correctly."
+      },
+      "defaultValue": "[]"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-rich-text-editor/constants/constant.js

@@ -32,3 +32,13 @@ export const RTE_TEXT_COLORS = [
   },
 ];
 export const ZERO_WIDTH_SPACE = '\u200b';
+export const VegaRTEPresetToolbarItems = [
+  ['textStyles'],
+  ['bold', 'italic', 'underline', 'strikethrough', 'code'],
+  ['textColor'],
+  ['horizontalAlignment', 'bulletsNumbers'],
+  ['moreIndent', 'lessIndent'],
+  ['link'],
+  ['image'],
+  ['clearStyle'],
+];

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

@@ -52,5 +52,16 @@ export class ActionHandleStrategyRegistry {
       LogUtility.error(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
     }
   }
+  /**
+   * Check if the action type can be handled by strategy for the specific RTE instance.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {RTENode | RTEBlock} RTEInstance - The rich text editor node.
+   * @returns {boolean} - Whether the action type can be handled by the strategy.
+   */
+  static canHandle(actionType, RTEInstance) {
+    const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+    return strategy ? true : false;
+  }
 }
 ActionHandleStrategyRegistry.registry = new Map();

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/apply-annotation-strategies/node-split-text-strategy.js

@@ -30,7 +30,8 @@ export class NodeSplitTextStrategy extends ActionHandleStrategy {
           if (noTextRangeSelected) {
             return this.insertNewNode(startOffset, target);
           }
-          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range) &&
+            target.isContentEditable()) {
             const splittedTextNodes = this.splitTextNode(selectionRangeAnnotation.range, target);
             if (item.annotationMap.has('LINK')) {
               item.apply(new LinkGroupNodeSplitAction(splittedTextNodes));
@@ -57,10 +58,12 @@ export class NodeSplitTextStrategy extends ActionHandleStrategy {
   insertNewNode(startOffset, target) {
     const newNode = target.cloneWithText('');
     this.setApplyTargetNode(newNode);
-    if (startOffset === 0) {
+    const index = target.parent.children.findIndex((node) => node === target);
+    if (startOffset === 0 || (!target.isContentEditable() && startOffset === index)) {
       return [newNode, target];
     }
-    if (startOffset === target.text.length) {
+    if (startOffset === target.text.length ||
+      (!target.isContentEditable() && startOffset === index + 1)) {
       return [target, newNode];
     }
     const beforeNode = target.cloneWithText(target.text.substring(0, startOffset));

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/block-delete-text-or-decorator-node-strategy.js

@@ -57,8 +57,9 @@ export class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeConte
     else {
       let previousNode = this.getPreviousNode(startContainerNode);
       let nextNode = null;
+      const isCurrentNodeEmpty = startContainerNode.isEmpty();
       if (target.children.length && previousNode && previousNode.parent !== target) {
-        if (startContainerNode.isEmpty()) {
+        if (isCurrentNodeEmpty) {
           target.apply(new RemoveChildrenAction(startContainerNode));
         }
         if (target.type === previousNode.parent.type) {
@@ -66,7 +67,7 @@ export class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeConte
         }
       }
       else {
-        if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
+        if (this.isContentFirstNode(startContainerNode) && isCurrentNodeEmpty) {
           nextNode = this.getNextNode(startContainerNode);
         }
         /**
@@ -76,21 +77,26 @@ export class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeConte
          * \n
          * test
          */
-        if (startContainerNode.isEmpty()) {
+        if (isCurrentNodeEmpty) {
           target.apply(new RemoveChildrenAction(startContainerNode));
         }
         /**
-         * Remove line break
+         * Remove line break or non-editable node
          *
          * @example caret at the begin of second line
          * \n
          * test
+         * @example caret at the end of non-editable node and start of the text node
+         * <img/><span>test</span>
          */
-        if (previousNode && previousNode.isTextNode() && previousNode.isEmpty()) {
+        if (previousNode &&
+          previousNode.isTextNode() &&
+          (previousNode.isEmpty() ||
+            (!previousNode.isContentEditable() && previousNode.parent === target))) {
           const shouldRemoveNode = previousNode;
           previousNode = this.getPreviousNode(previousNode);
           shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
-          if (!previousNode) {
+          if (!previousNode && !isCurrentNodeEmpty) {
             nextNode = startContainerNode;
           }
         }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/code-block-remove-self-strategy.js

@@ -69,8 +69,8 @@ export class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy
    * @returns {number} - The number value.
    */
   getRTENodeEndOffset(node) {
-    if (node && node.type !== 'CODE_BLOCK_NODE') {
-      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
+    if (node) {
+      return node.getRangeEndOffset();
     }
     return 0;
   }

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/insert-node-to-nearest-root-strategy.js

@@ -0,0 +1,57 @@
+import { InsertChildrenAfterAction } from '../../actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../actions/insert-children-before-block';
+import { RemoveChildrenAction } from '../../actions/remove-child-action';
+import { UpdateCursorPositionAction } from '../../actions/update-cursor-position-action';
+import { ActionHandleStrategy } from '../action-handle-strategy.abstract';
+/**
+ * Insert a new node in nearest position of parent block strategy.
+ */
+export class InsertNodeToNearestRootStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rteRange, nodeToBeInserted } = action;
+    const { startNode, startOffset } = rteRange;
+    if (startNode) {
+      const parent = target;
+      if (startNode.isContentEditable() && startNode.isTextNode()) {
+        if (startNode.text === '\n' || !startNode.text || startOffset === 0) {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+        else {
+          const startText = startNode.text.substring(0, startOffset);
+          const endText = startNode.text.substring(startOffset);
+          const startTextNode = startNode.cloneWithText(startText);
+          const endTextNode = startNode.cloneWithText(endText);
+          const insertNodes = [startTextNode, nodeToBeInserted];
+          if (endText) {
+            insertNodes.push(endTextNode);
+          }
+          parent.apply(new InsertChildrenBeforeAction(startNode, ...insertNodes));
+          parent.apply(new RemoveChildrenAction(startNode));
+        }
+      }
+      else {
+        if (startOffset !== 0) {
+          parent.apply(new InsertChildrenAfterAction(startNode, nodeToBeInserted));
+        }
+        else {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+      }
+      this.updateCursorPosition(nodeToBeInserted);
+    }
+  }
+  /**
+   * Update the cursor position to end of the inserted node.
+   *
+   * @param {RTENode} node - node to find root content
+   */
+  updateCursorPosition(node) {
+    const root = this.getRootContent(node.parent);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(node));
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/action-handle-strategies/modify-content-strategies/update-cursor-position-strategy.js

@@ -11,12 +11,13 @@ export class UpdateCursorPositionStrategy extends ActionHandleStrategy {
    * @inheritDoc
    */
   handleAction(action, target) {
-    const { offset, nextFocusNode } = action;
+    const { offset, nextFocusNode, immediatelyRun } = action;
     const host = stateEntityRenderingRegistry.getDOMByEntity(target);
     if (host) {
       changeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalUpdateRTECursorPosition), {
         node: nextFocusNode,
         offset,
+        updateDirectly: immediatelyRun,
       });
     }
   }

package/dist/collection/components/vega-rich-text-editor/dto/actions/insert-node-to-nearest-root-action.js

@@ -0,0 +1,14 @@
+import { ModifyContentAction, ModifyContentActionType } from './modify-content-action.abstract';
+/**
+ * Insert a new children to the nearest position of the parent container
+ *
+ * @example parent.apply(new InsertNodeToNearestRoot(rteRange, nodeToBeInserted))
+ */
+export class InsertNodeToNearestRootAction extends ModifyContentAction {
+  constructor(rteRange, nodeToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
+    this.rteRange = rteRange;
+    this.nodeToBeInserted = nodeToBeInserted;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/dto/actions/modify-content-action.abstract.js

@@ -28,6 +28,7 @@ export var ModifyContentActionType;
   ModifyContentActionType["DELETE_LINK_GROUP"] = "DELETE_LINK_GROUP";
   ModifyContentActionType["UPDATE_CURSOR_POSITION"] = "UPDATE_CURSOR_POSITION";
   ModifyContentActionType["INSERT_TEXT_TO_DECORATOR_NODE"] = "INSERT_TEXT_TO_DECORATOR_NODE";
+  ModifyContentActionType["INSERT_NODE_TO_NEAREST_ROOT"] = "INSERT_NODE_TO_NEAREST_ROOT";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node

package/dist/collection/components/vega-rich-text-editor/dto/actions/update-cursor-position-action.js

@@ -2,7 +2,7 @@ import { ModifyContentAction, ModifyContentActionType } from './modify-content-a
 /**
  * Update the cursor position in the editor.
  *
- * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset]))
+ * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset], [immediatelyRun]))
  */
 export class UpdateCursorPositionAction extends ModifyContentAction {
   /**
@@ -10,11 +10,14 @@ export class UpdateCursorPositionAction extends ModifyContentAction {
    *
    * @param {RTENode} nextFocusNode - The rich text editor needs focus node.
    * @param {number} offset - The cursor offset position.
+   * @param {boolean} immediatelyRun - Whether to immediately set the cursor position after applying it. Usually the set action will trigger after the UI renders.
    */
-  constructor(nextFocusNode, offset) {
+  constructor(nextFocusNode, offset, immediatelyRun = false) {
     super();
     this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
+    this.immediatelyRun = false;
     this.nextFocusNode = nextFocusNode;
     this.offset = offset;
+    this.immediatelyRun = immediatelyRun;
   }
 }

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

@@ -137,6 +137,18 @@ export class VegaRTEContent {
   apply(action) {
     ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
+  /**
+   * Get the last node in the content.
+   *
+   * @returns {Nullable<RTENode>} The last node in the content or null if there are no nodes.
+   */
+  getLastNode() {
+    if (this.children.length === 0) {
+      return null;
+    }
+    const lastBlock = this.children[this.children.length - 1];
+    return lastBlock.getLastNode();
+  }
   /**
    * Convert text to list.
    *

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

@@ -31,6 +31,7 @@ import { InlineHtmlAnnotation } from '../annotations/inline-html-annotation';
 import { LinkGroupNodeSplitStrategy } from '../action-handle-strategies/modify-content-strategies/link-group-node-split-strategy';
 import { DeleteLinkGroupStrategy } from '../action-handle-strategies/modify-content-strategies/delete-link-group-strategy';
 import { PlainTextAnnotation } from '../annotations/plain-text-annotation';
+import { LinkAnnotationAction } from '../actions/link-annotation-action';
 /**
  * Text node
  */
@@ -63,17 +64,29 @@ export class RTETextNode extends RTENode {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
     if (annotations) {
-      textNode.annotationMap = new Map(Object.keys(annotations)
-        .map((type) => {
-        if (type === 'link' && annotations.link && parentBlock) {
-          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
-        }
-        return this.createAnnotationEntity(type, annotations[type], options);
-      })
-        .filter(isNonNullable));
+      textNode.annotationMap = this.generateTextAnnotationMap(annotations, options, parentBlock, textNode);
     }
     return textNode;
   }
+  /**
+   * Generates a map of text annotations for the given set of annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - The annotations to be converted into a map.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @param {RTETextBlock} parentBlock - The parent text block.
+   * @param {RTETextNode} textNode - The text node.
+   * @returns {NodeAnnotations} The map of text annotations.
+   */
+  static generateTextAnnotationMap(annotations, options, parentBlock, textNode) {
+    return new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'link' && annotations.link && parentBlock && textNode) {
+        parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
+      }
+      return this.createAnnotationEntity(type, annotations[type], options);
+    })
+      .filter(isNonNullable));
+  }
   /**
    * Creates different types of text annotations based on the provided type and value.
    *
@@ -200,9 +213,10 @@ export class RTETextNode extends RTENode {
       if (this.isContentEditable()) {
         ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
         ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
-        ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+        ActionHandleStrategyRegistry.register(LinkAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       }
-      ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+      ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
       ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
       ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
       RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
@@ -251,6 +265,18 @@ export class RTETextNode extends RTENode {
     if (!(annotation instanceof SelectionRangeAnnotation)) {
       this.syncUpSelectedNodes(node);
     }
+    /**
+     * 1. Try to get the specific strategy for the action and node type first (e.g., LinkAnnotationAction on RTETextNode).
+     * 2. If no specific strategy found, try to get the generic NodeUpdateAnnotationMapStrategy for AnnotationAction on RTETextNode.
+     *
+     * This is useful when we want to check if there is a specific strategy for an action-node combination first, we can use the specific strategy to check if the special toolbar button should be enabled or disabled.
+     * TODO: Update the other annotation actions to follow this pattern. https://gethired.atlassian.net/browse/VD-7367
+     */
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, node.constructor.name);
+    if (strategy) {
+      strategy.execute(action, node);
+      return;
+    }
     const updateAnnotationMapStrategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTETextNode.name);
     if (updateAnnotationMapStrategy) {
       updateAnnotationMapStrategy.execute(action, node);

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

@@ -8,6 +8,7 @@ import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-e
 import RTETextNodeRenderer from '../nodes/text-node-renderer';
 import { isNonNullable } from '../../../../../types/type-guard';
 import { UnlinkLinkGroupAction } from '../../actions/unlink-link-group-action';
+import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
 /**
  * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
  */
@@ -47,11 +48,12 @@ class RTELinkWrapperRenderer {
    * @param {RTETextNode[]} nodes - Array of text nodes to render.
    * @param {LinkGroupAnnotation} linkGroupAnnotation - link group annotation
    * @param {RTERenderContext} context - Context containing render options.
-   * @returns {HTMLElement[]} - Array of rendered HTML elements.
+   * @returns {VegaRTERenderResult[]} - Array of rendered HTML elements.
    */
   render(nodes, linkGroupAnnotation, { editable }) {
     const blockNodes = this.groupNodesByLink(nodes);
-    return blockNodes.flatMap((item) => {
+    return blockNodes
+      .flatMap((item) => {
       if (this.isLinkGroup(item)) {
         // TODO: should revert to above code while https://gethired.atlassian.net/browse/VD-6513 have be fixed.
         // 	const linkAnnotation: LinkAnnotation = item[0].getAnnotationByType<LinkAnnotation>(
@@ -69,8 +71,12 @@ class RTELinkWrapperRenderer {
           ? this.renderLinkEditorWrapper(item, linkAnnotation, linkGroupAnnotation)
           : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
       }
-      return RTETextNodeRenderer.render(item);
-    });
+      const nodeRenderer = RTEDTORendererManager.getRTERenderer(item.type);
+      if (nodeRenderer) {
+        return nodeRenderer.render(item, { editable }, h);
+      }
+    })
+      .filter(isNonNullable);
   }
   groupNodesByLink(nodes) {
     return nodes.reduce((acc, node) => {