@globalpayments/vega 2.57.1 → 2.59.0

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

@@ -0,0 +1,125 @@
+import { h } from '@stencil/core';
+import { LinkAnnotationAction } from '../../actions/link-annotation-action';
+import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { createEnterKeyHandlerToTriggerClick } from '../../../../../utils/accessibility';
+import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+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 RTETextNodeRenderer from '../nodes/text-node-renderer';
+import { isNonNullable } from '../../../../../types/type-guard';
+import { UnlinkLinkGroupAction } from '../../actions/unlink-link-group-action';
+/**
+ * Renders link nodes and wraps them with link editor or anchor element based on edit mode.
+ */
+class RTELinkWrapperRenderer {
+  constructor() {
+    this.handleChange = ({ detail }, textFromNodes, linkNodes) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== textFromNodes;
+          linkNodes.forEach((node) => {
+            const groupKey = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK).link.groupKey;
+            const linkAnnotationAction = new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && linkNodes.length > 1,
+              doSplit: false,
+              type: 'update_link',
+            });
+            node.apply(linkAnnotationAction);
+          });
+          return;
+        }
+        case 'unlink': {
+          linkNodes.forEach((node) => {
+            node.parent.apply(new UnlinkLinkGroupAction(node.annotationMap.get(NodeAnnotationTypeEnum.LINK).link.groupKey));
+            node.deleteAnnotationByType(NodeAnnotationTypeEnum.LINK);
+          });
+          return;
+        }
+      }
+    };
+  }
+  /**
+   * Render link nodes, grouping them by link group annotation if necessary.
+   *
+   * @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.
+   */
+  render(nodes, linkGroupAnnotation, { editable }) {
+    const blockNodes = this.groupNodesByLink(nodes);
+    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>(
+        // 		NodeAnnotationTypeEnum.LINK,
+        // 	) as LinkAnnotation;
+        let linkAnnotation;
+        item.find((node) => {
+          const link = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+          if (link) {
+            linkAnnotation = link;
+            return true;
+          }
+        });
+        return editable
+          ? this.renderLinkEditorWrapper(item, linkAnnotation, linkGroupAnnotation)
+          : this.renderLink(item, linkAnnotation, linkGroupAnnotation);
+      }
+      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]);
+        }
+      }
+      else {
+        acc.push(node);
+      }
+      return acc;
+    }, []);
+  }
+  isLinkGroup(item) {
+    return Array.isArray(item);
+  }
+  renderLinkEditorWrapper(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    const { href } = linkAnnotation.link;
+    const textFromNodes = linkNodes.map((node) => node.text).join('');
+    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, linkGroupAnnotation),
+      h("vega-rich-text-link-editor", { record: {
+          text: textFromNodes,
+          url: href,
+        }, ref: (ref) => {
+          if (ref) {
+            ref.target = linkWrapperRef;
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              this.handleChange(e, textFromNodes, linkNodes);
+            });
+          }
+        } })));
+  }
+  renderLink(linkNodes, linkAnnotation, linkGroupAnnotation) {
+    return (h("a", Object.assign({}, linkGroupAnnotation.toJsx(linkAnnotation)), linkNodes.map((node) => RTETextNodeRenderer.render(node))));
+  }
+}
+export default new RTELinkWrapperRenderer();

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

@@ -1,14 +1,10 @@
 import { h } from '@stencil/core';
 import { RTEBlockRenderer } from './block-renderer.abstract';
-import { RTEListBlock } from '../../blocks/list-block';
 import RTEListItemBlockRenderer from './list-item-block-renderer';
 class RTEListBlockRenderer extends RTEBlockRenderer {
-  canHandle(block) {
-    return block instanceof RTEListBlock;
-  }
   render(block, renderContext) {
-    const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
-    return (h(BlockTag, { key: block.id, ref: (ref) => super.registerRef(ref, block) }, block.children.map((listItemBlock) => RTEListItemBlockRenderer.render(listItemBlock, renderContext))));
+    const BlockTag = block.getBlockTag();
+    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((listItemBlock) => RTEListItemBlockRenderer.render(listItemBlock, renderContext))));
   }
 }
 export default new RTEListBlockRenderer();

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

@@ -3,7 +3,7 @@ import RTEListBlockRenderer from './list-block-renderer';
 import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
 class RTEListItemBlockRenderer extends RTEBlockTextNodesRenderer {
   render(block, renderContext) {
-    return (h("li", { key: block.id, ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+    return (h("li", Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }),
       super.renderNodes(block, renderContext),
       this.renderChildren(block.nestList, renderContext)));
   }

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

@@ -1,34 +1,9 @@
 import { h } from '@stencil/core';
-import { RTETextBlock } from '../../blocks/text-block';
 import { RTEBlockTextNodesRenderer } from './block-text-nodes-renderer.abstract';
 class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
-  canHandle(block) {
-    return block instanceof RTETextBlock;
-  }
   render(block, renderContext) {
-    const BlockTag = this.getBlockTagByType(block.type);
-    return (h(BlockTag, { key: block.id, ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
-  }
-  getBlockTagByType(type) {
-    switch (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':
-        return 'p';
-    }
+    const BlockTag = block.getBlockTag();
+    return (h(BlockTag, Object.assign({}, this.getCustomAttrs(block), { key: block.id, ref: (ref) => super.registerRef(ref, block), style: block.getStyles(), class: block.getClasses() }), super.renderNodes(block, renderContext)));
   }
 }
 export default new RTETextBlockRenderer();

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

@@ -1,11 +1,14 @@
 import { h } from '@stencil/core';
 import { ImageAnnotation } from '../../annotations/image-annotation';
-import { NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
+import { NodeAnnotation, NodeAnnotationTypeEnum } from '../../annotations/node-annotation.abstract';
 import { ImageAnnotationAction } from '../../actions/image-annotation-action';
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
 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 { RTENodeRenderer } from './node-renderer.abstract';
+import { isNonNullable } from '../../../../../types/type-guard';
+import { CommonAnnotationTypeEnum } from '../../annotations/common-annotation.abstract';
+import { RTEDecoratorNode } from '../../nodes/decorator-node';
 class RTEImageNodeRenderer extends RTENodeRenderer {
   constructor() {
     super(...arguments);
@@ -36,14 +39,74 @@ class RTEImageNodeRenderer extends RTENodeRenderer {
     };
   }
   render(node, renderContext) {
-    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    const { size, alt } = imageAnnotation || new ImageAnnotation('md', '');
-    return renderContext.editable ? (h("vega-rich-text-image-editor", { key: node.id, style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+    const imageAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE) ||
+      new ImageAnnotation('md', '');
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { key: node.id, class: this.getClassesForImageEditor(node), size: imageAnnotation.size, alt: imageAnnotation.alt, ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
-      } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
+      } }, this.renderImage(imageAnnotation, node, renderContext))) : (this.renderImage(imageAnnotation, node, renderContext));
   }
-  renderImage(alt, node, renderContext) {
-    return (h("img", { style: renderContext.editable ? { width: '100%' } : super.getStyles(node), alt: alt, src: node.url, ref: (ref) => super.registerRef(ref, node) }));
+  /**
+   * The function will render an image.
+   * In edit mode, it will be placed in the "vega-rich-text-image-editor" component as a slot.
+   * In view mode, the img image will be displayed directly.
+   *
+   * @param {ImageAnnotation} imageAnnotation - the image annotation of the image node
+   * @param {RTEImageNode} node  - the current image node
+   * @returns {HTMLElement} return a image element
+   */
+  renderImage(imageAnnotation, node, renderContext) {
+    var _a;
+    return (h("img", Object.assign({}, (_a = node.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render({ filterAttributes: ['width', 'height'] }), { class: this.getClassesForImageNode(node, renderContext.editable), style: renderContext.editable
+        ? Object.assign(Object.assign({}, node.getStyles()), { width: '100%' }) : Object.assign(Object.assign({}, node.getStyles()), imageAnnotation.renderStyle({ standalone: true })), alt: imageAnnotation.alt, "data-size": imageAnnotation.size, src: node.url, ref: (ref) => super.registerRef(ref, node) })));
+  }
+  /**
+   * Get the custom class string of the current RTEImageNode.
+   *
+   * @returns {Nullable<string>} A string of classes.
+   */
+  getCommonClasses(node) {
+    const customClassAnnotation = node.getAnnotationByType(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    if (customClassAnnotation) {
+      return customClassAnnotation.customClass
+        .filter(isNonNullable)
+        .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+    }
+    return null;
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(node, options = { standalone: false }) {
+    return Array.from(node.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get the class string for the image node.
+   *
+   * @param {RTEImageNode} node - The image node
+   * @param {boolean} editable - Whether the editor is in editable mode
+   * @returns {string} - The class string for the image node
+   */
+  getClassesForImageNode(node, editable) {
+    var _a;
+    return editable
+      ? `${RTEDecoratorNode.DECORATOR_NODE_CLASS} ${(_a = this.getCommonClasses(node)) !== null && _a !== void 0 ? _a : ''}`
+      : node.getClasses();
+  }
+  /**
+   * Get the class string for the image editor.
+   *
+   * @param {RTEImageNode} node - The image node
+   * @returns {string} - The class string for the image editor
+   */
+  getClassesForImageEditor(node) {
+    return `${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS} ${this.getClasses(node)}`;
   }
 }
 export default new RTEImageNodeRenderer();

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

@@ -1,35 +1,9 @@
 import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
-import { NodeAnnotation } from '../../annotations/node-annotation.abstract';
-export class RTENodeRenderer {
+import { VegaRTEBaseRenderer } from '../base-renderer';
+export class RTENodeRenderer extends VegaRTEBaseRenderer {
   registerRef(ref, node) {
     if (ref) {
       stateEntityRenderingRegistry.register(ref, node);
     }
   }
-  /**
-   * Get styles from annotations
-   *
-   * @param {RTENode} node - The DTO node
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles(node) {
-    return Array.from(node.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(Boolean)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @param {RTENode} node - The DTO node
-   * @returns {string} - Annotation style
-   */
-  getClasses(node) {
-    return Array.from(node.annotationMap.values())
-      .filter((annotation) => annotation instanceof NodeAnnotation)
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(Boolean)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
-  }
 }

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

@@ -5,11 +5,9 @@ import { ZERO_WIDTH_SPACE } from '../../../constants/constant';
 import TextNodeElementRenderingRegistry from '../../../slimmers/controllers/text-node-rendering-registry';
 class RTETextNodeRenderer extends RTENodeRenderer {
   render(node) {
-    const codeAnnotation = node.annotationMap.get(NodeAnnotationTypeEnum.CODE);
-    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
-      return (h("code", { key: node.id, style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
-    }
-    return (h("span", { key: node.id, style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+    const inlineHtmlAnnotation = node.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+    const textNodeDom = this.renderText(node);
+    return inlineHtmlAnnotation ? this.renderWithWrapper(textNodeDom, inlineHtmlAnnotation) : textNodeDom;
   }
   registerRef(ref, node) {
     super.registerRef(ref, node);
@@ -20,5 +18,21 @@ class RTETextNodeRenderer extends RTENodeRenderer {
       }
     }
   }
+  renderWithWrapper(textNodeDom, inlineHtmlNode) {
+    const { htmlTag: HtmlTag, customStyle, customAttribute, customClass, } = inlineHtmlNode;
+    const attrs = Object.assign(Object.assign({}, customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.render()), { style: customStyle === null || customStyle === void 0 ? void 0 : customStyle.renderStyle(), class: customClass === null || customClass === void 0 ? void 0 : customClass.renderClass().join(' ') });
+    if (!inlineHtmlNode.child) {
+      return h(HtmlTag, Object.assign({}, attrs), textNodeDom);
+    }
+    return h(HtmlTag, Object.assign({}, attrs), this.renderWithWrapper(textNodeDom, inlineHtmlNode.child));
+  }
+  renderText(node) {
+    var _a, _b;
+    const HtmlTag = ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrs = Object.assign(Object.assign({}, (_b = node.getCustomAttributesAnnotation()) === null || _b === void 0 ? void 0 : _b.render()), { key: node.id, style: node.getStyles(), class: node.getClasses(), ref: (ref) => this.registerRef(ref, node) });
+    return h(HtmlTag, Object.assign({}, attrs), node.text || ZERO_WIDTH_SPACE);
+  }
 }
 export default new RTETextNodeRenderer();

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

@@ -0,0 +1,47 @@
+import RTETextBlockRenderer from './blocks/text-block-renderer';
+import RTEImageBlockRenderer from './blocks/image-block-renderer';
+import RTEListBlockRenderer from './blocks/list-block-renderer';
+import RTEListItemBlockRenderer from './blocks/list-item-block-renderer';
+import RTECodeBlockRenderer from './blocks/code-block-renderer';
+import RTEHTMLBlockRenderer from './blocks/html-block-renderer';
+import ImageNodeRenderer from './nodes/image-node-renderer';
+import TextNodeRenderer from './nodes/text-node-renderer';
+import RTEDTORendererManager from '../../../../helpers/rte-manager/dto-renderer-manager';
+/**
+ * RTEBlockRendererFactory is a factory class that provides methods to get the appropriate block renderer.
+ * It registers various block renderers for different types of blocks and nodes.
+ */
+class RTEBlockRendererFactory {
+  /**
+   * Registers the default block renderers and node renderers.
+   */
+  constructor() {
+    RTEDTORendererManager.registerRTEDTORenderer('title', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('subtitle', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('paragraph', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-1', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-2', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-3', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-4', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-5', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('heading-6', RTETextBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('bullet-list', RTEListBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('number-list', RTEListBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('list-item', RTEListItemBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('image', RTEImageBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('code-block', RTECodeBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('html-block', RTEHTMLBlockRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('TEXT', TextNodeRenderer);
+    RTEDTORendererManager.registerRTEDTORenderer('IMAGE', ImageNodeRenderer);
+  }
+  /**
+   * getBlockRenderer retrieves the renderer for a given block type.
+   *
+   * @param {string} type - The type of the block for which the renderer is needed.
+   * @returns {Nullable<BaseBlockRenderer>} - The renderer instance if found, otherwise null.
+   */
+  getBlockRenderer(type) {
+    return RTEDTORendererManager.getRTERenderer(type);
+  }
+}
+export default new RTEBlockRendererFactory();

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

@@ -0,0 +1,69 @@
+import { RTETextBlock } from './blocks/text-block';
+import { RTEImageBlock } from './blocks/image-block';
+import { RTEListBlock } from './blocks/list-block';
+import { RTEListItemBlock } from './blocks/list-item-block';
+import { RTEHtmlBlock } from './blocks/html-block';
+import { RTECodeBlock } from './blocks/code-block';
+import { RTETextNode } from './nodes/text-node';
+import { RTEImageNode } from './nodes/image-node';
+import RTEDTOClassManager from '../../../helpers/rte-manager/dto-class-manager';
+import RTEDTOActionStrategyManager from '../../../helpers/rte-manager/dto-action-strategy-manager';
+import ElementToDTOClassStrategyManager from '../../../helpers/rte-manager/element-dto-class-strategy-manager';
+import { HtmlBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/html-block-strategy';
+import { UlToRTEListBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/ul-to-rte-list-block-strategy';
+import { OlToRTEListBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/ol-to-rte-list-block-strategy';
+import { ULNotLiChildToRTEListItemBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/ul-not-li-child-to-rte-list-item-block';
+import { LiToRTEListItemBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/li-to-rte-list-item-block-strategy';
+import { VegaCodeBlockToRTECodeBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/vega-code-block-to-rte-code-block-strategy';
+import { JiraCodeToRTECodeBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/jira-code-to-rte-code-block-strategy';
+import { InlineBlockToRTETextBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/inline-block-to-rte-text-block-strategy';
+import { ImgToRTEImageBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/img-to-rte-image-block-strategy';
+import { VegaImageToRTEImageBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/vega-image-to-rte-image-block-strategy';
+import { SpanImageToRTEImageBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/span-img-to-rte-image-block-strategy';
+import { ContinueInlineToRTETextBlockStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy';
+import { PlainTextToTextNodeStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/plain-text-to-text-node-strategy';
+import { InlineElementToTextNodeStrategy } from '../slimmers/controllers/helper/element-to-dto-strategy/inline-element-to-text-node-strategy';
+/**
+ * Register and setup the default DTO classes and their basic action strategies.
+ */
+// Register the default block DTOs
+RTEDTOClassManager.registerRTEDTOClass('paragraph', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('title', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('subtitle', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-1', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-2', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-3', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-4', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-5', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('list-item', RTEListItemBlock);
+RTEDTOClassManager.registerRTEDTOClass('bullet-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('number-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageBlock);
+RTEDTOClassManager.registerRTEDTOClass('code-block', RTECodeBlock);
+RTEDTOClassManager.registerRTEDTOClass('html-block', RTEHtmlBlock);
+// Register the default node DTOs
+RTEDTOClassManager.registerRTEDTOClass('text', RTETextNode);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageNode);
+// Register basic strategies for default block DTOs
+RTEDTOActionStrategyManager.registerBlockBasicStrategies(RTETextBlock.name);
+RTEDTOActionStrategyManager.registerBlockBasicStrategies(RTEListBlock.name);
+RTEDTOActionStrategyManager.registerBlockBasicStrategies(RTEListItemBlock.name);
+RTEDTOActionStrategyManager.registerBlockBasicStrategies(RTEImageBlock.name);
+RTEDTOActionStrategyManager.registerBlockBasicStrategies(RTEHtmlBlock.name);
+// Register element to DTO strategies for default node DTOs, The order of registration matters, the later registered strategy has higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ContinueInlineToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new SpanImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ImgToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new InlineBlockToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new LiToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ULNotLiChildToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new OlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new UlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new HtmlBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());

package/dist/collection/components/vega-rich-text-editor/extensions/base-extension-renderer.js

@@ -0,0 +1,83 @@
+import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
+import { isNonNullable } from '../../../types/type-guard';
+import { VegaRTEBaseRenderer } from '../dto/renderers/base-renderer';
+import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
+/**
+ * Base renderer for Vega Rich Text Editor.
+ */
+export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
+  /**
+   * Renders the given data as a DOM element.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to render, which can be a block or a node.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  render(renderData, rteContext, createElement) {
+    const element = this.doRender(createElement, renderData, rteContext);
+    this.fallbackRegisterRef(element, renderData);
+    this.appendChildren(element, renderData, rteContext, createElement);
+    return element;
+  }
+  /**
+   * Register the reference of the element in the rendering registry.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   * @returns {VegaRTEUseRef} - The function to register the element.
+   */
+  useRef(renderData) {
+    renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] = true;
+    return function (element) {
+      if (element) {
+        stateEntityRenderingRegistry.register(element, renderData);
+      }
+    };
+  }
+  /**
+   * Auto render the block children if the block element is not exist
+   *
+   * @param {VegaRTERenderResult} parentElement - The parent element to append children to.
+   * @param {RTEBlock | RTENode} renderData - The data to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   */
+  appendChildren(parentElement, renderData, rteContext, createElement) {
+    if (Array.isArray(renderData['children']) &&
+      renderData['children'].length &&
+      !parentElement['$children$']) {
+      parentElement['$children$'] = renderData['children']
+        .map((child) => {
+        return this.renderChildren(child, rteContext, createElement);
+      })
+        .filter(isNonNullable);
+    }
+  }
+  /**
+   * Render the children node.
+   *
+   * @param {RTENode | RTEBlock} renderData - The node to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
+   */
+  renderChildren(renderData, rteContext, createElement) {
+    const renderer = RTEDTORendererManager.getRTERenderer(renderData.type);
+    if (renderer) {
+      return renderer.render(renderData, rteContext, createElement);
+    }
+  }
+  /**
+   * Fallback register reference for the element.
+   *
+   * @param {VegaRTERenderResult} element - The rendered DOM element.
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   */
+  fallbackRegisterRef(element, renderData) {
+    if (!renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] && element['$attrs$']) {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      element['$attrs$']['ref'] = this.useRef(renderData);
+    }
+  }
+}
+VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -0,0 +1,5 @@
+/**
+ * Base class for rendering extension toolbar button in the rich text editor.
+ */
+export class VegaRTEToolbarButtonRenderer {
+}