@globalpayments/vega 2.34.0 → 2.34.1

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

@@ -5,11 +5,11 @@ import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0f
 import { C as ChangeManager } from './change-manager-8f5b72c2.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, c as VegaDropdownClick, V as VegaChange, O as Observer, Q as VegaImageInserted, b as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-observer-factory-80358591.js';
 import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, o as VegaInternalRichTextImageClick, p as VegaInternalRichTextImageDeleteButtonClicked, k as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-4af5c6e9.js';
-import { a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-d0255b98.js';
+import { a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-b2270b64.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-7fc7535a.js';
-import { B as BoldAnnotationAction, R as RTETextBlock, T as TextStyleAnnotationAction, a as TextStyleAnnotation, I as IndentAnnotation, b as RTEImageNode, c as RTEListItemBlock, H as HorizontalAlignmentAnnotation, V as VegaRTEContent, d as RemoveChildAction, A as AppendChildNodesAction, e as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, f as ReplaceChildNodesAction, g as RTEImageBlock, h as RTEListBlock, i as InsertBlocksAfterAction, j as ImageAnnotationAction } from './content-state-acf55eb0.js';
+import { B as BoldAnnotationAction, R as RTETextBlock, T as TextStyleAnnotationAction, a as TextStyleAnnotation, I as IndentAnnotation, b as RTEImageNode, c as RTEListItemBlock, H as HorizontalAlignmentAnnotation, V as VegaRTEContent, d as RemoveChildAction, A as AppendChildNodesAction, e as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, f as ReplaceChildNodesAction, g as RTEListBlock, h as RTEImageBlock, i as InsertBlocksAfterAction, j as ImageAnnotationAction } from './content-state-4b036bf1.js';
 import { a as NodeAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node.abstract-93746055.js';
-import { R as RTETextNode, T as TextSplittableAction, I as ItalicAnnotation, e as UnderlineAnnotation, B as BoldAnnotation, C as ClearFormattingAnnotationAction, f as CodeAnnotationAction, g as StrikethroughAnnotation, A as AnnotationAction, h as SelectionRangeAnnotation, L as LinkAnnotationAction, b as waitForComponentDidRender, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, i as TextNodeRenderingRegistry } from './text-node-6f7d736c.js';
+import { R as RTETextNode, T as TextSplittableAction, I as ItalicAnnotation, e as UnderlineAnnotation, B as BoldAnnotation, C as ClearFormattingAnnotationAction, f as CodeAnnotationAction, g as StrikethroughAnnotation, A as AnnotationAction, h as SelectionRangeAnnotation, L as LinkAnnotationAction, b as waitForComponentDidRender, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, d as RTE_TEXT_COLORS, i as TextNodeRenderingRegistry } from './text-node-a652ca87.js';
 import { e as BlockAnnotationTypeEnum } from './block-annotation.abstract-b0554e2b.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
 import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-de5fe574.js';
@@ -17,7 +17,7 @@ import { c as createEventEmitSlimmer } from './event-emit-slimmer-c03cf145.js';
 import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-6e97a58a.js';
 import { d as debounce } from './timer-9321173b.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { f as findParent } from './ui-5600b48f.js';
+import { f as findParent, r as rgbToHex } from './ui-5600b48f.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-e06a3840.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-dfde0cfa.js';
@@ -2906,446 +2906,530 @@ class DeleteContentHandler extends BaseHandler {
 }
 
 /**
- * Abstract class of element to DTO handler
+ * Abstract class to define strategies for processing HTML elements
  */
-class ElementToDTOHandlerAbstract {
-  /**
-   * At new of handler, We need to inherit the style of the parent element
-   *   and clone an empty element so that the child elements can be appended.
-   *
-   * @param {HTMLElement} element - Current element.
-   */
-  constructor(element) {
-    this.setEntityElementStyle(element);
-    this.setElement(element);
+class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
   }
-  /* istanbul ignore next */
-  // eslint-disable-next-line jsdoc/require-returns-check
   /**
-   * Can be handle, the class inherit this class should implement it.
+   * Set children output.
    *
-   * @param {HTMLElement} element - Current element.
-   * @returns {boolean} Can be handle.
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
    */
-  static canHandle(element) {
-    throw new Error(`Method not implemented! ${element}`);
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
   }
   /**
-   * Transform current text block to a DTO.
+   * Transform current output and children output to DTO
    *
-   * @returns {RTETextBlock} Current text block.
-   */
-  static currentTextBlockElementToDTO() {
-    const element = this.getCurrentTextBlockElement();
-    const firstNode = element.firstChild;
-    if (firstNode && firstNode.nodeName === 'SPAN' && firstNode.textContent === '\n') {
-      firstNode.remove();
-    }
-    if (element.childNodes.length > 0) {
-      const block = RTETextBlock.fromHTML(element, 'paragraph');
-      element.innerHTML = '';
-      return block;
+   * @returns {RTEContentBlock} - DTO.
+   */
+  toDto() {
+    const currentBlock = this.currentStrategy.handle(this.currentElements);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto())
+        .filter(Boolean));
     }
-    return null;
+    return currentBlock;
   }
+}
+
+/** Abstract class for block html element to RTE block dto */
+class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
   /**
-   * Get current text block element.
+   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
+   *   flat the child nodes.
    *
-   * @returns {HTMLDivElement} - Current text block element.
-   */
-  static getCurrentTextBlockElement() {
-    return ElementToDTOHandlerAbstract.currentTextBlockElement;
+   * Example:
+   *   <li>
+   *     <u><i>text1</i></u>
+   *     <span style='font-weight: bold;'><span>text2</span></span>
+   *     text3
+   *   </li>
+   * will tranform to:
+   *   <li>
+   *     <span>text1</span> // with underline and italic annotations
+   *     <span>text2</span> // with bold annotations
+   *     <span>text3</span> // no annotations
+   *   </li>
+   *
+   * @param {HTMLElement[]} elements - Child elements.
+   * @param {HTMLElement[]} annotations - Parent annotations.
+   * @returns {VegaRTETextNode[]} - Text node DTO.
+   */
+  generateChildNodes(elements, annotations = {}) {
+    const childNodes = [];
+    elements.forEach((child) => {
+      if (child.nodeType === Node.TEXT_NODE) {
+        if (this.isInvalidTextNode(child))
+          return;
+        childNodes.push({
+          id: generateUUID(),
+          type: 'text',
+          text: child.textContent,
+          annotations: annotations,
+        });
+      }
+      else {
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child))));
+      }
+    });
+    return childNodes;
   }
   /**
-   * While it a empty block. we should use new line span instead this block.
+   * Generate annotations map for block element.
    *
-   * @param {HTMLElement} blockElement - Current block element.
-   * @returns {boolean} - is handled.
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTEBlockAnnotations} - Text block annotations.
    */
-  handleEmptyBlock(blockElement) {
-    if (this.currentVirtualElement.childNodes.length === 0) {
-      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.createNewLineSpan());
-      return true;
-    }
-    return false;
+  generateBlockAnnotations(element) {
+    const annotations = {};
+    const textAlign = this.getTextAlign(element);
+    const indent = this.getIndent(element);
+    if (textAlign)
+      annotations.textAlign = textAlign;
+    if (indent)
+      annotations.indent = indent;
+    return annotations;
   }
   /**
-   * Inherit style of parent.
+   * Check is a invalid text node.
    *
-   * @param {HTMLElement} element - Current element.
+   * @param {HTMLElement} element - Current node element.
+   * @returns {boolean} - boolean.
    */
-  setEntityElementStyle(element) {
-    if (element.nodeType === Node.TEXT_NODE)
-      return;
-    let currentStyle = element.getAttribute('style') || '';
-    const currentClass = element.classList;
-    const parent = element.parentElement;
-    const parentStyle = parent.getAttribute('style') || '';
-    const parentClass = parent.classList;
-    switch (element.nodeName) {
-      case 'CODE':
-        currentClass.add('v-rte--code');
-        break;
-      case 'STRONG':
-        currentStyle += 'font-weight: bold; ';
-        break;
-      case 'I':
-      case 'EM':
-        currentStyle += 'font-style: italic; ';
-        break;
-      case 'S':
-        currentClass.add('v-rte--strikethrough');
-        break;
-      case 'U':
-        currentClass.add('v-rte--underline');
-        break;
+  isInvalidTextNode(element) {
+    if (element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
     }
-    element.setAttribute('style', parentStyle + currentStyle);
-    element.classList.add(...Array.from(parentClass));
+    return false;
   }
   /**
-   * Set current element.
-   *   while element is a text node, we should wrap it and inherit it style
-   *   otherwise, we should clone it and clear content.
+   * Generate annotations map for text node element.
    *
-   * @param {HTMLElement} element - Current element.
-   */
-  setElement(element) {
-    this.currentEntityElement = element;
-    if (element.nodeType === Node.TEXT_NODE) {
-      const wrapper = document.createElement('span');
-      wrapper.setAttribute('style', element.parentElement.getAttribute('style'));
-      wrapper.setAttribute('class', element.parentElement.getAttribute('class'));
-      wrapper.append(element);
-      this.currentVirtualElement = wrapper;
-    }
-    else {
-      const elementClone = element.cloneNode(true);
-      elementClone.innerHTML = '';
-      this.currentVirtualElement = elementClone;
-    }
+   * @param {HTMLElement} element - current element.
+   * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
+   */
+  generateTextNodeAnnotations(element) {
+    if (this.isCode(element))
+      return { code: true };
+    const annotations = {
+      bold: this.isBold(element),
+      italic: this.isItalic(element),
+      underline: this.isUnderline(element),
+      strikethrough: this.isStrikethrough(element),
+    };
+    const color = this.getColor(element);
+    const link = this.getLink(element);
+    if (color)
+      annotations.textColor = color;
+    if (link)
+      annotations.link = link;
+    return annotations;
   }
   /**
-   * Create a new line span.
+   * Is code element.
    *
-   * @returns {HTMLElement} - new line span.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  createNewLineSpan() {
-    const span = document.createElement('span');
-    span.append('\n');
-    return span;
+  isCode(element) {
+    return element.classList.contains('v-rte--code') || element.nodeName === 'CODE';
   }
-}
-ElementToDTOHandlerAbstract.currentTextBlockElement = document.createElement('div');
-
-/**
- * Transform image element to DTO.
- */
-class ImageToDTOHandler extends ElementToDTOHandlerAbstract {
   /**
-   * Can be transform.
+   * Is bold element.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  static canHandle(element) {
-    return (element.nodeType === Node.ELEMENT_NODE &&
-      (element.nodeName === 'IMG' || element.querySelector('vega-rich-text-image-editor') !== null));
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700');
   }
   /**
-   * Special the child elements of current.
+   * Is italic element.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  childElements() {
-    return [];
+  isItalic(element) {
+    return element.nodeName === 'I' || element.style.fontStyle === 'italic' || element.nodeName === 'EM';
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Is underline element.
    *
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  handle() {
-    return [
-      ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-      RTEImageBlock.fromHTML(this.currentEntityElement),
-    ];
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.classList.contains('v-rte--underline'));
   }
   /**
-   * Get the block element for child nodes
+   * Is strikethrough element.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.classList.contains('v-rte--strikethrough'));
   }
-}
-
-/**
- * Transform link element to DTO.
- */
-class InlineBlockToDTOHandler extends ElementToDTOHandlerAbstract {
   /**
-   * Can be transform.
+   * Get current color of element.
    *
-   * @returns {boolean} Result.
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
    */
-  static canHandle() {
-    return true;
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      const colorSchema = RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
   }
   /**
-   * Special the child elements of current.
+   * Get current link of element.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTELink>} - link.
+   */
+  getLink(element) {
+    if (element.nodeName === 'A') {
+      return {
+        href: element.href,
+        groupKey: generateUUID(),
+      };
+    }
+    return null;
   }
   /**
-   * The inline block is a child element, and there is no need to convert it to a dto here
+   * Get text align of current element.
    *
-   * @returns {RTEContentBlock[]} - Empty dto.
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
    */
-  handle() {
-    return [];
+  getTextAlign(element) {
+    const classList = element.classList;
+    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
+      return 'left';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
+      return 'center';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
+      return 'right';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
+      return 'justify';
+    }
+    const style = element.style;
+    switch (style.textAlign) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'right';
+      case 'justify':
+        return 'justify';
+      case 'left':
+        return 'left';
+      default:
+        return null;
+    }
   }
   /**
-   * Get the block element for child nodes
+   * Get indent of current element.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {Nullable<HTMLElement>} - blockElement.
-   */
-  getNextBlockElement(blockElement) {
-    return blockElement;
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
   }
 }
 
-/**
- * Transform link element to DTO.
- */
-class LinkToDTOHandler extends ElementToDTOHandlerAbstract {
-  constructor(element) {
-    super(element);
-  }
-  /**
-   * Can be transform.
-   *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
-   */
-  static canHandle(element) {
-    return ['A'].includes(element.nodeName);
-  }
+/** Transform continue inline block elements to text block DTO */
+class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Special the child elements of current.
+   * Can be handle.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (element.nodeType === Node.TEXT_NODE ||
+        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
+          !(element.textContent === '' && element.querySelector('IMG')))) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
   }
   /**
-   * Format and append element for it block element.
+   * Parse to a text block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    const key = generateUUID();
-    Array.from(this.currentVirtualElement.children).forEach((childElement) => {
-      childElement.setAttribute('data-href', this.currentVirtualElement.href);
-      childElement.setAttribute('data-group-key', key);
-      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(childElement);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const parent = elementsArray[0].parentElement;
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: nodes,
+      annotations: this.generateBlockAnnotations(parent),
     });
-    return [];
   }
+  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return false;
   }
 }
+ContinueInlineToRTETextBlockStrategy.canHandleTags = [
+  'SPAN',
+  'STRONG',
+  'CODE',
+  'I',
+  'EM',
+  'S',
+  'U',
+  'A',
+  'VEGA-RICH-TEXT-LINK-EDITOR',
+];
 
-/**
- * Transform list element to DTO.
- */
-class ListItemToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform ul element to list block DTO */
+class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['LI'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
   }
   /**
-   * Append list item node to it block element.
+   * Append child list item blocks to current list block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
    */
-  handle(blockElement) {
-    blockElement.append(this.currentVirtualElement);
-    return [];
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
   }
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Transform list element to DTO.
- */
-class ListToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform li element to list item block DTO */
+class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['UL', 'OL'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a list item block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName))),
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to append and wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Append child list blocks to current list item block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
    */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement && ListItemToDTOHandler.canHandle(blockElement)) {
-      blockElement.append(this.currentVirtualElement);
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        RTEListBlock.fromHTML(this.currentVirtualElement),
-      ];
-    }
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
   }
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Transform paragraph.
- */
-class ParagraphToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform inline block element to text block DTO */
+class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return ['DIV', 'P'].includes(element.nodeName);
+  canHandle(elementsArray, currentIndex) {
+    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
   }
   /**
-   * Special the child elements of current.
+   * Parse to a text block.
    *
-   * @returns {HTMLElement[]} - child elements.
-   */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
-  }
-  /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
-   *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement && !ParagraphToDTOHandler.canHandle(blockElement)) {
-      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        RTETextBlock.fromHTML(this.currentVirtualElement, 'paragraph'),
-      ];
-    }
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: this.getElementType(elementsArray[0]),
+      nodes: nodes,
+      annotations: Object.assign(Object.assign({}, this.generateBlockAnnotations(elementsArray[0])), { textStyle: this.getElementType(elementsArray[0]) }),
+    });
   }
+  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
-   *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * Append child blocks.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
-  }
-}
-
-/**
- * Transform text block element to DTO.
- */
-class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
   /**
-   * Can be transform.
+   * Should continue process to child elements.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @returns {boolean} - boolean.
    */
-  static canHandle(element) {
-    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(element));
+  shouldProceedToElementChildren() {
+    return false;
   }
   /**
-   * Get type of element.
+   * Get node type of element.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {string} type.
+   * @param {HTMLElement} element - element.
+   * @returns {string} - node type.
    */
-  static getElementType(element) {
+  getElementType(element) {
+    var _a;
     if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
       return element.getAttribute('data-type');
     }
+    switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
+      case '36px':
+        return 'title';
+      case '28px':
+        return 'subtitle';
+      case '22px':
+        return 'heading-1';
+      case '20px':
+        return 'heading-2';
+      case '18px':
+        return 'heading-3';
+    }
     switch (element.nodeName) {
       case 'H1':
         return 'heading-1';
@@ -3357,139 +3441,269 @@ class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
         return '';
     }
   }
+}
+
+/** Transform img element to image block DTO */
+class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Special the child elements of current.
+   * Can be handle.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  childElements() {
-    return Array.from(this.currentEntityElement.childNodes);
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
   }
   /**
-   * Transform element to DTO.
-   *   When blockElement is exist, it means that the current element is a child node,
-   *   and we need to wait for its root block to be converted into a dto.
-   *   Otherwise, the current node is the root node, and we can directly convert it.
+   * Parse to a image block.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
-   */
-  handle(blockElement) {
-    if (this.handleEmptyBlock(blockElement)) {
-      return [];
-    }
-    if (blockElement) {
-      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
-      return [];
-    }
-    else {
-      return [
-        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
-        RTETextBlock.fromHTML(this.currentVirtualElement, TextBlockToDTOHandler.getElementType(this.currentVirtualElement)),
-      ];
-    }
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
   }
+  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement} - Block element for child nodes.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement() {
-    return this.currentVirtualElement;
+  shouldProceedToElementChildren() {
+    return false;
   }
 }
 
-/**
- * Transform text element to DTO.
- */
-class TextToDTOHandler extends ElementToDTOHandlerAbstract {
+/** Transform vega-rich-text-image-editor element to image block DTO */
+class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be transform.
+   * Can be handle.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {boolean} Result.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  static canHandle(element) {
-    return element.nodeType === Node.TEXT_NODE;
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: image.src,
+          annotations: {
+            size: element.size || 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
   }
   /* istanbul ignore next */
   /**
-   * Special the child elements of current.
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @returns {HTMLElement[]} - child elements.
+   * @returns {boolean} - boolean.
    */
-  childElements() {
-    return [];
+  shouldProceedToElementChildren() {
+    return false;
   }
+}
+
+/** Transform ol element to list block DTO */
+class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Append text node to it block element.
+   * Can be handle.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {RTEContentBlock[]} - Block DTO.
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
    */
-  handle(blockElement) {
-    (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.currentVirtualElement);
-    return [];
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  }
+  /**
+   * Parse to a number list block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: this.generateBlockAnnotations(elementsArray[0]),
+    });
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.blocks = childBlocks;
+    childBlocks.forEach((block) => (block.parent = currentBlock));
   }
-  /* istanbul ignore next */
   /**
-   * Get the block element for child nodes
+   * Should continue process to child elements.
    *
-   * @param {Nullable<HTMLElement>} blockElement - Current block container.
-   * @returns {Nullable<HTMLElement>} - blockElement.
+   * @returns {boolean} - boolean.
    */
-  getNextBlockElement(blockElement) {
-    return blockElement;
+  shouldProceedToElementChildren() {
+    return true;
   }
 }
 
-/**
- * Element to DTO processor
- */
-class ElementToDTOProcessor {
-  constructor() {
-    this.elementHandlers = [
-      TextToDTOHandler,
-      ImageToDTOHandler,
-      ListToDTOHandler,
-      ListItemToDTOHandler,
-      TextBlockToDTOHandler,
-      ParagraphToDTOHandler,
-      LinkToDTOHandler,
-      InlineBlockToDTOHandler,
-    ];
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0].querySelector('img');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
   }
+  /* istanbul ignore next */
   /**
-   * Transform element to block DTO.
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
    *
-   * @param {HTMLElement} element - An pasted element.
-   * @returns {RTEContentBlock[]} Block DTO.
+   * @returns {boolean} - boolean.
    */
-  process(element) {
-    const blocks = this.transformDomToDto(Array.from(element.childNodes), null);
-    blocks.push(ElementToDTOHandlerAbstract.currentTextBlockElementToDTO());
-    return blocks.filter(Boolean);
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Element to DTO processor */
+class ElementToDtoStrategyProcessor {
+  constructor() {
+    this.elementStrategies = [
+      new UlToRTEListBlockStrategy(),
+      new OlToRTEListBlockStrategy(),
+      new LiToRTEListItemBlockStrategy(),
+      new InlineBlockToRTETextBlockStrategy(),
+      new ImgToRTEImageBlockStrategy(),
+      new VegaImageToRTEImageBlockStrategy(),
+      new SpanImageToRTEImageBlockStrategy(),
+      new ContinueInlineToRTETextBlockStrategy(),
+    ];
   }
   /**
-   * Transform elements to block DTO.
+   * Transform process.
    *
-   * @param {HTMLElement[]} elements - An pasted elements.
-   * @param {HTMLElement} blockElement - Current block element.
-   * @returns {RTEContentBlock[]} Block DTO.
-   */
-  transformDomToDto(elements, blockElement) {
-    const rootBlocks = [];
-    elements.forEach((element) => {
-      if (this.isInvalidElement(element))
-        return;
-      const handler = this.elementHandlers.find((elementHandler) => elementHandler.canHandle(element));
-      const handle = new handler(element);
-      if (element.nodeType !== Node.TEXT_NODE) {
-        rootBlocks.push(...this.transformDomToDto(handle.childElements(), handle.getNextBlockElement(blockElement)));
+   * @param {HTMLElement[]} elements - Current elements.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements) {
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i]))
+        continue;
+      let canHandledCount = 0;
+      for (const strategy of this.elementStrategies) {
+        canHandledCount = strategy.canHandle(elements, i);
+        if (canHandledCount > 0) {
+          const handledElements = elements.slice(i, i + canHandledCount);
+          const output = new ElementToDTOStrategyOutput(strategy, handledElements);
+          if (canHandledCount === 1 && strategy.shouldProceedToElementChildren()) {
+            output.setChildrenOutput(this.process(Array.from(handledElements[0].childNodes)));
+          }
+          outputs.push(output);
+          i += canHandledCount - 1;
+          break;
+        }
       }
-      rootBlocks.push(...handle.handle(blockElement));
-    });
-    return rootBlocks;
+      if (canHandledCount === 0 && i < elements.length) {
+        const elementChildren = Array.from(elements[i].childNodes);
+        const childrenOutputs = this.process(Array.from(elementChildren));
+        if (childrenOutputs.length > 0) {
+          outputs.push(...childrenOutputs);
+        }
+      }
+    }
+    return outputs;
   }
   /**
    * Checks if the given element is valid to parse.
@@ -3500,11 +3714,6 @@ class ElementToDTOProcessor {
   isInvalidElement(element) {
     if (element.nodeType === Node.COMMENT_NODE)
       return true;
-    if (element.nodeType === Node.TEXT_NODE && element.nodeValue.includes('\t')) {
-      const value = element.nodeValue.replace(/\n|\t/gm, '');
-      if (value.length === 0)
-        return true;
-    }
     return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
   }
 }
@@ -3515,7 +3724,7 @@ class ElementToDTOProcessor {
 class InsertPasteHandler extends BaseHandler {
   constructor() {
     super(...arguments);
-    this.elementToDTOProcessor = new ElementToDTOProcessor();
+    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
   }
   /**
    * Update the state value when user paste html elements.
@@ -3581,7 +3790,11 @@ class InsertPasteHandler extends BaseHandler {
     const pastedHTML = event.dataTransfer.getData('text/html');
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor.process(tempContainer);
+    return this.elementToDTOProcessor
+      .process(Array.from(tempContainer.childNodes))
+      .filter(Boolean)
+      .map((output) => output.toDto())
+      .filter(Boolean);
   }
   /**
    * Moves the caret to the next block element in a rich text editor.