@globalpayments/vega 2.90.0 → 2.92.0

package/dist/collection/components/vega-rich-text-editor/extensions/horizontal-line/horizontal-line-extension.js

@@ -24,7 +24,7 @@ export class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
     // Register the renderer
     this.registerRenderer('horizontal-line', this.blockRenderer);
     // Register the toolbar button
-    this.registerToolbarButtonRenderer('horizontalLine', this.toolbarButtonRenderer);
+    this.registerToolbarButtonRenderer(VegaRTEHorizontalLineExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer);
     // Register HTML → DTO conversion strategy
     this.registerElementToBlockDTOClassStrategy(new HrToHorizontalLineBlockStrategy());
     // Register filter styles strategy for source edit round-trip
@@ -39,3 +39,4 @@ export class VegaRTEHorizontalLineExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEHorizontalLineBlock.name, INSERT_HORIZONTAL_LINE_BLOCK, insertStrategy);
 })();
+VegaRTEHorizontalLineExtension.TOOLBAR_BUTTON_KEY = 'horizontalLine';

package/dist/collection/components/vega-rich-text-editor/extensions/languages/language-extension.js

@@ -46,7 +46,7 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
    */
   prepareBeforeLoad(host) {
     this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(this.languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
-    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer, host);
+    this.registerToolbarButtonRenderer(VegaRTELanguageExtension.TOOLBAR_BUTTON_KEY, this.languageToolbarButtonRenderer, host);
   }
   /**
    * Initializes the language extension.
@@ -138,3 +138,4 @@ export class VegaRTELanguageExtension extends VegaRTEExtension {
     return result;
   }
 }
+VegaRTELanguageExtension.TOOLBAR_BUTTON_KEY = 'languages';

package/dist/collection/components/vega-rich-text-editor/extensions/line-height/line-height-extension.js

@@ -32,7 +32,7 @@ export class VegaRTELineHeightExtension extends VegaRTEExtension {
    */
   prepareBeforeLoad(host) {
     this.toolbarButtonRenderer = new RTELineHeightToolbarButtonRenderer(this.options);
-    this.registerToolbarButtonRenderer('lineHeight', this.toolbarButtonRenderer, host);
+    this.registerToolbarButtonRenderer(VegaRTELineHeightExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer, host);
   }
 }
 (() => {
@@ -42,3 +42,4 @@ export class VegaRTELineHeightExtension extends VegaRTEExtension {
     attachLineHeightFromJson(BlockClass);
   });
 })();
+VegaRTELineHeightExtension.TOOLBAR_BUTTON_KEY = 'lineHeight';

package/dist/collection/components/vega-rich-text-editor/extensions/special-characters/special-characters-extension.js

@@ -13,7 +13,7 @@ export class VegaRTESpecialCharactersExtension extends VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('special-characters', new RTESpecialCharactersToolbarButtonRenderer(this.categories), host);
+    this.registerToolbarButtonRenderer(VegaRTESpecialCharactersExtension.TOOLBAR_BUTTON_KEY, new RTESpecialCharactersToolbarButtonRenderer(this.categories), host);
   }
   /**
    * Builds the final list of special character categories from the provided config.
@@ -32,3 +32,4 @@ export class VegaRTESpecialCharactersExtension extends VegaRTEExtension {
     return [...defaultCategories, ...config.categories];
   }
 }
+VegaRTESpecialCharactersExtension.TOOLBAR_BUTTON_KEY = 'special-characters';

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

@@ -92,7 +92,7 @@ export class VegaRTETableExtension extends VegaRTEExtension {
     this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
     this.tableSelection = new RTETableSelection();
     RTETableColorManager.setTableColors(colors);
-    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerToolbarButtonRenderer(VegaRTETableExtension.TOOLBAR_BUTTON_KEY, this.toolbarButtonRenderer);
     this.registerBlockBasicStrategies(RTETableBlock.name);
     this.registerBlockBasicStrategies(RTETableHeadBlock.name);
     this.registerBlockBasicStrategies(RTETableHeadCellBlock.name);
@@ -180,3 +180,4 @@ export class VegaRTETableExtension extends VegaRTEExtension {
   VegaRTEExtension.registerFilterStylesStrategy(RTETableCellBlock.dtoName, new TableCellFilterStylesStrategy());
   VegaRTEExtension.registerFilterStylesStrategy(RTETableHeadCellBlock.dtoName, new TableCellFilterStylesStrategy('th'));
 })();
+VegaRTETableExtension.TOOLBAR_BUTTON_KEY = 'table';

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

@@ -13,7 +13,7 @@ export class SelectionWidgetKeyboardController extends KeyboardManagerSlimmer {
   constructor() {
     super(() => [
       {
-        keyCode: 'Backspace',
+        keyCode: ['Backspace', 'Delete'],
         eventName: 'keydown',
         activeElementInScope: [this.selectionWidgetRenderer.getWidgetHandleRef()],
         callback: this.handleDeleteKeyDown,

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-extension.js

@@ -21,7 +21,7 @@ export class VegaRTETokenExtension extends VegaRTEExtension {
   }
   /** @inheritDoc */
   prepareBeforeLoad(host) {
-    this.registerToolbarButtonRenderer('token', new RTETokenToolbarButtonRenderer(this.tokenList), host);
+    this.registerToolbarButtonRenderer(VegaRTETokenExtension.TOOLBAR_BUTTON_KEY, new RTETokenToolbarButtonRenderer(this.tokenList), host);
   }
 }
 (() => {
@@ -29,3 +29,4 @@ export class VegaRTETokenExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
   VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
 })();
+VegaRTETokenExtension.TOOLBAR_BUTTON_KEY = 'token';

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

@@ -21,9 +21,12 @@ export { VegaRTEFunctionExtension } from './extensions/functions/function-extens
 export { VegaRTETableExtension } from './extensions/table/table-extension';
 export { VegaRTEHorizontalLineExtension } from './extensions/horizontal-line/horizontal-line-extension';
 export { VegaRTESpecialCharactersExtension } from './extensions/special-characters/special-characters-extension';
+export { VegaRTEFindReplaceExtension } from './extensions/find-replace/find-replace-extension';
 export { VegaRTESpecialCharactersEssentials, VegaRTESpecialCharactersLatin, VegaRTESpecialCharactersMathematical, VegaRTESpecialCharactersArrows, VegaRTESpecialCharactersCurrency, VegaRTESpecialCharactersText, } from './extensions/special-characters/constants/default-categories';
 export { VegaRTELineHeightExtension } from './extensions/line-height/line-height-extension';
 export { VegaRTELinkExtension } from './extensions/link/link-extension';
+export { VegaRTECopyExtension } from './extensions/copy/copy-extension';
+export { VegaRTECutExtension } from './extensions/cut/cut-extension';
 // actions
 export { ModifyContentAction, ModifyContentActionType } from './dto/actions/modify-content-action.abstract';
 export { AppendChildrenAction } from './dto/actions/append-child-nodes-action';
@@ -33,6 +36,7 @@ export { InsertChildrenBeforeAction } from './dto/actions/insert-children-before
 export { InsertNodeToNearestRootAction } from './dto/actions/insert-node-to-nearest-root-action';
 export { UpdateCursorPositionAction } from './dto/actions/update-cursor-position-action';
 export { InsertNewParagraphAction } from './dto/actions/insert-new-paragraph-action';
+export { DeleteSelectedContentAction } from './dto/actions/delete-selected-content-action';
 // annotations
 export { CustomAttributeAnnotation } from './dto/annotations/custom-attribute-annotation';
 export { CustomClassAnnotation } from './dto/annotations/custom-class-annotation';

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/abstract-delete-content-handler.js

@@ -0,0 +1,133 @@
+import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
+import { RemoveChildrenAction } from '../../../../dto/actions/remove-child-action';
+import { ReplaceChildNodesAction } from '../../../../dto/actions/replace-child-nodes-action';
+import { RTEBlock } from '../../../../dto/blocks/block.abstract';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { BaseHandler } from './base-handler';
+/**
+ * Hosts the deletion logic shared by the forward and backward delete handlers. Subclasses implement
+ * the single-block deletion behaviour for their specific direction. User press backspace or delete
+ * will trigger one of those subclasses.
+ */
+export class AbstractDeleteContentHandler extends BaseHandler {
+  /**
+   * Delete the selected node(s) from the current state.
+   */
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length >= 2) {
+      this.deleteContentWithMultipleNodes();
+    }
+    else {
+      this.deleteContentWithSingleBlock();
+    }
+  }
+  /**
+   * Computes the caret position one step to the right, used to translate a forward delete into a backspace.
+   *
+   * @param {Nullable<RTENode>} node - The node the caret is currently in.
+   * @param {number} offset - The current caret offset within the node.
+   * @returns {Nullable<ForwardDeletePosition>} The shifted position, or null when the caret is at the end of the content.
+   */
+  getForwardDeletePosition(node, offset) {
+    if (!node) {
+      return null;
+    }
+    // Delete the character to the right within the same node.
+    if (offset < node.getRangeEndOffset()) {
+      return { node, offset: offset + 1 };
+    }
+    // The caret is at the end of the node, move to the next node.
+    const nextNode = this.getNextNode(node);
+    if (!nextNode) {
+      return null;
+    }
+    // When the next node lives in the same block, the end of the current node and the
+    // start of the next node are the same caret position, so the character to delete is
+    // the first character of the next node, mirroring a backspace at offset 1.
+    if (nextNode.parent === node.parent) {
+      return { node: nextNode, offset: 1 };
+    }
+    // The next node lives in a different block, so deleting forward should merge that
+    // block or remove the next line break, mirroring a backspace at the block start.
+    return { node: nextNode, offset: 0 };
+  }
+  /**
+   * Returns the next node relative to the given node, crossing block boundaries when needed.
+   *
+   * @param {RTENode} node - The current node.
+   * @returns {Nullable<RTENode>} The next node, or null when the given node is the last node of the content.
+   */
+  getNextNode(node) {
+    const block = node.parent;
+    const nodeIndex = block.children.indexOf(node);
+    if (nodeIndex >= 0 && nodeIndex < block.children.length - 1) {
+      return block.children[nodeIndex + 1];
+    }
+    const nextBlock = this.getNextBlock(block);
+    return nextBlock ? nextBlock.getFirstNode() : null;
+  }
+  /**
+   * Returns the next block relative to the given block, ascending out of nested list structures when needed.
+   *
+   * @param {RTEBlock} block - The current block.
+   * @returns {Nullable<RTEBlock>} The next block, or null when the given block is the last block of the content.
+   */
+  getNextBlock(block) {
+    const parent = block.parent;
+    if (!parent || !parent.children) {
+      return null;
+    }
+    const siblings = parent.children;
+    const blockIndex = siblings.indexOf(block);
+    if (blockIndex >= 0 && siblings[blockIndex + 1]) {
+      return siblings[blockIndex + 1];
+    }
+    if (parent instanceof RTEBlock) {
+      return this.getNextBlock(parent);
+    }
+    return null;
+  }
+  /**
+   * Deletes the content within multiple nodes selected by the user.
+   */
+  deleteContentWithMultipleNodes() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const cursorNode = this.removeSelectionRange(true);
+    const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 &&
+      lastSelectedNode instanceof RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parent.apply(new RemoveChildrenAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parent);
+  }
+  /**
+   * If the first block is not paragraph, convert the block to paragraph after delete all text
+   *
+   * @param {RTEBlock} block - The first block instance
+   */
+  convertFirstBlockToParagraph(block) {
+    const firstBlock = this.currentState.children[0];
+    if (firstBlock === block &&
+      block instanceof RTETextBlock &&
+      block.children.length === 1 &&
+      block.children[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new ReplaceChildNodesAction(block.children));
+      block.parent.apply(new InsertChildrenBeforeAction(block, paragraph));
+      block.parent.apply(new RemoveChildrenAction(block));
+    }
+  }
+  /**
+   * Creates a new paragraph element with a text node and appends it to the current state.
+   */
+  insertDefaultParagraph() {
+    const paragraph = this.createEmptyParagraph();
+    this.currentState.apply(new AppendChildrenAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.children[0], 1);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/backward-delete-content-handler.js

@@ -0,0 +1,35 @@
+import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
+import { AbstractDeleteContentHandler } from './abstract-delete-content-handler';
+/** Handles a backspace (leftward) deletion of content within a VegaRTE editor. User press backspace will trigger this method */
+export class BackwardDeleteContentHandler extends AbstractDeleteContentHandler {
+  /**
+   * Handles a backspace (leftward) deletion of content within a single block in an RTE editor.
+   */
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+      return;
+    }
+    const targetNode = this.selectionController.getSelectedNodes()[0];
+    if (!targetNode) {
+      return;
+    }
+    const deleteAction = new DeleteBlockContentAction(targetNode, startOffset);
+    targetNode.parent.apply(deleteAction);
+    if (deleteAction.previousNode) {
+      const nextOffset = deleteAction.previousNode === targetNode
+        ? Math.max(0, startOffset - 1)
+        : deleteAction.previousNode.getRangeEndOffset();
+      this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+    }
+    else if (deleteAction.nextNode) {
+      this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+    }
+    else if (this.currentState.children.length === 0) {
+      // Add a empty paragraph if delete all content to make sure the caret position
+      this.insertDefaultParagraph();
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/forward-delete-content-handler.js

@@ -0,0 +1,93 @@
+import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
+import { AbstractDeleteContentHandler } from './abstract-delete-content-handler';
+/** Handles a delete (rightward) deletion of content within a VegaRTE editor. User press delete will trigger this method */
+export class ForwardDeleteContentHandler extends AbstractDeleteContentHandler {
+  /**
+   * Handles a delete (rightward) deletion of content within a single block in an RTE editor.
+   */
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+      return;
+    }
+    const targetNode = this.selectionController.getSelectedNodes()[0];
+    // The node that should hold the caret after a forward delete removes a non-editable
+    // leading node (e.g. a function keyword or a token), so the caret stays put instead of
+    // jumping backward to the previous block. Captured before the deletion detaches it.
+    let forwardCaretAnchor = null;
+    let resolvedNode = targetNode;
+    let resolvedOffset = startOffset;
+    // A forward delete on an empty node (e.g. an emptied function-block input box) mirrors
+    // a backspace: the empty node itself is removed instead of shifting the caret into the
+    // following block. Without this, the forward delete falls into the heterogeneous block
+    // boundary branch below and only moves the caret, so an emptied input box could never
+    // be removed with Delete even though Backspace removes it. The caret then lands on the
+    // following content that shifts up into the emptied node's place.
+    if (targetNode && targetNode.isTextNode() && targetNode.isEmpty()) {
+      forwardCaretAnchor = this.getNextNode(targetNode);
+    }
+    else {
+      // A forward delete is equivalent to moving the caret one step to the right and
+      // then performing a backspace, so we can reuse the existing backspace logic.
+      const forwardPosition = this.getForwardDeletePosition(targetNode, startOffset);
+      // The caret is at the very end of the content, there is nothing to delete forward.
+      if (!forwardPosition) {
+        return;
+      }
+      // Mirror backspace at heterogeneous block boundaries: a forward delete that crosses
+      // into a following block of a different type (e.g. paragraph → list-item, or into an
+      // image block) only moves the caret onto that block first; the next forward delete then
+      // removes it, keeping Delete and Backspace consistent. When the following block is the
+      // same type (e.g. a token at the start of the next paragraph) we let the deletion
+      // proceed so the two blocks merge, mirroring a backspace at the start of that block.
+      if (targetNode &&
+        forwardPosition.node.parent !== targetNode.parent &&
+        forwardPosition.node.parent.type !== targetNode.parent.type) {
+        this.selectionController.enqueueSelectionRangeFutureState(forwardPosition.node, 0);
+        return;
+      }
+      // When the caret sits at the start of a non-editable leading node (e.g. a function
+      // keyword or a token), a forward delete removes that node. Visually the caret stays
+      // put while the following content shifts up into its place, so the caret should land
+      // on that next node rather than following the backspace's leftward move to the
+      // previous block.
+      if (targetNode && !targetNode.isContentEditable() && startOffset === 0) {
+        forwardCaretAnchor = this.getNextNode(targetNode);
+      }
+      resolvedNode = forwardPosition.node;
+      resolvedOffset = forwardPosition.offset;
+    }
+    /* istanbul ignore next */
+    if (!resolvedNode) {
+      return;
+    }
+    const deleteAction = new DeleteBlockContentAction(resolvedNode, resolvedOffset);
+    resolvedNode.parent.apply(deleteAction);
+    if (forwardCaretAnchor) {
+      // A non-editable anchor (e.g. a token) expresses its caret position at the
+      // parent-block level: its range container is the parent element, so an offset of
+      // 0 would put the caret at the very start of the block (jumping to the far left)
+      // instead of just before the anchor. Use the anchor's index within its parent so
+      // the caret lands right before it, on the spot the deleted node used to occupy.
+      const forwardCaretOffset = forwardCaretAnchor.isContentEditable()
+        ? 0
+        : forwardCaretAnchor.parent.children.indexOf(forwardCaretAnchor);
+      this.selectionController.enqueueSelectionRangeFutureState(forwardCaretAnchor, forwardCaretOffset);
+    }
+    else if (deleteAction.previousNode) {
+      const nextOffset = deleteAction.previousNode === resolvedNode
+        ? Math.max(0, resolvedOffset - 1)
+        : deleteAction.previousNode.getRangeEndOffset();
+      this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+    }
+    else if (deleteAction.nextNode) {
+      this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+    }
+    else if (this.currentState.children.length === 0) {
+      // Add a empty paragraph if delete all content to make sure the caret position
+      this.insertDefaultParagraph();
+    }
+  }
+}

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

@@ -44,6 +44,7 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
       const range = this.currentRange.toNativeRange();
       if (range) {
         this.setSelectionRange(range);
+        this.scrollCaretIntoView(range);
       }
     };
   }
@@ -167,6 +168,60 @@ export class SelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
     const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
     return ShadowSelectionPolyfill.getSelection(richTextContentRef.shadowRoot);
   }
+  /**
+   * Scroll the editor's scrollable viewport so the caret stays visible.
+   * Setting the selection range programmatically does not trigger the browser's
+   * native auto-scroll, so when the cursor is moved (e.g. after inserting a
+   * function block) it can land outside the visible area of a fixed-height
+   * (rows) editor. This keeps the caret within view.
+   *
+   * Note: This method performs getBoundingClientRect() reads and is called during
+   * the re-render task path every time the saved selection is restored.
+   *
+   * @param {Range} range - The range that was applied to the selection.
+   */
+  scrollCaretIntoView(range) {
+    const viewport = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    const caretRect = this.getCaretRect(range);
+    if (!viewport || !caretRect) {
+      return;
+    }
+    const viewportRect = viewport.getBoundingClientRect();
+    if (viewportRect.width === 0 ||
+      viewportRect.height === 0 ||
+      (caretRect.top === 0 && caretRect.bottom === 0 && caretRect.left === 0 && caretRect.right === 0)) {
+      return;
+    }
+    if (caretRect.bottom > viewportRect.bottom) {
+      viewport.scrollTop += caretRect.bottom - viewportRect.bottom;
+    }
+    else if (caretRect.top < viewportRect.top) {
+      viewport.scrollTop -= viewportRect.top - caretRect.top;
+    }
+  }
+  /**
+   * Get the bounding rect of the caret for the given range.
+   * A collapsed range inside an empty node can return an empty rect, so in that
+   * case fall back to the nearest element's bounding rect.
+   *
+   * @param {Range} range - The range to measure.
+   * @returns {Nullable<DOMRect>} The caret bounding rect, or null if it cannot be resolved.
+   */
+  getCaretRect(range) {
+    // getBoundingClientRect is unavailable in non-DOM (test) environments.
+    if (typeof range.getBoundingClientRect !== 'function') {
+      return null;
+    }
+    const rangeRect = range.getBoundingClientRect();
+    if (rangeRect.height > 0) {
+      return rangeRect;
+    }
+    const startContainer = range.startContainer;
+    const element = startContainer.nodeType === Node.TEXT_NODE
+      ? startContainer.parentElement
+      : startContainer;
+    return element ? element.getBoundingClientRect() : null;
+  }
   /**
    * Save the current selection range detail
    */

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

@@ -8,7 +8,8 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { InsertTextHandler } from './helper/input-event-handler/insert-text-handler';
 import { InsertParagraphHandler } from './helper/input-event-handler/insert-paragraph-handler';
 import { InsertLineBreakHandler } from './helper/input-event-handler/insert-line-break-handler';
-import { DeleteContentHandler } from './helper/input-event-handler/delete-content-handler';
+import { ForwardDeleteContentHandler } from './helper/input-event-handler/forward-delete-content-handler';
+import { BackwardDeleteContentHandler } from './helper/input-event-handler/backward-delete-content-handler';
 import { VegaRTEContent } from '../../dto/content-state';
 import { InsertPasteHandler } from './helper/input-event-handler/insert-paste-handler';
 import { generateUUID } from '../../../../utils/misc';
@@ -20,7 +21,8 @@ export class UserInputController extends VegaSlimmer {
     this.insertTextHandler = new InsertTextHandler();
     this.insertParagraphHandler = new InsertParagraphHandler();
     this.insertLineBreakHandler = new InsertLineBreakHandler();
-    this.deleteContentHandler = new DeleteContentHandler();
+    this.forwardDeleteContentHandler = new ForwardDeleteContentHandler();
+    this.backwardDeleteContentHandler = new BackwardDeleteContentHandler();
     this.insertPasteHandler = new InsertPasteHandler();
     /**
      * When a user performs an input action within the editable element, this function is triggered.
@@ -51,9 +53,13 @@ export class UserInputController extends VegaSlimmer {
           updateFlag = true;
           this.insertLineBreakHandler.execute(this.value, this.selectionController, this.host, e);
           break;
+        case 'deleteContentForward':
+          updateFlag = true;
+          this.forwardDeleteContentHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
         case 'deleteContentBackward':
           updateFlag = true;
-          this.deleteContentHandler.execute(this.value, this.selectionController, this.host, e);
+          this.backwardDeleteContentHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertFromPaste':
           updateFlag = true;

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

@@ -10,6 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalComponentDidRender } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
+import { VegaRTEOneRowHeightPx } from '../../constants/constant';
 export class VegaRichTextEditorRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -17,11 +18,19 @@ export class VegaRichTextEditorRenderer extends VegaSlimmer {
       return h("vega-text", { text: this.hint });
     };
     this.renderTextContent = () => {
+      const defaultHeight = `${5 * VegaRTEOneRowHeightPx}px`;
+      /**
+       * When rows is set to a value less than 2, it defaults to 5 rows
+       * to ensure the editor remains usable with adequate visible space.
+       */
+      const containerStyle = this.rows !== undefined
+        ? { height: this.rows >= 2 ? `${this.rows * VegaRTEOneRowHeightPx}px` : defaultHeight }
+        : { minHeight: defaultHeight };
       return (h("div", { class: {
           'rich-text-editor-container': true,
           'disabled': this.disabled,
           'vega-hidden': this.sourceView,
-        }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
+        }, style: containerStyle, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
         h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions }),
         this.renderCharacterCounter()));
     };

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

@@ -58,11 +58,11 @@
   border-radius: 8px;
   color: rgba(var(--v-text-primary, 32, 54, 69, 1));
   margin-top: 12px;
-  overflow: auto;
+  overflow: hidden;
   resize: vertical;
   padding-top: 12px;
   padding-right: 16px;
-  padding-bottom: 32px;
+  padding-bottom: 12px;
   padding-left: 16px;
 }
 :host .rich-text-editor-container:hover {

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

@@ -176,12 +176,6 @@ export class VegaRichTextEditor {
      * @vegaVersion 2.34.0
      */
     this.hint = '';
-    /**
-     * Specifies editable section rows for the rich text editor
-     *
-     * @vegaVersion 2.34.0
-     */
-    this.rows = 4;
     /**
      * Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.
      * It is recommended to use the VegaRTEContent type.
@@ -443,17 +437,16 @@ export class VegaRichTextEditor {
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [{
             "name": "vegaVersion",
             "text": "2.34.0"
           }],
-        "text": "Specifies editable section rows for the rich text editor"
+        "text": "Specifies editable section rows for the rich text editor.\nWhen not set, the editor uses stretching behavior with a default visual height of 5 rows.\nWhen set, the editor height is fixed and content overflow is scrollable.\nThe value accepts integers \u2265 2; for optimal display, values below 2 are internally normalized to 5 rows."
       },
       "attribute": "rows",
-      "reflect": false,
-      "defaultValue": "4"
+      "reflect": false
     },
     "value": {
       "type": "unknown",

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

@@ -436,7 +436,7 @@ export class VegaTextarea {
       "mutable": false,
       "complexType": {
         "original": "Nullable<LabelSuffixButtonConfig>",
-        "resolved": "{ icon: string; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
+        "resolved": "{ icon: string; buttonSize?: VegaButtonCircleSize; centerAlign?: boolean; } & Partial<Pick<HTMLVegaTooltipElement, \"size\" | \"trigger\" | \"minWidth\" | \"maxWidth\" | \"text\" | \"placement\" | \"alignment\">>",
         "references": {
           "Nullable": {
             "location": "import",