@globalpayments/vega 2.101.0 → 2.103.0

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/bold-annotaion-handler.js

@@ -6,7 +6,7 @@ export class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/code-annotation-handler.js

@@ -5,7 +5,7 @@ export class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/color-annotation-handler.js

@@ -7,7 +7,7 @@ export class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/html-element-to-annotation-generator.js

@@ -62,11 +62,11 @@ class HtmlElementToAnnotationGenerator {
    */
   generate(targetDto, element, options = { autoMatchFormat: true }) {
     if (options && options.filterInlineStyles) {
-      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.dtoName, element);
+      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.typeName, element);
     }
     // Guard against <a> wrapping block content (e.g. <a><video></a>), which is processed as an
     // html-block (targetDto !== RTETextNode) — link-only mode should not apply in that case.
-    const isLinkElement = Predicate.isLinkElement(element) && targetDto.dtoName === 'RTETextNode';
+    const isLinkElement = Predicate.isLinkElement(element) && targetDto.typeName === 'RTETextNode';
     const annotations = this.handlers
       .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
       .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
@@ -79,7 +79,7 @@ class HtmlElementToAnnotationGenerator {
       return Object.assign(Object.assign({}, annotations), result);
     }, {});
     this.removeTextStyleDefaultsFromCustomStyle(annotations);
-    const strategies = RTEFilterStylesStrategyRegistry.getStrategies(targetDto.dtoName);
+    const strategies = RTEFilterStylesStrategyRegistry.getStrategies(targetDto.typeName);
     for (const strategy of strategies) {
       if (options.autoMatchFormat || strategy.alwaysFilter) {
         strategy.filterAnnotations(annotations);

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-alt-annotation-handler.js

@@ -5,7 +5,7 @@ export class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstra
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTEImageNode';
+    return targetDto.typeName === 'RTEImageNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/image-size-annotation-handler.js

@@ -5,7 +5,7 @@ export class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTEImageNode';
+    return targetDto.typeName === 'RTEImageNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/indent-annotation-handler.js

@@ -5,7 +5,7 @@ export class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.dtoName);
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.typeName);
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/inline-html-annotation-handler.js

@@ -19,7 +19,7 @@ export class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbst
    * @inheritDoc
    */
   canHandle(targetDto, options) {
-    return targetDto.dtoName === 'RTETextNode' && options.autoMatchFormat === false;
+    return targetDto.typeName === 'RTETextNode' && options.autoMatchFormat === false;
   }
   /**
    * @inheritDoc

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/italic-annotation-handler.js

@@ -6,7 +6,7 @@ export class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/link-annotation-handler.js

@@ -21,7 +21,7 @@ export class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
    * @returns {boolean} - .
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/strike-through-annotation-handler.js

@@ -6,7 +6,7 @@ export class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyA
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/text-align-annotation-handler.js

@@ -8,7 +8,7 @@ export class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @returns {boolean} - .
    */
   canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.dtoName);
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.typeName);
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/text-style-annotation-handler.js

@@ -9,7 +9,7 @@ export class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @returns {boolean} - .
    */
   canHandle(targetDto, options) {
-    return !!options.autoMatchFormat && targetDto.dtoName === 'RTETextBlock';
+    return !!options.autoMatchFormat && targetDto.typeName === 'RTETextBlock';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/element-to-dto-strategy/annotation-handler/underline-annotation-handler.js

@@ -6,7 +6,7 @@ export class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstr
    * @inheritDoc
    */
   canHandle(targetDto) {
-    return targetDto.dtoName === 'RTETextNode';
+    return targetDto.typeName === 'RTETextNode';
   }
   /**
    * Handle annotation.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/abstract-delete-content-handler.js

@@ -1,7 +1,10 @@
 import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes-action';
+import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
 import { InsertChildrenBeforeAction } from '../../../../dto/actions/insert-children-before-block';
+import { ModifyContentActionType } from '../../../../dto/actions/modify-content-action.abstract';
 import { RemoveChildrenAction } from '../../../../dto/actions/remove-child-action';
 import { ReplaceChildNodesAction } from '../../../../dto/actions/replace-child-nodes-action';
+import { UpdateCursorPositionAction } from '../../../../dto/actions/update-cursor-position-action';
 import { RTEBlock } from '../../../../dto/blocks/block.abstract';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../../dto/nodes/text-node';
@@ -14,15 +17,76 @@ import { BaseHandler } from './base-handler';
 export 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.
@@ -151,12 +215,4 @@ export 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);
-  }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/backward-delete-content-handler.js

@@ -1,35 +1,22 @@
-import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
 import { AbstractDeleteContentHandler } from './abstract-delete-content-handler';
 /** Handles a backspace (leftward) deletion of content within a VegaRTE editor. User press backspace will trigger this method */
 export 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);
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/base-handler.js

@@ -2,15 +2,35 @@ import changeManager from '../../../../../../helpers/change-manager/change-manag
 import domNodeSubjectFactory from '../../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
 import { VegaInternalRichTextEditDeleteSelectedNodes } from '../../../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import { generateUUID } from '../../../../../../utils/misc';
+import { RTEUpdateSource } from '../../../../constants/constant';
 import { AppendChildrenAction } from '../../../../dto/actions/append-child-nodes-action';
+import { SequentialCompositionAction, } from '../../../../dto/actions/sequential-composition-action';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { RTETextNode } from '../../../../dto/nodes/text-node';
 const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
 /** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
 export 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
@@ -19,7 +39,20 @@ export 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'.

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/forward-delete-content-handler.js

@@ -1,16 +1,18 @@
-import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
+import { UpdateCursorPositionAction } from '../../../../dto/actions/update-cursor-position-action';
 import { AbstractDeleteContentHandler } from './abstract-delete-content-handler';
 /** Handles a delete (rightward) deletion of content within a VegaRTE editor. User press delete will trigger this method */
 export 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
@@ -34,7 +36,8 @@ export 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
@@ -45,8 +48,11 @@ export 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
@@ -61,33 +67,8 @@ export 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);
   }
 }

package/dist/collection/components/vega-rich-text-editor/slimmers/controllers/helper/input-event-handler/insert-line-break-handler.js

@@ -1,25 +1,23 @@
 import { BaseHandler } from './base-handler';
 import { RTETextBlock } from '../../../../dto/blocks/text-block';
 import { LineBreakSingleBlockAction } from '../../../../dto/actions/line-break-single-block-action';
+import { ModifyContentActionType } from '../../../../dto/actions/modify-content-action.abstract';
+import { UpdateCursorPositionAction } from '../../../../dto/actions/update-cursor-position-action';
 import { lineBreakMultipleBlocksAction } from '../../../../dto/actions/line-break-multiple-block-action';
 /** User press shift + enter will tigger this callback */
 export 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();
     }
   }
   /**
@@ -28,14 +26,19 @@ export 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()];
     }
   }
   /**
@@ -49,36 +52,68 @@ export 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.