@globalpayments/vega 2.58.0 → 2.59.0

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';
@@ -22,10 +22,15 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { SyncUpSelectionAction } from '../actions/sync-up-selection-action';
 import { ActionHandleStrategyRegistry } from '../action-handle-strategies/action-handle-strategy-registry';
-import { NodeUpdateTextStrategy } from '../action-handle-strategies/modify-content-strategies/node-update-text-strategy';
-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';
+import { NodeUpdateTextStrategy } from '../action-handle-strategies/modify-content-strategies/node-update-text-strategy';
+import { NodeReplaceSelectedTextStrategy } from '../action-handle-strategies/modify-content-strategies/node-replace-selected-text-strategy';
+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';
 /**
  * Text node
  */
@@ -35,24 +40,35 @@ export class RTETextNode extends RTENode {
     this.type = NodeTypeEnum.TEXT;
     this.parent = parentBlock;
     this.text = text;
+    this.registerModifyStrategy();
+  }
+  /**
+   * Determines if the given HTML tag is supported by the RTETextNode.
+   *
+   * @param {string} tag - The HTML tag to check.
+   * @returns {boolean} `true` if the tag is supported, otherwise `false`.
+   */
+  static supportsHtmlTag(tag) {
+    return ['span', 'code'].includes(tag);
   }
   /**
    * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
    *
    * @param {VegaRTETextNode} richText - A rich text node
    * @param {RTETextBlock} parentBlock - Parent block
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
    * @returns {RTETextNode} an RTETextNode
    */
-  static from(richText, parentBlock) {
+  static from(richText, parentBlock, options = { autoMatchFormat: true }) {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
     if (annotations) {
       textNode.annotationMap = new Map(Object.keys(annotations)
         .map((type) => {
-        if (annotations.link) {
-          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode]));
+        if (type === 'link' && annotations.link && parentBlock) {
+          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
         }
-        return this.createAnnotationEntity(type, annotations[type]);
+        return this.createAnnotationEntity(type, annotations[type], options);
       })
         .filter(isNonNullable));
     }
@@ -63,10 +79,12 @@ export class RTETextNode extends RTENode {
    *
    * @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.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options that may be used for creating the annotation entity.
    * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
    * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
    */
-  static createAnnotationEntity(type, value) {
+  static createAnnotationEntity(type, value, options) {
+    const autoMatchFormat = !!(options && options.autoMatchFormat);
     switch (type) {
       case 'bold':
         return BoldAnnotation.from(value);
@@ -77,24 +95,40 @@ export class RTETextNode extends RTENode {
       case 'strikethrough':
         return StrikethroughAnnotation.from(value);
       case 'code':
-        return CodeAnnotation.from(value);
+        return CodeAnnotation.from(value, autoMatchFormat);
       case 'textColor':
         return TextColorAnnotation.from(value);
       case 'link':
-        return LinkAnnotation.from(value);
+        return LinkAnnotation.from(value, autoMatchFormat);
+      case 'inlineHtml': {
+        return InlineHtmlAnnotation.from(value);
+      }
+      case 'plainText': {
+        return PlainTextAnnotation.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 ||
+      annotation instanceof InlineHtmlAnnotation)
       .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() {
+    const inlineHtmlAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+    return inlineHtmlAnnotation ? this.renderWithWrapperStr(inlineHtmlAnnotation) : this.renderTextStr();
+  }
   /**
    * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
    *
@@ -102,13 +136,15 @@ export class RTETextNode extends RTENode {
    * @returns {RTETextNode} An new RTETextNode
    */
   cloneWithText(text) {
-    return new RTETextNode(generateUUID(), text, this.parent, super.cloneAnnotations());
+    const cloned = new RTETextNode(generateUUID(), text, this.parent, super.cloneAnnotations());
+    return cloned;
   }
   /**
    * @inheritDoc
    */
   clone() {
-    return new RTETextNode(this.id, this.text, this.parent, super.cloneAnnotations());
+    const cloned = new RTETextNode(this.id, this.text, this.parent, super.cloneAnnotations());
+    return cloned;
   }
   /**
    * Checks if a node is empty
@@ -118,13 +154,67 @@ export class RTETextNode extends RTENode {
   isEmpty() {
     return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
   }
+  /**
+   * @inheritDoc
+   */
+  isTextNode() {
+    return true;
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeEndOffset() {
+    if (!this.isContentEditable() && this.parent) {
+      const parent = this.parent;
+      const nodeIndex = parent.children.indexOf(this);
+      return nodeIndex + 1; // place the cursor after the non-editable text node;
+    }
+    return this.text === '\n' ? 0 : this.text.length;
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeContainer() {
+    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (element) {
+      if (this.isContentEditable()) {
+        return element.firstChild;
+      }
+      else {
+        return element.parentElement;
+      }
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isContentEditable() {
+    return true;
+  }
+  /**
+   * Registers the action strategies for the RTETextNode.
+   */
+  registerModifyStrategy() {
+    const dtoClassName = this.constructor.name;
+    if (!RTETextNode.registerActionStrategyStatus[dtoClassName]) {
+      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(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
+      ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
+    }
+  }
   /**
    * @inheritDoc
    */
   doAnnotationActionApply(action) {
     const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
     if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
-      const splitStrategy = ActionHandleStrategyRegistry.get(TextSplittableAction.name, RTETextNode.name);
+      const splitStrategy = ActionHandleStrategyRegistry.get(TextSplittableAction.name, this.constructor.name);
       if (splitStrategy) {
         const newNode = splitStrategy.execute(action, this);
         if (newNode) {
@@ -135,7 +225,9 @@ export class RTETextNode extends RTENode {
     else {
       this.applyActionToNode(this, action);
     }
-    this.parent.mergeNodes(action);
+    if (typeof this.parent.mergeNodes === 'function') {
+      this.parent.mergeNodes(action);
+    }
   }
   /**
    * @inheritDoc
@@ -179,10 +271,60 @@ export class RTETextNode extends RTENode {
       }
     }
   }
+  /**
+   * Render the text node with the inline HTML wrapper.
+   *
+   * @param {VegaInlineHtmlSchema} inlineHtmlNode - The inline HTML schema to wrap the text node.
+   * @returns {string} The HTML string representation of the text node wrapped with the inline HTML.
+   */
+  renderWithWrapperStr(inlineHtmlNode) {
+    const { htmlTag, customAttribute, customClass, customStyle, child } = inlineHtmlNode;
+    const attrs = [
+      ...((customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.toString()) || []),
+      customClass === null || customClass === void 0 ? void 0 : customClass.toString(),
+      customStyle === null || customStyle === void 0 ? void 0 : customStyle.toString(),
+    ].filter(isNonNullable);
+    const attrStr = attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+    if (!child) {
+      return `<${htmlTag}${attrStr}>${this.renderTextStr()}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child)}</${htmlTag}>`;
+  }
+  /**
+   * Generates the HTML representation of the text node.
+   *
+   * @returns {string} The HTML string representation of the text node.
+   */
+  renderTextStr() {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString();
+    // If the text contains a newline character, we need to replace it with a <br> tag.
+    if (this.text === '\n') {
+      return `<br>`;
+    }
+    return this.shouldRenderAsPlainText() ? this.text : `<${NodeTag}${attrStr}>${this.text}</${NodeTag}>`;
+  }
+  /**
+   * Determines if the text node should be rendered as plain text.
+   *
+   * @returns {boolean} `true` if the text node should be rendered as plain text, otherwise `false`.
+   */
+  shouldRenderAsPlainText() {
+    const plainTextAnnotation = super.getAnnotationByType(NodeAnnotationTypeEnum.PLAIN_TEXT);
+    if (plainTextAnnotation) {
+      return (plainTextAnnotation.plainText &&
+        Array.from(this.annotationMap.values()).filter((annotation) => (annotation instanceof NodeAnnotation &&
+          !(annotation instanceof LinkAnnotation) &&
+          !(annotation instanceof PlainTextAnnotation)) ||
+          annotation instanceof CommonAnnotation).length === 0);
+    }
+    else {
+      return false;
+    }
+  }
 }
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, RTETextNode.name, new NodeUpdateTextStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_SELECTED_TEXT, RTETextNode.name, new NodeReplaceSelectedTextStrategy());
-  ActionHandleStrategyRegistry.register(TextSplittableAction.name, RTETextNode.name, new NodeSplitTextStrategy());
-  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTETextNode.name, new NodeUpdateAnnotationMapStrategy());
-})();
+RTETextNode.registerActionStrategyStatus = {};
+RTETextNode.htmlTag = 'span';

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

@@ -1,7 +1,7 @@
-import { findParent } from '../../../utils/ui';
-import { RTEImageNode } from './nodes/image-node';
 import { RTENode } from './nodes/node.abstract';
 import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
+import { RTEDecoratorNode } from './nodes/decorator-node';
+import { isHTMLElement } from '../../../utils/ui';
 /** Manages selection range for a rich text editor, providing methods to set, sync, and create native ranges based on RTENodes and Nodes. */
 export class RTERange {
   /**
@@ -98,8 +98,8 @@ export class RTERange {
     if (startNode instanceof RTENode) {
       this._startNode = startNode;
       this._endNode = endNode;
-      const startContainer = this.getElementByRTENode(this._startNode);
-      const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
+      const startContainer = this._startNode.getRangeContainer();
+      const endContainer = this._startNode === this._endNode ? startContainer : this._endNode.getRangeContainer();
       if (startContainer) {
         this._startContainer = startContainer;
         this._endContainer = endContainer;
@@ -136,37 +136,26 @@ export class RTERange {
    * @returns {Nullable<Range>} The range instance. The return value could be null if the start node or end node are not rendered.
    */
   toNativeRange() {
-    const startContainer = this.getElementByRTENode(this._startNode);
-    const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
-    const range = new Range();
-    if (startContainer && endContainer) {
-      range.setStart(startContainer, this._startOffset);
-      range.setEnd(endContainer, this._endOffset);
-      this._startContainer = startContainer;
-      this._endContainer = endContainer;
-      this._oldNativeRange = range;
-      return range;
+    let range = null;
+    if (this._startNode) {
+      const startContainer = this._startNode.getRangeContainer();
+      const endContainer = this._startNode === this._endNode
+        ? startContainer
+        : this._endNode.getRangeContainer();
+      if (startContainer && endContainer) {
+        range = new Range();
+        range.setStart(startContainer, this._startOffset);
+        range.setEnd(endContainer, this._endOffset);
+        this._startContainer = startContainer;
+        this._endContainer = endContainer;
+        this._oldNativeRange = range;
+        return range;
+      }
     }
-    else if (this._oldNativeRange) {
+    if (!range && this._oldNativeRange) {
       return this._oldNativeRange;
     }
   }
-  /**
-   * Retrieves the DOM element associated with a given RTENode entity.
-   *
-   * @param {Nullable<RTENode>} node - Represents a node in a Rich Text Editor.
-   * @returns {Nullable<Node>} a Node object or null.
-   */
-  getElementByRTENode(node) {
-    if (node) {
-      const element = stateEntityRenderingRegistry.getDOMByEntity(node);
-      if (element) {
-        return node instanceof RTEImageNode
-          ? findParent(element, 'vega-rich-text-image-editor')
-          : element.firstChild;
-      }
-    }
-  }
   /**
    * Retrieves an RTENode based on the given element by checking its type and parent elements.
    *
@@ -177,8 +166,8 @@ export class RTERange {
     if (element) {
       const registerElement = element.nodeType === Node.TEXT_NODE
         ? element.parentElement
-        : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? element.querySelector('img')
+        : isHTMLElement(element) && RTEDecoratorNode.isDecoratorNodeContainerElement(element)
+          ? RTEDecoratorNode.getDecoratorNodeElement(element)
           : element;
       return stateEntityRenderingRegistry.getEntityByDOM(registerElement);
     }

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

@@ -0,0 +1,5 @@
+/**
+ * Base renderer class for the rich text editor.
+ */
+export class VegaRTEBaseRenderer {
+}

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

@@ -1,35 +1,19 @@
 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 {
+import { VegaRTEBaseRenderer } from '../base-renderer';
+export class RTEBlockRenderer extends VegaRTEBaseRenderer {
   registerRef(ref, block) {
     if (ref) {
       stateEntityRenderingRegistry.register(ref, block);
     }
   }
   /**
-   * 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()) || {};
   }
 }

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

@@ -1,106 +1,28 @@
 import { h } from '@stencil/core';
 import { InternalAnnotationTypeEnum } from '../../annotations/annotation.abstract';
 import { RTEBlockRenderer } from './block-renderer.abstract';
-import RTETextNodeRenderer from '../nodes/text-node-renderer';
-import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
-import { isNonNullable } from '../../../../../types/type-guard';
-import { generateUUID } from '../../../../../utils/misc';
-import { LinkAnnotationAction } from '../../actions/link-annotation-action';
-import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
-import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+import RTELinkWrapperRenderer from './link-wrapper-renderer';
+import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
 export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
+  /**
+   * Renders the text nodes of the block(RTETextBlock, RTEListItemBlock), applying link group annotation rendering if present.
+   *
+   * @param {RTETextBlock} block - The text block containing nodes to render.
+   * @param {RTERenderContext} renderContext - The context for rendering.
+   * @returns {(HTMLElement | VNode)[]} An array of rendered HTMLElements.
+   */
   renderNodes(block, renderContext) {
     const linkGroupAnnotation = block.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
     return linkGroupAnnotation
-      ? this.renderLinkNodes(block.children, renderContext)
-      : block.children.map((node) => RTETextNodeRenderer.render(node));
-  }
-  renderLinkNodes(nodes, { editable }) {
-    const blockNodes = this.groupNodesByLink(nodes);
-    return blockNodes.flatMap((item) => {
-      if (this.isLinkGroup(item)) {
-        const linkAnnotation = item[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-        return editable
-          ? this.renderLinkEditorWrapper(item, linkAnnotation)
-          : this.renderLink(item, linkAnnotation);
-      }
-      return RTETextNodeRenderer.render(item);
-    });
-  }
-  groupNodesByLink(nodes) {
-    return nodes.reduce((acc, node) => {
-      const nodeLinkAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
-      const lastGroup = acc[acc.length - 1];
-      if (isNonNullable(nodeLinkAnnotation)) {
-        if (lastGroup &&
-          this.isLinkGroup(lastGroup) &&
-          lastGroup[0].getAnnotationByType(NodeAnnotationTypeEnum.LINK).toEqual(nodeLinkAnnotation)) {
-          lastGroup.push(node);
-        }
-        else {
-          acc.push([node]);
+      ? RTELinkWrapperRenderer.render(block.children, linkGroupAnnotation, renderContext)
+      : block.children.map((node) => {
+        const nodeRenderer = RTEDTORendererManager.getRTERenderer(node.type);
+        if (nodeRenderer) {
+          return nodeRenderer.render(node, renderContext, h);
         }
-      }
-      else {
-        acc.push(node);
-      }
-      return acc;
-    }, []);
-  }
-  isLinkGroup(item) {
-    return Array.isArray(item);
-  }
-  renderLinkEditorWrapper(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    const textFromNodes = linkNodes.map((node) => node.text).join('');
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'link': {
-          const { url, text } = detail.payload;
-          const textChanged = text !== textFromNodes;
-          const groupKey = generateUUID();
-          linkNodes.forEach((node) => {
-            const linkAnnotationAction = new LinkAnnotationAction({
-              link: { href: url, groupKey: groupKey },
-              newText: textChanged ? text : undefined,
-              needMergeNode: textChanged && linkNodes.length > 1,
-              doSplit: false,
-            });
-            node.apply(linkAnnotationAction);
-          });
-          return;
-        }
-        case 'unlink': {
-          linkNodes.forEach((node) => node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK));
-          return;
-        }
-      }
-    };
-    let linkWrapperRef;
-    return (h("span", { class: "link-editor-wrapper", role: "link", tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (ref) => {
-        if (ref) {
-          linkWrapperRef = ref;
-          stateEntityRenderingRegistry.removeDirtyDomRef(ref);
-        }
-      } },
-      this.renderLink(linkNodes, linkAnnotation),
-      h("vega-rich-text-link-editor", { record: {
-          text: textFromNodes,
-          url: href,
-        }, ref: (ref) => {
-          if (ref) {
-            ref.target = linkWrapperRef;
-            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
-          }
-        } })));
-  }
-  renderLink(linkNodes, linkAnnotation) {
-    const { href } = linkAnnotation.link;
-    return (h("a", { class: "v-rte--link", href: href, target: "_blank" }, linkNodes.map((node) => RTETextNodeRenderer.render(node))));
+      });
   }
 }

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

@@ -22,15 +22,6 @@ class RTECodeBlockRenderer extends RTEBlockRenderer {
       }
     };
   }
-  /**
-   * Check the input block type.
-   *
-   * @param {RTEBlock} block - The input block.
-   * @returns {boolean} - Return true if the input block is a code block.
-   */
-  canHandle(block) {
-    return block instanceof RTECodeBlock;
-  }
   /**
    * Render the code block.
    *

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

@@ -0,0 +1,12 @@
+import { h } from '@stencil/core';
+import { RTEBlockRenderer } from './block-renderer.abstract';
+import RTEDTORendererManager from '../../../../../helpers/rte-manager/dto-renderer-manager';
+class RTEHTMLBlockRenderer extends RTEBlockRenderer {
+  render(block, renderContext) {
+    const BlockTag = block.htmlTag;
+    return (h(BlockTag, Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), block.children.map((child) => {
+      return RTEDTORendererManager.getRTERenderer(child.type).render(child, renderContext, h);
+    })));
+  }
+}
+export default new RTEHTMLBlockRenderer();

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

@@ -1,13 +1,9 @@
 import { h } from '@stencil/core';
-import { RTEImageBlock } from '../../blocks/image-block';
 import { RTEBlockRenderer } from './block-renderer.abstract';
 import RTEImageNodeRenderer from '../nodes/image-node-renderer';
 class RTEImageBlockRenderer extends RTEBlockRenderer {
-  canHandle(block) {
-    return block instanceof RTEImageBlock;
-  }
   render(block, renderContext) {
-    return (h("div", { key: block.id, style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.children.map((node) => {
+    return (h("div", Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), block.children.map((node) => {
       return RTEImageNodeRenderer.render(node, renderContext);
     })));
   }