@globalpayments/vega 2.32.0 → 2.34.0

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

@@ -0,0 +1,44 @@
+import { ElementToDTOHandlerAbstract } from './element-to-dto-handler.abstract';
+/**
+ * Transform text element to DTO.
+ */
+export class TextToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return element.nodeType === Node.TEXT_NODE;
+  }
+  /* istanbul ignore next */
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return [];
+  }
+  /**
+   * Append text node to it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.currentVirtualElement);
+    return [];
+  }
+  /* istanbul ignore next */
+  /**
+   * Get the block element for child nodes
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {Nullable<HTMLElement>} - blockElement.
+   */
+  getNextBlockElement(blockElement) {
+    return blockElement;
+  }
+}

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

@@ -0,0 +1,191 @@
+import { generateUUID } from '../../../../../../utils/misc';
+import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
+import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
+import { RemoveChildAction } from '../../../../dto/actions/remove-child-action';
+import { ReplaceSelectedTextAction } from '../../../../dto/actions/replace-selected-text-action';
+import { UpdateTextAction } from '../../../../dto/actions/update-text-action';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { RTEImageNode } from '../../../../dto/nodes/image-node';
+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 {
+  /**
+   * The function `execute` initializes the current state and selection, and then handles an event if provided.
+   *
+   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
+   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
+   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
+   */
+  execute(currentState, selectionController, event) {
+    this.initCurrentStateAndSelection(currentState, selectionController);
+    this.handleEvent(event);
+  }
+  /**
+   * Replaces the selected nodes with the provided text.
+   *
+   * @param {string} text - The insert text
+   * @returns {RTENode} - The selected start node
+   */
+  replaceSelectedNodesWithText(text) {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const range = this.selectionController.getCurrentRange();
+    const { startContainer, endContainer } = range;
+    const result = this.removeSelectionRange();
+    const startNode = selectedNodes[0];
+    if (startNode instanceof RTETextNode && text) {
+      startNode.apply(new UpdateTextAction(startNode.text + text));
+    }
+    this.mergeRangeStartAndEnd(startContainer, endContainer);
+    return result;
+  }
+  /**
+   * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
+   *
+   * @param {HTMLElement} element - HTMLElement
+   * @returns {boolean} The boolean value
+   */
+  isRootContainer(element) {
+    return (element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
+  }
+  /**
+   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
+   *
+   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
+   * @returns {boolean} boolean result
+   */
+  isEmptyParagraph(node) {
+    return node && node.childNodes && node.childNodes.length === 0;
+  }
+  /**
+   * Removes the selected text at the start and end of a range in a Rich Text Editor.
+   */
+  removeRangeStartAndEndSelectedText() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const currentRange = this.selectionController.getCurrentRange();
+    if (selectedNodes[0] instanceof RTETextNode) {
+      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof RTETextNode) {
+      selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+  }
+  /**
+   * Merges text nodes in a rich text editor.
+   *
+   * @param {Node} startContainer - Start text node element
+   * @param {Node} endContainer - End text node element
+   */
+  mergeRangeStartAndEnd(startContainer, endContainer) {
+    if (startContainer !== endContainer) {
+      if (startContainer.nodeType === Node.TEXT_NODE && endContainer.nodeType === Node.TEXT_NODE) {
+        const selectedNodes = this.selectionController.getSelectedNodes();
+        const startRTENode = selectedNodes[0];
+        const endRTENode = selectedNodes[selectedNodes.length - 1];
+        if (startRTENode && startRTENode.parentBlock && endRTENode && endRTENode.parentBlock) {
+          const endBlock = endRTENode.parentBlock;
+          if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
+            startRTENode.apply(new UpdateTextAction(startRTENode.text + endRTENode.text));
+            if (startRTENode.parentBlock === endRTENode.parentBlock) {
+              startRTENode.parentBlock.apply(new RemoveChildAction(endRTENode));
+            }
+            else {
+              endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+            }
+          }
+          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+            startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
+            endBlock.nodes = [];
+          }
+          if (endBlock.nodes.length < 1) {
+            endBlock.parent.apply(new RemoveChildAction(endBlock));
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
+   *
+   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
+   */
+  removeSelectionRange() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const { endOffset, startOffset } = range;
+    const startNode = selectedNodes[0];
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1) {
+      // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
+      const shouldRemovedItems = selectedNodes.filter((item) => {
+        if (item.type !== 'IMAGE') {
+          return item !== startNode && item !== endNode;
+        }
+        else {
+          return item !== startNode && (item !== endNode || (item === endNode && endOffset !== 0));
+        }
+      });
+      shouldRemovedItems.forEach((item) => {
+        item.parentBlock.apply(new RemoveChildAction(item));
+      });
+    }
+    this.removeRangeStartAndEndSelectedText();
+    /**
+     * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
+     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
+     */
+    if (startNode instanceof RTEImageNode &&
+      startOffset !== 1 &&
+      (endNode !== startNode || endOffset !== 0)) {
+      // the image block will be deleted when the image is the only item
+      if (startNode.parentBlock.nodes.length === 1) {
+        const paragraph = this.createEmptyParagraph();
+        startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+        startNode.parentBlock.apply(new RemoveChildAction(startNode));
+        return paragraph.nodes[0];
+      }
+      else if (startNode === startNode.parentBlock.nodes[0]) {
+        // the start node should be the next image item if the image is first item
+        startNode.parentBlock.apply(new RemoveChildAction(startNode));
+        return startNode.parentBlock.nodes[0];
+      }
+    }
+    return startNode;
+  }
+  /**
+   * Creates a new paragraph with an empty text node and returns it.
+   *
+   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
+   */
+  createEmptyParagraph() {
+    const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new AppendChildNodesAction([textNode]));
+    return paragraph;
+  }
+  /**
+   * Compares the annotations of two RTETextNodes to determine if they can be merged.
+   *
+   * @param {RTETextNode} nodeA - node A
+   * @param {RTETextNode} nodeB - node B
+   * @returns {boolean} true or false
+   */
+  shouldMergeTextNode(nodeA, nodeB) {
+    const { annotations: annotationsA } = nodeA.toJSON();
+    const { annotations: annotationsB } = nodeB.toJSON();
+    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+  }
+  /**
+   * The function initializes the current state and selection controller in TypeScript.
+   *
+   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
+   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
+   */
+  initCurrentStateAndSelection(currentState, selectionController) {
+    this.currentState = currentState;
+    this.selectionController = selectionController;
+  }
+}

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

@@ -0,0 +1,108 @@
+import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
+import { DeleteBlockContentAction } from '../../../../dto/actions/delete-block-content-action';
+import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
+import { RemoveChildAction } from '../../../../dto/actions/remove-child-action';
+import { ReplaceChildNodesAction } from '../../../../dto/actions/replace-child-nodes-action';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { BaseHandler } from './base-handler';
+/** Handles the deletion of content within a VegaRTE editor. User press backspace or delete will trigger this method */
+export class DeleteContentHandler extends BaseHandler {
+  /**
+   * Delete the selected node from the current state.
+   */
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.deleteContentWithSingleBlock();
+    }
+    else {
+      this.deleteContentWithMultipleNodes();
+    }
+  }
+  /**
+   * Handles the deletion of content within a single block in an RTE editor.
+   */
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+    }
+    else if (selectedBlocks[0]) {
+      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
+      selectedBlocks[0].apply(deleteAction);
+      if (deleteAction.previousNode) {
+        const nextOffset = deleteAction.previousNode === selectedNodes[0]
+          ? Math.max(0, startOffset - 1)
+          : this.getNodeEndOffset(deleteAction.previousNode);
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+      }
+      else if (deleteAction.nextNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+      }
+      else if (this.currentState.blocks.length === 0) {
+        // Add a empty paragraph if delete all content to make sure the caret position
+        this.insertDefaultParagraph();
+      }
+    }
+  }
+  /**
+   * 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 AppendChildNodesAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
+  }
+  /**
+   * Deletes the content within multiple nodes selected by the user.
+   */
+  deleteContentWithMultipleNodes() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const cursorNode = this.replaceSelectedNodesWithText('');
+    const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 &&
+      lastSelectedNode instanceof RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parentBlock.apply(new RemoveChildAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parentBlock);
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+  }
+  /**
+   * If the first block is not paragraph, convert the block to paragraph after delete all text
+   *
+   * @param {RTEBlock} block - The first block instance
+   */
+  convertFirstBlockToParagraph(block) {
+    const firstBlock = this.currentState.blocks[0];
+    if (firstBlock === block &&
+      block instanceof RTETextBlock &&
+      block.nodes.length === 1 &&
+      block.nodes[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new RemoveChildAction(block));
+    }
+  }
+  /**
+   * Returns the end offset of a given node in a Rich Text Editor based on its type and text content.
+   *
+   * @param {RTENode} node - text node or image node
+   * @returns {number} Returns a number value.
+   */
+  getNodeEndOffset(node) {
+    if (node.type === 'IMAGE') {
+      return 1;
+    }
+    else if (node.type === 'TEXT') {
+      return node['text'] === '\n' ? 0 : node['text'].length;
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+import { BaseHandler } from './base-handler';
+import { RTETextNode } from '../../../../dto/nodes/text-node';
+import { generateUUID } from '../../../../../../utils/misc';
+import { RTETextBlock } from '../../../../dto/blocks/text-block';
+import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
+import { LineBreakSingleBlockAction } from '../../../../dto/actions/line-break-single-block-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
+   */
+  handleEvent() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (this.isRootContainer(range.startContainer)) {
+      this.breakNewBlock();
+    }
+    if (selectedBlocks.length < 2) {
+      this.breakSingleBlock();
+    }
+    else {
+      this.breakMultipleBlocks();
+    }
+  }
+  /**
+   * Insert the \n in text element when root container is empty, should create text block and text node
+   * <p>
+   *  <span></span>
+   *  <span></span>
+   * </p>
+   */
+  breakNewBlock() {
+    const newBlock = new RTETextBlock(generateUUID(), 'paragraph');
+    const lineBreakNode = this.createLineBreakNode(newBlock);
+    newBlock.apply(new AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
+    this.currentState.apply(new AppendChildNodesAction([newBlock]));
+    this.switchCaretPositionToSpecifiedNode(lineBreakNode);
+  }
+  /**
+   * If the selected node is a text node
+   * <p>
+   *  <span>text</span>
+   * </p>
+   * Insert a line break and the selected node will be split into three text nodes
+   * <p>
+   *  <span>te</span>
+   *  <br>
+   *  <span>xt</span>
+   * </p>
+   */
+  breakSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    if (currentBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
+      currentBlock.apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    }
+  }
+  /**
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
+   */
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const cursorNode = this.removeSelectionRange();
+    const lineBreakAction = new lineBreakMultipleBlocksAction(selectedBlocks);
+    cursorNode.parentBlock.apply(lineBreakAction);
+    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+  }
+  /**
+   * Moves the caret to the next node element in a rich text editor.
+   *
+   * @param {RTETextNode} lineBreakNode - Represents a node element in a rich text editor.
+   */
+  switchCaretPositionToSpecifiedNode(lineBreakNode) {
+    this.selectionController.enqueueSelectionRangeFutureState(this.getNextRTENode(lineBreakNode), 0);
+  }
+  /**
+   * Returns the next sibling node of a given block element in a rich text editor.
+   *
+   * @param {RTENode} lineBreakNode - The `lineBreakNode` parameter is of type `RTENode`, which is used to represent the new line break element in a rich text editor.
+   * @returns {RTENode} The next sibling node of the current line break element, or the current node if next node is not exists.
+   */
+  getNextRTENode(lineBreakNode) {
+    const index = lineBreakNode.parentBlock['nodes'].indexOf(lineBreakNode);
+    const nextNode = lineBreakNode.parentBlock['nodes'][index + 1];
+    return nextNode || lineBreakNode;
+  }
+  /**
+   * Create a null text that will render a br element in a rich text editor.
+   *
+   * @param {RTEBlock} block - Represents a block element in a rich text editor.
+   * @returns {RTETextNode} the new line break node.
+   */
+  createLineBreakNode(block) {
+    return new RTETextNode(generateUUID(), '\n', block);
+  }
+}

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

@@ -0,0 +1,90 @@
+import { BaseHandler } from './base-handler';
+import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
+import { MergeTwoBlocksNodesAction } from '../../../../dto/actions/merge-two-blocks-nodes-action';
+import { BreakSingleBlockAction } from '../../../../dto/actions/break-single-block-action';
+/** Insert a paragraph in a rich text editor based on the current selection and event. User type enter will trigger this callback */
+export class InsertParagraphHandler extends BaseHandler {
+  /**
+   * Create new paragraph node and add node to state value
+   */
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.breakSingleBlock();
+    }
+    else {
+      this.breakMultipleBlocks();
+    }
+  }
+  /**
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
+   */
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    // If the start or end block contains a list item block, it needs to be processed separately
+    if ((selectedBlocks.length && selectedBlocks[0].type === 'list-item') ||
+      selectedBlocks[selectedBlocks.length - 1].type === 'list-item') {
+      const firstBlock = cursorNode.parentBlock;
+      const lastBlock = selectedBlocks[selectedBlocks.length - 1];
+      /**
+       * First block is list item
+       * --before--
+       * ul
+       *  - li
+       * p
+       *  - span
+       * --after--
+       * ul
+       *  - li
+       *  - li
+       */
+      /**
+       * End block is list item
+       * --before--
+       * p
+       *  - span
+       * ul
+       *  - li
+       * --after--
+       * p
+       *  - span
+       * p
+       *  - span
+       */
+      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;
+      }
+    }
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+  }
+  /**
+   * Handles breaking a single block in an RTE editor based on the current selection and position.
+   */
+  breakSingleBlock() {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    const { startOffset } = this.selectionController.getCurrentRange();
+    if (currentBlock) {
+      const breakAction = new BreakSingleBlockAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
+  }
+  /**
+   * Moves the caret to the next block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   */
+  switchCaretPositionToNextElement(newBlock) {
+    if (newBlock && newBlock['nodes']) {
+      this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
+    }
+  }
+}

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

@@ -0,0 +1,91 @@
+import { BaseHandler } from './base-handler';
+import { AppendChildNodesAction } from '../../../../dto/actions/append-child-nodes-action';
+import { InsertBlocksAfterAction } from '../../../../dto/actions/insert-blocks-after-block';
+import { SplitBlockWithNodeAction } from '../../../../dto/actions/split-block-with-node-action';
+import { ElementToDTOProcessor } from '../element-to-dto-handler/element-to-dto-processor';
+import { InsertBlocksBeforeAction } from '../../../../dto/actions/insert-blocks-before-block';
+/**
+ * Handle user paste
+ */
+export class InsertPasteHandler extends BaseHandler {
+  constructor() {
+    super(...arguments);
+    this.elementToDTOProcessor = new ElementToDTOProcessor();
+  }
+  /**
+   * Update the state value when user paste html elements.
+   *
+   * @param {InputEvent} event - Paste event.
+   */
+  handleEvent(event) {
+    const blocks = this.parsePastedElements(event);
+    const { startContainer } = this.selectionController.getCurrentRange();
+    if (this.isRootContainer(startContainer)) {
+      this.insertBlocksToRoot(blocks);
+    }
+    else if (this.isEmptyParagraph(startContainer)) {
+      this.insertBlocksBeforeEmptyBlock(blocks);
+    }
+    else {
+      this.insertBlocksToContent(blocks);
+    }
+  }
+  /**
+   * Insert the blocks to root
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksToRoot(blocks) {
+    this.currentState.apply(new AppendChildNodesAction(blocks));
+  }
+  /**
+   * Insert the blocks to content
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksToContent(blocks) {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
+    if (currentBlock) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const breakAction = new SplitBlockWithNodeAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
+  }
+  /**
+   * Insert the blocks before to current block
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksBeforeEmptyBlock(blocks) {
+    const cursorNode = this.removeSelectionRange();
+    /* istanbul ignore next */
+    const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
+    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+    this.switchCaretPositionToNextElement(currentBlock);
+  }
+  /**
+   * Format and parse elements from user paste.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEContentBlock[]} - RTEContentBlock.
+   */
+  parsePastedElements(event) {
+    const pastedHTML = event.dataTransfer.getData('text/html');
+    const tempContainer = document.createElement('div');
+    tempContainer.innerHTML = pastedHTML;
+    return this.elementToDTOProcessor.process(tempContainer);
+  }
+  /**
+   * Moves the caret to the next block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   */
+  switchCaretPositionToNextElement(newBlock) {
+    if (newBlock && newBlock['nodes']) {
+      this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
+    }
+  }
+}