@heartlandone/vega 2.102.0 → 2.103.0

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

@@ -11,28 +11,28 @@ 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-06e6591f.js');
-const typeGuard = require('./type-guard-29e01bd4.js');
-const linkExtension = require('./link-extension-2a6133b7.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-25907d6b.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-1cf84f27.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-5adb86ae.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-8c862e5e.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-f29908f8.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-5d0c76ec.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-0227ee24.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');
@@ -48,7 +48,7 @@ require('./discriminated-3b8e72d5.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./breakpoints-ebde4837.js');
 require('./ui-32120990.js');
-require('./internal-translation-controller-eae8a8de.js');
+require('./internal-translation-controller-0d67ca4d.js');
 require('./icon-manager-7d20b0ab.js');
 require('./try-get-document-c0ebd39a.js');
 require('./vega-nonce-manager-df69d3ed.js');
@@ -61,9 +61,9 @@ require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./sub-state-observer-slimmer-5b68ba3f.js');
 require('./internal-vega-event-manager-0c256d63.js');
-require('./range-518b95a2.js');
-require('./keyboard-manager-slimmer-d1974b28.js');
-require('./keyboard-manager-baa83a61.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');
@@ -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);
-      }
     };
   }
   /**