@globalpayments/vega 2.91.0 → 2.93.0

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

@@ -5,33 +5,35 @@ import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf2e.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { s as VegaInternalComponentDidRender, d as VegaInternalRichTextEditorFlushChanges, G as VegaInternalRichTextEditDeleteSelectedNodes, H as VegaInternalRichTextImageClick, I as VegaInternalRichTextImageDeleteButtonClicked, y as VegaInternalCodeBlockBlur, a as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-22151a4d.js';
-import { ai as VegaRTEOneRowHeightPx, R as RTETextNode, aj as BoldAnnotationAction, N as NodeAnnotationTypeEnum, ak as ItalicAnnotationAction, al as UnderlineAnnotationAction, b as RTETextBlock, T as TextStyleAnnotationAction, a2 as TextStyleAnnotation, am as BoldAnnotation, E as BlockAnnotationTypeEnum, an as ClearFormattingAnnotationAction, ao as CodeAnnotationAction, ap as StrikethroughAnnotationAction, ag as SelectionChangeAction, ae as LinkAnnotationAction, aq as IndentAnnotationAction, M as ModifyContentAction, i as ModifyContentActionType, a8 as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, e as AppendChildrenAction, ad as ZERO_WIDTH_SPACE, U as UpdateTextAction, g as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, f as RTENode, k as RemoveChildrenAction, L as ReplaceChildNodesAction, p as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems, ac as VegaRTEDefaultTextStyleItems } from './code-block-37294847.js';
-import { d as RTEDTORendererManager, V as VegaRTELinkExtension } from './link-extension-afb404fb.js';
-import { i as isNonNullable } from './type-guard-a2cbaae9.js';
+import { t as VegaInternalComponentDidRender, e as VegaInternalRichTextEditorFlushChanges, d as VegaInternalRichTextEditDeleteSelectedNodes, H as VegaInternalRichTextImageClick, I as VegaInternalRichTextImageDeleteButtonClicked, z as VegaInternalCodeBlockBlur, a as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-827eb1ce.js';
+import { ai as VegaRTEOneRowHeightPx, R as RTETextNode, aj as BoldAnnotationAction, N as NodeAnnotationTypeEnum, ak as ItalicAnnotationAction, al as UnderlineAnnotationAction, b as RTETextBlock, T as TextStyleAnnotationAction, a3 as TextStyleAnnotation, am as BoldAnnotation, F as BlockAnnotationTypeEnum, an as ClearFormattingAnnotationAction, ao as CodeAnnotationAction, ap as StrikethroughAnnotationAction, ag as SelectionChangeAction, ae as LinkAnnotationAction, aq as IndentAnnotationAction, M as ModifyContentAction, i as ModifyContentActionType, q as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, e as AppendChildrenAction, ad as ZERO_WIDTH_SPACE, U as UpdateTextAction, g as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, f as RTENode, a as RTEBlock, k as RemoveChildrenAction, O as ReplaceChildNodesAction, ar as escapeHtml, p as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems, ac as VegaRTEDefaultTextStyleItems } from './code-block-ae2337c2.js';
+import { d as RTEDTORendererManager, V as VegaRTELinkExtension } from './link-extension-74eaa826.js';
+import { i as isNonNullable } from './type-guard-2bfb2c7b.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
-import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-7f7a5678.js';
-import { V as VegaDropdownClick, j as VegaChange, a as VegaClick, $ as VegaImageInserted, a0 as VegaSourceCodeChange, c as VegaPopoverShow, b as VegaPopoverHide } from './vega-event-id-268f8def.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-4c77d314.js';
+import { V as VegaDropdownClick, d as VegaChange, a as VegaClick, a0 as VegaImageInserted, a1 as VegaSourceCodeChange, c as VegaPopoverShow, b as VegaPopoverHide } from './vega-event-id-270fe47e.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { w as waitForComponentDidRender } from './wait-for-component-did-render-0488922a.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-0a2ba886.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b94cec83.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-7ef94141.js';
-import { f as RTEImageNode, b as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-67950b80.js';
+import { w as waitForComponentDidRender } from './wait-for-component-did-render-0c237cb8.js';
+import { V as VegaRTEImageExtension } from './image-extension-7108c27d.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-a1c7b28c.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-0f72ce74.js';
+import { f as RTEImageNode, b as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-c3b85ae6.js';
 import { b as AlignLeft, A as AlignCenter, c as AlignRight, a as AlignJustify } from './align-left-7f959adf.js';
-import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-45ccddc9.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-b1ee1b8e.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { d as debounce } from './timer-9321173b.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-778dd929.js';
-import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-12bc8b82.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-d62d418e.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-50022584.js';
-import { T as TranslationSlimmer } from './translation-slimmer-4904e7fe.js';
+import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-c9278a0f.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-3047bab0.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { T as TranslationSlimmer } from './translation-slimmer-3ea56354.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ca5afd2d.js';
 import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { i as isArrayEqual } from './array-7888f339.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
+import { c as chevronUp } from './chevron-up-b1989751.js';
 import { t as trashCan } from './trash-can-8819a939.js';
 import { f as findParent } from './ui-d73f756a.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
@@ -40,7 +42,7 @@ import './typography-19c3b9be.js';
 import './object-0c277f57.js';
 import './breakpoints-d9faf11c.js';
 import './ui-93922c59.js';
-import './internal-translation-controller-aa09ca87.js';
+import './internal-translation-controller-09b8bd13.js';
 import './icon-manager-4ef3f6dd.js';
 import './create-public-api-runtime-metrics-slimmer-48f85199.js';
 import './dynamic-slimmer-90b8af32.js';
@@ -51,13 +53,13 @@ import './breakpoints-332702ed.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './sub-state-observer-slimmer-d9ad2bdd.js';
-import './internal-vega-event-manager-956cf128.js';
-import './range-4d09a305.js';
-import './keyboard-manager-slimmer-ba5cc767.js';
-import './keyboard-manager-3e5b157f.js';
+import './sub-state-observer-slimmer-64532d94.js';
+import './internal-vega-event-manager-48690e5b.js';
+import './range-8f877dbf.js';
+import './keyboard-manager-slimmer-531ddb0e.js';
+import './keyboard-manager-ec18721b.js';
 import './vega-env-manager-8f8dc473.js';
-import './feature-flag-controller-2a89f20c.js';
+import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
 import './tinycolor-polyfill-7be0eb93.js';
 import './vega-nonce-manager-497e5eb5.js';
@@ -1033,6 +1035,7 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
+      autoFocusOnClick: false,
     });
     this.insertURLImage = async () => {
       const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
@@ -1045,18 +1048,21 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
           this.uploadInputRef.click();
           break;
         case 'url':
-          this.currentRange = this.selectionController.getCurrentRange();
-          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
-          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          this.host.parentElement.append(this.insertURLModalRef);
-          this.insertURLInputRef.value = '';
-          await this.insertURLModalRef.modal('show');
-          await this.insertURLInputRef.doFocus();
+          await this.openInsertURLModal();
           break;
       }
       await this.dropdownRef.hide();
     };
+    this.openInsertURLModal = async () => {
+      this.currentRange = this.selectionController.getCurrentRange();
+      this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+      this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.host.parentElement.append(this.insertURLModalRef);
+      this.insertURLInputRef.value = '';
+      await this.insertURLModalRef.modal('show');
+      await this.insertURLInputRef.doFocus();
+    };
     /**
      * The below method is e2e-test covered in
      * @see{module:should-update-url-properly-when-upload-images}
@@ -1078,15 +1084,33 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
+    const shouldRenderDropdown = this.shouldRenderDropdown();
+    const shouldRenderUpload = this.isImageUploadEnabled();
+    const shouldRenderUrlInsertion = this.isImageURLInsertionEnabled();
+    if (!shouldRenderUpload && !shouldRenderUrlInsertion) {
+      return null;
+    }
     return (h("vega-box", null,
-      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
           this.dropdownRef = ref;
           this.addDropdownObserver(ref);
         } },
         renderBtn({ showArrowIcon: true }),
-        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
-      this.renderUploadInput(),
-      this.renderInsertURLModal()));
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent()))) : (renderBtn({})),
+      shouldRenderUpload ? this.renderUploadInput() : null,
+      shouldRenderUrlInsertion ? this.renderInsertURLModal() : null));
+  }
+  onClick() {
+    if (this.shouldRenderDropdown()) {
+      return;
+    }
+    if (this.isImageURLInsertionEnabled()) {
+      void this.openInsertURLModal();
+      return;
+    }
+    if (this.isImageUploadEnabled()) {
+      this.uploadInputRef.click();
+    }
   }
   isSelected() {
     return false;
@@ -1099,10 +1123,20 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
   renderDropdownContent() {
-    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+    return (h(Fragment, null, this.getItems().map((item) => {
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
     })));
   }
+  getItems() {
+    return ImageToolbarButtonSlimmer.allItems.filter((item) => {
+      if (item.key === 'upload') {
+        return this.isImageUploadEnabled();
+      }
+      else {
+        return this.isImageURLInsertionEnabled();
+      }
+    });
+  }
   renderUploadInput() {
     return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
   }
@@ -1135,6 +1169,18 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   addModalInsertObserver(buttonRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
   }
+  getImageExtensionConfig() {
+    return VegaRTEImageExtension.configStore.get(this.host) || {};
+  }
+  isImageUploadEnabled() {
+    return this.getImageExtensionConfig().enableImageUpload !== false;
+  }
+  isImageURLInsertionEnabled() {
+    return this.getImageExtensionConfig().enableImageURLInsertion !== false;
+  }
+  shouldRenderDropdown() {
+    return this.getItems().length > 1;
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:should-update-url-properly-when-upload-images}
@@ -1167,7 +1213,7 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-ImageToolbarButtonSlimmer.items = [
+ImageToolbarButtonSlimmer.allItems = [
   {
     key: 'upload',
     label: 'Upload from computer',
@@ -1893,7 +1939,7 @@ class BaseHandler {
    * @returns {boolean} boolean result
    */
   isEmptyParagraph(node) {
-    return node && node.childNodes && node.childNodes.length === 0;
+    return node && node.nodeType === Node.ELEMENT_NODE && node.childNodes && node.childNodes.length === 0;
   }
   /**
    * Removes selected nodes within a range in a rich text editor content.
@@ -2254,7 +2300,7 @@ class InsertLineBreakHandler extends BaseHandler {
   getNextRTENode(lineBreakNode) {
     const index = lineBreakNode.parent.children.indexOf(lineBreakNode);
     const nextNode = lineBreakNode.parent.children[index + 1];
-    return nextNode || lineBreakNode;
+    return nextNode && nextNode.isContentEditable() ? nextNode : lineBreakNode;
   }
 }
 
@@ -2272,48 +2318,89 @@ class DeleteBlockContentAction extends 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 RTEBlock) {
+      return this.getNextBlock(parent);
+    }
+    return null;
   }
   /**
    * Deletes the content within multiple nodes selected by the user.
@@ -2357,6 +2444,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.
  *
@@ -2367,6 +2580,7 @@ class PasteContentAction extends ModifyContentAction {
   constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
     super();
     this.type = ModifyContentActionType.PASTE_CONTENT;
+    this.futureFocusAtEnd = false;
     this.blocksToBeInserted = blocksToBeInserted;
     this.startNode = startNode;
     this.startOffset = startOffset;
@@ -2384,18 +2598,107 @@ class InsertPasteHandler extends BaseHandler {
    * @param {InputEvent} event - Paste event.
    */
   handleEvent(event) {
+    const currentRange = this.selectionController.getCurrentRange();
+    const payload = this.getPastePayload(event);
+    if (this.insertPlainTextInline(payload, currentRange)) {
+      return;
+    }
     const blocks = this.parsePastedElements(event);
-    const { startContainer } = this.selectionController.getCurrentRange();
-    if (this.isRootContainer(startContainer)) {
+    const startContainer = (currentRange === null || currentRange === void 0 ? void 0 : currentRange.startContainer) || undefined;
+    if (!startContainer) {
+      // When the selection/range is unavailable (e.g. the caret was lost while
+      // the paste-mode chooser had focus), still append the pasted content to
+      // the root so the paste is never silently dropped.
+      this.insertBlocksToRoot(blocks);
+    }
+    else if (this.isRootContainer(startContainer)) {
       this.insertBlocksToRoot(blocks);
       // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
     }
     else if (this.isEmptyParagraph(startContainer)) {
-      this.insertBlocksBeforeEmptyBlock(blocks);
+      this.insertBlocksBeforeEmptyBlock(blocks, currentRange);
     }
     else {
-      this.insertBlocksToContent(blocks);
+      this.insertBlocksToContent(blocks, currentRange);
+    }
+  }
+  /**
+   * Inserts plain-text paste content into the current text node at caret position.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @returns {boolean} True when inline insertion is handled.
+   */
+  insertPlainTextInline(payload, currentRange) {
+    var _a, _b;
+    const selectedNodes = ((_b = (_a = this.selectionController).getSelectedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+    if (!this.shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes)) {
+      return false;
+    }
+    const text = payload.text.replace(/\r\n?/g, '\n');
+    const cursorNode = selectedNodes.find((node) => node instanceof RTETextNode) || currentRange.startNode;
+    if (!(cursorNode instanceof RTETextNode)) {
+      return false;
+    }
+    cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, currentRange.startOffset + text.length);
+    return true;
+  }
+  /**
+   * Determines whether the payload should be inserted as inline plain text.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @param {RTENode[]} selectedNodes - Currently selected nodes.
+   * @returns {boolean} True when inline plain-text insertion should be used.
+   */
+  shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes = []) {
+    if (!currentRange || !currentRange.startContainer) {
+      return false;
+    }
+    if (this.isRootContainer(currentRange.startContainer)) {
+      return false;
+    }
+    const text = (payload.text || '').replace(/\r\n?/g, '\n');
+    if (!text) {
+      return false;
+    }
+    const html = payload.html || '';
+    if (!html) {
+      return true;
     }
+    const hasTextNodeSelection = selectedNodes.some((node) => node instanceof RTETextNode) ||
+      currentRange.startNode instanceof RTETextNode;
+    if (!hasTextNodeSelection) {
+      return false;
+    }
+    // Use the inline plain‑text path only when HTML and plain text match exactly and no formatting exists;
+    // otherwise route through the block path to preserve styles.
+    const analysis = this.analyzeHtmlContent(html);
+    return analysis.plainText === text && !analysis.hasFormatting;
+  }
+  /**
+   * Analyzes HTML content to extract plain text and detect inline formatting,
+   * parsing the HTML once to avoid redundant StylePreservation and DOMParser calls.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {HtmlAnalysisResult} Analysis result with plainText and hasFormatting properties.
+   */
+  analyzeHtmlContent(html) {
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    // Extract plain text from the parsed document
+    const plainText = (body.textContent || '').replace(/\r\n?/g, '\n');
+    // Check for rich inline formatting
+    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark'));
+    if (!hasFormatting) {
+      hasFormatting = Array.from(body.querySelectorAll('span')).some((span) => {
+        const style = span.getAttribute('style') || span.getAttribute('data-style') || '';
+        return this.styleContainsRichFormatting(style);
+      });
+    }
+    return { plainText, hasFormatting };
   }
   /**
    * Insert the blocks to root
@@ -2406,37 +2709,54 @@ class InsertPasteHandler extends BaseHandler {
     this.currentState.apply(new AppendChildrenAction(blocks));
   }
   /**
-   * Insert the blocks to content
+   * Insert the blocks into the current content block at the specified range.
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksToContent(blocks) {
-    const cursorNode = this.removeSelectionRange();
+  insertBlocksToContent(blocks, rteRange) {
+    var _a;
+    const isCollapsedRange = rteRange.startNode === rteRange.endNode && rteRange.startOffset === rteRange.endOffset;
+    const cursorNode = isCollapsedRange
+      ? rteRange.startNode
+      : this.removeSelectionRange();
     if (cursorNode && cursorNode.parent) {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const pasteAction = new PasteContentAction(blocks, cursorNode, startOffset);
+      const pasteAction = new PasteContentAction(blocks, cursorNode, rteRange.startOffset, rteRange);
       cursorNode.parent.apply(pasteAction);
-      if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      if (pasteAction.futureFocusNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(pasteAction.futureFocusNode, (_a = pasteAction.futureFocusNodeOffset) !== null && _a !== void 0 ? _a : 0);
+      }
+      else if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
       }
     }
+    else {
+      // No resolvable cursor position: fall back to appending at the root so
+      // the pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
+    }
   }
   /**
    * Insert the blocks before to current block
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksBeforeEmptyBlock(blocks) {
+  insertBlocksBeforeEmptyBlock(blocks, rteRange) {
     const cursorNode = this.removeSelectionRange();
-    /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      const pasteAction = new PasteContentAction(blocks, currentBlock.children[0], 0, this.selectionController.getCurrentRange());
+      const pasteAction = new PasteContentAction(blocks, cursorNode, 0, rteRange);
       currentBlock.apply(pasteAction);
       if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
       }
     }
+    else {
+      // No resolvable empty block: fall back to appending at the root so the
+      // pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
+    }
   }
   /**
    * Format and parse elements from user paste with simple style preservation.
@@ -2445,30 +2765,76 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    let pastedHTML = event.dataTransfer.getData('text/html');
+    const payload = this.getPastePayload(event);
+    let pastedHTML = payload.html || '';
     if (!pastedHTML) {
-      const pastedText = event.dataTransfer.getData('text/plain');
-      pastedHTML = this.parsePlainText(pastedText);
+      pastedHTML = this.parsePlainText(payload.text || '');
+    }
+    else if (this.shouldTreatAsPlainTextPayload(pastedHTML)) {
+      const plainSource = payload.text || this.extractPlainTextFromHtml(pastedHTML);
+      pastedHTML = this.parsePlainText(plainSource);
     }
     const context = StylePreservator.preserve(pastedHTML);
     const safeHtml = context.getProcessedHtml();
     const parser = new DOMParser();
     const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const rootElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(rootElements);
+    this.normalizeImportedHtmlArtifacts(parsedDoc.body);
     const htmlElements = Array.from(parsedDoc.body.childNodes);
-    context.restore(htmlElements);
-    return ElementToDtoStrategyProcessor.process(htmlElements)
+    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
+    // Fallback for synthetic payloads: if strategy conversion yields no blocks
+    // but we still have plain text, create paragraph/text blocks directly.
+    if (resultBlocks.length === 0 && (payload.text || '').trim() !== '') {
+      return this.buildPlainTextFallbackBlocks(payload.text);
+    }
+    return resultBlocks;
   }
   /**
-   * Moves the caret to the next block element in a rich text editor.
+   * Extracts readable plain text from clipboard HTML.
    *
-   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {string} - Plain text extracted from HTML.
    */
-  switchCaretPositionToNextElement(newBlock) {
+  extractPlainTextFromHtml(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    return (parsedDoc.body.textContent || '').replace(/\r\n?/g, '\n');
+  }
+  /**
+   * Builds plain-text paragraph blocks when element strategy parsing returns no output.
+   *
+   * @param {string} text - Plain text clipboard content.
+   * @returns {RTEContentBlock[]} Fallback text blocks.
+   */
+  buildPlainTextFallbackBlocks(text) {
+    return text.split('\n').map((line) => {
+      const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+      const textNode = new RTETextNode(`${paragraph.id}1`, line, paragraph);
+      paragraph.apply(new AppendChildrenAction([textNode]));
+      return paragraph;
+    });
+  }
+  /**
+   * Moves the caret to a block element in a rich text editor after paste.
+   *
+   * @param {RTEBlock} newBlock - Block element to move the caret to.
+   * @param {boolean} atEnd - When true, places the caret after the last character of the block's last node; otherwise at offset 0 of the first node.
+   */
+  switchCaretPositionToNextElement(newBlock, atEnd = false) {
+    var _a, _b;
     if (newBlock && newBlock.children) {
-      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      if (atEnd) {
+        const lastNode = newBlock.children[newBlock.children.length - 1];
+        this.selectionController.enqueueSelectionRangeFutureState(lastNode, (_b = (_a = lastNode.text) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+      }
+      else {
+        this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      }
     }
   }
   /**
@@ -2478,16 +2844,217 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {string} - The formatted HTML string.
    */
   parsePlainText(content) {
+    if (this.shouldRenderAsCodeBlock(content)) {
+      return `<pre><code>${escapeHtml(content)}</code></pre>`;
+    }
     const lines = content.split('\n');
     return lines
       .map((line) => {
       if (line === '') {
         return '<p>\n</p>';
       }
-      return `<p>${line}</p>`;
+      return `<p>${escapeHtml(line)}</p>`;
     })
       .join('');
   }
+  /**
+   * Detects whether plain text likely represents source code.
+   *
+   * @param {string} content - Clipboard plain text content.
+   * @returns {boolean} True when the content should render as a code block.
+   */
+  shouldRenderAsCodeBlock(content) {
+    const normalized = content.replace(/\r\n?/g, '\n').trim();
+    if (!normalized) {
+      return false;
+    }
+    const hasMultipleLines = normalized.includes('\n');
+    const hasHtmlLikeTag = /<\/?[a-z][\w:-]*[^>]*>/i.test(normalized);
+    const hasCodeFence = normalized.startsWith('```') && normalized.endsWith('```');
+    const hasProgrammingTokens = /[{};]|=>|\b(function|const|let|var|class|import|export|return)\b/.test(normalized);
+    if (hasCodeFence) {
+      return true;
+    }
+    return hasHtmlLikeTag || (hasMultipleLines && hasProgrammingTokens);
+  }
+  /**
+   * Removes pasted website artifacts that can cause visual regressions in the editor,
+   * such as heading anchor tooltips and empty wrappers.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  normalizeImportedHtmlArtifacts(body) {
+    this.removeHeadingArtifacts(body);
+    this.removeEmptyBlocks(body);
+  }
+  /**
+   * Removes heading copy-link/tooltip artifacts copied from documentation pages.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeHeadingArtifacts(body) {
+    const selectors = [
+      'a.js-heading-link',
+      'a.c-heading-link',
+      '.js-tooltip-popover',
+      '.c-tooltip-popover',
+      '[role="tooltip"]',
+    ];
+    body.querySelectorAll(selectors.join(',')).forEach((element) => element.remove());
+  }
+  /**
+   * Removes empty block wrappers introduced by web copy/paste.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeEmptyBlocks(body) {
+    const blockSelectors = ['p', 'div', 'section', 'article'];
+    body.querySelectorAll(blockSelectors.join(',')).forEach((element) => {
+      if (this.isEmptyVisualBlock(element)) {
+        element.remove();
+      }
+    });
+  }
+  /**
+   * Checks whether a block is visually empty and safe to remove.
+   *
+   * @param {HTMLElement} element - Block element to inspect.
+   * @returns {boolean} True when the block has no visible content.
+   */
+  isEmptyVisualBlock(element) {
+    if (element.tagName === 'DIV' && element.classList.contains('doc')) {
+      return false;
+    }
+    const hasVisualChild = Boolean(element.querySelector('img,video,audio,iframe,canvas,svg,table,hr,pre,code,blockquote'));
+    if (hasVisualChild) {
+      return false;
+    }
+    return (element.textContent || '').trim() === '';
+  }
+  /**
+   * Checks whether a text/html payload is effectively plain text.
+   *
+   * Some sources (e.g. terminals, code editors) place the copied text inside an
+   * off-screen / visually hidden wrapper such as
+   * `<pre><div style="position: absolute; left: -9999px;">text</div></pre>`.
+   * Preserving that markup as rich content would render the pasted text
+   * off-screen (appearing empty), so such payloads are treated as plain text.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {boolean} True when the payload has no visible rich content.
+   */
+  shouldTreatAsPlainTextPayload(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations
+    // triggered by DOMParser processing HTML with style= attributes.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    if (body.children.length === 0) {
+      return true;
+    }
+    const visibleClone = body.cloneNode(true);
+    visibleClone.querySelectorAll('[style],[data-style]').forEach((element) => {
+      if (this.isVisuallyHiddenElement(element)) {
+        element.remove();
+      }
+    });
+    if ((visibleClone.textContent || '').trim() !== '') {
+      return false;
+    }
+    const hasVisibleMedia = Boolean(visibleClone.querySelector('img,video,audio,iframe,table,svg,canvas,math,object,embed'));
+    if (hasVisibleMedia) {
+      return false;
+    }
+    // If no visible text/media remains but original HTML contained text, it was
+    // likely wrapped in hidden/off-screen containers and should be treated as plain text.
+    return (body.textContent || '').trim() !== '';
+  }
+  /**
+   * Returns true when a CSS style string contains bold, italic, underline,
+   * strikethrough, or color declarations.
+   *
+   * @param {string} style - Inline CSS style string.
+   * @returns {boolean} True when the style contains rich formatting.
+   */
+  styleContainsRichFormatting(style) {
+    if (!style.trim()) {
+      return false;
+    }
+    for (const declaration of style.split(';')) {
+      const colonIndex = declaration.indexOf(':');
+      if (colonIndex === -1) {
+        continue;
+      }
+      const prop = declaration.slice(0, colonIndex).trim().toLowerCase();
+      const value = declaration
+        .slice(colonIndex + 1)
+        .trim()
+        .toLowerCase();
+      switch (prop) {
+        case 'font-weight':
+          if (/bold|[5-9]\d{2}|1000/.test(value)) {
+            return true;
+          }
+          break;
+        case 'font-style':
+          if (/italic|oblique/.test(value)) {
+            return true;
+          }
+          break;
+        case 'text-decoration':
+        case 'text-decoration-line':
+          if (/underline|line-through/.test(value)) {
+            return true;
+          }
+          break;
+        case 'color':
+        case 'background-color':
+          return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Determines whether an element is visually hidden or rendered off-screen
+   * via its inline style, indicating a clipboard plain-text wrapper.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} True when the element is hidden or off-screen.
+   */
+  isVisuallyHiddenElement(element) {
+    const style = (element.getAttribute('style') ||
+      element.getAttribute('data-style') ||
+      '').toLowerCase();
+    if (!style) {
+      return false;
+    }
+    if (/display\s*:\s*none/.test(style) || /visibility\s*:\s*hidden/.test(style)) {
+      return true;
+    }
+    if (/clip\s*:\s*rect\(\s*0/.test(style) || style.includes('clip-path')) {
+      return true;
+    }
+    const isPositioned = /position\s*:\s*(absolute|fixed)/.test(style);
+    const isOffScreen = /(left|top|right|bottom)\s*:\s*-\d{3,}px/.test(style);
+    return isPositioned && isOffScreen;
+  }
+  /**
+   * Resolves paste payload from DataTransfer and synthetic-event fallback payload.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEPastePayload} - Paste payload.
+   */
+  getPastePayload(event) {
+    const eventPayload = event
+      .rtePastePayload || { html: '', text: '' };
+    if (!event.dataTransfer) {
+      return eventPayload;
+    }
+    return {
+      html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
+      text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
+    };
+  }
 }
 
 var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -2503,7 +3070,8 @@ 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.
@@ -2534,9 +3102,13 @@ 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;
@@ -3491,7 +4063,7 @@ __decorate$c([
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
 const undoIcon = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 424c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-53-43-96-96-96l-334.1 0 95-95c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-4.5 4.5-7 10.6-7 17s2.5 12.5 7 17L143 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-95-95 334.1 0c26.5 0 48 21.5 48 48l0 96z"/></svg>`,
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M464 424c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-53-43-96-96-96l-334.1 0 95-95c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-4.5 4.5-7 10.6-7 17s2.5 12.5 7 17L143 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-95-95 334.1 0c26.5 0 48 21.5 48 48l0 96z"/></svg>`,
 };
 
 var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3528,7 +4100,7 @@ __decorate$b([
 ], UndoToolbarButtonSlimmer.prototype, "historyController", void 0);
 
 const redoIcon = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 424c0 13.3-10.7 24-24 24S0 437.3 0 424l0-96c0-53 43-96 96-96l334.1 0-95-95c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 239c4.5 4.5 7 10.6 7 17s-2.5 12.5-7 17L369 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l95-95-334.1 0c-26.5 0-48 21.5-48 48l0 96z"/></svg>`,
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M48 424c0 13.3-10.7 24-24 24S0 437.3 0 424l0-96c0-53 43-96 96-96l334.1 0-95-95c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 239c4.5 4.5 7 10.6 7 17s-2.5 12.5-7 17L369 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l95-95-334.1 0c-26.5 0-48 21.5-48 48l0 96z"/></svg>`,
 };
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -4533,13 +5105,14 @@ class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
       }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
         this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
-        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
+        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey(this.arrowIcon || 'chevron-down') }))),
       h("slot", null)));
   }
 }
 (() => {
   VegaInternalIconManager.register({
     'chevron-down': chevronDown,
+    'chevron-up': chevronUp,
   });
 })();
 __decorate$5([
@@ -4554,6 +5127,9 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "arrowIcon", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
@@ -4617,6 +5193,12 @@ const VegaRichTextEditorToolbarButton = class {
      * @vegaVersion 2.34.0
      */
     this.showArrowIcon = false;
+    /**
+     * Specifies the arrow icon name when `showArrowIcon` is enabled.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.arrowIcon = 'chevron-down';
     /**
      * Specifies whether the toolbar button in the rich text editor is represented by an icon.
      *