@globalpayments/vega 2.91.0 → 2.92.0

package/dist/cjs/vega-pagination.cjs.entry.js

@@ -9,25 +9,25 @@ const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-facto
 const vegaEventId = require('./vega-event-id-df22d80e.js');
 const pageSizeOptionUtils = require('./page-size-option-utils-d038dd3a.js');
 const ui = require('./ui-c91c37a7.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-76d19d56.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b9a5b3e2.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
-const translationSlimmer = require('./translation-slimmer-2af6f141.js');
-const responsiveFormatFacade = require('./responsive-format-facade-10ff730e.js');
+const translationSlimmer = require('./translation-slimmer-1e05769e.js');
+const responsiveFormatFacade = require('./responsive-format-facade-98b89142.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
 const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
-const featureFlagController = require('./feature-flag-controller-438a1510.js');
+const featureFlagController = require('./feature-flag-controller-c19d0b58.js');
 require('./change-manager-a297e4d2.js');
 require('./observer-f49483e8.js');
 require('./internal-vega-event-manager-7196a847.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./try-get-document-c0ebd39a.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./static-subject-title-70c73b16.js');
-require('./type-guard-0171e779.js');
+require('./type-guard-7ab48d6c.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');

package/dist/cjs/vega-popover_2.cjs.entry.js

@@ -4,25 +4,25 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const component = require('./component-1e352960.js');
-const injectKeyboardManager = require('./inject-keyboard-manager-1f5bbb19.js');
+const injectKeyboardManager = require('./inject-keyboard-manager-0dccff1a.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
 const vegaEventId = require('./vega-event-id-df22d80e.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
-const elementAppenderSlimmer = require('./element-appender-slimmer-316668d0.js');
+const elementAppenderSlimmer = require('./element-appender-slimmer-3bf69990.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
 const ariaDialogFocusableTrapSlimmer = require('./aria-dialog-focusable-trap-slimmer-73b4c0cb.js');
-const designToken = require('./design-token-f65eab4a.js');
-require('./keyboard-manager-61e8ce38.js');
+const designToken = require('./design-token-3548af29.js');
+require('./keyboard-manager-dfe8d924.js');
 require('./ui-c91c37a7.js');
-require('./type-guard-0171e779.js');
+require('./type-guard-7ab48d6c.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./change-manager-a297e4d2.js');
 require('./static-subject-title-70c73b16.js');
 require('./internal-vega-event-manager-7196a847.js');
@@ -31,14 +31,14 @@ require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./number-4816603d.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
-require('./responsive-format-facade-10ff730e.js');
+require('./responsive-format-facade-98b89142.js');
 require('./pixel-98f2a10c.js');
 require('./array-249289f2.js');
-require('./feature-flag-controller-438a1510.js');
+require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
 require('./observer-f49483e8.js');
 require('./synchronize-task-queue-1ee80e94.js');
-require('./state-border-formatter-e7779964.js');
+require('./state-border-formatter-626b0a14.js');
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;

package/dist/cjs/vega-progress-tracker_2.cjs.entry.js

@@ -19,8 +19,8 @@ const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-18891389.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const responsiveFormatFacade = require('./responsive-format-facade-10ff730e.js');
-const typeGuard = require('./type-guard-0171e779.js');
+const responsiveFormatFacade = require('./responsive-format-facade-98b89142.js');
+const typeGuard = require('./type-guard-7ab48d6c.js');
 const breakpoints = require('./breakpoints-1cc2c4c6.js');
 const autoRunWhenReRenderTaskQueueSlimmer_abstract = require('./auto-run-when-re-render-task-queue-slimmer.abstract-5734634d.js');
 const subStateObserverSlimmer = require('./sub-state-observer-slimmer-eee2f0ae.js');
@@ -33,10 +33,10 @@ require('./ui-32120990.js');
 require('./pixel-98f2a10c.js');
 require('./breakpoints-ebde4837.js');
 require('./array-249289f2.js');
-require('./feature-flag-controller-438a1510.js');
+require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
 require('./typography-3ea4fe41.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./static-subject-title-70c73b16.js');
 
 const VegaProgressTrackerRuntimeMetricsPayloadDefinition = [

package/dist/cjs/vega-radio_2.cjs.entry.js

@@ -15,23 +15,23 @@ const eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
 const vegaEventId = require('./vega-event-id-df22d80e.js');
 const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
-const requiredFieldRule = require('./required-field-rule-b12a29e1.js');
+const requiredFieldRule = require('./required-field-rule-400690c3.js');
 const componentLoadRequired = require('./component-load-required-6cc74719.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-b0c35330.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-e0efac05.js');
 const childNodesNotifyObserverSlimmer = require('./child-nodes-notify-observer-slimmer-7ae2a78f.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-76d19d56.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-079a7e87.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b9a5b3e2.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-4a2560a1.js');
 const mutationObserverSlimmer = require('./mutation-observer-slimmer-749d5020.js');
 const mutationObserverFilters = require('./mutation-observer-filters-38cebc6d.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./internal-vega-event-manager-7196a847.js');
 require('./try-get-document-c0ebd39a.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
-require('./feature-flag-controller-438a1510.js');
+require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
 require('./string-39438062.js');
 require('./misc-3d30df91.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./index-592b4052.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
@@ -41,8 +41,8 @@ require('./array-249289f2.js');
 require('./number-4816603d.js');
 require('./sub-state-observer-slimmer-eee2f0ae.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./keyboard-manager-61e8ce38.js');
-require('./type-guard-0171e779.js');
+require('./keyboard-manager-dfe8d924.js');
+require('./type-guard-7ab48d6c.js');
 require('./typography-3ea4fe41.js');
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/cjs/vega-rich-text-content.cjs.entry.js

@@ -7,14 +7,14 @@ const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
 const component = require('./component-1e352960.js');
 const darkModeStyleController = require('./dark-mode-style-controller-32d4054a.js');
-const imageAnnotationAction = require('./image-annotation-action-e4596726.js');
-const contentState = require('./content-state-a6105949.js');
-const codeBlock = require('./code-block-c1039791.js');
-const linkExtension = require('./link-extension-a7ac28f3.js');
+const imageAnnotationAction = require('./image-annotation-action-853f72c8.js');
+const contentState = require('./content-state-96ec9114.js');
+const codeBlock = require('./code-block-6435d641.js');
+const linkExtension = require('./link-extension-28d95849.js');
 const accessibility = require('./accessibility-88f8af84.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaEventId = require('./vega-event-id-df22d80e.js');
-const typeGuard = require('./type-guard-0171e779.js');
+const typeGuard = require('./type-guard-7ab48d6c.js');
 const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
@@ -38,7 +38,7 @@ require('./string-39438062.js');
 require('./typography-3ea4fe41.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./number-4816603d.js');
 
 class RTEBlockRenderer extends linkExtension.VegaRTEBaseRenderer {

package/dist/cjs/vega-rich-text-editor_4.cjs.entry.js

@@ -10,28 +10,28 @@ const accessibility = require('./accessibility-88f8af84.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c82df135.js');
 const vegaInternalEventId = require('./vega-internal-event-id-ecc5b87a.js');
-const codeBlock = require('./code-block-c1039791.js');
-const linkExtension = require('./link-extension-a7ac28f3.js');
-const typeGuard = require('./type-guard-0171e779.js');
+const codeBlock = require('./code-block-6435d641.js');
+const linkExtension = require('./link-extension-28d95849.js');
+const typeGuard = require('./type-guard-7ab48d6c.js');
 const internalIconManager = require('./internal-icon-manager-40bcac72.js');
-const imageAnnotationAction = require('./image-annotation-action-e4596726.js');
+const imageAnnotationAction = require('./image-annotation-action-853f72c8.js');
 const vegaEventId = require('./vega-event-id-df22d80e.js');
 const misc = require('./misc-3d30df91.js');
 const waitForComponentDidRender = require('./wait-for-component-did-render-02ca4bee.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-b0c35330.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-e0efac05.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-18891389.js');
-const contentState = require('./content-state-a6105949.js');
+const contentState = require('./content-state-96ec9114.js');
 const alignLeft = require('./align-left-4a76df69.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-1d36641d.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-e4c9a5ba.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
 const observer = require('./observer-f49483e8.js');
 const timer = require('./timer-5f33058b.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-b454645a.js');
-const replaceSelectedTextAction = require('./replace-selected-text-action-6d1ebbf9.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-63492ca3.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-76d19d56.js');
-const translationSlimmer = require('./translation-slimmer-2af6f141.js');
+const replaceSelectedTextAction = require('./replace-selected-text-action-a31563ed.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-8e4d577d.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-b9a5b3e2.js');
+const translationSlimmer = require('./translation-slimmer-1e05769e.js');
 const darkModeStyleController = require('./dark-mode-style-controller-32d4054a.js');
 const autoRunWhenReRenderTaskQueueSlimmer_abstract = require('./auto-run-when-re-render-task-queue-slimmer.abstract-5734634d.js');
 const array = require('./array-249289f2.js');
@@ -44,7 +44,7 @@ require('./typography-3ea4fe41.js');
 require('./object-b53e9416.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
-require('./internal-translation-controller-5905469e.js');
+require('./internal-translation-controller-48ebfd0f.js');
 require('./icon-manager-be358b32.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 require('./dynamic-slimmer-f31fdfd7.js');
@@ -57,11 +57,11 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./sub-state-observer-slimmer-eee2f0ae.js');
 require('./internal-vega-event-manager-7196a847.js');
-require('./range-dea19a90.js');
-require('./keyboard-manager-slimmer-079a7e87.js');
-require('./keyboard-manager-61e8ce38.js');
+require('./range-5cb3d1e4.js');
+require('./keyboard-manager-slimmer-4a2560a1.js');
+require('./keyboard-manager-dfe8d924.js');
 require('./vega-env-manager-23b8b23c.js');
-require('./feature-flag-controller-438a1510.js');
+require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
 require('./tinycolor-polyfill-502efaa8.js');
 require('./vega-nonce-manager-df69d3ed.js');
@@ -2276,48 +2276,89 @@ class DeleteBlockContentAction extends codeBlock.ModifyContentAction {
   }
 }
 
-/** Handles the deletion of content within a VegaRTE editor. User press backspace or delete will trigger this method */
-class DeleteContentHandler extends BaseHandler {
+/**
+ * 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.
+ */
+class AbstractDeleteContentHandler extends BaseHandler {
   /**
-   * Delete the selected node from the current state.
+   * Delete the selected node(s) from the current state.
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.deleteContentWithSingleBlock();
+    if (selectedBlocks.length >= 2) {
+      this.deleteContentWithMultipleNodes();
     }
     else {
-      this.deleteContentWithMultipleNodes();
+      this.deleteContentWithSingleBlock();
     }
   }
   /**
-   * Handles the deletion of content within a single block in an RTE editor.
+   * 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.
    */
-  deleteContentWithSingleBlock() {
-    const range = this.selectionController.getCurrentRange();
-    const { startOffset, endOffset, startContainer, endContainer } = range;
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    if (startOffset !== endOffset || startContainer !== endContainer) {
-      this.deleteContentWithMultipleNodes();
+  getForwardDeletePosition(node, offset) {
+    if (!node) {
+      return null;
     }
-    else if (selectedBlocks[0]) {
-      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
-      selectedBlocks[0].apply(deleteAction);
-      if (deleteAction.previousNode) {
-        const nextOffset = deleteAction.previousNode === selectedNodes[0]
-          ? 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();
-      }
+    // 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 codeBlock.RTEBlock) {
+      return this.getNextBlock(parent);
+    }
+    return null;
   }
   /**
    * Deletes the content within multiple nodes selected by the user.
@@ -2361,6 +2402,132 @@ class DeleteContentHandler extends BaseHandler {
   }
 }
 
+/** Handles a delete (rightward) deletion of content within a VegaRTE editor. User press delete will trigger this method */
+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();
+    }
+  }
+}
+
+/** Handles a backspace (leftward) deletion of content within a VegaRTE editor. User press backspace will trigger this method */
+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();
+    }
+  }
+}
+
 /**
  * Action to paste new content into current block.
  *
@@ -2507,7 +2674,8 @@ class UserInputController extends globalSlimmerRegistry.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.
@@ -2538,9 +2706,13 @@ class UserInputController extends globalSlimmerRegistry.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;