@heartlandone/vega 2.102.0 → 2.103.0

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

@@ -7,28 +7,28 @@ import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-bb7e68a0.js';
 import { s as VegaInternalComponentDidRender, e as VegaInternalRichTextEditorFlushChanges, d as VegaInternalRichTextEditDeleteSelectedNodes, G as VegaInternalRichTextImageClick, H as VegaInternalRichTextImageDeleteButtonClicked, y as VegaInternalCodeBlockBlur, a as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-02093067.js';
 import { S as SHADOW_ROOT_ELEMENT_SCROLLING, F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
-import { ak as ZERO_WIDTH_SPACE, ap as VegaRTEOneRowHeightPx, R as RTETextNode, ae as BoldAnnotationAction, N as NodeAnnotationTypeEnum, aq as ItalicAnnotationAction, ar as UnderlineAnnotationAction, b as RTETextBlock, as as TextStyleAnnotationAction, a2 as TextStyleAnnotation, at as BoldAnnotation, au as BlockAnnotationTypeEnum, av as ClearFormattingAnnotationAction, aw as CodeAnnotationAction, ax as StrikethroughAnnotationAction, an as SelectionChangeAction, al as LinkAnnotationAction, ay as IndentAnnotationAction, M as ModifyContentAction, j as ModifyContentActionType, r as RTEListItemBlock, a3 as RTEHtmlBlock, az as TransformParagraphAction, t as RTECodeBlockNode, A as ActionHandleStrategyRegistry, J as HorizontalAlignmentAnnotationAction, aA as RTEUpdateSource, s as stateEntityRenderingRegistry, f as AppendChildrenAction, U as UpdateTextAction, h as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, g as RTENode, a as RTEBlock, l as RemoveChildrenAction, E as ReplaceChildNodesAction, aB as escapeHtml, w as RTE_PASTE_MODE_DATA_TYPE, aC as RTE_PASTE_MODE_WORD, q as RTECodeBlock, aD as RTE_UPDATE_SOURCE_KEY, I as InsertChildrenAfterAction, x as RTE_WORD_COUNT_KEY, V as VegaRTEPresetToolbarItems, aj as VegaRTEDefaultTextStyleItems, aE as RTE_EMAIL_LINK_TYPE_KEY, aF as RTE_DEFAULT_LINK_TYPE_KEY, aG as RTE_SUPPORTED_LINK_TYPE_KEYS } from './code-block-d8f83d85.js';
-import { i as isNonNullable } from './type-guard-08c82e08.js';
-import { R as RTEDTORendererManager, e as extensionContextManager, V as VegaRTELinkExtension } from './link-extension-3f93d70d.js';
+import { ar as ZERO_WIDTH_SPACE, aw as VegaRTEOneRowHeightPx, R as RTETextNode, ai as BoldAnnotationAction, N as NodeAnnotationTypeEnum, ax as ItalicAnnotationAction, ay as UnderlineAnnotationAction, c as RTETextBlock, az as TextStyleAnnotationAction, a6 as TextStyleAnnotation, aA as BoldAnnotation, aB as BlockAnnotationTypeEnum, aC as ClearFormattingAnnotationAction, aD as CodeAnnotationAction, aE as StrikethroughAnnotationAction, au as SelectionChangeAction, as as LinkAnnotationAction, aF as IndentAnnotationAction, M as ModifyContentAction, j as ModifyContentActionType, r as RTEListItemBlock, a7 as RTEHtmlBlock, aG as TransformParagraphAction, t as RTECodeBlockNode, A as ActionHandleStrategyRegistry, P as HorizontalAlignmentAnnotationAction, aH as RTEUpdateSource, s as stateEntityRenderingRegistry, g as AppendChildrenAction, aI as RTE_UPDATE_SOURCE_KEY, U as UpdateTextAction, h as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, a as RTENode, b as RTEBlock, l as RemoveChildrenAction, K as ReplaceChildNodesAction, aJ as RTE_PASTE_MODE_PLAIN, ak as normalizePlainTextLines, x as toPlainPasteLines, J as escapeHtml, z as RTE_PASTE_MODE_DATA_TYPE, y as RTE_PRESERVED_WHITESPACE_DATA_TYPE, aK as RTE_PASTE_MODE_WORD, q as RTECodeBlock, I as InsertChildrenAfterAction, D as RTE_WORD_COUNT_KEY, V as VegaRTEPresetToolbarItems, aq as VegaRTEDefaultTextStyleItems, aL as RTE_EMAIL_LINK_TYPE_KEY, aM as RTE_DEFAULT_LINK_TYPE_KEY, aN as RTE_SUPPORTED_LINK_TYPE_KEYS } from './code-block-9360c331.js';
+import { i as isNonNullable } from './type-guard-204094c6.js';
+import { R as RTEDTORendererManager, e as extensionContextManager, V as VegaRTELinkExtension } from './link-extension-57ba9520.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-d4d534d2.js';
-import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-df744ba5.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-9525be48.js';
 import { d as VegaDropdownClick, c as VegaChange, b as VegaClick, a2 as VegaImageInserted, a3 as VegaSourceCodeChange, a as VegaPopoverShow, V as VegaPopoverHide, T as VegaShow, U as VegaHide } from './vega-event-id-6b4db259.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
 import { w as waitForComponentDidRender } from './wait-for-component-did-render-9e84d92d.js';
-import { a as VegaRTEImageExtension, R as ReplaceSelectedTextAction, c as bookmarkIcon, d as collectBookmarkNames, V as VegaRTEBookmarkExtension } from './image-extension-20b39140.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-a7c0a0f8.js';
+import { a as VegaRTEImageExtension, R as ReplaceSelectedTextAction, h as htmlContainsTable, c as htmlToPlainText, d as bookmarkIcon, e as collectBookmarkNames, V as VegaRTEBookmarkExtension } from './image-extension-aea75132.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-d653c494.js';
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-aa7f4c6e.js';
 import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-ba72f30b.js';
-import { V as VegaRTEContent, b as RTEImageNode, f as CommitValueAction, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, g as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-486eae1d.js';
+import { V as VegaRTEContent, b as RTEImageNode, f as CommitValueAction, U as UpdateCursorPositionAction, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, g as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-67a12e74.js';
 import { b as AlignLeft, A as AlignCenter, c as AlignRight, a as AlignJustify } from './align-left-7f959adf.js';
-import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-642e7147.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-9ea58806.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { d as debounce } from './timer-9321173b.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-778dd929.js';
 import { f as findParent, b as getDeepActiveElementInShadow, j as checkIsVoiceOverClick, k as getFirstFocusableElement } from './ui-80e610f4.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-06caf383.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-cfd32ba2.js';
 import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-3ae5c7db.js';
-import { T as TranslationSlimmer } from './translation-slimmer-b3f3cf65.js';
+import { T as TranslationSlimmer } from './translation-slimmer-b69057eb.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-4e04a2d3.js';
 import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { i as isArrayEqual } from './array-7888f339.js';
@@ -44,7 +44,7 @@ import './discriminated-fe5bf3c8.js';
 import './dynamic-slimmer-90b8af32.js';
 import './breakpoints-d9faf11c.js';
 import './ui-93922c59.js';
-import './internal-translation-controller-4a7ee4d5.js';
+import './internal-translation-controller-3637e47e.js';
 import './icon-manager-236d6c23.js';
 import './try-get-document-bef0f526.js';
 import './vega-nonce-manager-497e5eb5.js';
@@ -57,9 +57,9 @@ import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './sub-state-observer-slimmer-bee1c7fa.js';
 import './internal-vega-event-manager-6eebe8f8.js';
-import './range-8e89fb54.js';
-import './keyboard-manager-slimmer-f40dcb54.js';
-import './keyboard-manager-f5d13a34.js';
+import './range-3c74e1c8.js';
+import './keyboard-manager-slimmer-b3de042d.js';
+import './keyboard-manager-53e8d8d0.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
@@ -2461,7 +2461,17 @@ class ValueController extends VegaSlimmer {
     const flushChangesWithDebounce = debounce(() => {
       void this.valueController.flushChanges(this.value);
     }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    this.flushChangeObserver = new 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.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
@@ -2622,12 +2632,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 ModifyContentAction {
+  constructor(steps, flushPayload = {}) {
+    super();
+    this.steps = steps;
+    this.isFlushable = true;
+    this.type = 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: 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
@@ -2636,7 +2678,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'.
@@ -2725,25 +2780,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[RTE_UPDATE_SOURCE_KEY] === RTEUpdateSource.Composition
+          ? RTEUpdateSource.Composition
+          : 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 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 === ZERO_WIDTH_SPACE &&
@@ -2752,40 +2822,54 @@ class InsertTextHandler extends BaseHandler {
               startContainer.nodeValue = '';
               nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
             }
-            if (cursorNode instanceof RTETextNode) {
-              updateFlag = true;
-              cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
-            }
+            steps.push({
+              target: cursorNode,
+              action: new 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 RTETextNode) {
-        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
-        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
+        steps.push({ target: cursorNode, action: new ReplaceSelectedTextAction(text, currentRange) });
+        caretNode = cursorNode;
+        caretOffset = startOffset + text.length;
       }
     }
+    if (caretNode) {
+      steps.push({
+        target: this.currentState,
+        action: new 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 RTETextBlock) {
       const firstNode = this.currentState.children[0].children[0];
-      firstNode.apply(new UpdateTextAction(text));
+      steps.push({ target: firstNode, action: new UpdateTextAction(text) });
       return firstNode;
     }
   }
@@ -2794,20 +2878,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 RTETextBlock) {
       const index = textBlock.children.indexOf(lineBreakNode);
       if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
         const newTextNode = lineBreakNode.cloneWithText(text);
-        textBlock.apply(new InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        steps.push({
+          target: textBlock,
+          action: new InsertChildrenBeforeAction(lineBreakNode, newTextNode),
+        });
         return newTextNode;
       }
       else {
-        lineBreakNode.apply(new UpdateTextAction(text));
+        steps.push({ target: lineBreakNode, action: new UpdateTextAction(text) });
         return lineBreakNode;
       }
     }
@@ -2818,20 +2906,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();
@@ -2869,36 +2956,71 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
-        firstBlock.apply(splitAction);
-        this.switchCaretPositionToNextElement(splitAction.newBlock);
-        return;
+        const mergeStep = {
+          target: firstBlock,
+          action: new 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 SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length),
+        });
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        const caretStep = (context) => {
+          const splitAction = context.getAction(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 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 RTENode ? cursorNode.parent : cursorNode;
     const { startOffset } = this.selectionController.getCurrentRange();
+    let result = [];
     if (currentBlock) {
-      const breakAction = new InsertNewParagraphAction(cursorNode, startOffset);
-      currentBlock.apply(breakAction);
-      this.switchCaretPositionToNextElement(breakAction.newBlock);
+      const breakStep = {
+        target: currentBlock,
+        action: new InsertNewParagraphAction(cursorNode, startOffset),
+      };
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      const caretStep = (context) => {
+        const breakAction = context.getAction(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 UpdateCursorPositionAction(newBlock.children[0], 0),
+      };
     }
   }
 }
@@ -2934,20 +3056,16 @@ class lineBreakMultipleBlocksAction extends 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();
     }
   }
   /**
@@ -2956,14 +3074,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 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()];
     }
   }
   /**
@@ -2977,36 +3100,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(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(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 UpdateCursorPositionAction(this.getNextRTENode(lineBreakNode), 0),
+    };
   }
   /**
    * Returns the next sibling node of a given block element in a rich text editor.
@@ -3043,15 +3198,76 @@ class DeleteBlockContentAction extends 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 UpdateCursorPositionAction(caretAnchor, caretOffset),
+        };
+      }
+      const deleteAction = context.getAction(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 UpdateCursorPositionAction(deleteAction.previousNode, nextOffset),
+        };
+      }
+      if (deleteAction && deleteAction.nextNode) {
+        return {
+          target: this.currentState,
+          action: new 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 AppendChildrenAction([paragraph]) },
+          {
+            target: this.currentState,
+            action: new 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.
@@ -3180,27 +3396,21 @@ class AbstractDeleteContentHandler extends BaseHandler {
       block.parent.apply(new 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 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
@@ -3224,7 +3434,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
@@ -3235,8 +3446,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 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
@@ -3251,34 +3465,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);
   }
 }
 
@@ -3286,33 +3475,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);
   }
 }
 
@@ -3342,53 +3519,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 RTETextNode) || currentRange.startNode;
     if (!(cursorNode instanceof RTETextNode)) {
-      return false;
+      return undefined;
     }
-    cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
-    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, currentRange.startOffset + text.length);
-    return true;
+    return [
+      { target: cursorNode, action: new ReplaceSelectedTextAction(text, currentRange) },
+      {
+        target: this.currentState,
+        action: new UpdateCursorPositionAction(cursorNode, currentRange.startOffset + text.length),
+      },
+    ];
   }
   /**
    * Determines whether the payload should be inserted as inline plain text.
@@ -3453,68 +3634,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 AppendChildrenAction(blocks));
+    return [{ target: this.currentState, action: new 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(ModifyContentActionType.PASTE_CONTENT);
+        if (pasteAction && pasteAction.futureFocusNode) {
+          return {
+            target: this.currentState,
+            action: new 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(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 === 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') &&
+        htmlContainsTable(payload.html)) {
+        plainText = payload.text;
+      }
+      else if (payload.html && 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 RTETextNode ? currentRange.startNode : undefined;
+      return this.buildPlainTextParagraph(plainText, styleSource, hasEncodedWhitespace);
+    }
     let pastedHTML = payload.html || '';
     if (!pastedHTML) {
       pastedHTML = this.parsePlainText(payload.text || '');
@@ -3552,16 +3781,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 = StylePreservator.preserve(html).getProcessedHtml();
-    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
-    return (parsedDoc.body.textContent || '').replace(/\r\n?/g, '\n');
+    return htmlToPlainText(safeHtml, {
+      preserveBoundaryBlankLines: true,
+      keepPreservedWhitespaceMarkers,
+    });
   }
   /**
    * Builds plain-text paragraph blocks when element strategy parsing returns no output.
@@ -3570,7 +3804,7 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} Fallback text blocks.
    */
   buildPlainTextFallbackBlocks(text) {
-    return text.split('\n').map((line) => {
+    return normalizePlainTextLines(text).map((line) => {
       const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
       const textNode = new RTETextNode(`${paragraph.id}1`, line, paragraph);
       paragraph.apply(new AppendChildrenAction([textNode]));
@@ -3578,21 +3812,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 = toPlainPasteLines(text, decodeEncodedWhitespace);
+    return lines.map((line, lineIndex) => {
+      const paragraph = new RTETextBlock(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 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 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 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 UpdateCursorPositionAction(newBlock.children[0], 0),
+      };
     }
   }
   /**
@@ -3812,6 +4091,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(RTE_PASTE_MODE_DATA_TYPE) || '',
+      hasEncodedWhitespace: event.dataTransfer.getData(RTE_PRESERVED_WHITESPACE_DATA_TYPE) === 'true',
     };
   }
 }
@@ -4136,6 +4416,8 @@ class UserInputController extends 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
      */
@@ -4149,41 +4431,26 @@ class UserInputController extends VegaSlimmer {
         return;
       }
       this.insertCompositionTextController.removeObserver();
-      let updateFlag = false;
-      let updateSource = 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[RTE_UPDATE_SOURCE_KEY] === RTEUpdateSource.Composition
-              ? RTEUpdateSource.Composition
-              : 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);
-      }
     };
   }
   /**