@globalpayments/vega 2.101.0 → 2.103.0

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

@@ -4,35 +4,35 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-58ea899e.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-389d1548.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-77f7be9f.js');
 const component = require('./component-1e352960.js');
 const accessibility = require('./accessibility-6ca2a237.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-98d499d7.js');
 const staticSubjectTitle = require('./static-subject-title-70c73b16.js');
-const codeBlock = require('./code-block-c598832d.js');
-const typeGuard = require('./type-guard-00b8efc0.js');
-const linkExtension = require('./link-extension-f493e432.js');
-const internalIconManager = require('./internal-icon-manager-40bcac72.js');
-const imageAnnotationAction = require('./image-annotation-action-378838c2.js');
-const vegaEventId = require('./vega-event-id-987a170c.js');
+const codeBlock = require('./code-block-72de6c4d.js');
+const typeGuard = require('./type-guard-cce6fe1f.js');
+const linkExtension = require('./link-extension-1b4ed437.js');
+const internalIconManager = require('./internal-icon-manager-b9702049.js');
+const imageAnnotationAction = require('./image-annotation-action-1ee41bc7.js');
+const vegaEventId = require('./vega-event-id-b5abf7c9.js');
 const misc = require('./misc-3d30df91.js');
 const waitForComponentDidRender = require('./wait-for-component-did-render-90edbc1a.js');
-const imageExtension = require('./image-extension-673ebe7f.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-ac9337f4.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-67b5c186.js');
+const imageExtension = require('./image-extension-6a92c524.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-124d54ea.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-6bc675f6.js');
 const subStateNotifySlimmer = require('./sub-state-notify-slimmer-3b33e31c.js');
-const contentState = require('./content-state-da23e822.js');
+const contentState = require('./content-state-ff40bdc6.js');
 const alignLeft = require('./align-left-4a76df69.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-4bd47aa1.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-23d2b3d8.js');
 const observer = require('./observer-f49483e8.js');
 const timer = require('./timer-5f33058b.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-b454645a.js');
 const ui = require('./ui-c91c37a7.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-bb232741.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-d720d7e9.js');
-const translationSlimmer = require('./translation-slimmer-31cd5a57.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-1aa75d22.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-574a6a1a.js');
+const translationSlimmer = require('./translation-slimmer-1771d01f.js');
 const darkModeStyleController = require('./dark-mode-style-controller-ec04ece9.js');
 const autoRunWhenReRenderTaskQueueSlimmer_abstract = require('./auto-run-when-re-render-task-queue-slimmer.abstract-5734634d.js');
 const array = require('./array-249289f2.js');
@@ -44,14 +44,15 @@ const trashCan = require('./trash-can-46a5e19a.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 require('./string-39438062.js');
 require('./typography-3ea4fe41.js');
+require('./discriminated-3b8e72d5.js');
+require('./dynamic-slimmer-f31fdfd7.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
-require('./internal-translation-controller-27bfc8c7.js');
-require('./icon-manager-be358b32.js');
-require('./create-public-api-runtime-metrics-slimmer-91b0cbfb.js');
-require('./dynamic-slimmer-f31fdfd7.js');
-require('./index-5d1adcd1.js');
+require('./internal-translation-controller-0d67ca4d.js');
+require('./icon-manager-7d20b0ab.js');
 require('./try-get-document-c0ebd39a.js');
+require('./vega-nonce-manager-df69d3ed.js');
+require('./index-5d1adcd1.js');
 require('./page-resize-observer-slimmer-273d62ef.js');
 require('./breakpoints-1cc2c4c6.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
@@ -59,15 +60,14 @@ require('./form-field-key-8d5edf75.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./sub-state-observer-slimmer-5b68ba3f.js');
-require('./internal-vega-event-manager-976b9526.js');
-require('./range-9f42fb40.js');
-require('./keyboard-manager-slimmer-0a4e556d.js');
-require('./keyboard-manager-16e96b62.js');
+require('./internal-vega-event-manager-0c256d63.js');
+require('./range-712fe703.js');
+require('./keyboard-manager-slimmer-a2872981.js');
+require('./keyboard-manager-332eec89.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-c19d0b58.js');
 require('./index-3ca118c4.js');
 require('./tinycolor-polyfill-502efaa8.js');
-require('./vega-nonce-manager-df69d3ed.js');
 require('./synchronize-task-queue-1ee80e94.js');
 require('./number-4816603d.js');
 
@@ -504,7 +504,7 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
       selectedNodes.some((node) => {
         var _a;
         return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          this.shouldDisabledToolbar(node, codeBlock.BoldAnnotationAction.name);
+          this.shouldDisabledToolbar(node, codeBlock.BoldAnnotationAction.typeName);
       }));
   }
 }
@@ -552,7 +552,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbar
       selectedNodes.some((node) => {
         var _a;
         return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          this.shouldDisabledToolbar(node, codeBlock.ItalicAnnotationAction.name);
+          this.shouldDisabledToolbar(node, codeBlock.ItalicAnnotationAction.typeName);
       }));
   }
 }
@@ -603,7 +603,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTool
       selectedNodes.some((node) => {
         var _a;
         return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          this.shouldDisabledToolbar(node, codeBlock.UnderlineAnnotationAction.name);
+          this.shouldDisabledToolbar(node, codeBlock.UnderlineAnnotationAction.typeName);
       }));
   }
 }
@@ -677,7 +677,7 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.TextStyleAnnotationAction.name)));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.TextStyleAnnotationAction.typeName)));
   }
   addDropdownObserver(dropdownRef) {
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, vegaEventId.VegaDropdownClick, this.handleDropdownItemClick);
@@ -789,7 +789,7 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => this.shouldDisabledToolbar(node, codeBlock.ClearFormattingAnnotationAction.name)));
+      selectedNodes.some((node) => this.shouldDisabledToolbar(node, codeBlock.ClearFormattingAnnotationAction.typeName)));
   }
 }
 (() => {
@@ -837,7 +837,7 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
       selectedNodes.some((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
-        this.shouldDisabledToolbar(node, codeBlock.CodeAnnotationAction.name)));
+        this.shouldDisabledToolbar(node, codeBlock.CodeAnnotationAction.typeName)));
   }
 }
 (() => {
@@ -887,7 +887,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.VisualMode
       selectedNodes.some((node) => {
         var _a;
         return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          this.shouldDisabledToolbar(node, codeBlock.StrikethroughAnnotationAction.name);
+          this.shouldDisabledToolbar(node, codeBlock.StrikethroughAnnotationAction.typeName);
       }));
   }
 }
@@ -1067,7 +1067,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarBu
       selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return this.shouldDisabledToolbar(node, codeBlock.LinkAnnotationAction.name) ||
+        return this.shouldDisabledToolbar(node, codeBlock.LinkAnnotationAction.typeName) ||
           node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
           ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));
@@ -1129,7 +1129,7 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.name)));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.typeName)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
@@ -1171,7 +1171,7 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
   isDisabled() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.name)));
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.typeName)));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
@@ -2384,7 +2384,7 @@ class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.Visu
     return (super.isDisabled() ||
       this.selectionController
         .getSelectedBlocks()
-        .some((block) => this.shouldDisabledToolbar(block, codeBlock.HorizontalAlignmentAnnotationAction.name)));
+        .some((block) => this.shouldDisabledToolbar(block, codeBlock.HorizontalAlignmentAnnotationAction.typeName)));
   }
 }
 __decorate$n([
@@ -2465,7 +2465,17 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
     const flushChangesWithDebounce = timer.debounce(() => {
       void this.valueController.flushChanges(this.value);
     }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new observer.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    this.flushChangeObserver = new observer.Observer(this.isAcceptableFlushChange.bind(this), (payload) => {
+      // When a handler asks to bypass the debounce (direct user gestures like `beforeinput`),
+      // invoke `flushChanges` immediately with the payload as-is. Defaults live on the emitter
+      // side (`BaseHandler.flushOptions`) — the observer trusts the payload and does not
+      // re-apply fallback values, so there is a single source of truth.
+      if (payload && payload.bypassDebounce) {
+        void this.valueController.flushChanges(this.value, payload.recordHistory, payload.updateSource);
+        return;
+      }
+      flushChangesWithDebounce();
+    });
     changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
@@ -2626,12 +2636,44 @@ class RichTextContentController {
   }
 }
 
+/**
+ * Applies an ordered list of leaf content actions as one flushable unit, so a `beforeinput` handler
+ * emits a single flush through the shared action pipeline instead of marking each leaf action flushable.
+ */
+class SequentialCompositionAction extends codeBlock.ModifyContentAction {
+  constructor(steps, flushPayload = {}) {
+    super();
+    this.steps = steps;
+    this.isFlushable = true;
+    this.type = codeBlock.ModifyContentActionType.SEQUENTIAL_COMPOSITION;
+    this.flushPayload = flushPayload;
+  }
+}
+
 const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
 /** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
 class BaseHandler {
+  constructor() {
+    /**
+     * Default flush payload emitted after `handleEvent` completes. This is the single source of
+     * truth for the defaults — the observer does not re-apply any fallback values. Subclasses may override
+     * this field to opt out of flushing (assign `undefined`) or to change the defaults. Each instance
+     * owns its own copy so mutations from within `handleEvent` (e.g. `InsertTextHandler` updating
+     * `updateSource`) never leak across handler instances.
+     */
+    this.flushOptions = {
+      bypassDebounce: true,
+      recordHistory: true,
+      updateSource: codeBlock.RTEUpdateSource.Default,
+    };
+  }
   /**
    * The function `execute` initializes the current state and selection, and then handles an event if provided.
    *
+   * Contract: `handleEvent` MUST be synchronous. A handler that mutates the value returns the
+   * `CompositionStep[]` it applied through `applyComposition`; the flush is then routed through the
+   * shared action pipeline. Handlers that do not mutate the value return nothing
+   *
    * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
    * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
    * @param {HTMLElement} richTextEditor - The current rich text editor component
@@ -2640,7 +2682,20 @@ class BaseHandler {
   execute(currentState, selectionController, richTextEditor, event) {
     this.initCurrentStateAndSelection(currentState, selectionController);
     this.setCurrentRichTextEditor(richTextEditor);
-    this.handleEvent(event);
+    const steps = this.handleEvent(event);
+    this.applyComposition(steps);
+  }
+  /**
+   * Applies the collected leaf actions as a single flushable `SequentialCompositionAction`, so the value
+   * update and its flush run through the same action pipeline used by every other flushable operation.
+   * Handlers call this before enqueuing selection so caret math reads post-apply node state.
+   *
+   * @param {CompositionStep[]} steps - The ordered leaf actions to apply against their own targets.
+   */
+  applyComposition(steps) {
+    if (Array.isArray(steps)) {
+      this.currentState.apply(new SequentialCompositionAction(steps, this.flushOptions));
+    }
   }
   /**
    * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
@@ -2729,25 +2784,40 @@ class InsertTextHandler extends BaseHandler {
    * Update the state value when user type character
    *
    * @param {InputEvent} event - The input event object
+   * @returns {Nullable<CompositionStep[]>} The content actions the base handler applies as one flushable unit.
    */
   handleEvent(event) {
+    // The composition input controller stamps its synthesized `beforeinput` events with the
+    // composition update source; pick that up so the flush notification carries the right
+    // source without the caller having to inspect the event.
+    if (this.flushOptions) {
+      this.flushOptions.updateSource =
+        event[codeBlock.RTE_UPDATE_SOURCE_KEY] === codeBlock.RTEUpdateSource.Composition
+          ? codeBlock.RTEUpdateSource.Composition
+          : codeBlock.RTEUpdateSource.Default;
+    }
     const text = event.data;
     const currentRange = this.selectionController.getCurrentRange();
     const { startContainer, startOffset } = currentRange;
     const selectedNodes = this.selectionController.getSelectedNodes();
+    const steps = [];
+    // The caret move is appended as the final composition step so content + caret apply and flush atomically.
+    let caretNode = null;
+    let caretOffset = 0;
+    let updateFlag = false;
     if (selectedNodes.length < 2) {
       if (!selectedNodes.length && this.isRootContainer(startContainer)) {
-        const cursorNode = this.insertTextToRoot(text);
-        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
+        caretNode = this.insertTextToRoot(text, steps);
+        caretOffset = text.length;
       }
       else if (selectedNodes[0] instanceof codeBlock.RTETextNode) {
         if (selectedNodes[0].isContentEditable()) {
           let nextOffset = startOffset + text.length;
-          let updateFlag = false;
           let cursorNode = selectedNodes[0];
           if (cursorNode.text === '\n') {
-            cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
-            updateFlag = true;
+            cursorNode = this.insertTextToLineBreakNode(cursorNode, text, steps);
+            // UpdateTextAction replaces the \n with the input, so the caret lands at the text end.
+            nextOffset = text.length;
           }
           else {
             if (startContainer.nodeValue === codeBlock.ZERO_WIDTH_SPACE &&
@@ -2756,40 +2826,54 @@ class InsertTextHandler extends BaseHandler {
               startContainer.nodeValue = '';
               nextOffset = nextOffset - codeBlock.ZERO_WIDTH_SPACE.length;
             }
-            if (cursorNode instanceof codeBlock.RTETextNode) {
-              updateFlag = true;
-              cursorNode.apply(new imageExtension.ReplaceSelectedTextAction(text, currentRange));
-            }
+            steps.push({
+              target: cursorNode,
+              action: new imageExtension.ReplaceSelectedTextAction(text, currentRange),
+            });
           }
-          updateFlag &&
-            this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
+          caretNode = cursorNode;
+          // Content applies later via the composition, so use the post-apply offset directly (no pre-apply clamp).
+          caretOffset = nextOffset;
         }
         else {
-          selectedNodes[0].parent.apply(new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset));
+          steps.push({
+            target: selectedNodes[0].parent,
+            action: new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset),
+          });
         }
       }
     }
     else {
       // The selected nodes is multiple nodes
       const cursorNode = this.removeSelectionRange(true);
+      updateFlag = true;
       if (cursorNode instanceof codeBlock.RTETextNode) {
-        cursorNode.apply(new imageExtension.ReplaceSelectedTextAction(text, currentRange));
-        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
+        steps.push({ target: cursorNode, action: new imageExtension.ReplaceSelectedTextAction(text, currentRange) });
+        caretNode = cursorNode;
+        caretOffset = startOffset + text.length;
       }
     }
+    if (caretNode) {
+      steps.push({
+        target: this.currentState,
+        action: new contentState.UpdateCursorPositionAction(caretNode, caretOffset),
+      });
+    }
+    return updateFlag || steps.length > 0 ? steps : undefined;
   }
   /**
    * Insert the text in root element when root container is empty, should create text block and text node
    *
    * @param {string} text The insert text
-   * @returns {RTETextNode} The new create text node
+   * @param {CompositionStep[]} steps The composition steps collector to append the update action to
+   * @returns {Nullable<RTETextNode>} The new create text node
    */
-  insertTextToRoot(text) {
+  insertTextToRoot(text, steps) {
     if (this.currentState &&
       this.currentState.children[0] &&
       this.currentState.children[0] instanceof codeBlock.RTETextBlock) {
       const firstNode = this.currentState.children[0].children[0];
-      firstNode.apply(new codeBlock.UpdateTextAction(text));
+      steps.push({ target: firstNode, action: new codeBlock.UpdateTextAction(text) });
       return firstNode;
     }
   }
@@ -2798,20 +2882,24 @@ class InsertTextHandler extends BaseHandler {
    *
    * @param {RTETextNode} lineBreakNode The current line break node, the text value is \n
    * @param {string} text The text need to insert
+   * @param {CompositionStep[]} steps The composition steps collector to append the resulting action to
    * @returns {Nullable<RTETextNode>} The new text node or the current line break node
    */
-  insertTextToLineBreakNode(lineBreakNode, text) {
+  insertTextToLineBreakNode(lineBreakNode, text, steps) {
     const { startOffset, endOffset } = this.selectionController.getCurrentRange();
     const textBlock = lineBreakNode.parent;
     if (textBlock instanceof codeBlock.RTETextBlock) {
       const index = textBlock.children.indexOf(lineBreakNode);
       if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
         const newTextNode = lineBreakNode.cloneWithText(text);
-        textBlock.apply(new codeBlock.InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        steps.push({
+          target: textBlock,
+          action: new codeBlock.InsertChildrenBeforeAction(lineBreakNode, newTextNode),
+        });
         return newTextNode;
       }
       else {
-        lineBreakNode.apply(new codeBlock.UpdateTextAction(text));
+        steps.push({ target: lineBreakNode, action: new codeBlock.UpdateTextAction(text) });
         return lineBreakNode;
       }
     }
@@ -2822,20 +2910,19 @@ class InsertTextHandler extends BaseHandler {
 class InsertParagraphHandler extends BaseHandler {
   /**
    * Create new paragraph node and add node to state value
+   *
+   * @returns {CompositionStep[] | void} The content + caret steps applied atomically as one flushable composition.
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     if (selectedBlocks.length) {
-      if (selectedBlocks.length < 2) {
-        this.breakSingleBlock();
-      }
-      else {
-        this.breakMultipleBlocks();
-      }
+      return selectedBlocks.length < 2 ? this.breakSingleBlock() : this.breakMultipleBlocks();
     }
   }
   /**
    * Handles breaking blocks in an RTE editor based on the current selection and position.
+   *
+   * @returns {CompositionStep[]} The content + caret steps for the multi-block break.
    */
   breakMultipleBlocks() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
@@ -2873,36 +2960,71 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
-        firstBlock.apply(splitAction);
-        this.switchCaretPositionToNextElement(splitAction.newBlock);
-        return;
+        const mergeStep = {
+          target: firstBlock,
+          action: new contentState.MergeTwoBlocksNodesAction(lastBlock),
+        };
+        // Split offset is read at apply time, after the merge step has run.
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        const splitStep = () => ({
+          target: firstBlock,
+          action: new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length),
+        });
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        const caretStep = (context) => {
+          const splitAction = context.getAction(codeBlock.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE);
+          if (splitAction) {
+            return this.caretToNextElement(splitAction.newBlock);
+          }
+        };
+        return [mergeStep, splitStep, caretStep];
       }
     }
-    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+    return [
+      {
+        target: this.currentState,
+        action: new contentState.UpdateCursorPositionAction(cursorNode, range.startOffset),
+      },
+    ];
   }
   /**
    * Handles breaking a single block in an RTE editor based on the current selection and position.
+   *
+   * @returns {CompositionStep[]} The content + caret steps for the single-block break.
    */
   breakSingleBlock() {
     const cursorNode = this.removeSelectionRange();
     const currentBlock = cursorNode instanceof codeBlock.RTENode ? cursorNode.parent : cursorNode;
     const { startOffset } = this.selectionController.getCurrentRange();
+    let result = [];
     if (currentBlock) {
-      const breakAction = new contentState.InsertNewParagraphAction(cursorNode, startOffset);
-      currentBlock.apply(breakAction);
-      this.switchCaretPositionToNextElement(breakAction.newBlock);
+      const breakStep = {
+        target: currentBlock,
+        action: new contentState.InsertNewParagraphAction(cursorNode, startOffset),
+      };
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const caretStep = (context) => {
+        const breakAction = context.getAction(codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH);
+        if (breakAction) {
+          return this.caretToNextElement(breakAction.newBlock);
+        }
+      };
+      result = [breakStep, caretStep];
     }
+    return result;
   }
   /**
-   * Moves the caret to the next block element in a rich text editor.
+   * Builds the caret operation that moves onto the first child of the newly created block.
    *
-   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   * @param {Nullable<RTEBlock>} newBlock - The block created by the break, or null when none was created.
+   * @returns {CompositionOperation | void} The caret operation, or nothing when there is no target block.
    */
-  switchCaretPositionToNextElement(newBlock) {
+  caretToNextElement(newBlock) {
     if (newBlock && newBlock.children) {
-      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      return {
+        target: this.currentState,
+        action: new contentState.UpdateCursorPositionAction(newBlock.children[0], 0),
+      };
     }
   }
 }
@@ -2938,20 +3060,16 @@ class lineBreakMultipleBlocksAction extends codeBlock.ModifyContentAction {
 class InsertLineBreakHandler extends BaseHandler {
   /**
    * Create new line break node and add node to state value
+   *
+   * @returns {Nullable<CompositionStep[]>} The content + caret steps applied atomically as one flushable composition.
    */
   handleEvent() {
-    const range = this.selectionController.getCurrentRange();
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (this.isRootContainer(range.startContainer)) {
-      this.breakNewBlock();
-    }
     if (selectedBlocks.length) {
-      if (selectedBlocks.length < 2) {
-        this.breakSingleBlock();
-      }
-      else {
-        this.breakMultipleBlocks();
-      }
+      return selectedBlocks.length < 2 ? this.breakSingleBlock() : this.breakMultipleBlocks();
+    }
+    else if (this.isRootContainer(this.selectionController.getCurrentRange().startContainer)) {
+      return this.breakNewBlock();
     }
   }
   /**
@@ -2960,14 +3078,19 @@ class InsertLineBreakHandler extends BaseHandler {
    *  <span></span>
    *  <span></span>
    * </p>
+   *
+   * @returns {Nullable<CompositionStep[]>} The content + caret steps for the empty root break.
    */
   breakNewBlock() {
     if (this.currentState &&
       this.currentState.children[0] &&
       this.currentState.children[0] instanceof codeBlock.RTETextBlock) {
-      const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.children[0].children[0], 0);
-      this.currentState.children[0].apply(lineBreakAction);
-      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+      const targetBlock = this.currentState.children[0];
+      const lineBreakStep = {
+        target: targetBlock,
+        action: new LineBreakSingleBlockAction(targetBlock.children[0], 0),
+      };
+      return [lineBreakStep, this.caretToSingleBlockNextNode()];
     }
   }
   /**
@@ -2981,36 +3104,68 @@ class InsertLineBreakHandler extends BaseHandler {
    *  <br>
    *  <span>xt</span>
    * </p>
+   *
+   * @returns {CompositionStep[]} The content + caret steps for the single-block break.
    */
   breakSingleBlock() {
     const range = this.selectionController.getCurrentRange();
     const cursorNode = this.removeSelectionRange();
     const currentBlock = cursorNode.parent;
+    let result = [];
     if (currentBlock) {
-      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
-      currentBlock.apply(lineBreakAction);
-      if (lineBreakAction.lineBreakNode) {
-        this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
-      }
+      const contentStep = {
+        target: currentBlock,
+        action: new LineBreakSingleBlockAction(cursorNode, range.startOffset),
+      };
+      result = [contentStep, this.caretToSingleBlockNextNode()];
     }
+    return result;
   }
   /**
    * Handles breaking blocks in an RTE editor based on the current selection and position.
+   *
+   * @returns {CompositionStep[]} The content + caret steps for the multi-block break.
    */
   breakMultipleBlocks() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const cursorNode = this.removeSelectionRange();
-    const lineBreakAction = new lineBreakMultipleBlocksAction(selectedBlocks);
-    cursorNode.parent.apply(lineBreakAction);
-    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    const contentStep = {
+      target: cursorNode.parent,
+      action: new lineBreakMultipleBlocksAction(selectedBlocks),
+    };
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const caretStep = (context) => {
+      const lineBreakAction = context.getAction(codeBlock.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS);
+      if (lineBreakAction && lineBreakAction.lineBreakNode) {
+        return this.caretOperationToNextNode(lineBreakAction.lineBreakNode);
+      }
+    };
+    return [contentStep, caretStep];
+  }
+  /**
+   * Builds the caret step that reads the applied single-block line break to place the caret after it.
+   *
+   * @returns {CompositionStep} The dependent caret step.
+   */
+  caretToSingleBlockNextNode() {
+    return (context) => {
+      const lineBreakAction = context.getAction(codeBlock.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK);
+      if (lineBreakAction && lineBreakAction.lineBreakNode) {
+        return this.caretOperationToNextNode(lineBreakAction.lineBreakNode);
+      }
+    };
   }
   /**
-   * Moves the caret to the next node element in a rich text editor.
+   * Builds the caret operation that moves onto the node following the inserted line break.
    *
-   * @param {RTENode} lineBreakNode - Represents a node element in a rich text editor.
+   * @param {RTENode} lineBreakNode - The inserted line break node.
+   * @returns {CompositionOperation} The caret operation.
    */
-  switchCaretPositionToSpecifiedNode(lineBreakNode) {
-    this.selectionController.enqueueSelectionRangeFutureState(this.getNextRTENode(lineBreakNode), 0);
+  caretOperationToNextNode(lineBreakNode) {
+    return {
+      target: this.currentState,
+      action: new contentState.UpdateCursorPositionAction(this.getNextRTENode(lineBreakNode), 0),
+    };
   }
   /**
    * Returns the next sibling node of a given block element in a rich text editor.
@@ -3047,15 +3202,76 @@ class DeleteBlockContentAction extends codeBlock.ModifyContentAction {
 class AbstractDeleteContentHandler extends BaseHandler {
   /**
    * Delete the selected node(s) from the current state.
+   *
+   * @returns {CompositionStep[]} The content + caret steps applied atomically as one flushable composition.
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     if (selectedBlocks.length >= 2) {
       this.deleteContentWithMultipleNodes();
+      return [];
     }
-    else {
-      this.deleteContentWithSingleBlock();
-    }
+    return this.deleteContentWithSingleBlock();
+  }
+  /**
+   * Builds the ordered steps for a single-block deletion: the delete runs first, then a caret step
+   * reads the delete action's post-apply `previousNode`/`nextNode` to decide where the caret lands.
+   *
+   * @param {RTENode} resolvedNode - The node the deletion is anchored on.
+   * @param {number} resolvedOffset - The caret offset within `resolvedNode` at deletion time.
+   * @param {Nullable<RTENode>} caretAnchor - A node the caret must stay on regardless of the delete result.
+   * @returns {CompositionStep[]} The delete step followed by the dependent caret step.
+   */
+  buildDeleteSteps(resolvedNode, resolvedOffset, caretAnchor) {
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const deleteStep = () => ({
+      target: resolvedNode.parent,
+      action: new DeleteBlockContentAction(resolvedNode, resolvedOffset),
+    });
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const caretStep = (context) => {
+      if (caretAnchor) {
+        // A non-editable anchor (e.g. a token) expresses its caret position at the parent-block
+        // level, so use its index within the parent to land right before it instead of jumping
+        // to the block start.
+        const caretOffset = caretAnchor.isContentEditable()
+          ? 0
+          : caretAnchor.parent.children.indexOf(caretAnchor);
+        return {
+          target: this.currentState,
+          action: new contentState.UpdateCursorPositionAction(caretAnchor, caretOffset),
+        };
+      }
+      const deleteAction = context.getAction(codeBlock.ModifyContentActionType.DELETE_BLOCK_CONTENT);
+      if (deleteAction && deleteAction.previousNode) {
+        const nextOffset = deleteAction.previousNode === resolvedNode
+          ? Math.max(0, resolvedOffset - 1)
+          : deleteAction.previousNode.getRangeEndOffset();
+        return {
+          target: this.currentState,
+          action: new contentState.UpdateCursorPositionAction(deleteAction.previousNode, nextOffset),
+        };
+      }
+      if (deleteAction && deleteAction.nextNode) {
+        return {
+          target: this.currentState,
+          action: new contentState.UpdateCursorPositionAction(deleteAction.nextNode, 0),
+        };
+      }
+      if (this.currentState.children.length === 0) {
+        // Add an empty paragraph if the delete removed all content to keep a valid caret position.
+        const paragraph = this.createEmptyParagraph();
+        return [
+          { target: this.currentState, action: new codeBlock.AppendChildrenAction([paragraph]) },
+          {
+            target: this.currentState,
+            action: new contentState.UpdateCursorPositionAction(paragraph.children[0], 1),
+          },
+        ];
+      }
+      return undefined;
+    };
+    return [deleteStep, caretStep];
   }
   /**
    * Computes the caret position one step to the right, used to translate a forward delete into a backspace.
@@ -3184,27 +3400,21 @@ class AbstractDeleteContentHandler extends BaseHandler {
       block.parent.apply(new codeBlock.RemoveChildrenAction(block));
     }
   }
-  /**
-   * Creates a new paragraph element with a text node and appends it to the current state.
-   */
-  insertDefaultParagraph() {
-    const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new codeBlock.AppendChildrenAction([paragraph]));
-    this.selectionController.enqueueSelectionRangeFutureState(paragraph.children[0], 1);
-  }
 }
 
 /** 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.
+   *
+   * @returns {Nullable<CompositionStep[]>} The delete + caret steps, empty when the deletion is delegated or a no-op.
    */
   deleteContentWithSingleBlock() {
     const range = this.selectionController.getCurrentRange();
     const { startOffset, endOffset, startContainer, endContainer } = range;
     if (startOffset !== endOffset || startContainer !== endContainer) {
       this.deleteContentWithMultipleNodes();
-      return;
+      return [];
     }
     const targetNode = this.selectionController.getSelectedNodes()[0];
     // The node that should hold the caret after a forward delete removes a non-editable
@@ -3228,7 +3438,8 @@ class ForwardDeleteContentHandler extends AbstractDeleteContentHandler {
       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;
+        // Nothing changes, so we return undefined to indicate no composition steps are needed.
+        return undefined;
       }
       // 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
@@ -3239,8 +3450,11 @@ class ForwardDeleteContentHandler extends AbstractDeleteContentHandler {
       if (targetNode &&
         forwardPosition.node.parent !== targetNode.parent &&
         forwardPosition.node.parent.type !== targetNode.parent.type) {
-        this.selectionController.enqueueSelectionRangeFutureState(forwardPosition.node, 0);
-        return;
+        const caretOperation = {
+          target: this.currentState,
+          action: new contentState.UpdateCursorPositionAction(forwardPosition.node, 0),
+        };
+        return [caretOperation];
       }
       // 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
@@ -3255,34 +3469,9 @@ class ForwardDeleteContentHandler extends AbstractDeleteContentHandler {
     }
     /* 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();
+      return [];
     }
+    return this.buildDeleteSteps(resolvedNode, resolvedOffset, forwardCaretAnchor);
   }
 }
 
@@ -3290,33 +3479,21 @@ class ForwardDeleteContentHandler extends AbstractDeleteContentHandler {
 class BackwardDeleteContentHandler extends AbstractDeleteContentHandler {
   /**
    * Handles a backspace (leftward) deletion of content within a single block in an RTE editor.
+   *
+   * @returns {Nullable<CompositionStep[]>} The delete + caret steps, empty when the deletion is delegated or a no-op.
    */
   deleteContentWithSingleBlock() {
     const range = this.selectionController.getCurrentRange();
     const { startOffset, endOffset, startContainer, endContainer } = range;
     if (startOffset !== endOffset || startContainer !== endContainer) {
       this.deleteContentWithMultipleNodes();
-      return;
+      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();
-    }
+    return this.buildDeleteSteps(targetNode, startOffset, null);
   }
 }
 
@@ -3346,53 +3523,57 @@ class InsertPasteHandler extends BaseHandler {
    * Update the state value when user paste html elements.
    *
    * @param {InputEvent} event - Paste event.
+   * @returns {CompositionStep[]} The content + caret steps applied atomically as one flushable composition.
    */
   handleEvent(event) {
     const currentRange = this.selectionController.getCurrentRange();
     const payload = this.getPastePayload(event);
-    if (this.insertPlainTextInline(payload, currentRange)) {
-      return;
+    const inlineSteps = this.insertPlainTextInline(payload, currentRange);
+    if (inlineSteps) {
+      return inlineSteps;
     }
-    const blocks = this.parsePastedElements(event);
+    const blocks = this.parsePastedElements(event, currentRange);
     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);
+      return this.insertBlocksToRoot(blocks);
     }
-    else if (this.isRootContainer(startContainer)) {
-      this.insertBlocksToRoot(blocks);
+    if (this.isRootContainer(startContainer)) {
       // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
+      return this.insertBlocksToRoot(blocks);
     }
-    else if (this.isEmptyParagraph(startContainer)) {
-      this.insertBlocksBeforeEmptyBlock(blocks, currentRange);
-    }
-    else {
-      this.insertBlocksToContent(blocks, currentRange);
+    if (this.isEmptyParagraph(startContainer)) {
+      return this.insertBlocksBeforeEmptyBlock(blocks, currentRange);
     }
+    return 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.
+   * @returns {CompositionStep[] | undefined} The content + caret steps when inline insertion applies, otherwise undefined.
    */
   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;
+      return undefined;
     }
     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;
+      return undefined;
     }
-    cursorNode.apply(new imageExtension.ReplaceSelectedTextAction(text, currentRange));
-    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, currentRange.startOffset + text.length);
-    return true;
+    return [
+      { target: cursorNode, action: new imageExtension.ReplaceSelectedTextAction(text, currentRange) },
+      {
+        target: this.currentState,
+        action: new contentState.UpdateCursorPositionAction(cursorNode, currentRange.startOffset + text.length),
+      },
+    ];
   }
   /**
    * Determines whether the payload should be inserted as inline plain text.
@@ -3457,68 +3638,116 @@ class InsertPasteHandler extends BaseHandler {
    * Insert the blocks to root
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @returns {CompositionStep[]} The append step for the root.
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new codeBlock.AppendChildrenAction(blocks));
+    return [{ target: this.currentState, action: new codeBlock.AppendChildrenAction(blocks) }];
   }
   /**
    * Insert the blocks into the current content block at the specified range.
    *
    * @param { RTEContentBlock[]} blocks - blocks
    * @param { RTERange } rteRange - rteRange
+   * @returns {CompositionStep[]} The content + caret steps for the content branch.
    */
   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 pasteAction = new PasteContentAction(blocks, cursorNode, rteRange.startOffset, rteRange);
-      cursorNode.parent.apply(pasteAction);
-      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);
+      const contentStep = {
+        target: cursorNode.parent,
+        action: new PasteContentAction(blocks, cursorNode, rteRange.startOffset, rteRange),
+      };
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const caretStep = (context) => {
+        var _a;
+        const pasteAction = context.getAction(codeBlock.ModifyContentActionType.PASTE_CONTENT);
+        if (pasteAction && pasteAction.futureFocusNode) {
+          return {
+            target: this.currentState,
+            action: new contentState.UpdateCursorPositionAction(pasteAction.futureFocusNode, (_a = pasteAction.futureFocusNodeOffset) !== null && _a !== void 0 ? _a : 0),
+          };
+        }
+        if (pasteAction && pasteAction.futureFocusBlock) {
+          return this.caretToBlockOperation(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
+        }
+      };
+      return [contentStep, caretStep];
     }
+    // No resolvable cursor position: fall back to appending at the root so
+    // the pasted content is preserved instead of being discarded.
+    return this.insertBlocksToRoot(blocks);
   }
   /**
    * Insert the blocks before to current block
    *
    * @param { RTEContentBlock[]} blocks - blocks
    * @param { RTERange } rteRange - rteRange
+   * @returns {CompositionStep[]} The content + caret steps for the empty-paragraph branch.
    */
   insertBlocksBeforeEmptyBlock(blocks, rteRange) {
     const cursorNode = this.removeSelectionRange();
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      const pasteAction = new PasteContentAction(blocks, cursorNode, 0, rteRange);
-      currentBlock.apply(pasteAction);
-      if (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);
+      const contentStep = {
+        target: currentBlock,
+        action: new PasteContentAction(blocks, cursorNode, 0, rteRange),
+      };
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const caretStep = (context) => {
+        const pasteAction = context.getAction(codeBlock.ModifyContentActionType.PASTE_CONTENT);
+        if (pasteAction && pasteAction.futureFocusBlock) {
+          return this.caretToBlockOperation(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
+        }
+      };
+      return [contentStep, caretStep];
     }
+    // No resolvable empty block: fall back to appending at the root so the
+    // pasted content is preserved instead of being discarded.
+    return this.insertBlocksToRoot(blocks);
   }
   /**
    * Format and parse elements from user paste with simple style preservation.
    *
    * @param {InputEvent} event - Paste event.
+   * @param {RTERange} [currentRange] - Optional range used to resolve the paste location.
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
-  parsePastedElements(event) {
+  parsePastedElements(event, currentRange) {
+    var _a;
     const payload = this.getPastePayload(event);
+    if (payload.type === codeBlock.RTE_PASTE_MODE_PLAIN) {
+      // Native tables encode their layout as tab-separated cells (one row per line) in
+      // text/plain, so pasting that verbatim keeps the rows/columns. Non-native tables (rich text
+      // editor tables) put a blank line between cells in text/plain, so they derive from HTML
+      // instead: htmlToPlainText puts each cell on its own line with no gaps while keeping in-cell breaks.
+      let plainText;
+      let hasEncodedWhitespace = (_a = payload.hasEncodedWhitespace) !== null && _a !== void 0 ? _a : false;
+      if (payload.html &&
+        payload.text &&
+        payload.text.includes('\t') &&
+        imageExtension.htmlContainsTable(payload.html)) {
+        plainText = payload.text;
+      }
+      else if (payload.html && imageExtension.htmlContainsTable(payload.html)) {
+        plainText = this.extractPlainTextFromHtml(payload.html, true);
+        hasEncodedWhitespace = true;
+      }
+      else {
+        plainText = '';
+        if (payload.text) {
+          plainText = payload.text;
+        }
+        else if (payload.html) {
+          plainText = this.extractPlainTextFromHtml(payload.html, true);
+          hasEncodedWhitespace = true;
+        }
+      }
+      const styleSource = (currentRange === null || currentRange === void 0 ? void 0 : currentRange.startNode) instanceof codeBlock.RTETextNode ? currentRange.startNode : undefined;
+      return this.buildPlainTextParagraph(plainText, styleSource, hasEncodedWhitespace);
+    }
     let pastedHTML = payload.html || '';
     if (!pastedHTML) {
       pastedHTML = this.parsePlainText(payload.text || '');
@@ -3556,16 +3785,21 @@ class InsertPasteHandler extends BaseHandler {
     return resultBlocks;
   }
   /**
-   * Extracts readable plain text from clipboard HTML.
+   * Extracts plain text from HTML when clipboard lacks `text/plain`.
    *
    * @param {string} html - Clipboard text/html payload.
+   * @param {boolean} keepPreservedWhitespaceMarkers - Keep code-block indentation as sentinels so
+   * the plain-mode boundary collapse in `toPlainPasteLines` does not strip it (that helper decodes
+   * the sentinels). Must stay `false` for the rich path, which feeds `parsePlainText` directly.
    * @returns {string} - Plain text extracted from HTML.
    */
-  extractPlainTextFromHtml(html) {
+  extractPlainTextFromHtml(html, keepPreservedWhitespaceMarkers = false) {
     // 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');
+    return imageExtension.htmlToPlainText(safeHtml, {
+      preserveBoundaryBlankLines: true,
+      keepPreservedWhitespaceMarkers,
+    });
   }
   /**
    * Builds plain-text paragraph blocks when element strategy parsing returns no output.
@@ -3574,7 +3808,7 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} Fallback text blocks.
    */
   buildPlainTextFallbackBlocks(text) {
-    return text.split('\n').map((line) => {
+    return codeBlock.normalizePlainTextLines(text).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]));
@@ -3582,21 +3816,66 @@ class InsertPasteHandler extends BaseHandler {
     });
   }
   /**
-   * Moves the caret to a block element in a rich text editor after paste.
+   * Builds plain-text paragraphs by splitting on `\n`.
+   *
+   * Shares `toPlainPasteLines` with `PlainPasteProcessingStrategy` so both
+   * representations of plain-mode content (HTML and RTE nodes) agree on line
+   * boundaries and boundary whitespace.
+   *
+   * @param {string} text - Plain text clipboard content.
+   * @param {RTETextNode} [styleSource] - Optional style to preserve in all nodes.
+   * @param {boolean} decodeEncodedWhitespace - Decode HTML-derived whitespace markers.
+   * @returns {RTEContentBlock[]} Paragraph-per-line blocks.
+   */
+  buildPlainTextParagraph(text, styleSource, decodeEncodedWhitespace = false) {
+    const lines = codeBlock.toPlainPasteLines(text, decodeEncodedWhitespace);
+    return lines.map((line, lineIndex) => {
+      const paragraph = new codeBlock.RTETextBlock(misc.generateUUID(), 'paragraph');
+      // Always attach a text node (empty for blank lines) so empty paragraphs
+      // render with a zero-width space and keep their visible line height,
+      // instead of collapsing to an invisible zero-height `<p></p>`.
+      const node = this.createPlainTextNode(paragraph, lineIndex, line, styleSource);
+      paragraph.apply(new codeBlock.AppendChildrenAction([node]));
+      return paragraph;
+    });
+  }
+  /**
+   * Creates a text node for plain paste; optionally inherits style from source node.
+   *
+   * @param {RTETextBlock} paragraph - Parent paragraph.
+   * @param {number} index - Character index for node ID generation.
+   * @param {string} text - Text content.
+   * @param {RTETextNode} [styleSource] - Optional style to inherit.
+   * @returns {RTETextNode} Created text node.
+   */
+  createPlainTextNode(paragraph, index, text, styleSource) {
+    const node = styleSource
+      ? styleSource.cloneWithText(text)
+      : new codeBlock.RTETextNode(`${paragraph.id}-${index}`, text, paragraph);
+    node.parent = paragraph;
+    return node;
+  }
+  /**
+   * Builds the caret operation that moves onto 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.
+   * @returns {CompositionOperation | void} The caret operation, or nothing when the block has no children.
    */
-  switchCaretPositionToNextElement(newBlock, atEnd = false) {
+  caretToBlockOperation(newBlock, atEnd = false) {
     var _a, _b;
     if (newBlock && newBlock.children) {
       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);
+        return {
+          target: this.currentState,
+          action: new contentState.UpdateCursorPositionAction(lastNode, (_b = (_a = lastNode.text) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0),
+        };
       }
+      return {
+        target: this.currentState,
+        action: new contentState.UpdateCursorPositionAction(newBlock.children[0], 0),
+      };
     }
   }
   /**
@@ -3816,6 +4095,7 @@ class InsertPasteHandler extends BaseHandler {
       html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
       text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
       type: event.dataTransfer.getData(codeBlock.RTE_PASTE_MODE_DATA_TYPE) || '',
+      hasEncodedWhitespace: event.dataTransfer.getData(codeBlock.RTE_PRESERVED_WHITESPACE_DATA_TYPE) === 'true',
     };
   }
 }
@@ -4140,6 +4420,8 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
     };
     /**
      * When a user performs an input action within the editable element, this function is triggered.
+     * Each handler owns its own `flushOptions` on `BaseHandler`, so the value update flows through
+     * the shared flush-changes action pipeline without this method having to construct or forward it.
      *
      * @param {InputEvent} e the before input event object
      */
@@ -4153,41 +4435,26 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
         return;
       }
       this.insertCompositionTextController.removeObserver();
-      let updateFlag = false;
-      let updateSource = codeBlock.RTEUpdateSource.Default;
       switch (inputType) {
         case 'insertParagraph':
-          updateFlag = true;
           this.insertParagraphHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertText':
-          updateFlag = true;
-          updateSource =
-            e[codeBlock.RTE_UPDATE_SOURCE_KEY] === codeBlock.RTEUpdateSource.Composition
-              ? codeBlock.RTEUpdateSource.Composition
-              : codeBlock.RTEUpdateSource.Default;
           this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertLineBreak':
-          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.backwardDeleteContentHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertFromPaste':
-          updateFlag = true;
           this.insertPasteHandler.execute(this.value, this.selectionController, this.host, e);
           break;
       }
-      if (updateFlag) {
-        void this.valueController.flushChanges(this.value, true, updateSource);
-      }
     };
   }
   /**
@@ -4432,11 +4699,18 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      const lastNode = lastBlock.getLastNode();
-      const dom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(lastNode);
+      await this.doFocusOnTextNode(lastBlock.getLastNode());
+    };
+    /**
+     * Do a focus on the provided text node.
+     *
+     * @param {RTENode} node - The node to focus.
+     */
+    this.doFocusOnTextNode = async (node) => {
+      const dom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(node);
       if (dom) {
-        if (!lastNode.isContentEditable()) {
-          this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+        if (!node.isContentEditable()) {
+          this.setCaretRangeToNodeEnd(dom.parentElement, node.getRangeEndOffset());
         }
         else {
           this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
@@ -4468,6 +4742,21 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
       await this.doFocusOnLastTextNode(lastBlock);
     }
   }
+  /**
+   * Restore focus to the current selection target without changing the document structure.
+   *
+   * @returns {Promise<void>} - A promise that resolves when the focus is set.
+   */
+  async focusOnCurrentTextNode() {
+    const currentRange = this.selectionController.getCurrentRange();
+    if (currentRange.endNode) {
+      await this.doFocusOnTextNode(currentRange.endNode);
+      return;
+    }
+    if (currentRange.startNode) {
+      await this.doFocusOnTextNode(currentRange.startNode);
+    }
+  }
   /**
    * Move the caret to the end of the node
    *
@@ -5305,6 +5594,9 @@ class SourceEditToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     // the source-edit button can be re-activated from the keyboard without
     // the selection being reset out from under the user.
     this.sourceView = !isSelected;
+    if (!this.sourceView) {
+      void this.focusController.focusOnCurrentTextNode();
+    }
   }
   // VD-8789 (keyboard a11y): the default `preventLostFocus` calls
   // `e.preventDefault()` on mousedown so the button never receives focus and
@@ -5931,7 +6223,7 @@ const VegaRichTextEditor = class {
     this.imageInserted = index.createEvent(this, "imageInserted", 7);
     this.vegaSourceCodeChange = index.createEvent(this, "vegaSourceCodeChange", 7);
     this.sourceCodeChange = index.createEvent(this, "sourceCodeChange", 7);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.ariaAttributesValueMapper = new ariaAttributesValueMapper.AriaAttributesValueMapper(() => this.vegaRichTextEditorRenderer.getRTEEditableElementRef(), {
       'aria-label': {
         dependency: ['data-aria-label', 'label'],
@@ -6403,7 +6695,7 @@ const VegaRichTextEditorToolbarButton = class {
     index.registerInstance(this, hostRef);
     this.vegaClick = index.createEvent(this, "vegaClick", 7);
     this.click = index.createEvent(this, "click", 7);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditorToolbarButton, vegaEventId.VegaClick);
     this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaClick], () => this.host, {
@@ -6641,7 +6933,7 @@ const VegaRichTextImageEditor = class {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
     this.change = index.createEvent(this, "change", 7);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextImageEditorRenderer();
@@ -6707,6 +6999,10 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
             this.linkEditorController.handleEditAction();
             return;
           }
+          case 'bookmark': {
+            void this.linkEditorController.handleBookmarkNavigation();
+            return;
+          }
           case 'unlink': {
             void this.linkEditorController.handleUnlinkAction();
           }
@@ -6735,6 +7031,22 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
     this.handleUrlVegaChange = (e) => {
       this.linkEditorController.handleUrlVegaChange(e);
     };
+    this.handleBookmarkVegaChange = (e) => {
+      void this.linkEditorController.handleBookmarkVegaChange(e);
+    };
+    // Opening the Bookmark dropdown blurs the URL input; suppress its auto-validation while the
+    // dropdown is open so the error box cannot appear, shift layout, and cancel the first item click.
+    this.handleBookmarkInputSelectRef = (ref) => {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaShow, () => {
+        this.setUrlAutoValidation(false);
+      });
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaHide, () => {
+        this.setUrlAutoValidation(true);
+      });
+    };
+    this.handleBookmarkMouseDown = (e) => {
+      e.preventDefault();
+    };
     this.handleLinkTypeSelectRef = (ref) => {
       domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaEventId.VegaChange, (payload) => {
         void this.linkEditorController.handleLinkTypeChange(payload);
@@ -6775,11 +7087,23 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
         this.renderLinkEditContent())));
   }
   renderLinkUnlinkContent() {
+    var _a;
+    const bookmarkName = this.linkTypeConfigController.getBookmarkNameForUrl((_a = this.record) === null || _a === void 0 ? void 0 : _a.url);
     return (index.h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
       index.h("vega-button-group", { size: "small", variant: "tertiary", ref: this.handleButtonGroupRef, onKeyDown: this.handleLinkFieldKeyDown },
+        bookmarkName && (index.h("vega-button-group-item", { label: this.getBookmarkLabel(bookmarkName), icon: internalIconManager.VegaInternalIconManager.getIconKey('rte-bookmark'), itemKey: "bookmark" })),
         index.h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
         index.h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
   }
+  getBookmarkLabel(bookmarkName) {
+    const characters = Array.from(bookmarkName);
+    if (characters.length <= VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH) {
+      return bookmarkName;
+    }
+    return `${characters
+      .slice(0, VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH - 3)
+      .join('')}...`;
+  }
   renderLinkEditContent() {
     return (index.h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
       index.h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
@@ -6809,9 +7133,22 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
     ];
   }
   renderUrlLinkEditFields() {
-    return [
+    const fields = [
       index.h("vega-input", { key: "url", "data-vega-form": "url", ref: this.handleUrlInputRef, size: "small", label: this.translationSlimmer.t('URL'), required: this.linkTypeConfigController.hasConfiguredLinkTypes(), onVegaChange: this.handleUrlVegaChange, onKeyDown: this.handleLinkFieldKeyDown }),
     ];
+    if (this.linkTypeConfigController.isBookmarkEnabled()) {
+      fields.push(this.renderBookmarkUrlSuggestions());
+    }
+    return fields;
+  }
+  renderBookmarkUrlSuggestions() {
+    const bookmarkNames = this.linkTypeConfigController.getBookmarkNames();
+    const hasBookmarks = bookmarkNames.length > 0;
+    return (index.h("vega-accordion", { expand: false, drawsBackground: false, onMouseDown: this.handleBookmarkMouseDown },
+      index.h("div", { slot: "title" }, this.translationSlimmer.t('Bookmark')),
+      index.h("vega-input-select", { slot: "content", style: { marginTop: '-16px' }, "data-vega-form": "bookmark", ref: this.handleBookmarkInputSelectRef, size: "small", placeholder: hasBookmarks
+          ? this.translationSlimmer.t('Select a bookmark')
+          : this.translationSlimmer.t('No bookmarks available'), disabled: !hasBookmarks, source: bookmarkNames.map((name) => ({ id: name, displayName: name })), onVegaChange: this.handleBookmarkVegaChange })));
   }
   renderLinkTypeSelector() {
     if (!this.linkTypeConfigController.hasConfiguredLinkTypes()) {
@@ -6832,7 +7169,16 @@ class VegaRichTextLinkEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       index.h("vega-button", { variant: "secondary", label: this.translationSlimmer.t('Cancel'), ref: this.handleCancelButtonRef }),
       index.h("vega-button", { label: this.translationSlimmer.t('Submit'), disabled: this.linkEditorStateManager.getIsSubmitDisabled(), ref: this.handleSubmitButtonRef })));
   }
+  setUrlAutoValidation(enabled) {
+    if (this.urlInputRef) {
+      this.urlInputRef.autoValidation = enabled;
+    }
+  }
 }
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rte-bookmark': imageExtension.bookmarkIcon });
+})();
+VegaRichTextLinkEditorRenderer.BOOKMARK_LABEL_MAX_LENGTH = 24;
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
@@ -6851,6 +7197,9 @@ __decorate$3([
 __decorate$3([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextLinkEditorRenderer.prototype, "linkEditorStateManager", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
 
 const urlLinkTypeHandler = {
   key: 'url',
@@ -6996,6 +7345,9 @@ class LinkEditorController extends globalSlimmerRegistry.VegaSlimmer {
     super(...arguments);
     this.linkUrlNormalizer = new LinkUrlNormalizer();
     this.linkTypeHandlers = LINK_TYPE_HANDLER_MAP;
+    // Single-use markers to ignore the change event echoed back by our own URL/bookmark sync write.
+    this.pendingBookmarkSyncEcho = null;
+    this.pendingUrlSyncEcho = null;
     /**
      * The element the trigger click listener is currently attached to (the link
      * wrapper acting as the popover target).
@@ -7059,6 +7411,9 @@ class LinkEditorController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async handlePopoverShow() {
     var _a, _b, _c, _d;
+    // Discard echoes left by the previous popover session.
+    this.pendingBookmarkSyncEcho = null;
+    this.pendingUrlSyncEcho = null;
     this.linkTypeConfigController.invalidateConfiguredLinkTypesCache();
     this.linkEditorStateManager.clearFormValues();
     if (this.linkEditorStateManager.getShouldResetStatusOnNextShow()) {
@@ -7129,9 +7484,64 @@ class LinkEditorController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {void} No return value.
    */
   handleUrlVegaChange(e) {
+    const requiredValue = e.detail;
+    // A matching value was written by a bookmark selection, not typed by the user.
+    const isEcho = this.pendingUrlSyncEcho === requiredValue;
+    this.pendingUrlSyncEcho = null;
+    if (!isEcho &&
+      this.linkEditorStateManager.getSelectedLinkTypeKey() === codeBlock.RTE_DEFAULT_LINK_TYPE_KEY &&
+      this.linkTypeConfigController.isBookmarkEnabled()) {
+      const form = this.renderer.getFormRef();
+      if (form === null || form === void 0 ? void 0 : form.setValue) {
+        const bookmarkName = this.linkTypeConfigController.getBookmarkNameForUrl(requiredValue);
+        // Ignore the change emitted when the select applies this value.
+        this.pendingBookmarkSyncEcho = bookmarkName;
+        void form.setValue({ bookmark: bookmarkName });
+      }
+    }
     if (this.linkTypeConfigController.hasConfiguredLinkTypes()) {
-      this.updateSubmitDisabledState(e.detail);
+      this.updateSubmitDisabledState(requiredValue);
+    }
+  }
+  /**
+   * Updates the URL field from a selected bookmark target.
+   *
+   * @param {CustomEvent<string | string[]>} e - Bookmark selection change event.
+   * @returns {Promise<void>} Resolves after updating the URL field.
+   */
+  async handleBookmarkVegaChange(e) {
+    var _a, _b, _c;
+    const bookmarkName = Array.isArray(e.detail) ? e.detail[0] || '' : e.detail;
+    // Consume the change emitted by URL-to-bookmark synchronization.
+    if (this.pendingBookmarkSyncEcho === bookmarkName) {
+      this.pendingBookmarkSyncEcho = null;
+      return;
+    }
+    this.pendingBookmarkSyncEcho = null;
+    const url = bookmarkName ? `#${bookmarkName}` : '';
+    this.pendingUrlSyncEcho = url;
+    await ((_b = (_a = this.renderer.getFormRef()) === null || _a === void 0 ? void 0 : _a.setValue) === null || _b === void 0 ? void 0 : _b.call(_a, { url }));
+    this.updateSubmitDisabledState(url);
+    if (bookmarkName) {
+      await ((_c = this.renderer.getUrlInputRef()) === null || _c === void 0 ? void 0 : _c.doFocus());
+    }
+  }
+  /** Navigates to the current link's bookmark within the same rich text content root. */
+  async handleBookmarkNavigation() {
+    var _a, _b, _c;
+    const bookmarkName = this.linkTypeConfigController.getBookmarkNameForUrl((_a = this.record) === null || _a === void 0 ? void 0 : _a.url);
+    const rootNode = (_b = this.target) === null || _b === void 0 ? void 0 : _b.getRootNode();
+    if (!bookmarkName || !rootNode || !('querySelectorAll' in rootNode)) {
+      return;
     }
+    const bookmarkTarget = Array.from(rootNode.querySelectorAll('a.rte-bookmark[id]')).find((anchor) => anchor.id === bookmarkName);
+    if (!bookmarkTarget) {
+      return;
+    }
+    await ((_c = this.renderer.getPopoverRef()) === null || _c === void 0 ? void 0 : _c.hide());
+    bookmarkTarget.scrollIntoView({ block: 'center', inline: 'nearest' });
+    bookmarkTarget.focus({ preventScroll: true });
+    bookmarkTarget.click();
   }
   /**
    * Submits the current link when Enter is pressed or hides the popover when Escape is pressed.
@@ -7233,7 +7643,7 @@ class LinkEditorController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {Promise<void>} Resolves when the edit form is populated.
    */
   async populateEditForm() {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d;
     const handler = this.linkTypeHandlers.get(this.linkEditorStateManager.getSelectedLinkTypeKey());
     if (!handler) {
       return;
@@ -7246,12 +7656,15 @@ class LinkEditorController extends globalSlimmerRegistry.VegaSlimmer {
       ? handler.getRequiredValue(this.record, deps)
       : '';
     const initialFormValues = handler.getInitialFormValues(this.record, deps);
+    const bookmarkName = this.linkTypeConfigController.getBookmarkNameForUrl((_a = this.record) === null || _a === void 0 ? void 0 : _a.url);
+    if (bookmarkName) {
+      initialFormValues.bookmark = bookmarkName;
+    }
     this.linkEditorStateManager.setSharedTextValue(initialFormValues.text || '');
-    await ((_b = (_a = this.renderer.getFormRef()) === null || _a === void 0 ? void 0 : _a.setValue) === null || _b === void 0 ? void 0 : _b.call(_a, initialFormValues));
+    await ((_c = (_b = this.renderer.getFormRef()) === null || _b === void 0 ? void 0 : _b.reset) === null || _c === void 0 ? void 0 : _c.call(_b, initialFormValues));
     this.syncTextInputValue(initialFormValues.text || '');
     this.updateSubmitDisabledState(requiredValue);
-    await ((_d = (_c = this.renderer.getFormRef()) === null || _c === void 0 ? void 0 : _c.setValue) === null || _d === void 0 ? void 0 : _d.call(_c, handler.getInitialFormValues(this.record, deps)));
-    await ((_e = this.renderer.getUrlInputRef()) === null || _e === void 0 ? void 0 : _e.doFocus());
+    await ((_d = this.renderer.getUrlInputRef()) === null || _d === void 0 ? void 0 : _d.doFocus());
   }
   /**
    * Updates the popover target via the remote invocation registry.
@@ -7577,9 +7990,42 @@ class LinkTypeConfigController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {VegaRTELinkExtensionConfig} The active link configuration.
    */
   getLinkConfig() {
-    const rteHost = ui.findParent(this.host, 'vega-rich-text-editor');
+    const rteHost = this.getRTEHost();
     return linkExtension.VegaRTELinkExtension.configStore.get(rteHost) || {};
   }
+  /**
+   * Returns valid bookmark names from the current rich text document in document order.
+   *
+   * @returns {string[]} Available bookmark names.
+   */
+  getBookmarkNames() {
+    var _a;
+    const names = imageExtension.collectBookmarkNames((_a = this.getRTEHost()) === null || _a === void 0 ? void 0 : _a.value).filter((name) => name.length > 0);
+    return Array.from(new Set(names));
+  }
+  /**
+   * Returns whether bookmark URL suggestions are enabled.
+   *
+   * @returns {boolean} True when bookmark suggestions are configured.
+   */
+  isBookmarkEnabled() {
+    var _a;
+    return Boolean((_a = this.getRTEHost()) === null || _a === void 0 ? void 0 : _a.extensions.some((extension) => extension instanceof imageExtension.VegaRTEBookmarkExtension));
+  }
+  /**
+   * Returns the bookmark name matching a fragment URL.
+   *
+   * @param {string} url - URL to match against current bookmarks.
+   * @returns {string} The matching bookmark name, or an empty string.
+   */
+  getBookmarkNameForUrl(url) {
+    if (!this.isBookmarkEnabled()) {
+      return '';
+    }
+    const normalizedUrl = (url || '').trim();
+    const bookmarkName = normalizedUrl.startsWith('#') ? normalizedUrl.slice(1) : '';
+    return this.getBookmarkNames().includes(bookmarkName) ? bookmarkName : '';
+  }
   /**
    * Normalizes configured link types and filters unsupported entries.
    *
@@ -7654,6 +8100,15 @@ class LinkTypeConfigController extends globalSlimmerRegistry.VegaSlimmer {
       ? this.translationSlimmer.t('Email')
       : this.translationSlimmer.t('URL');
   }
+  /**
+   * Returns the rich text editor containing this link editor.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The rich text editor host element type.
+   * @returns {HTMLVegaRichTextEditorElement | null} The containing editor, when available.
+   */
+  getRTEHost() {
+    return ui.findParent(this.host, 'vega-rich-text-editor');
+  }
 }
 LinkTypeConfigController.SUPPORTED_LINK_TYPE_KEYS = new Set(codeBlock.RTE_SUPPORTED_LINK_TYPE_KEYS);
 __decorate$1([
@@ -7790,7 +8245,7 @@ const VegaRichTextLinkEditor = class {
     index.registerInstance(this, hostRef);
     this.vegaChange = index.createEvent(this, "vegaChange", 7);
     this.change = index.createEvent(this, "change", 7);
-    this.globalSlimmers = {};
+    this.globalSlimmers = new Map();
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
     this.renderer = new VegaRichTextLinkEditorRenderer();