@globalpayments/vega 2.47.1 → 2.48.0

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,7 +34,7 @@ export class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
         childNodes.push({
           id: generateUUID(),
           type: 'text',
-          text: child.textContent,
+          text: String(child.textContent),
           annotations: annotations,
         });
       }
@@ -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;

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/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);

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

@@ -17,8 +17,10 @@ import ChangeManager from '../../../../helpers/change-manager/change-manager';
 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 { Observer } from '../../../../helpers/change-manager/observer/observer';
+import { RTETextNode } from '../../dto/nodes/text-node';
 import { ZERO_WIDTH_SPACE } from '../../constants/constant';
 import { RTERange } from '../../dto/range';
+import { RTESelectionState } from '../../dto/selection-state';
 /**
  * The text selection controller
  */
@@ -28,7 +30,7 @@ export class SelectionController extends VegaSlimmer {
     this.currentRange = new RTERange();
     this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
     this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
-    this.selectedNodes = [];
+    this.pendingRestoreSelectionNodes = [];
     /**
      * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
      *
@@ -68,6 +70,7 @@ export class SelectionController extends VegaSlimmer {
    * Watches the internal value of the editor
    */
   watchValueUpdate() {
+    this.prepareRestoreSelectionState();
     this.restoreSelection();
   }
   /**
@@ -102,6 +105,14 @@ export class SelectionController extends VegaSlimmer {
   getSelectedBlocks() {
     return Array.from(this.selectionMap.keys());
   }
+  /**
+   * Set the selection state
+   *
+   * @param {RTESelectionState} state - The selection state to set
+   */
+  setSelectionState(state) {
+    this.selectionState = state;
+  }
   /**
    * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
    *
@@ -159,23 +170,15 @@ export class SelectionController extends VegaSlimmer {
    * Restore the selection to the current selected nodes
    */
   restoreSelection() {
-    if (this.selectedNodes.length > 0) {
-      const startNode = this.selectedNodes[0];
-      const endNode = this.selectedNodes.length > 1 ? this.selectedNodes[this.selectedNodes.length - 1] : startNode;
-      if (startNode === endNode && startNode.text.length === 0) {
+    if (this.selectionState) {
+      const { startNode, endNode, startOffset, endOffset } = this.selectionState.range;
+      if (startNode instanceof RTETextNode && startNode === endNode && startNode.text.length === 0) {
         this.enqueueSelectionRangeFutureState(startNode, ZERO_WIDTH_SPACE.length);
       }
       else {
-        const { startContainer, endContainer, startOffset, endOffset } = this.currentRange;
-        if (stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-          stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement) {
-          this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
-        }
-        else {
-          this.enqueueSelectionRangeFutureState(startNode, 0, endNode, endNode.text.length);
-        }
+        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
       }
-      this.selectedNodes = [];
+      this.selectionState = null;
     }
   }
   /**
@@ -263,10 +266,43 @@ export class SelectionController extends VegaSlimmer {
    */
   registerSelectionRangeChangeObserver() {
     this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.selectedNodes.push(payload.node);
+      this.pendingRestoreSelectionNodes.push(payload.node);
     });
     ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
   }
+  /**
+   * Prepare the selection state to restore
+   */
+  prepareRestoreSelectionState() {
+    if (this.pendingRestoreSelectionNodes.length > 0) {
+      const startNode = this.pendingRestoreSelectionNodes[0];
+      const endNode = this.pendingRestoreSelectionNodes.length > 1
+        ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
+        : startNode;
+      const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
+      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+        stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
+      if (nodesInCurrentRange) {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      else {
+        this.currentRange = this.currentRange.updateRTERange({
+          startNode,
+          endNode,
+          startOffset: 0,
+          endOffset: endNode.text.length,
+        });
+        this.selectionState = new RTESelectionState(this.currentRange);
+      }
+      this.pendingRestoreSelectionNodes = [];
+    }
+  }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
 __decorate([
@@ -290,6 +326,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], SelectionController.prototype, "insertCompositionTextController", void 0);
+__decorate([
+  MapToComponentField()
+], SelectionController.prototype, "historyController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);

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

@@ -14,6 +14,8 @@ import { Observer } from '../../../../helpers/change-manager/observer/observer';
 import { debounce } from '../../../../utils/timer';
 import { VegaRTEContent } from '../../dto/content-state';
 import { waitForComponentDidRender } from '../../../../helpers/common';
+import { RTEEditorState } from '../../dto/editor-state';
+import { RTESelectionState } from '../../dto/selection-state';
 /**
  * The value controller is responsible for updating the value of the rich text editor.
  */
@@ -64,8 +66,12 @@ export class ValueController extends VegaSlimmer {
    * Updates the value of the editor and restore the selection.
    *
    * @param {VegaRTEContent} newValue The new value to set.
+   * @param {boolean} recordHistory - Whether to record the change in history.
    */
-  async flushChanges(newValue) {
+  async flushChanges(newValue, recordHistory = true) {
+    if (recordHistory) {
+      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }
     this.value = newValue.clone();
     await waitForComponentDidRender(this.host);
   }
@@ -91,6 +97,12 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate([
+  MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);

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

@@ -2,6 +2,8 @@ import { VegaRTEContent } from '../../dto/content-state';
 import { RTETextBlock } from '../../dto/blocks/text-block';
 import { RTEImageBlock } from '../../dto/blocks/image-block';
 import { RTEListBlock } from '../../dto/blocks/list-block';
+import { BlockAnnotationTypeEnum } from '../../dto/annotations/block-annotation.abstract';
+import { NodeAnnotationTypeEnum } from '../../dto/annotations/node-annotation.abstract';
 describe('content state', () => {
   it('fromJSON should work as expect', () => {
     expect(() => VegaRTEContent.fromJSON([
@@ -125,6 +127,43 @@ describe('content state', () => {
     expect(clonedContentState).not.toBe(contentState);
     expect(clonedContentState).toEqual(contentState);
   });
+  it('should deep clone content state', () => {
+    const contentState = VegaRTEContent.fromJSON([
+      {
+        id: '1',
+        type: 'paragraph',
+        annotations: {
+          textStyle: 'paragraph',
+        },
+        nodes: [
+          { id: '1-1', type: 'text', text: 'This is a paragraph', annotations: { bold: true } },
+        ],
+      },
+    ]);
+    const clonedContentState = contentState.clone(true);
+    expect(clonedContentState).not.toBe(contentState);
+    expect(clonedContentState).toEqual(contentState);
+    const block = contentState.blocks[0];
+    const clonedBlock = clonedContentState.blocks[0];
+    expect(clonedBlock).toEqual(block);
+    expect(clonedBlock).not.toBe(block);
+    const node = block.nodes[0];
+    const clonedNode = clonedBlock.nodes[0];
+    expect(clonedNode).toEqual(node);
+    expect(clonedNode).not.toBe(node);
+    const blockAnnotations = block.annotationMap;
+    const clonedBlockAnnotations = clonedBlock.annotationMap;
+    expect(clonedBlockAnnotations).toEqual(blockAnnotations);
+    expect(clonedBlockAnnotations).not.toBe(blockAnnotations);
+    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).toEqual(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
+    expect(clonedBlock.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE)).not.toBe(block.getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE));
+    const nodeAnnotations = node.annotationMap;
+    const clonedNodeAnnotations = clonedNode.annotationMap;
+    expect(clonedNodeAnnotations).toEqual(nodeAnnotations);
+    expect(clonedNodeAnnotations).not.toBe(nodeAnnotations);
+    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+    expect(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+  });
   it('the parent property should set as properly when create VegaRTEContent', () => {
     const contentState = VegaRTEContent.fromJSON([
       {
@@ -169,4 +208,81 @@ describe('content state', () => {
     expect(nestedListBlock.parent).toEqual(listItemBlock);
     expect(nestedListItemBlock.parent).toEqual(nestedListBlock);
   });
+  describe('findNodeById', () => {
+    let content;
+    beforeAll(() => {
+      content = VegaRTEContent.fromJSON([
+        {
+          id: '1',
+          type: 'paragraph',
+          nodes: [
+            { id: '1-1', type: 'text', text: 'This ' },
+            { id: '1-2', type: 'text', text: 'is a ' },
+            { id: '1-3', type: 'text', text: 'paragraph.' },
+          ],
+        },
+        {
+          id: '2',
+          type: 'image',
+          nodes: [{ id: '2-1', type: 'image', url: 'img.png' }],
+        },
+        {
+          id: '3',
+          type: 'bullet-list',
+          blocks: [
+            {
+              id: '3-1',
+              type: 'list-item',
+              nodes: [{ id: '3-1-1', type: 'text', text: 'List item 1' }],
+              children: [
+                {
+                  id: '3-2',
+                  type: 'number-list',
+                  blocks: [
+                    {
+                      id: '3-2-1',
+                      type: 'list-item',
+                      nodes: [
+                        { id: '3-2-1-1', type: 'text', text: 'Nested list item' },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          ],
+        },
+      ]);
+    });
+    it('should find the node in text block', () => {
+      expect(content.findNodeById('1-2').toJSON()).toEqual({ id: '1-2', type: 'text', text: 'is a ' });
+    });
+    it('should find the node in image block', () => {
+      expect(content.findNodeById('2-1').toJSON()).toEqual({
+        id: '2-1',
+        type: 'image',
+        url: 'img.png',
+        annotations: {
+          size: 'md',
+        },
+      });
+    });
+    it('should find the node in list item', () => {
+      expect(content.findNodeById('3-1-1').toJSON()).toEqual({
+        id: '3-1-1',
+        type: 'text',
+        text: 'List item 1',
+      });
+    });
+    it('should find the node in nested list item', () => {
+      expect(content.findNodeById('3-2-1-1').toJSON()).toEqual({
+        id: '3-2-1-1',
+        type: 'text',
+        text: 'Nested list item',
+      });
+    });
+    it('should return null for non-existent node', () => {
+      expect(content.findNodeById('not-exist')).toBeNull();
+    });
+  });
 });

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

@@ -396,4 +396,16 @@ describe('text node', () => {
     textNode.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
     expect(textNode.toJSON()).toEqual({ id: '1', type: 'text', text: 'This is a text.' });
   });
+  it('should clone a text node with annotations correctly', () => {
+    const textBlock = new RTETextBlock('block-1', 'paragraph');
+    const textNode = new RTETextNode('1', 'This is a text.', textBlock);
+    textNode.apply(new BoldAnnotationAction(true));
+    const clonedNode = textNode.clone();
+    expect(textNode).toEqual(clonedNode);
+    expect(textNode).not.toBe(clonedNode);
+    expect(textNode.annotationMap).toEqual(clonedNode.annotationMap);
+    expect(textNode.annotationMap).not.toBe(clonedNode.annotationMap);
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).toEqual(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+    expect(textNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)).not.toBe(clonedNode.getAnnotationByType(NodeAnnotationTypeEnum.BOLD));
+  });
 });

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

@@ -43,6 +43,7 @@ import { InsertCompositionTextController } from './slimmers/controllers/insert-c
 import { DeleteSelectedNodesController } from './slimmers/controllers/delete-selected-nodes-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
 import { VegaInternalThemeManager } from '../../helpers/theme/internal-theme-manager';
+import { HistoryController } from './slimmers/controllers/history-controller';
 /**
  * @vegaVersion 2.34.0
  */
@@ -95,6 +96,7 @@ export class VegaRichTextEditor {
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
+    this.historyController = new HistoryController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
@@ -689,3 +691,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "historyController", void 0);

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

@@ -63,6 +63,10 @@ export class VegaRichTextImageEditorRenderer extends VegaSlimmer {
             { key: 'lg', text: this.translationSlimmer.t('Lg') },
           ], selected: this.size, ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              // The below line is covered in `history.spec#should register history, and undo/redo for image size change`
+              // Prevent handling vegaChange triggered by DOM ref reuse (e.g., undo/redo) when the image editor is not visible.
+              if (!this.selected)
+                return;
               const size = e.detail;
               this.size = size;
               this.changeEventEmitter.emit({

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

@@ -38,6 +38,7 @@ export class VegaRichTextImageEditor {
      *
      * @vegaVersion 2.34.0
      */
+    /* eslint-disable-next-line @stencil/strict-mutable */
     this.size = 'md';
   }
   render() {
@@ -75,7 +76,7 @@ export class VegaRichTextImageEditor {
     },
     "size": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "VegaRichTextImageEditorSizeType",
         "resolved": "\"lg\" | \"md\" | \"sm\"",

package/dist/collection/components/vega-stepper/vega-stepper.js

@@ -30,11 +30,11 @@ export class VegaStepper {
       propertyRules: [
         {
           propertyName: 'min',
-          ruleFactory: (min) => new MinNumberRule({ minValue: min }),
+          ruleFactory: (min) => typeof min === 'number' ? new MinNumberRule({ minValue: min }) : null,
         },
         {
           propertyName: 'max',
-          ruleFactory: (max) => new MaxNumberRule({ maxValue: max }),
+          ruleFactory: (max) => typeof max === 'number' ? new MaxNumberRule({ maxValue: max }) : null,
         },
       ],
       defaultValue: 0,

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -34,6 +34,8 @@ export const VegaInputSelectRenderPrefixIconInternalOverridden = new VegaInterna
 export const VegaDropdownSearchInternalOverridden = new VegaInternalEventID('VegaDropdownSearchInternalOverridden');
 export const VegaInternalSidenavLinkClick = new VegaInternalEventID('sidenavLinkClick');
 export const VegaInternalLeftNavGroupExpand = new VegaInternalEventID('leftNavGroupExpand');
+export const VegaInternalLeftNavLinkSelected = new VegaInternalEventID('leftNavLinkSelected');
+export const VegaInternalInitializeLeftNavLinkSelected = new VegaInternalEventID('initializeLeftNavLinkSelected');
 export const VegaInternalDropdownUpdateTarget = new VegaInternalEventID('dropdownUpdateTarget');
 export const VegaInternalRichTextEditorFlushChanges = new VegaInternalEventID('richTextEditorFlushChanges');
 export const VegaInternalRichTextEditorSelectionRangeChange = new VegaInternalEventID('richTextEditorSelectionRangeChange');