@globalpayments/vega 2.91.0 → 2.93.0

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

@@ -10,32 +10,34 @@ 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-2f3d0f38.js');
+const linkExtension = require('./link-extension-455c02b3.js');
+const typeGuard = require('./type-guard-1c3770d4.js');
 const internalIconManager = require('./internal-icon-manager-40bcac72.js');
-const imageAnnotationAction = require('./image-annotation-action-e4596726.js');
-const vegaEventId = require('./vega-event-id-df22d80e.js');
+const imageAnnotationAction = require('./image-annotation-action-c2b163bb.js');
+const vegaEventId = require('./vega-event-id-58afed7a.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 eventEmitSlimmer = require('./event-emit-slimmer-5bab10c2.js');
+const imageExtension = require('./image-extension-4e99b620.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-3bfcf88c.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-d234a619.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-18891389.js');
-const contentState = require('./content-state-a6105949.js');
+const contentState = require('./content-state-13daf87a.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-31d2c7aa.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-a80f5a6a.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-1085c71a.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-e67ee84c.js');
+const translationSlimmer = require('./translation-slimmer-7fb6e94c.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');
 const chevronDown = require('./chevron-down-9847bf78.js');
+const chevronUp = require('./chevron-up-21465cf7.js');
 const trashCan = require('./trash-can-46a5e19a.js');
 const ui = require('./ui-c91c37a7.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
@@ -44,7 +46,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-31f2b057.js');
 require('./icon-manager-be358b32.js');
 require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
 require('./dynamic-slimmer-f31fdfd7.js');
@@ -56,12 +58,12 @@ require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 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('./internal-vega-event-manager-13c4012b.js');
+require('./range-bf80fa40.js');
+require('./keyboard-manager-slimmer-d350c931.js');
+require('./keyboard-manager-c78b46bd.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');
@@ -1037,6 +1039,7 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
+      autoFocusOnClick: false,
     });
     this.insertURLImage = async () => {
       const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
@@ -1049,18 +1052,21 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
           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}
@@ -1082,15 +1088,33 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
     };
   }
   renderBtnWrapper(renderBtn) {
+    const shouldRenderDropdown = this.shouldRenderDropdown();
+    const shouldRenderUpload = this.isImageUploadEnabled();
+    const shouldRenderUrlInsertion = this.isImageURLInsertionEnabled();
+    if (!shouldRenderUpload && !shouldRenderUrlInsertion) {
+      return null;
+    }
     return (index.h("vega-box", null,
-      index.h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+      shouldRenderDropdown ? (index.h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
           this.dropdownRef = ref;
           this.addDropdownObserver(ref);
         } },
         renderBtn({ showArrowIcon: true }),
-        index.h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
-      this.renderUploadInput(),
-      this.renderInsertURLModal()));
+        index.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;
@@ -1103,10 +1127,20 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
       this.shouldDisabledToolbar(selectedBlock, codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
   renderDropdownContent() {
-    return (index.h(index.Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+    return (index.h(index.Fragment, null, this.getItems().map((item) => {
       return (index.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 (index.h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
   }
@@ -1139,6 +1173,18 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
   addModalInsertObserver(buttonRef) {
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, vegaEventId.VegaClick, this.insertURLImage);
   }
+  getImageExtensionConfig() {
+    return imageExtension.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}
@@ -1171,7 +1217,7 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarB
 (() => {
   internalIconManager.VegaInternalIconManager.register({ image: image });
 })();
-ImageToolbarButtonSlimmer.items = [
+ImageToolbarButtonSlimmer.allItems = [
   {
     key: 'upload',
     label: 'Upload from computer',
@@ -1897,7 +1943,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.
@@ -2258,7 +2304,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;
   }
 }
 
@@ -2276,48 +2322,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 +2448,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.
  *
@@ -2371,6 +2584,7 @@ class PasteContentAction extends codeBlock.ModifyContentAction {
   constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
     super();
     this.type = codeBlock.ModifyContentActionType.PASTE_CONTENT;
+    this.futureFocusAtEnd = false;
     this.blocksToBeInserted = blocksToBeInserted;
     this.startNode = startNode;
     this.startOffset = startOffset;
@@ -2388,18 +2602,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 codeBlock.RTETextNode) || currentRange.startNode;
+    if (!(cursorNode instanceof codeBlock.RTETextNode)) {
+      return false;
+    }
+    cursorNode.apply(new replaceSelectedTextAction.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 codeBlock.RTETextNode) ||
+      currentRange.startNode instanceof codeBlock.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 = contentState.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
@@ -2410,37 +2713,54 @@ class InsertPasteHandler extends BaseHandler {
     this.currentState.apply(new codeBlock.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.
@@ -2449,30 +2769,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 = contentState.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 contentState.ElementToDtoStrategyProcessor.process(htmlElements)
+    const resultBlocks = contentState.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 = contentState.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 codeBlock.RTETextBlock(misc.generateUUID(), 'paragraph');
+      const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, line, paragraph);
+      paragraph.apply(new codeBlock.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);
+      }
     }
   }
   /**
@@ -2482,16 +2848,217 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {string} - The formatted HTML string.
    */
   parsePlainText(content) {
+    if (this.shouldRenderAsCodeBlock(content)) {
+      return `<pre><code>${codeBlock.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>${codeBlock.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 = contentState.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) {
@@ -2507,7 +3074,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 +3106,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;
@@ -3495,7 +4067,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) {
@@ -3532,7 +4104,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) {
@@ -4537,13 +5109,14 @@ class VegaRichTextEditorToolbarButtonRenderer extends globalSlimmerRegistry.Vega
       }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       index.h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
         this.icon && (index.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) })),
-        this.showArrowIcon && (index.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down') }))),
+        this.showArrowIcon && (index.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey(this.arrowIcon || 'chevron-down') }))),
       index.h("slot", null)));
   }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
     'chevron-down': chevronDown.chevronDown,
+    'chevron-up': chevronUp.chevronUp,
   });
 })();
 __decorate$5([
@@ -4558,6 +5131,9 @@ __decorate$5([
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "arrowIcon", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
@@ -4621,6 +5197,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.
      *