@globalpayments/vega 2.41.0 → 2.43.0

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

@@ -23,7 +23,7 @@ export class LinkAnnotation extends NodeAnnotation {
   /**
    * Generate the JSON representation of the annotation
    *
-   * @returns {Record<string, unknown>} JSON representation of the annotation
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
    */
   toJSON() {
     return { link: { href: this.link.href, groupKey: this.link.groupKey } };

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

@@ -51,8 +51,9 @@ export class RTEBlock {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
-   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

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

@@ -32,7 +32,7 @@ export class RTEListItemBlock extends RTETextBlock {
    * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
    *
    * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListItemBlock`
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
    */
   static from(block) {
     const listItemBlock = new RTEListItemBlock(block.id);

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

@@ -25,7 +25,7 @@ export class VegaRTEContent {
    * Converts a JSON array of blocks to a class array of RTEContentBlock.
    *
    * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {RTEContentBlock[]} The converted array of RTEContentBlock.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
    */
   static fromJSON(value) {
     const blocks = value.map((block) => {

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

@@ -22,7 +22,7 @@ export class RTEImageNode extends RTENode {
    *
    * @param {VegaRTEImageNode} node - The node to be converted.
    * @param {RTEImageBlock} parentBlock - The parent block
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
    */
   static from(node, parentBlock) {
     const imageNode = new RTEImageNode(node.id, node.url, parentBlock);

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

@@ -22,8 +22,9 @@ export class RTENode {
   /**
    * Get annotation by type
    *
+   * @typedef T generic type
    * @param {RTENodeAnnotationMapKey} type - Annotation type
-   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   * @returns {Nullable<T>} - Annotation
    */
   getAnnotationByType(type) {
     return this.annotationMap.get(type);

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

@@ -24,7 +24,7 @@ export class RTEBlockRenderer {
    * Get classes from annotations
    *
    * @param {RTEBlock} block - RTE block entity
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(block) {
     return Array.from(block.annotationMap.values())

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

@@ -9,6 +9,7 @@ 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';
 /**
  * Abstract class for rendering blocks that contain text nodes with support for rendering text with link styles.
  */
@@ -84,6 +85,7 @@ export class RTEBlockTextNodesRenderer extends RTEBlockRenderer {
     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),

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

@@ -23,7 +23,7 @@ export class RTENodeRenderer {
    * Get classes from annotations
    *
    * @param {RTENode} node - The DTO node
-   * @returns {AnnotationStyle} - Annotation style
+   * @returns {string} - Annotation style
    */
   getClasses(node) {
     return Array.from(node.annotationMap.values())

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/insert-composition-text-controller.js

@@ -180,7 +180,7 @@ export class InsertCompositionTextController extends VegaSlimmer {
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
    *
-   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/selection-controller.js

@@ -191,6 +191,8 @@ export class SelectionController extends VegaSlimmer {
    * Get selected rich text
    */
   handleSelectionChange() {
+    if (this.disabled)
+      return;
     const selection = this.getSelection();
     if (!selection || selection.rangeCount === 0)
       return;
@@ -279,6 +281,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "disabled", void 0);
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry.js

@@ -34,5 +34,14 @@ class StateEntityRenderingRegistry {
   getDOMByEntity(entity) {
     return this.entityToDOM.get(entity);
   }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
 }
 export default new StateEntityRenderingRegistry();

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/text-node-rendering-registry.js

@@ -17,7 +17,7 @@ class TextNodeRenderingRegistry {
   /**
    * Retrieves the text node elements.
    *
-   * @returns {HTMLElement[]} The text node elements, or empty array.
+   * @returns {Map<HTMLElement, TextColorAnnotation>} The text node elements, or empty array.
    */
   getTextNodeElements() {
     return this.textNodeElements;

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/user-input-controller.js

@@ -86,7 +86,7 @@ export class UserInputController extends VegaSlimmer {
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
    *
-   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
    */
   getEditableElementRef() {
     if (!this.editableElementRef) {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bold-toolbar-button-slimmer.js

@@ -36,11 +36,12 @@ export class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-numbers-toolbar-button-slimmer.js

@@ -47,7 +47,7 @@ export class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/bullets-toolbar-button-slimmer.js

@@ -34,7 +34,7 @@ export class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/bullets-numbers/numbers-toolbar-button-slimmer.js

@@ -32,7 +32,7 @@ export class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node instanceof RTEImageNode);
+    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/clear-style-toolbar-button-slimmer.js

@@ -33,7 +33,8 @@ export class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/code-toolbar-button-slimmer.js

@@ -35,8 +35,9 @@ export class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-      node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/image-toolbar-button-slimmer.js

@@ -56,7 +56,8 @@ export class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/italic-toolbar-button-slimmer.js

@@ -34,11 +34,12 @@ export class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/less-indent-toolbar-button-slimmer.js

@@ -26,7 +26,8 @@ export class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => node.type === 'list-item') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/link-toolbar-button-slimmer.js

@@ -59,7 +59,8 @@ export class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    return (selectedBlocks.length > 1 ||
+    return (super.isDisabled() ||
+      selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
         return !(node instanceof RTETextNode) ||

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/more-indent-toolbar-button-slimmer.js

@@ -26,7 +26,8 @@ export class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => node.type === 'list-item') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/strikethrough-toolbar-button-slimmer.js

@@ -37,11 +37,12 @@ export class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-color-toolbar-button-slimmer.js

@@ -32,7 +32,10 @@ export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }, {});
   }
   renderSlotContent() {
-    return (h("div", { class: "toolbar-btn-color-preview-box", style: {
+    return (h("div", { class: {
+        'toolbar-btn-color-preview-box': true,
+        'disabled': this.isDisabled(),
+      }, style: {
         backgroundColor: this.getCurrentColor(),
       } }));
   }
@@ -102,12 +105,13 @@ export class TextColorToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/text-styles-toolbar-button-slimmer.js

@@ -67,7 +67,8 @@ export class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/toolbar-button-slimmer.abstract.js

@@ -12,13 +12,13 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
   constructor({ icon, tooltip }) {
     super();
     this.renderBtn = ({ showArrowIcon, iconColor } = {}) => {
-      var _a, _b;
+      var _a;
       return (h("vega-tooltip", { text: this.tooltip.text, placement: ['bottom', 'top'] },
         h("vega-rich-text-editor-toolbar-button", Object.assign({ showArrowIcon: showArrowIcon, icon: this.icon, iconColor: iconColor, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
               this.handleClick();
             });
-          }, selected: this.isSelected(), disabled: (_a = this.isDisabled) === null || _a === void 0 ? void 0 : _a.call(this) }, this.preventLostFocus()), (_b = this.renderSlotContent) === null || _b === void 0 ? void 0 : _b.call(this))));
+          }, selected: this.isSelected(), disabled: this.isDisabled() }, this.preventLostFocus()), (_a = this.renderSlotContent) === null || _a === void 0 ? void 0 : _a.call(this))));
     };
     /**
      * Handle the click event on the toolbar button.
@@ -48,6 +48,12 @@ export class ToolbarButtonSlimmer extends VegaSlimmer {
       ? this.renderBtnWrapper(this.renderBtn)
       : this.renderBtn();
   }
+  /**
+   * Whether the button is disabled or not.
+   */
+  isDisabled() {
+    return this.disabled;
+  }
   preventLostFocus() {
     return {
       onMouseDown: (e) => e.preventDefault(),
@@ -60,3 +66,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ToolbarButtonSlimmer.prototype, "focusController", void 0);
+__decorate([
+  MapToComponentField()
+], ToolbarButtonSlimmer.prototype, "disabled", void 0);

package/dist/collection/components/vega-rich-text-editor/slimmers/renderers/tools/underline-toolbar-button-slimmer.js

@@ -37,11 +37,12 @@ export class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return selectedNodes.some((node) => {
-      var _a;
-      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    });
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+      }));
   }
 }
 (() => {

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

@@ -72,7 +72,7 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
   /**
    * Returns the rich text editor component editable element
    *
-   * @returns {HTMLDivElement} The div element which has property contenteditable
+   * @returns {Nullable<HTMLDivElement>} The div element which has property contenteditable
    */
   getRTEEditableElementRef() {
     if (this.richTextContentRef && this.richTextContentRef.shadowRoot) {

package/dist/collection/components/vega-rich-text-editor/test/e2e-utils.js

@@ -0,0 +1,177 @@
+/* This file is the e2e test method of RTE*/
+import { find } from '../../../utils/e2e-utils';
+import { toolbarItems } from './fixture';
+/**
+ * set RTE toolbarItem
+ *
+ *@param {E2EPage} page - E2EPage
+ */
+export const setToolbarItems = async (page) => {
+  const vegaRichTextEditor = await page.find('vega-rich-text-editor');
+  vegaRichTextEditor.setProperty('toolbarItems', toolbarItems);
+  await page.waitForChanges();
+};
+/**
+ * focus On RTE Content
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const focusOnContent = async (page) => {
+  const content = await page.find('vega-rich-text-editor >>> vega-rich-text-content');
+  await content.click();
+};
+/**
+ * click RTE Bold Button
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const clickBoldButton = async (page) => {
+  const boldButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(3) vega-rich-text-editor-toolbar-button >>> button');
+  await boldButton.click();
+  await page.waitForChanges();
+};
+/**
+ * change RTE list style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the list style
+ */
+export const changeListStyle = async (page, style = 'number') => {
+  const listBtn = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(5) > vega-popover:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+  await listBtn.click();
+  await page.waitForChanges();
+  if (style != 'number') {
+    const bulletsBtn = await find(page, 'vega-popover-content-box div:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+    await bulletsBtn.click();
+  }
+  else {
+    const numberBtn = await find(page, 'vega-popover-content-box div:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+    await numberBtn.click();
+  }
+};
+/**
+ * change RTE align style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the align style
+ */
+export const changeAlignStyle = async (page, style) => {
+  const alignBtn = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(5) > vega-popover:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+  await alignBtn.click();
+  await page.waitForChanges();
+  switch (style) {
+    case 'left':
+      await (await find(page, 'vega-popover-content-box div:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button')).click();
+      break;
+    case 'center': {
+      const centerAlignBtn = await find(page, 'vega-popover-content-box div:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+      await centerAlignBtn.click();
+      break;
+    }
+    case 'right': {
+      const rightAlignBtn = await page.find('vega-popover-content-box div:nth-of-type(3) vega-rich-text-editor-toolbar-button >>> button');
+      await rightAlignBtn.click();
+      break;
+    }
+    case 'justified':
+      await (await find(page, 'vega-popover-content-box div:nth-of-type(4) vega-rich-text-editor-toolbar-button >>> button')).click();
+      break;
+  }
+};
+/**
+ * change RTE Indent style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the align type
+ */
+export const changeIndent = async (page, style) => {
+  switch (style) {
+    case 'more': {
+      const moreButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(6) vega-tooltip:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+      await moreButton.click();
+      break;
+    }
+    case 'less': {
+      const lessButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(6) vega-tooltip:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+      await lessButton.click();
+      break;
+    }
+  }
+};
+/**
+ * click RTE clear style
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const clickClearBtn = async (page) => {
+  const clearStyleButton = await find(page, 'vega-rich-text-editor >>> vega-rich-text-editor-toolbar-button >>> button');
+  await clearStyleButton.click();
+};
+/**
+ * set RTE link
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} url - the link url
+ * @param {string} text - the link text
+ */
+export const setLink = async (page, url = 'https://www.test.com', text = 'test') => {
+  const linkBtn = await find(page, 'vega-rich-text-editor >>> vega-rich-text-editor-toolbar-button >>> button');
+  await linkBtn.click();
+  await page.waitForChanges();
+  const urlContainer = await page.find('vega-popover-content-box  vega-input:nth-of-type(1)');
+  const urlInputContainer = await page.find('vega-popover-content-box  vega-input:nth-of-type(2) >>> input');
+  urlContainer.setProperty('value', url);
+  await page.waitForChanges();
+  await urlInputContainer.click();
+  await page.waitForChanges();
+  await page.keyboard.type(text);
+  await page.waitForChanges();
+  await page.keyboard.press('Enter');
+  await page.waitForChanges();
+};
+/**
+ * change RTE Indent style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} behavior - the image behavior
+ * @param {object} config - the image parameters
+ * @param {string} config.size - the image size
+ * @param {string} config.text - the image text
+ */
+export const controlImage = async (page, behavior, config) => {
+  const imageElement = await find(page, 'vega-rich-text-editor >>> vega-rich-text-content >>>  vega-rich-text-image-editor img');
+  await page.waitForChanges();
+  await imageElement.click();
+  switch (behavior) {
+    case 'size':
+      if (config.size == 'large') {
+        const largeButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button:nth-of-type(3)');
+        await largeButton.click();
+      }
+      else if (config.size == 'small') {
+        const smallerButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button');
+        await smallerButton.click();
+      }
+      else {
+        const mediumButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button:nth-of-type(2)');
+        await mediumButton.click();
+      }
+      break;
+    case 'text':
+      if (config.text) {
+        const alterButton = await find(page, 'vega-popover-content-box vega-button-group-item:nth-of-type(1) >>> vega-button-link >>> a');
+        await alterButton.click();
+        await page.waitForChanges();
+        await page.keyboard.type(config.text);
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+      }
+      break;
+    case 'delete': {
+      const deleteButton = await find(page, 'vega-popover-content-box vega-button-group-item:nth-of-type(2) >>> vega-button-link >>> a');
+      await deleteButton.click();
+      break;
+    }
+  }
+};