@globalpayments/vega 2.33.0 → 2.34.0

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

@@ -0,0 +1,103 @@
+import { h } from '@stencil/core';
+import { NodeTypeEnum, RTENode } from './node.abstract';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { ImageAnnotation } from '../annotations/image-annotation';
+import { ImageAnnotationAction } from '../actions/image-annotation-action';
+import { methodPlaceholder } from 'vega-slimmer/core';
+import { NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
+import { isNonNullable } from '../../../../types/type-guard';
+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 { generateUUID } from '../../../../utils/misc';
+export class RTEImageNode extends RTENode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parentBlock = parentBlock;
+  }
+  static from(image, parentBlock) {
+    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+    let annotations;
+    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+      annotations = { size: 'md' };
+    }
+    else {
+      annotations = image.annotations;
+    }
+    imageNode.annotationMap = new Map(Object.keys(annotations)
+      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
+      .filter(isNonNullable));
+    return imageNode;
+  }
+  static fromHTML(node, parentBlock) {
+    const src = node.nodeName === 'IMG'
+      ? node.src
+      : node.querySelector('img').src;
+    const size = node.size;
+    const imageNode = new RTEImageNode(generateUUID(), src, parentBlock);
+    imageNode.annotationMap = new Map([ImageAnnotation.fromHTML(size, node.alt)]);
+    return imageNode;
+  }
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  render({ editable } = {}) {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const size = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size;
+    const alt = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt;
+    const handleChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'edit': {
+          const size = detail.payload.size;
+          const alt = detail.payload.alt;
+          this.apply(new ImageAnnotationAction(size, alt));
+          break;
+        }
+        /*
+         * The below method is e2e-test covered in
+         * @see{module:vega-rich-text-editor-image-click-delete-button}
+         */
+        /* istanbul ignore next */
+        case 'delete': {
+          const event = new InputEvent('beforeinput', {
+            inputType: 'deleteContentBackward',
+            bubbles: true,
+          });
+          setTimeout(() => {
+            stateEntityRenderingRegistry.getDOMByEntity(this).dispatchEvent(event);
+          }, 50);
+          break;
+        }
+      }
+    };
+    return editable ? (h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, handleChange);
+      } }, this.renderImage(editable, alt))) : (this.renderImage(editable, alt));
+  }
+  doAnnotationActionApply(action) {
+    const annotation = action.toAnnotation();
+    this.annotationMap.set(annotation.type, annotation);
+  }
+  // placeholder method
+  /* istanbul ignore next */
+  doModifyActionApply(action) {
+    methodPlaceholder(action);
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+    }
+  }
+  renderImage(editable, alt) {
+    return (h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
+  }
+}

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

@@ -0,0 +1,103 @@
+import { NodeAnnotation } from '../annotations/node-annotation.abstract';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorFlushChanges } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { ModifyContentAction } from '../actions/modify-content-action.abstract';
+export var NodeTypeEnum;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+})(NodeTypeEnum || (NodeTypeEnum = {}));
+/**
+ * Abstract class for all nodes
+ */
+export class RTENode {
+  constructor(id, annotationMap) {
+    this.annotationMap = new Map();
+    this.id = id;
+    if (annotationMap) {
+      this.annotationMap = annotationMap;
+    }
+  }
+  /**
+   * Get annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   * @returns {Nullable<RTENodeAnnotationMapValue>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Delete annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   */
+  deleteAnnotationByType(type) {
+    this.annotationMap.delete(type);
+    this.flushChange();
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {AnnotationAction} action - Annotation action
+   * @returns {this} - Node
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      this.flushChange();
+    }
+    return this;
+  }
+  /**
+   * apply annotation action or modify content action
+   *
+   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.doAnnotationActionApply(action);
+    }
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getStyles() {
+    return Array.from(this.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
+   *
+   * @returns {AnnotationStyle} - Annotation style
+   */
+  getClasses() {
+    return Array.from(this.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(' '), '');
+  }
+  /**
+   * Flush the value change
+   */
+  flushChange() {
+    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (domNode) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
+}

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

@@ -0,0 +1,297 @@
+import { h } from '@stencil/core';
+import { NodeTypeEnum, RTENode } from './node.abstract';
+import { NodeAnnotation, NodeAnnotationTypeEnum } from '../annotations/node-annotation.abstract';
+import { TextSplittableAction } from '../actions/splittable-action.abstract';
+import { SelectionRangeAnnotation } from '../annotations/selection-range-annotation';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import TextNodeElementRenderingRegistry from '../../slimmers/controllers/text-node-rendering-registry';
+import { generateUUID } from '../../../../utils/misc';
+import { InternalAnnotationTypeEnum } from '../annotations/annotation.abstract';
+import { StrikethroughAnnotation } from '../annotations/strikethrough-annotation';
+import { UnderlineAnnotation } from '../annotations/underline-annotation';
+import { ItalicAnnotation } from '../annotations/italic-annotation';
+import { BoldAnnotation } from '../annotations/bold-annotation';
+import { isNonNullable } from '../../../../types/type-guard';
+import { ClearFormattingAnnotation } from '../annotations/clear-formatting-annotation';
+import { CodeAnnotation } from '../annotations/code-annotation';
+import { TextColorAnnotation } from '../annotations/text-color-annotation';
+import { LinkAnnotation } from '../annotations/link-annotation';
+import { LinkAnnotationAction } from '../actions/link-annotation-action';
+import { CodeAnnotationAction } from '../actions/code-annotation-action';
+import { ClearFormattingAnnotationAction } from '../actions/clear-formatting-annotation-action';
+import { ModifyContentActionType } from '../actions/modify-content-action.abstract';
+import { UpdateTextAction } from '../actions/update-text-action';
+import { LinkGroupAnnotationAction } from '../actions/link-group-annotation-action';
+import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { VegaInternalRichTextEditorSelectionRangeChange } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import ChangeManager from '../../../../helpers/change-manager/change-manager';
+import { ZERO_WIDTH_SPACE } from '../../constants/constant';
+import { SyncUpSelectionAction } from '../actions/sync-up-selection-action';
+import { DeleteNodeAnnotationAction } from '../actions/delete-node-annotation-action';
+export class RTETextNode extends RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.TEXT;
+    this.parentBlock = parentBlock;
+    this.text = text;
+  }
+  static from(richText, parentBlock) {
+    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]));
+        }
+        return this.createAnnotationEntity(type, annotations[type]);
+      })
+        .filter(isNonNullable));
+    }
+    return textNode;
+  }
+  static fromHTML(node, parentBlock) {
+    const textNode = new RTETextNode(generateUUID(), node.textContent, parentBlock);
+    if (node.nodeType !== Node.TEXT_NODE) {
+      textNode.annotationMap = new Map(Object.keys(NodeAnnotationTypeEnum)
+        .map((nodeAnnotationType) => {
+        return this.createAnnotationEntityFromHTML(nodeAnnotationType, node);
+      })
+        .filter(isNonNullable));
+      if (node.hasAttribute('data-group-key')) {
+        parentBlock.apply(new LinkGroupAnnotationAction(node.getAttribute('data-group-key'), [textNode]));
+      }
+    }
+    return textNode;
+  }
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value);
+    }
+  }
+  static createAnnotationEntityFromHTML(type, node) {
+    switch (type) {
+      case 'BOLD':
+        return BoldAnnotation.fromHTML(node);
+      case 'ITALIC':
+        return ItalicAnnotation.fromHTML(node);
+      case 'UNDERLINE':
+        return UnderlineAnnotation.fromHTML(node);
+      case 'STRIKETHROUGH':
+        return StrikethroughAnnotation.fromHTML(node);
+      case 'CODE':
+        return CodeAnnotation.fromHTML(node);
+      case 'TEXT_COLOR':
+        return TextColorAnnotation.fromHTML(node);
+      case 'LINK':
+        return LinkAnnotation.fromHTML(node);
+    }
+  }
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .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 });
+  }
+  cloneWithText(text) {
+    return new RTETextNode(generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
+  }
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  render() {
+    const codeAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.CODE);
+    if (codeAnnotation === null || codeAnnotation === void 0 ? void 0 : codeAnnotation.code) {
+      return (h("code", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
+    }
+    return (h("span", { style: this.getStyles(), class: this.getClasses(), ref: this.registerRef.bind(this) }, this.text || ZERO_WIDTH_SPACE));
+  }
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const { startContainer, endContainer, startOffset, endOffset } = selectionRangeAnnotation.range;
+      const noTextRangeSelected = startContainer === endContainer && startOffset === endOffset;
+      this.parentBlock.nodes = this.parentBlock.nodes.flatMap((item) => {
+        if (item.id === this.id) {
+          if (noTextRangeSelected) {
+            return this.insertNewNode(startOffset, action);
+          }
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+            return this.splitTextNode(action, selectionRangeAnnotation.range);
+          }
+          else {
+            this.applyActionToNode(this, action);
+            return this;
+          }
+        }
+        return item;
+      });
+    }
+    else {
+      this.applyActionToNode(this, action);
+    }
+    this.parentBlock.mergeNodes(action);
+  }
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.UPDATE_TEXT:
+        this.updateText(action.newTextContent);
+        break;
+      case ModifyContentActionType.REPLACE_SELECTED_TEXT:
+        this.replaceSelectedText(action.textToBeInsert, action.currentRange);
+        break;
+    }
+  }
+  registerRef(ref) {
+    if (ref) {
+      stateEntityRenderingRegistry.register(ref, this);
+      const textColorAnnotation = this.getAnnotationByType('TEXT_COLOR');
+      if (textColorAnnotation) {
+        TextNodeElementRenderingRegistry.register(ref, textColorAnnotation);
+      }
+    }
+  }
+  splitTextNode(action, range) {
+    const { startContainer, endContainer, startOffset } = range;
+    const startNode = startContainer.parentElement;
+    const endNode = endContainer.parentElement;
+    const splitText = (text, startOffset, endOffset) => {
+      const beforeText = text.substring(0, startOffset);
+      const selectedText = text.substring(startOffset, endOffset);
+      const afterText = text.substring(endOffset);
+      return [
+        this.cloneWithText(beforeText),
+        this.cloneWithText(selectedText),
+        this.cloneWithText(afterText),
+      ];
+    };
+    const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+    if (startItemDto && startItemDto.id === this.id) {
+      const endOffset = startContainer === endContainer ? range.endOffset : this.text.length;
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, startOffset, endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else if (endItemDto && endItemDto.id === this.id) {
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, 0, range.endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else {
+      this.applyActionToNode(this, action);
+      return this;
+    }
+  }
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
+    }
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
+    }
+    if (action instanceof DeleteNodeAnnotationAction) {
+      this.annotationMap.delete(action.annotationType);
+      return;
+    }
+    if (annotation instanceof ClearFormattingAnnotation) {
+      annotation.items.forEach((item) => {
+        node.deleteAnnotationByType(item);
+      });
+      return;
+    }
+    if (annotation instanceof NodeAnnotation || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (isNonNullable(action.newText)) {
+          node.text = action.newText;
+        }
+        this.parentBlock.apply(new LinkGroupAnnotationAction(action.link.groupKey, [node]));
+      }
+      if (action instanceof CodeAnnotationAction) {
+        this.applyActionToNode(node, new ClearFormattingAnnotationAction());
+      }
+      node.annotationMap.set(annotation.type, annotation);
+      return;
+    }
+  }
+  replaceSelectedText(text, currentRange) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      const startNode = startContainer.parentElement;
+      const endNode = endContainer.parentElement;
+      const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+      const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+      let startIndex = 0, endIndex = this.text.length;
+      if (startItemDto && startItemDto === this) {
+        startIndex = startOffset;
+        endIndex = startContainer === endContainer ? endOffset : endIndex;
+      }
+      else if (endItemDto && endItemDto === this) {
+        endIndex = endOffset;
+      }
+      this.apply(new UpdateTextAction(this.text.slice(0, startIndex) + text + this.text.slice(endIndex)));
+    }
+  }
+  updateText(newText) {
+    this.text = newText;
+    // The link node should be unlink when delete all text
+    if (!this.text && this.isLinkNode()) {
+      this.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    }
+  }
+  isLinkNode() {
+    return this.annotationMap.has('LINK');
+  }
+  shouldSplitSelection(range) {
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    const isCrossNode = startContainer !== endContainer;
+    const isPartialStart = startOffset > 0;
+    const isPartialEnd = endOffset < (endContainer.textContent ? endContainer.textContent.length : 0);
+    const isPartialSelection = isPartialStart || isPartialEnd;
+    return isCrossNode || isPartialSelection;
+  }
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+  insertNewNode(startOffset, action) {
+    if (startOffset === 0) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [newNode, this];
+    }
+    if (startOffset === this.text.length) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [this, newNode];
+    }
+    const beforeNode = this.cloneWithText(this.text.substring(0, startOffset));
+    const newNode = this.cloneWithText('');
+    const afterNode = this.cloneWithText(this.text.substring(startOffset));
+    this.applyActionToNode(newNode, action);
+    return [beforeNode, newNode, afterNode];
+  }
+}

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

@@ -0,0 +1,178 @@
+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';
+/** 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 {
+  /**
+   * Initial the rte range properties
+   *
+   * @param {Node} [startContainer] The range start element.
+   * @param {Node} [endContainer] The range end element.
+   * @param {number} [startOffset] The range start element content offset, default value is 0.
+   * @param {number} [endOffset]  The range end element content offset, default value is 0.
+   * @param {RTENode} [startNode] The range start node, the start node could be null if the start element is root element.
+   * @param {RTENode} [endNode]  The range start node, the start node could be null if the start element is root element.
+   * @param {Range} [nativeRange] The browser native range instance.
+   */
+  constructor(startContainer, endContainer, startOffset = 0, endOffset = 0, startNode, endNode, nativeRange) {
+    this._startOffset = 0;
+    this._endOffset = 0;
+    this._startContainer = startContainer;
+    this._endContainer = endContainer;
+    this._startOffset = startOffset;
+    this._endOffset = endOffset;
+    this._startNode = startNode;
+    this._endNode = endNode;
+    if (nativeRange) {
+      this._oldNativeRange = nativeRange;
+    }
+  }
+  /**
+   * Returns the start container as a Node or null if it is not set.
+   * The start container could be null when the dom node should be create after re-render.
+   *
+   * @returns {Nullable<Node>} The range start element.
+   */
+  get startContainer() {
+    return this._startContainer;
+  }
+  /**
+   * Returns the end container as a Node or null if it is not set.
+   * The end container could be null when the dom node should be create after re-render.
+   *
+   * @returns {Nullable<Node>} The range start element.
+   */
+  get endContainer() {
+    return this._endContainer;
+  }
+  /**
+   * Returns the range start RTE node as a RTENode or null if it is not set.
+   * The start RTENode could be null when the range start node is the root element of the rich text editor.
+   *
+   * @returns {Nullable<RTENode>} The range start element.
+   */
+  get startNode() {
+    return this._startNode;
+  }
+  /**
+   * Returns the range end RTE node as a RTENode or null if it is not set.
+   * The end RTENode could be null when the range end node is the root element of the rich text editor.
+   *
+   * @returns {Nullable<RTENode>} The range start element.
+   */
+  get endNode() {
+    return this._endNode;
+  }
+  /**
+   * Returns range's start offset.
+   *
+   * @returns {number} The character length in text node or the element index of parent element.
+   */
+  get startOffset() {
+    return this._startOffset;
+  }
+  /**
+   * Returns range's start offset.
+   *
+   * @returns {number} The character length in text node or the element index of parent element.
+   */
+  get endOffset() {
+    return this._endOffset;
+  }
+  /**
+   * Updates the range options for a Rich Text Editor.
+   * This method will called after modify the content, the start node and end node should be rte node.
+   * This method will called after selectionchange event emit, the start node and end node should be the html node.
+   *
+   * @param {RTERangeOptions} options - An object that contains the following properties:
+   * @param {Range} [nativeRange] - The native range instance
+   * @returns {RTERange} - The new RTERange instance
+   */
+  updateRTERange(options, nativeRange) {
+    const { startOffset, endOffset } = options;
+    this._startOffset = startOffset;
+    this._endOffset = endOffset;
+    const startNode = options.startNode;
+    const endNode = options.endNode;
+    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);
+      if (startContainer) {
+        this._startContainer = startContainer;
+        this._endContainer = endContainer;
+      }
+    }
+    else {
+      // The selectionchange callback has a 50 ms delay, so we need to check the next range is the same as the current ret range.
+      this._startContainer = startNode;
+      this._endContainer = endNode;
+      this._startNode = this.getRTENodeByElement(this._startContainer);
+      this._endNode =
+        this._startContainer === this._endContainer
+          ? this._startNode
+          : this.getRTENodeByElement(this._endContainer);
+      if (nativeRange) {
+        this._oldNativeRange = nativeRange;
+      }
+    }
+    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  }
+  /**
+   * Creates a Range object based on start and end nodes and offsets.
+   * Invoke this method to get the future range state if the range content modified.
+   * Invoke this method to get the native range instance if range start node and end node not defined
+   *
+   * @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;
+    }
+    else if (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.
+   *
+   * @param {Node} element - An element in the DOM (Document Object Model).
+   * @returns { Nullable<RTENode>} Returns a nullable `RTENode` object.
+   */
+  getRTENodeByElement(element) {
+    if (element) {
+      const registerElement = element.nodeType === Node.TEXT_NODE
+        ? element.parentElement
+        : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
+          ? element.querySelector('img')
+          : element;
+      return stateEntityRenderingRegistry.getEntityByDOM(registerElement);
+    }
+  }
+}