@globalpayments/vega 2.47.1 → 2.49.0

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

@@ -89,6 +89,26 @@ export class RTEListItemBlock extends RTETextBlock {
   createNewListItem() {
     return new RTEListItemBlock(generateUUID());
   }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    var _a;
+    const block = new RTEListItemBlock(this.id);
+    block.nodes = this.nodes.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parentBlock = block;
+      return clonedNode;
+    });
+    block.annotationMap = super.cloneAnnotations();
+    block.children = (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((child) => {
+      const clonedChild = child.clone();
+      clonedChild.parent = block;
+      return clonedChild;
+    });
+    block.parent = this.parent;
+    return block;
+  }
 }
 (() => {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());

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

@@ -86,7 +86,17 @@ export class RTETextBlock extends RTEBlock {
    * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
    */
   static isAcceptableTextStyle(type) {
-    return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
+    return [
+      'title',
+      'subtitle',
+      'paragraph',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+    ].includes(type);
   }
   /**
    * Merges RTETextNode nodes based on certain conditions.
@@ -127,6 +137,20 @@ export class RTETextBlock extends RTEBlock {
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const clonedBlock = new RTETextBlock(this.id, this.type);
+    clonedBlock.nodes = this.nodes.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parentBlock = clonedBlock;
+      return clonedNode;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = this.parent;
+    return clonedBlock;
+  }
   /**
    * @inheritDoc
    */

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

@@ -73,10 +73,13 @@ export class VegaRTEContent {
   /**
    * Clones the content state.
    *
+   * @param {boolean} deep - If true, performs a deep clone of the content state.
    * @returns {VegaRTEContent} The cloned content state.
    */
-  clone() {
-    return new VegaRTEContent([...this.blocks]);
+  clone(deep = false) {
+    return deep
+      ? new VegaRTEContent(this.blocks.map((block) => block.clone()))
+      : new VegaRTEContent([...this.blocks]);
   }
   /**
    * Converts the content state to a JSON array of blocks.
@@ -116,6 +119,48 @@ export class VegaRTEContent {
   createList(type) {
     return new RTEListBlock(generateUUID(), type);
   }
+  /**
+   * Finds a node by its ID in the content.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeById(id) {
+    return this.findNodeInBlocksById(id, this.blocks);
+  }
+  /**
+   * Recursively searches for a node by its ID in the given blocks.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @param {RTEContentBlock[]} blocks - The blocks to search within.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeInBlocksById(id, blocks) {
+    for (const block of blocks) {
+      if ('nodes' in block) {
+        for (const node of block.nodes) {
+          if (node.id === id) {
+            return node;
+          }
+        }
+      }
+      if (block instanceof RTEListItemBlock && block.children) {
+        for (const cBlock of block.children) {
+          const foundNode = this.findNodeInBlocksById(id, cBlock.blocks);
+          if (foundNode) {
+            return foundNode;
+          }
+        }
+      }
+      if (block instanceof RTEListBlock && block.blocks) {
+        const foundNode = this.findNodeInBlocksById(id, block.blocks);
+        if (foundNode) {
+          return foundNode;
+        }
+      }
+    }
+    return null;
+  }
 }
 (() => {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());

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

@@ -0,0 +1,36 @@
+/**
+ * Represents the state of the RTE
+ */
+export class RTEEditorState {
+  constructor(content, selection) {
+    this.content = content.clone(true);
+    this.selection = selection.clone();
+    this.refreshSelectionNodes();
+  }
+  /**
+   * Clones the editor state, updating the content and selection based on the provided content.
+   *
+   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
+   */
+  clone() {
+    return new RTEEditorState(this.content, this.selection);
+  }
+  /**
+   * Refreshes the selection nodes in the editor state.
+   */
+  refreshSelectionNodes() {
+    const { startNode: oldStartNode, endNode: oldEndNode, startOffset, endOffset, } = this.selection.range;
+    if (oldStartNode && oldEndNode) {
+      const startNode = this.content.findNodeById(oldStartNode.id);
+      const endNode = this.content.findNodeById(oldEndNode.id);
+      if (startNode && endNode) {
+        this.selection.range.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+      }
+    }
+  }
+}

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

@@ -52,6 +52,12 @@ export class RTEImageNode extends RTENode {
     }
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTEImageNode(this.id, this.url, this.parentBlock, super.cloneAnnotations());
+  }
   /**
    * @inheritDoc
    */

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

@@ -76,4 +76,12 @@ export class RTENode {
       }
     }
   }
+  /**
+   * Clones the annotations of the current RTETextNode.
+   *
+   * @returns {NodeAnnotations} A new Map containing cloned annotations.
+   */
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
+  }
 }

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

@@ -102,7 +102,13 @@ export class RTETextNode extends RTENode {
    * @returns {RTETextNode} An new RTETextNode
    */
   cloneWithText(text) {
-    return new RTETextNode(generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
+    return new RTETextNode(generateUUID(), text, this.parentBlock, super.cloneAnnotations());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETextNode(this.id, this.text, this.parentBlock, super.cloneAnnotations());
   }
   /**
    * Checks if a node is empty

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

@@ -120,6 +120,14 @@ export class RTERange {
     }
     return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
   }
+  /**
+   * Creates a new instance of the `RTERange` class with the same properties as the current instance.
+   *
+   * @returns {RTERange} A new `RTERange` instance with the same start and end containers, offsets, and nodes.
+   */
+  clone() {
+    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.

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

@@ -7,7 +7,7 @@ class RTEImageBlockRenderer extends RTEBlockRenderer {
     return block instanceof RTEImageBlock;
   }
   render(block, renderContext) {
-    return (h("div", { style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
+    return (h("div", { key: block.id, style: Object.assign({}, super.getStyles(block)), ref: (ref) => super.registerRef(ref, block), class: super.getClasses(block) }, block.nodes.map((node) => {
       return RTEImageNodeRenderer.render(node, renderContext);
     })));
   }

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

@@ -8,7 +8,7 @@ class RTEListBlockRenderer extends RTEBlockRenderer {
   }
   render(block, renderContext) {
     const BlockTag = block.type === 'number-list' ? 'ol' : 'ul';
-    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block) }, block.blocks.map((listItemBlock) => RTEListItemBlockRenderer.render(listItemBlock, renderContext))));
+    return (h(BlockTag, { key: block.id, ref: (ref) => super.registerRef(ref, block) }, block.blocks.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", { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
+    return (h("li", { key: block.id, ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) },
       super.renderNodes(block, renderContext),
       this.renderChildren(block.children, renderContext)));
   }

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

@@ -7,7 +7,7 @@ class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
   }
   render(block, renderContext) {
     const BlockTag = this.getBlockTagByType(block.type);
-    return (h(BlockTag, { ref: (ref) => super.registerRef(ref, block), style: super.getStyles(block), class: super.getClasses(block) }, super.renderNodes(block, renderContext)));
+    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) {
@@ -20,6 +20,12 @@ class RTETextBlockRenderer extends RTEBlockTextNodesRenderer {
         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';
     }

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

@@ -38,7 +38,7 @@ 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", { style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
+    return renderContext.editable ? (h("vega-rich-text-image-editor", { key: node.id, style: super.getStyles(node), size: size, alt: alt, ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => this.handleChange(e, node));
       } }, this.renderImage(alt, node, renderContext))) : (this.renderImage(alt, node, renderContext));
   }

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

@@ -7,9 +7,9 @@ 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", { style: super.getStyles(node), class: super.getClasses(node), ref: (ref) => this.registerRef(ref, node) }, node.text || ZERO_WIDTH_SPACE));
+      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", { 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));
   }
   registerRef(ref, node) {
     super.registerRef(ref, node);

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

@@ -0,0 +1,17 @@
+/**
+ * Represents the state of the selection in the RTE.
+ */
+export class RTESelectionState {
+  constructor(range) {
+    this.range = range;
+  }
+  /**
+   * Clones the selection state, updating the range nodes based on the provided content.
+   *
+   * @returns {RTESelectionState} A new instance of RTESelectionState with the updated range.
+   */
+  clone() {
+    const newRange = this.range.clone();
+    return new RTESelectionState(newRange);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/block-to-rte-block-strategy.abstract.js

@@ -34,12 +34,12 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
         childNodes.push({
           id: generateUUID(),
           type: 'text',
-          text: child.textContent,
+          text: String(child.textContent),
           annotations: annotations,
         });
       }
       else {
-        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child))));
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child, annotations))));
       }
     });
     return childNodes;
@@ -67,7 +67,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    * @returns {boolean} - boolean.
    */
   isInvalidTextNode(element) {
-    if (element.nodeValue.includes('\t')) {
+    if (element.nodeValue && element.nodeValue.includes('\t')) {
       const value = element.nodeValue.replace(/\n|\t/gm, '');
       if (value.length === 0)
         return true;
@@ -78,9 +78,10 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    * Generate annotations map for text node element.
    *
    * @param {HTMLElement} element - current element.
+   * @param {VegaRTETextAnnotations} parentAnnotations - parent annotations
    * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
    */
-  generateTextNodeAnnotations(element) {
+  generateTextNodeAnnotations(element, parentAnnotations) {
     if (this.isCode(element))
       return { code: true };
     const annotations = {
@@ -89,6 +90,10 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
       underline: this.isUnderline(element),
       strikethrough: this.isStrikethrough(element),
     };
+    parentAnnotations.bold && (annotations.bold = true);
+    parentAnnotations.underline && (annotations.underline = true);
+    parentAnnotations.italic && (annotations.italic = true);
+    parentAnnotations.strikethrough && (annotations.strikethrough = true);
     const color = this.getColor(element);
     const link = this.getLink(element);
     if (color)
@@ -104,7 +109,9 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    * @returns {boolean} - boolean.
    */
   isCode(element) {
-    return element.classList.contains('v-rte--code') || element.nodeName === 'CODE';
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.style.fontFamily === 'monospace');
   }
   /**
    * Is bold element.
@@ -114,6 +121,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
    */
   isBold(element) {
     return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
       element.style.fontWeight === 'bold' ||
       element.style.fontWeight === '700');
   }
@@ -135,6 +143,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   isUnderline(element) {
     return (element.style.textDecoration.includes('underline') ||
       element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
       element.classList.contains('v-rte--underline'));
   }
   /**
@@ -146,6 +155,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   isStrikethrough(element) {
     return (element.style.textDecoration.includes('line-through') ||
       element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
       element.classList.contains('v-rte--strikethrough'));
   }
   /**

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/continue-inline-to-rte-text-block-strategy.js

@@ -68,4 +68,7 @@ ContinueInlineToRTETextBlockStrategy.canHandleTags = [
   'U',
   'A',
   'VEGA-RICH-TEXT-LINK-EDITOR',
+  'B',
+  'INS',
+  'DEL',
 ];

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/element-to-dto-strategy.abstract.js

@@ -1,3 +1,4 @@
+import { isNonNullable } from '../../../../../../types/type-guard';
 /**
  * Abstract class to define strategies for processing HTML elements
  */
@@ -23,14 +24,14 @@ export class ElementToDTOStrategyOutput {
   /**
    * Transform current output and children output to DTO
    *
-   * @returns {RTEContentBlock} - DTO.
+   * @returns {Nullable<RTEContentBlock>} - DTO.
    */
   toDto() {
     const currentBlock = this.currentStrategy.handle(this.currentElements);
     if (this.childrenOutput.length > 0 && currentBlock) {
       this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
         .map((childOutput) => childOutput.toDto())
-        .filter(Boolean));
+        .filter(isNonNullable));
     }
     return currentBlock;
   }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/inline-block-to-rte-text-block-strategy.js

@@ -11,7 +11,16 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
    * @returns {number} - can be handled element count.
    */
   canHandle(elementsArray, currentIndex) {
-    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(elementsArray[currentIndex]))
+    return [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+      'subtitle',
+    ].includes(this.getElementType(elementsArray[currentIndex]))
       ? 1
       : 0;
   }
@@ -78,6 +87,12 @@ export class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAb
         return 'heading-2';
       case 'H3':
         return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
       default:
         return '';
     }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/vega-image-to-rte-image-block-strategy.js

@@ -1,6 +1,7 @@
 import { generateUUID } from '../../../../../../utils/misc';
 import { RTEImageBlock } from '../../../../dto/blocks/image-block';
 import { BlockToRTEBlockStrategyAbstract } from './block-to-rte-block-strategy.abstract';
+import { isNonNullable } from '../../../../../../types/type-guard';
 /** Transform vega-rich-text-image-editor element to image block DTO */
 export class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
@@ -22,22 +23,24 @@ export class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbs
   handle(elementsArray) {
     const element = elementsArray[0];
     const image = element.querySelector('img');
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: image.src,
-          annotations: {
-            size: element.size || 'md',
-            alt: element.alt,
+    if (isNonNullable(image)) {
+      return RTEImageBlock.from({
+        id: generateUUID(),
+        type: 'image',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'image',
+            url: image.src,
+            annotations: {
+              size: element.size || 'md',
+              alt: element.alt,
+            },
           },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
+        ],
+        annotations: this.generateBlockAnnotations(element),
+      });
+    }
   }
   /* istanbul ignore next */
   /**

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

@@ -0,0 +1,137 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
+import { RTEEditorState } from '../../dto/editor-state';
+import { debounce } from '../../../../utils/timer';
+import { RTESelectionState } from '../../dto/selection-state';
+import { KeyboardManagerSlimmer } from '../../../../helpers/slimmers/keyboard-manager-slimmer';
+/**
+ * History controller for RTE.
+ */
+export class HistoryController extends KeyboardManagerSlimmer {
+  constructor() {
+    super(() => this.getKeyboardShortcutOptions.call(this));
+    this.redoStack = [];
+    this.undoStack = [];
+    this.registerHistoryDelay = 300;
+    this.registerHistoryDebounced = debounce(() => {
+      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }, this.registerHistoryDelay, this);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  registerInitState() {
+    if (this.value) {
+      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }
+  }
+  /**
+   * Restores the previous state from the undo stack.
+   */
+  async undo() {
+    if (this.undoStack.length > 0) {
+      const clonedState = this.undoStack.pop().clone();
+      this.redoStack.push(clonedState);
+      const prev = this.undoStack[this.undoStack.length - 1];
+      if (prev) {
+        await this.restoreState(prev.clone());
+      }
+    }
+  }
+  /**
+   * Restores the next state from the redo stack.
+   */
+  async redo() {
+    if (this.redoStack.length > 0) {
+      const clonedState = this.redoStack.pop().clone();
+      this.undoStack.push(clonedState);
+      await this.restoreState(clonedState);
+    }
+  }
+  /**
+   * Registers history based on the editor state.
+   *
+   * @param {RTEEditorState} editorState - The state to record in history.
+   */
+  registerHistory(editorState) {
+    // TODO: feat: add a `force` option to register history immediately when needed.
+    this.registerHistoryDebounced(editorState);
+  }
+  /**
+   * Internal function to register history immediately.
+   *
+   * @param {RTEEditorState} state - The state to record in history.
+   */
+  internalRegisterHistory(state) {
+    this.redoStack = []; // clear redo stack when new action happens.
+    this.undoStack.push(state);
+  }
+  /**
+   * Restores the editor state based on the provided history state.
+   *
+   * @param {RTEEditorState} state - The state to restore to.
+   */
+  async restoreState(state) {
+    const { content, selection } = state;
+    this.selectionController.setSelectionState(selection);
+    await this.valueController.flushChanges(content, false);
+  }
+  /**
+   * Returns the keyboard shortcut options for undo/redo functionality.
+   *
+   * @returns {KeyboardEventListener[]} - An array of keyboard shortcut options.
+   */
+  getKeyboardShortcutOptions() {
+    const baseOption = {
+      keyCode: 'KeyZ',
+      activeElementInScope: [this.vegaRichTextEditorRenderer.getRTEEditableElementRef()],
+      eventName: 'keydown',
+      modifierPressed: true,
+    };
+    return [
+      Object.assign(Object.assign({}, baseOption), { shiftKey: false, 
+        /**
+         * Callback function for the undo action.
+         *
+         * @param {KeyboardEvent} e - The keyboard event triggered by the user.
+         */
+        callback: (e) => {
+          e.preventDefault();
+          void this.undo();
+        } }),
+      Object.assign(Object.assign({}, baseOption), { shiftKey: true, 
+        /**
+         * Callback function for the redo action.
+         *
+         * @param {KeyboardEvent} e - The keyboard event triggered by the user.
+         */
+        callback: (e) => {
+          e.preventDefault();
+          void this.redo();
+        } }),
+    ];
+  }
+}
+__decorate([
+  MapToComponentField()
+], HistoryController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate([
+  MapToComponentField()
+], HistoryController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], HistoryController.prototype, "value", void 0);
+__decorate([
+  MapToComponentField()
+], HistoryController.prototype, "selectionController", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], HistoryController.prototype, "registerInitState", null);