@globalpayments/vega 2.61.0 → 2.62.0

package/dist/esm/{content-state-fc47457c.js → dto-renderer-manager-af66bbd9.js}

@@ -1,11 +1,11 @@
-import { A as ActionHandleStrategy, R as RTETextBlock, a as RTETextNode, b as AppendChildrenAction, c as ActionHandleStrategyRegistry, M as ModifyContentActionType, B as BlockInsertLineBreakStrategy, d as BlockInsertLineBreakWithBlocksStrategy, e as BlockSplitWithTextNodeStrategy, f as BlockReplaceNodesStrategy, g as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, h as RemoveChildrenAction, S as SyncUpSelectionAction, i as InsertChildrenBeforeAction, j as BlockAnnotation, k as BlockAnnotationTypeEnum, l as RTEBlock, C as CustomStyleAnnotation, m as CustomClassAnnotation, n as CustomAttributeAnnotation, o as RTECodeBlock, s as stateEntityRenderingRegistry, N as NodeAnnotation, p as NodeAnnotationTypeEnum, q as RTEDecoratorNode, r as NodeTypeEnum, t as CommonAnnotation, u as AnnotationAction, v as ReplaceChildNodesAction, w as ModifyContentAction, x as SplitBlockWithNodeAction, H as HorizontalAlignmentAnnotationAction, y as BlockUpdateHorizontalAlignmentStrategy, z as RTEDTOClassManager, D as BlockDeleteNodeContentStrategy, U as UpdateTextAction, E as RemoveChildrenStrategy, F as RTE_TEXT_COLORS, G as RTE_DEFAULT_TEXT_COLOR } from './code-block-89a4dd13.js';
+import { c as ActionHandleStrategy, d as RTETextBlock, a as RTETextNode, e as AppendChildrenAction, A as ActionHandleStrategyRegistry, b as ModifyContentActionType, B as BlockInsertLineBreakStrategy, f as BlockInsertLineBreakWithBlocksStrategy, g as BlockSplitWithTextNodeStrategy, h as BlockReplaceNodesStrategy, i as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, j as RemoveChildrenAction, S as SyncUpSelectionAction, k as InsertChildrenBeforeAction, l as BlockAnnotation, m as BlockAnnotationTypeEnum, n as RTEBlock, C as CustomStyleAnnotation, o as CustomClassAnnotation, p as CustomAttributeAnnotation, q as RTECodeBlock, r as RTE_TEXT_COLORS, t as RTE_DEFAULT_TEXT_COLOR, s as stateEntityRenderingRegistry, N as NodeAnnotation, u as NodeAnnotationTypeEnum, v as RTEDecoratorNode, w as NodeTypeEnum, x as CommonAnnotation, y as AnnotationAction, z as ReplaceChildNodesAction, M as ModifyContentAction, D as SplitBlockWithNodeAction, H as HorizontalAlignmentAnnotationAction, E as BlockUpdateHorizontalAlignmentStrategy, R as RTEDTOClassManager, F as BlockDeleteNodeContentStrategy, U as UpdateTextAction, G as RemoveChildrenStrategy } from './code-block-68300b47.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
 import { i as isNonNullable } from './type-guard-12f7654b.js';
-import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-3c2e13f1.js';
-import { a as VegaInternalUpdateRTECursorPosition } from './vega-internal-event-id-5a143cd2.js';
 import { d as dashCaseToCamel } from './string-a953eafc.js';
 import { r as rgbToHex, i as isHTMLElement } from './ui-c20be16d.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-c7bc3035.js';
+import { a as VegaInternalUpdateRTECursorPosition } from './vega-internal-event-id-5a143cd2.js';
 import { c as cleanObject } from './object-66c37948.js';
 
 /**
@@ -495,2006 +495,2080 @@ class BlockTransformToCodeBlockStrategy extends ActionHandleStrategy {
 }
 
 /**
- * Abstract class to define strategies for processing HTML elements
+ * Abstract class to define handler for generate the annotations
  */
-class ElementToDTOStrategy {
+class AnnotationGeneratorStrategyAbstract {
 }
-/**
- * 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;
+
+/** Handle bold annotation */
+class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * Set children output.
+   * Handle annotation.
    *
-   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  setChildrenOutput(childrenOutput) {
-    this.childrenOutput = childrenOutput;
+  handle(element, parentAnnotations = {}) {
+    return this.isBold(element) || parentAnnotations.bold ? { bold: true } : {};
   }
   /**
-   * Transform current output and children output to DTO
+   * Is bold element.
    *
-   * @param {VegaRTETransformOptions} [options] - Options for transformation.
-   * @returns {Nullable<RTEContentBlock>} - DTO.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  toDto(options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
-    const currentBlock = this.currentStrategy.handle(this.currentElements, options);
-    if (this.childrenOutput.length > 0 && currentBlock) {
-      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
-        .map((childOutput) => childOutput.toDto(options))
-        .filter(isNonNullable));
-    }
-    return currentBlock;
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700' ||
+      element.classList.contains('v-rte--bold'));
   }
 }
 
-/**
- * Manager for registering and retrieving strategies that convert HTML elements to DTOs.
- */
-class elementToDTOClassStrategyManager {
-  constructor() {
-    this.elementToBlockStrategies = [];
-    this.elementToNodeStrategies = [];
+/** Handle custom attribute annotation */
+class CustomAttributeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
   }
   /**
-   * Registers a element to block strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
+   * Handle annotation.
    *
-   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  registerElementToBlockStrategy(strategy) {
-    if (!this.hasDuplicateStrategy(strategy, this.elementToBlockStrategies)) {
-      this.elementToBlockStrategies.unshift(strategy);
-    }
+  handle(element) {
+    const attributes = this.getAttributes(element);
+    return Object.keys(attributes).length > 0 ? { customAttribute: attributes } : {};
   }
   /**
-   * Registers an element to node strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
    *
-   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   * @param {HTMLElement} element - current element.
+   * @returns {Record<string, string>} - Record<string, string>.
    */
-  registerElementToNodeStrategy(strategy) {
-    if (!this.hasDuplicateStrategy(strategy, this.elementToNodeStrategies)) {
-      this.elementToNodeStrategies.unshift(strategy);
-    }
+  getAttributes(element) {
+    const attributeNames = element
+      .getAttributeNames()
+      .filter((attr) => attr !== 'style' && attr !== 'class' && this.isValidAttr(attr));
+    return attributeNames.reduce((acc, item) => {
+      acc[item] = element.getAttribute(item);
+      return acc;
+    }, {});
   }
   /**
-   * Retrieves all registered element to block strategies for converting HTML elements to DTOs.
+   * Check if the attribute name is valid.
    *
-   * @returns {ElementToDTOStrategy[]} - A set of all registered element to block strategies.
+   * @param {string} attr - Attribute name.
+   * @returns {boolean} - True if valid, false otherwise.
    */
-  getElementToBlockStrategies() {
-    return this.elementToBlockStrategies;
+  isValidAttr(attr) {
+    return /^[a-zA-Z_][\w-]*$/.test(attr);
   }
+}
+
+/** Handle custom class annotation */
+class CustomClassAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * Retrieves all registered element to node strategies for converting HTML elements to DTOs.
+   * Can be handle.
    *
-   * @returns {ElementToDTOStrategy[]} - A set of all registered element to node strategies.
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
    */
-  getElementToNodeStrategies() {
-    return this.elementToNodeStrategies;
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
   }
   /**
-   * Checks if a strategy is already registered in the provided strategy list.
+   * Handle annotation.
    *
-   * @param {ElementToDTOStrategy} strategy - The strategy to check for duplicates.
-   * @param {ElementToDTOStrategy[]} strategyList - The list of strategies to check against.
-   * @returns {boolean} - True if the strategy is a duplicate, false otherwise.
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  hasDuplicateStrategy(strategy, strategyList) {
-    return strategyList.includes(strategy);
+  handle(element) {
+    const classes = this.getCustomClass(element);
+    return classes.length > 0 ? { customClass: classes } : {};
+  }
+  /**
+   * Get the custom class
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {string[]} - the class after .
+   */
+  getCustomClass(element) {
+    return element.classList
+      .toString()
+      .split(' ')
+      .filter((item) => !item.includes('v-rte') && item !== '');
   }
 }
-const ElementToDTOClassStrategyManager = new elementToDTOClassStrategyManager();
 
-/** Element to DTO processor */
-class ElementToDtoStrategyProcessor {
+/** Handle custom style annotation */
+class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * Transform process.
+   * Can be handle.
    *
-   * @param {HTMLElement[]} elements - Current elements.
-   * @param {VegaRTETransformOptions} [options] - Options for transformation.
-   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
+   * @returns {boolean} - .
    */
-  process(elements, options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
-    const strategies = this.getElementToBlockStrategies();
-    const outputs = [];
-    for (let i = 0; i < elements.length; i++) {
-      if (this.isInvalidElement(elements[i]))
-        continue;
-      let canHandledCount = 0;
-      for (const strategy of strategies) {
-        canHandledCount = strategy.canHandle(elements, i, options);
-        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), options));
-          }
-          outputs.push(output);
-          i += canHandledCount - 1;
-          break;
-        }
-      }
-      if (canHandledCount === 0 && i < elements.length) {
-        const elementChildren = Array.from(elements[i].childNodes);
-        const childrenOutputs = this.process(Array.from(elementChildren), options);
-        if (childrenOutputs.length > 0) {
-          outputs.push(...childrenOutputs);
-        }
-      }
-    }
-    return outputs;
+  canHandle(targetDto, options) {
+    return !options.skipCustomAnnotations && !!targetDto;
   }
   /**
-   * Checks if the given element is valid to parse.
+   * Handle annotation.
    *
-   * @param {HTMLElement} element - The pasted element.
-   * @returns {boolean} Is valid
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  isInvalidElement(element) {
-    if (element.nodeType === Node.COMMENT_NODE)
-      return true;
-    return ['META', 'STYLE'].includes(element.nodeName);
+  handle(element) {
+    const styles = this.generateCustomStyleAnnotations(element);
+    return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
   }
   /**
-   * Get the register element to block strategies.
+   * Obtain and format the style of element.
    *
-   * @returns {ElementToDTOStrategy[]} - The register element to block strategies.
+   * @param {HTMLElement} element - current element.
+   * @returns {AnnotationStyle} - Record<string, string>.
    */
-  getElementToBlockStrategies() {
-    return ElementToDTOClassStrategyManager.getElementToBlockStrategies();
+  generateCustomStyleAnnotations(element) {
+    const customStyle = element.getAttribute('style');
+    if (!customStyle)
+      return {};
+    const styleValue = customStyle.split(';').filter(Boolean);
+    return styleValue
+      .filter((key) => key !== ' ')
+      .map((key) => {
+      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
+      const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
+      const styleKey = dashCaseToCamel(styleObject[0].trim());
+      return {
+        [styleKey]: styleObject[1].trim().replace(';', ''),
+      };
+    })
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
   }
 }
-const ElementToDtoStrategyProcessor$1 = new ElementToDtoStrategyProcessor();
 
-/**
- * Update the cursor position in the editor.
- */
-class UpdateCursorPositionStrategy extends ActionHandleStrategy {
+/** Handle indent annotation */
+class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    const { offset, nextFocusNode } = action;
-    const host = stateEntityRenderingRegistry.getDOMByEntity(target);
-    if (host) {
-      ChangeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalUpdateRTECursorPosition), {
-        node: nextFocusNode,
-        offset,
-      });
-    }
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
   }
-}
-
-/**
- * Append new block array or node array to block or VegaRTEContent instance strategy.
- */
-class AppendChildrenStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
    */
-  handleAction(action, target) {
-    const newBlocks = action.entityToBeAppended;
-    if (target.children) {
-      newBlocks.forEach((block) => {
-        block.parent = target;
-      });
-      // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
-      const arrayFixed = target.children;
-      target.children = arrayFixed.concat(newBlocks);
+  handle(element) {
+    const indent = this.getIndent(element);
+    return indent ? { indent: indent } : {};
+  }
+  /**
+   * Get indent of current element.
+   *
+   * @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;
   }
 }
 
-/**
- * Insert children at the front of the block strategy.
- */
-class InsertChildrenBeforeStrategy extends ActionHandleStrategy {
+/** Handle text align annotation */
+class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * @inheritDoc
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
    */
-  handleAction(action, target) {
-    this.replaceElementWithElements(target, action.referChildren, [
-      ...action.childrenToBeInserted,
-      action.referChildren,
-    ]);
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
   }
   /**
-   * Replaces a specific block or node with an array of blocks or nodes within RTEContentBlock array.
+   * Handle annotation.
    *
-   * @param {RTEBlock | VegaRTEContent} target - The block or the VegaRTEContent instance.
-   * @param {RTEBlock | RTENode} referElement - Used as a reference element to identify the element that needs to be replaced in the array.
-   * @param {RTEBlock[] | RTENode[]} elements - An array of block or node objects that you want to replace the `referElement` with in the array.
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
    */
-  replaceElementWithElements(target, referElement, elements) {
-    if (target.children) {
-      elements.forEach((block) => {
-        block.parent = target;
-      });
-      const arrayFixed = target.children;
-      target.children = arrayFixed.flatMap((block) => {
-        if (block === referElement) {
-          return elements;
-        }
-        else {
-          return block;
-        }
-      });
+  handle(element) {
+    const textAlign = this.getTextAlign(element);
+    return textAlign ? { textAlign: textAlign } : {};
+  }
+  /**
+   * Get text align of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   */
+  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;
     }
   }
 }
 
-/**
- * Insert children at the front of the block strategy.
- */
-class InsertChildrenAfterStrategy extends InsertChildrenBeforeStrategy {
+/** Handle code annotation */
+class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    this.replaceElementWithElements(target, action.referChildren, [
-      action.referChildren,
-      ...action.childrenToBeInserted,
-    ]);
-  }
-}
-
-/**
- * Annotation for image
- */
-class ImageAnnotation extends NodeAnnotation {
-  constructor(size, alt) {
-    super();
-    this.type = NodeAnnotationTypeEnum.IMAGE;
-    this.size = size;
-    this.alt = alt;
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * Generate the map item for the annotation
+   * Handle annotation.
    *
-   * @param {string} size - Image size
-   * @param {string} alt - Image alt
-   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  static from(size, alt) {
-    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
+  handle(element, parentAnnotations = {}) {
+    return this.isCode(element) || parentAnnotations.code ? { code: true } : {};
   }
   /**
-   * Generate the JSON representation of the annotation
+   * Is code element.
    *
-   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  toJSON() {
-    return isNonNullable(this.alt)
-      ? {
-        size: this.size,
-        alt: this.alt,
-      }
-      : {
-        size: this.size,
-      };
+  isCode(element) {
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.nodeName === 'PRE' ||
+      element.style.fontFamily === 'monospace' ||
+      element.style.fontFamily.replace(/["']/g, '') === 'Roboto Mono');
   }
+}
+
+/** Handle color annotation */
+class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  clone() {
-    return new ImageAnnotation(this.size, this.alt);
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  renderClass(options) {
-    if (options === null || options === void 0 ? void 0 : options.standalone)
-      return null;
-    return this.size ? `v-rte--image-size-${this.size}` : null;
+  handle(element, parentAnnotations = {}) {
+    const color = this.getColor(element) || parentAnnotations.textColor;
+    return color ? { textColor: color } : {};
   }
   /**
-   * @inheritDoc
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
    */
-  renderStyle(options) {
-    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      // We don't display default text color as inline style, because we defined it in the vega-rich-text-content.scss.
+      const colorSchema = RTE_TEXT_COLORS.filter((item) => item.key !== RTE_DEFAULT_TEXT_COLOR.key).find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
       return null;
-    const baseStyle = { verticalAlign: 'bottom' };
-    switch (this.size) {
-      case 'sm': {
-        return Object.assign(Object.assign({}, baseStyle), { width: '25%' });
-      }
-      case 'md': {
-        return Object.assign(Object.assign({}, baseStyle), { width: '50%' });
-      }
-      case 'lg': {
-        return Object.assign(Object.assign({}, baseStyle), { width: '100%' });
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
       }
+      return null;
     }
   }
 }
 
-/**
- * Update the image node annotation map strategy.
- */
-class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
+/** Handle italic annotation */
+class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    const annotation = action.toAnnotation();
-    target.annotationMap.set(annotation.type, annotation);
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
-}
-
-/**
- * The image node update property url strategy.
- */
-class ImageUpdateUrlStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  handleAction(action, target) {
-    target.url = action.url;
-  }
+  handle(element, parentAnnotations = {}) {
+    return this.isItalic(element) || parentAnnotations.italic ? { italic: true } : {};
+  }
+  /**
+   * Is italic element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isItalic(element) {
+    return (element.nodeName === 'I' ||
+      element.style.fontStyle === 'italic' ||
+      element.nodeName === 'EM' ||
+      element.classList.contains('v-rte--italic'));
+  }
 }
 
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
-/**
- * Image node
- */
-class RTEImageNode extends RTEDecoratorNode {
-  constructor(id, url, parentBlock, annotationMap) {
-    super(id, annotationMap);
-    this.type = NodeTypeEnum.IMAGE;
-    this.url = url;
-    this.parent = parentBlock;
+/** Handle link annotation */
+class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.handlers = [
+      new CustomAttributeAnnotationHandler(),
+      new CustomClassAnnotationHandler(),
+      new CustomStyleAnnotationHandler(),
+    ];
   }
   /**
-   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   * Can be handle.
    *
-   * @param {VegaRTEImageNode} node - The node to be converted.
-   * @param {RTEImageBlock} parentBlock - The parent block
-   * @param {VegaRTETransformOptions} options - Optional transformation options.
-   * @returns {RTEImageNode} An instance of `RTEImageBlock`
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
    */
-  static from(node, parentBlock, options = { autoMatchFormat: true }) {
-    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
-    const autoMatchFormat = !!options.autoMatchFormat;
-    const _a = Object.assign({}, node.annotations), { size } = _a, otherAnnotations = __rest(_a, ["size"]);
-    const annotations = Object.assign(Object.assign({}, otherAnnotations), { size: size !== null && size !== void 0 ? size : (autoMatchFormat ? 'md' : undefined) });
-    imageNode.annotationMap = new Map(Object.keys(annotations)
-      .map((type) => {
-      if (type === 'size' || type === 'alt') {
-        return ImageAnnotation.from(annotations.size, annotations.alt);
-      }
-      return this.createAnnotationEntity(type, annotations[type]);
-    })
-      .filter(isNonNullable));
-    return imageNode;
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  toJSON() {
-    const annotations = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof CommonAnnotation)
-      .reduce((record, annotation) => {
-      return Object.assign(Object.assign({}, record), annotation.toJSON());
-    }, {});
-    if (annotations.alt == '')
-      delete annotations.alt;
-    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  handle(element, parentAnnotations = {}) {
+    if (parentAnnotations.link)
+      return { link: parentAnnotations.link };
+    return element.tagName === 'A' ? { link: this.generateLinkAnnotations(element) } : {};
   }
   /**
-   * @inheritDoc
+   * Generate link annotations.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTELink} - link annotations.
    */
-  clone() {
-    return new RTEImageNode(this.id, this.url, this.parent, super.cloneAnnotations());
+  generateLinkAnnotations(element) {
+    const annotations = {
+      href: element.getAttribute('href') || '',
+      groupKey: generateUUID(),
+    };
+    this.handlers.forEach((handler) => {
+      Object.assign(annotations, handler.handle(element));
+    });
+    return annotations;
   }
+}
+
+/** Handle strike through annotation */
+class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
-    const attrStr = super.generateAttributeString(...[
-      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
-      `src="${this.url}"`,
-      imageAnnotation && imageAnnotation.size ? `data-size="${imageAnnotation.size}"` : null,
-    ].filter(isNonNullable));
-    return `<img${attrStr}>`;
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  doAnnotationActionApply(action) {
-    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
-    if (strategy) {
-      strategy.execute(action, this);
-    }
+  handle(element, parentAnnotations = {}) {
+    return this.isStrikethrough(element) || parentAnnotations.strikethrough
+      ? { strikethrough: true }
+      : {};
   }
   /**
-   * @inheritDoc
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  doModifyActionApply(action) {
-    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
+      element.classList.contains('v-rte--strikethrough'));
   }
 }
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
-  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
-})();
 
-/**
- * Split the current image block with a special position strategy.
- */
-class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
+/** Handle underline annotation */
+class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
   }
   /**
-   * The image offset should be 0 or 1
-   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   * Handle annotation.
    *
-   * @param {RTEImageNode} imageNode The split point image node.
-   * @param {number} imageOffset The cursor point 0 | 1.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {Nullable<RTEBlock>} The new block after split
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
    */
-  splitImageNodes(imageNode, imageOffset, target) {
-    const nodesSplitIndex = target.children.indexOf(imageNode);
-    if (nodesSplitIndex > -1) {
-      const beforeNodes = target.children.slice(0, nodesSplitIndex + imageOffset);
-      const afterNodes = target.children.slice(nodesSplitIndex + imageOffset);
-      target.apply(new ReplaceChildNodesAction(beforeNodes));
-      const newBlock = this.cloneWithNodes(afterNodes, target);
-      target.parent.apply(new InsertChildrenAfterAction(target, newBlock));
-      return newBlock;
-    }
+  handle(element, parentAnnotations = {}) {
+    return this.isUnderline(element) || parentAnnotations.underline ? { underline: true } : {};
   }
   /**
-   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   * Is underline element.
    *
-   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
    */
-  cloneWithNodes(nodes, target) {
-    const block = target.createNewImageBlock();
-    block.children = [];
-    block.apply(new AppendChildrenAction(nodes));
-    return block;
-  }
-}
-
-/**
- * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
- * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
- * The property `newBlock` use to store the new create block if need.
- *
- * @example currentBlock.apply(new InsertNewParagraphAction(startContainerNode, startOffset))
- */
-class InsertNewParagraphAction extends ModifyContentAction {
-  constructor(startContainerNode, startOffset) {
-    super();
-    this.type = ModifyContentActionType.INSERT_NEW_PARAGRAPH;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
   }
 }
 
-/**
- * The image block insert line break strategy.
- */
-class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+/** Handle text style annotation */
+class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
+   * Can be handle.
    *
-   * @param {LineBreakSingleBlockAction} action - The action instance.
-   * @param {RTEImageBlock} target - The image block.
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for annotation generator.
+   * @returns {boolean} - .
    */
-  handleAction(action, target) {
-    const insertNewParagraphAction = new InsertNewParagraphAction(action.startContainerNode, action.startOffset);
-    target.apply(insertNewParagraphAction);
-    const newBlock = insertNewParagraphAction.newBlock;
-    if (newBlock) {
-      action.lineBreakNode = newBlock.children[0];
-    }
+  canHandle(targetDto, options) {
+    return !!options.autoMatchFormat && targetDto.name === 'RTETextBlock';
   }
-}
-
-/**
- * Insert a line break node into multiple blocks selection at special position strategy.
- */
-class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextBlockAnnotations} - Annotation.
    */
-  handleAction(action, target) {
-    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  handle(element) {
+    const textStyle = this.getTextStyle(element);
+    return textStyle ? { textStyle: textStyle } : {};
   }
   /**
-   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   * Get the node type of element. The element type is determined in the following
+   * order: "data-type" attribute, node name, font size and class name.
    *
-   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
-   * @param {RTEImageBlock} target - The image block.
-   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - node type.
    */
-  lineBreakMultipleBlocks(selectedBlocks, target) {
-    const newParagraph = RTETextBlock.from({
-      id: generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
-    });
-    target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
-    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
-    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
-      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
-    }
-    newParagraph.apply(new AppendChildrenAction(afterNodes));
-    return newParagraph['children'][0];
+  getTextStyle(element) {
+    const byDataType = this.getElementTypeByDataType(element);
+    if (byDataType)
+      return byDataType;
+    const byNodeName = this.getElementTypeByNodeName(element);
+    if (byNodeName)
+      return byNodeName;
+    const byFontSize = this.getElementTypeByFontSize(element);
+    if (byFontSize)
+      return byFontSize;
+    const byClassName = this.getElementTypeByClassName(element);
+    if (byClassName)
+      return byClassName;
+    return null;
   }
   /**
-   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   * Get the element type by data-type attribute.
    *
-   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
-   * @returns {RTENode[]} Array of connected block nodes
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
    */
-  concatBlocksNodes(blocks) {
-    const nodes = [];
-    blocks.map((block) => {
-      if (block.type !== 'image') {
-        nodes.push(...block.children);
-        block.parent.apply(new RemoveChildrenAction(block));
-      }
-    });
-    return nodes;
+  getElementTypeByDataType(element) {
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    return null;
   }
-}
-
-/**
- * Insert a image node at the special position of image block.
- */
-class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Get the element type by font size.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
    */
-  handleAction(action, target) {
-    const splitNode = action.splitPointNode;
-    const startOffsetOfNode = action.startOffsetOfNode;
-    const newImageBlock = action.imageBlockToBeInserted;
-    const newImageNodes = newImageBlock.children;
-    if (target.children.length < 1) {
-      target.apply(new AppendChildrenAction(newImageNodes));
-    }
-    else if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
-    }
-    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertChildrenBeforeAction(target, newImageBlock));
-    }
-    else {
-      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
-      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
+  getElementTypeByFontSize(element) {
+    var _a;
+    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';
+      default:
+        return null;
     }
   }
-}
-
-/**
- * Image block
- */
-class RTEImageBlock extends RTEBlock {
-  constructor(id) {
-    super(id);
-    this.type = 'image';
-    this.children = [];
-  }
   /**
-   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   * Get the element type by node name.
    *
-   * @param {VegaRTEImageBlock} block - The block object to be converted.
-   * @param {VegaRTETransformOptions} options - Optional transformation options.
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
    */
-  static from(block, options = { autoMatchFormat: true }) {
-    const imageBlock = new RTEImageBlock(block.id);
-    const { annotations } = block;
-    imageBlock.children = block.nodes.map((image) => RTEImageNode.from(image, imageBlock, options));
-    if (annotations) {
-      super.convertAnnotationsToMap(imageBlock.annotationMap, annotations);
+  getElementTypeByNodeName(element) {
+    switch (element.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
+      default:
+        return null;
     }
-    return imageBlock;
   }
   /**
-   * @inheritDoc
+   * Get the element type by class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
    */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.children.map((node) => node.toJSON()) });
+  getElementTypeByClassName(element) {
+    if (element.className) {
+      const match = /\bv-rte--text-style-(title|subtitle|heading-1|heading-2|heading-3|paragraph)\b/.exec(element.className);
+      if (match) {
+        return match[1];
+      }
+    }
+    return null;
   }
+}
+
+/** Handle image size annotation */
+class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  toHtml() {
-    const attrStr = super.generateAttributeString();
-    const children = this.children.map((node) => node.toHtml()).join('');
-    return super.shouldRenderAsInternalWrapper()
-      ? children
-      : [`<div${attrStr}>`, children, `</div>`].join('');
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
   }
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
    */
-  isNotEmpty() {
-    return this.children.length > 0 && this.children.some((node) => node.url.length > 0);
+  handle(element) {
+    const size = this.getImageSize(element);
+    return size ? { size: size } : {};
   }
   /**
-   * @inheritDoc
+   * Determine the image display size based on the width of the current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRichTextImageEditorSizeType>} -Image size, default 'md'.
    */
-  getLastNode() {
-    return this.children[this.children.length - 1];
+  getImageSize(element) {
+    if (element.getAttribute('data-size')) {
+      return element.getAttribute('data-size');
+    }
+    return null;
   }
+}
+
+/** Handle image alt annotation */
+class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * Create a new image block.
-   *
-   * @returns {RTEImageBlock} - The empty image block.
+   * @inheritDoc
    */
-  createNewImageBlock() {
-    return new RTEImageBlock(generateUUID());
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
   }
   /**
-   * @inheritDoc
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
    */
-  clone() {
-    const clonedBlock = new RTEImageBlock(this.id);
-    clonedBlock.children = this.children.map((node) => {
-      const clonedNode = node.clone();
-      clonedNode.parent = clonedBlock;
-      return clonedNode;
-    });
-    clonedBlock.annotationMap = super.cloneAnnotations();
-    clonedBlock.parent = this.parent;
-    return clonedBlock;
+  handle(element) {
+    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
   }
 }
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
-})();
 
 /**
- * HTML Block
+ * Handle inline html annotation
  */
-class RTEHtmlBlock extends RTEBlock {
-  constructor(id, htmlTag) {
-    super(id);
-    this.type = 'html-block';
-    this.children = [];
-    this.htmlTag = htmlTag;
+class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.customAttributeHandler = new CustomAttributeAnnotationHandler();
+    this.customStyleAnnotationHandler = new CustomStyleAnnotationHandler();
+    this.customClassAnnotationHandler = new CustomClassAnnotationHandler();
   }
   /**
-   * Converts a VegaRTEHtmlBlock to an RTEHtmlBlock.
-   *
-   * @param {VegaRTEHtmlBlock} block - The VegaRTEHtmlBlock to convert.
-   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
-   * @returns {RTEHtmlBlock} The converted RTEHtmlBlock.
+   * @inheritDoc
    */
-  static from(block, options) {
-    const htmlBlock = new RTEHtmlBlock(block.id, block.htmlTag);
-    const { annotations } = block;
-    if (annotations) {
-      super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
-    }
-    htmlBlock.children = block.children
-      .map((child) => {
-      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
-      if (BlockClass) {
-        const block = BlockClass.from(child, options);
-        block.parent = htmlBlock;
-        return block;
-      }
-    })
-      .filter(isNonNullable);
-    return htmlBlock;
+  canHandle(targetDto, options) {
+    return targetDto.name === 'RTETextNode' && options.autoMatchFormat === false;
   }
   /**
    * @inheritDoc
    */
-  clone() {
-    const clonedBlock = new RTEHtmlBlock(this.id, this.htmlTag);
-    clonedBlock.children = this.children.map((child) => child.clone());
-    clonedBlock.annotationMap = super.cloneAnnotations();
-    return clonedBlock;
+  handle(element, parentAnnotations) {
+    const canHandle = InlineHtmlAnnotationHandler.canHandleTags.includes(element.nodeName);
+    if (canHandle) {
+      const inlineHtml = this.generateInlineHtmlAnnotation(element, Object.assign({}, parentAnnotations));
+      if (inlineHtml) {
+        return { inlineHtml: inlineHtml };
+      }
+    }
+    return {};
   }
   /**
-   * @inheritDoc
+   * Generate inline html annotation.
+   *
+   * @param {HTMLElement} child - Current element.
+   * @param {VegaRTETextAnnotations} annotations - Current annotations.
+   * @returns {Nullable<VegaInlineHtmlSchema>} - Inline html annotation.
    */
-  getLastNode() {
-    return this.children[this.children.length - 1].getLastNode();
+  generateInlineHtmlAnnotation(child, annotations) {
+    let { inlineHtml } = annotations;
+    if (!RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ||
+      (child.childNodes.length === 1 && child.childNodes[0].nodeType !== Node.TEXT_NODE)) {
+      const childInlineHtmlNode = {
+        htmlTag: child.nodeName.toLowerCase(),
+        customAttribute: this.customAttributeHandler.handle(child).customAttribute,
+        customStyle: this.customStyleAnnotationHandler.handle(child).customStyle,
+        customClass: this.customClassAnnotationHandler.handle(child).customClass,
+      };
+      if (!inlineHtml) {
+        inlineHtml = childInlineHtmlNode;
+      }
+      else {
+        let lastChild = inlineHtml;
+        while (lastChild.child &&
+          child.parentNode &&
+          lastChild.child.htmlTag === child.parentNode.nodeName.toLowerCase()) {
+          lastChild = lastChild.child;
+        }
+        lastChild.child = childInlineHtmlNode;
+      }
+    }
+    return inlineHtml ? Object.assign({}, inlineHtml) : null;
   }
-  /**
-   * @inheritDoc
-   */
-  isNotEmpty() {
-    return this.children.length > 0;
+}
+InlineHtmlAnnotationHandler.canHandleTags = [
+  'A',
+  'ABBR',
+  'AUDIO',
+  'B',
+  'BDI',
+  'BDO',
+  'CITE',
+  'CODE',
+  'DEL',
+  'DFN',
+  'EMBED',
+  'EM',
+  'I',
+  'INS',
+  'KBD',
+  'MARK',
+  'METER',
+  'OUTPUT',
+  'PROGRESS',
+  'Q',
+  'S',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'TIME',
+  'U',
+  'VAR',
+  'VIDEO',
+];
+
+/** Html element to annotations generator */
+class HtmlElementToAnnotationGenerator {
+  constructor() {
+    this.handlers = [
+      new TextAlignAnnotationHandler(),
+      new IndentAnnotationHandler(),
+      new BoldAnnotationHandler(),
+      new ItalicAnnotationHandler(),
+      new UnderlineAnnotationHandler(),
+      new StrikeThroughAnnotationHandler(),
+      new ColorAnnotationHandler(),
+      new LinkAnnotationHandler(),
+      new CodeAnnotationHandler(),
+      new ImageSizeAnnotationHandler(),
+      new ImageAltAnnotationHandler(),
+      new CustomAttributeAnnotationHandler(),
+      new CustomClassAnnotationHandler(),
+      new CustomStyleAnnotationHandler(),
+      new LinkAnnotationHandler(),
+      new TextStyleAnnotationHandler(),
+      new InlineHtmlAnnotationHandler(),
+    ];
   }
   /**
-   * @inheritDoc
+   * The function generates annotations for a given target DTO and HTML element based on a set of
+   * strategies.
+   *
+   * @typedef T class name of target DTO
+   * @typedef V generated annotations type
+   * @param {T} targetDto - Which DTO is the generated annotations to set.
+   * @param {HTMLElement} element - Current html element.
+   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options
+   * @returns {V} Generated annotations.
    */
-  toHtml() {
-    const BlockTag = this.htmlTag;
-    const attrStr = super.generateAttributeString();
-    return [
-      `<${BlockTag}${attrStr}>`,
-      this.children.map((block) => block.toHtml()).join(''),
-      `</${BlockTag}>`,
-    ].join('');
+  generate(targetDto, element, options = { autoMatchFormat: true }) {
+    const isLinkElement = element.tagName === 'A';
+    return this.handlers
+      .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
+      .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
+      handler.canHandle(targetDto, {
+        skipCustomAnnotations: options.skipCustomAnnotations || isLinkElement,
+        autoMatchFormat: options.autoMatchFormat,
+      }))
+      .reduce((annotations, handler) => {
+      const result = handler.handle(element, options.parentAnnotations);
+      return Object.assign(Object.assign({}, annotations), result);
+    }, {});
   }
+}
+const htmlElementToAnnotationGenerator = new HtmlElementToAnnotationGenerator();
+
+/**
+ * Abstract class to define strategies for processing HTML elements
+ */
+class ElementToDTOStrategy {
   /**
-   * @inheritDoc
+   * Convert element style attributes to text annotations.
+   *
+   * @param {HTMLElement} element - Current html element.
+   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for generating annotations.
+   * @returns {VegaRTEAnnotations} - Generated annotations.
    */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
+  generateTextStyleAnnotations(element, options) {
+    return htmlElementToAnnotationGenerator.generate(RTETextNode, element, options);
   }
 }
-
 /**
- * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
- *
- * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
+ * Class to represent the output of a strategy applied to HTML elements
  */
-class MergeTwoBlocksNodesAction extends ModifyContentAction {
-  constructor(blockNeedToBeMerged) {
-    super();
-    this.type = ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
-    this.blockNeedToBeMerged = blockNeedToBeMerged;
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
+  }
+  /**
+   * Set children output.
+   *
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
+   */
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
+  }
+  /**
+   * Transform current output and children output to DTO
+   *
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - DTO.
+   */
+  toDto(options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
+    const currentBlock = this.currentStrategy.handle(this.currentElements, options);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto(options))
+        .filter(isNonNullable));
+    }
+    return currentBlock;
   }
 }
 
 /**
- * Block delete text or decorator node strategy.
+ * Manager for registering and retrieving strategies that convert HTML elements to DTOs.
  */
-class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeContentStrategy {
+class elementToDTOClassStrategyManager {
+  constructor() {
+    this.elementToBlockStrategies = [];
+    this.elementToNodeStrategies = [];
+  }
   /**
-   * @inheritDoc
+   * Registers a element to block strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
    */
-  handleAction(action, target) {
-    const { startContainerNode } = action;
-    if (!startContainerNode.isContentEditable()) {
-      this.deleteDecoratorNodeContent(action, target);
-    }
-    else if (startContainerNode.isTextNode()) {
-      this.deleteTextNodeContent(action, target);
-    }
-    const parent = target.parent;
-    if (parent && target.isListItemBlock() && parent.children.length === 0) {
-      parent.parent.apply(new RemoveChildrenAction(parent));
+  registerElementToBlockStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToBlockStrategies)) {
+      this.elementToBlockStrategies.unshift(strategy);
     }
   }
   /**
-   * Handle the delete text logic when press delete key.
+   * Registers an element to node strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
    *
-   * @param {DeleteBlockContentAction} action - ModifyContentAction
-   * @param {RTETextBlock} target - Current text block
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
    */
-  deleteTextNodeContent(action, target) {
-    const startContainerNode = action.startContainerNode;
-    const startOffset = action.startOffset;
-    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
-      const newText = startContainerNode.text.slice(0, startOffset - 1) +
-        startContainerNode.text.slice(startOffset);
-      startContainerNode.apply(new UpdateTextAction(newText));
-      if (newText) {
-        action.previousNode = startContainerNode;
-        return;
-      }
-      else {
-        const previousNode = this.getPreviousNode(startContainerNode);
-        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
-        if ((previousNode && previousNode.parent === target && previousNode['text'] === '\n') ||
-          target.children.length === 1) {
-          action.previousNode = startContainerNode;
-          return;
-        }
-        else {
-          target.apply(new RemoveChildrenAction(startContainerNode));
-          action.previousNode = previousNode;
-          return;
-        }
-      }
-    }
-    else {
-      let previousNode = this.getPreviousNode(startContainerNode);
-      let nextNode = null;
-      if (target.children.length && previousNode && previousNode.parent !== target) {
-        if (startContainerNode.isEmpty()) {
-          target.apply(new RemoveChildrenAction(startContainerNode));
-        }
-        if (target.type === previousNode.parent.type) {
-          previousNode.parent.apply(new MergeTwoBlocksNodesAction(target));
-        }
-      }
-      else {
-        if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
-          nextNode = this.getNextNode(startContainerNode);
-        }
-        /**
-         * Remove line break
-         *
-         * @example caret at the first line
-         * \n
-         * test
-         */
-        if (startContainerNode.isEmpty()) {
-          target.apply(new RemoveChildrenAction(startContainerNode));
-        }
-        /**
-         * Remove line break
-         *
-         * @example caret at the begin of second line
-         * \n
-         * test
-         */
-        if (previousNode && previousNode.isTextNode() && previousNode.isEmpty()) {
-          const shouldRemoveNode = previousNode;
-          previousNode = this.getPreviousNode(previousNode);
-          shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
-          if (!previousNode) {
-            nextNode = startContainerNode;
-          }
-        }
-      }
-      //Remove the paragraph block if the content is empty
-      if (target.children.length === 0) {
-        target.parent.apply(new RemoveChildrenAction(target));
-      }
-      if (previousNode) {
-        action.previousNode = previousNode;
-      }
-      else if (nextNode) {
-        action.nextNode = nextNode;
-      }
+  registerElementToNodeStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToNodeStrategies)) {
+      this.elementToNodeStrategies.unshift(strategy);
     }
   }
   /**
-   * Delete decorator node content
+   * Retrieves all registered element to block strategies for converting HTML elements to DTOs.
    *
-   * @param {DeleteBlockContentAction} action - The delete block content action
-   * @param {RTEBlock} target - The target block
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to block strategies.
    */
-  deleteDecoratorNodeContent(action, target) {
-    const startContainerNode = action.startContainerNode, startOffset = action.startOffset;
-    let previousNode = this.getPreviousNode(startContainerNode);
-    let nextNode = null;
-    if (startOffset !== 0) {
-      const parentBlock = target;
-      if (this.isContentFirstNode(startContainerNode)) {
-        nextNode = this.getNextNode(startContainerNode);
-      }
-      if (parentBlock.children.length === 1) {
-        parentBlock.parent.apply(new RemoveChildrenAction(parentBlock));
-      }
-      else {
-        parentBlock.apply(new RemoveChildrenAction(startContainerNode));
-      }
-    }
-    else {
-      const shouldRemoveNode = previousNode;
-      if (shouldRemoveNode && !shouldRemoveNode.isContentEditable()) {
-        previousNode = this.getPreviousNode(shouldRemoveNode);
-        shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
-        if (!previousNode) {
-          action.nextNode = startContainerNode;
-        }
-      }
-    }
-    if (previousNode) {
-      action.previousNode = previousNode;
-    }
-    else if (nextNode) {
-      action.nextNode = nextNode;
-    }
+  getElementToBlockStrategies() {
+    return this.elementToBlockStrategies;
   }
-}
-
-/**
- * Insert new paragraph into current block at special position.
- */
-class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Retrieves all registered element to node strategies for converting HTML elements to DTOs.
+   *
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to node strategies.
    */
-  handleAction(action, target) {
-    const { startContainerNode } = action;
-    action.newBlock = this.breakSingleBlock(startContainerNode, action.startOffset, target);
+  getElementToNodeStrategies() {
+    return this.elementToNodeStrategies;
   }
   /**
-   * breakSingleTextBlock
+   * Checks if a strategy is already registered in the provided strategy list.
    *
-   * @param {RTETextNode} splitNode -
-   * @param {number} startOffsetOfNode -
-   * @param {RTEBlock} target -
-   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   * @param {ElementToDTOStrategy} strategy - The strategy to check for duplicates.
+   * @param {ElementToDTOStrategy[]} strategyList - The list of strategies to check against.
+   * @returns {boolean} - True if the strategy is a duplicate, false otherwise.
    */
-  breakSingleBlock(splitNode, startOffsetOfNode, target) {
-    const newParagraph = this.getNewParagraph(splitNode);
-    if (newParagraph) {
-      if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
-        target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
-      }
-      else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
-        target.parent.apply(new InsertChildrenBeforeAction(target, newParagraph));
+  hasDuplicateStrategy(strategy, strategyList) {
+    return strategyList.includes(strategy);
+  }
+}
+const ElementToDTOClassStrategyManager = new elementToDTOClassStrategyManager();
+
+/** Element to DTO processor */
+class ElementToDtoStrategyProcessor {
+  /**
+   * Transform process.
+   *
+   * @param {HTMLElement[]} elements - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements, options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
+    const strategies = this.getElementToBlockStrategies();
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i]))
+        continue;
+      let canHandledCount = 0;
+      for (const strategy of strategies) {
+        canHandledCount = strategy.canHandle(elements, i, options);
+        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), options));
+          }
+          outputs.push(output);
+          i += canHandledCount - 1;
+          break;
+        }
       }
-      else {
-        const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-        target.apply(splitBlockAction);
-        return splitBlockAction.newBlock;
+      if (canHandledCount === 0 && i < elements.length) {
+        const elementChildren = Array.from(elements[i].childNodes);
+        const childrenOutputs = this.process(Array.from(elementChildren), options);
+        if (childrenOutputs.length > 0) {
+          outputs.push(...childrenOutputs);
+        }
       }
-      return newParagraph;
     }
+    return outputs;
   }
   /**
-   * Create new Paragraph
+   * Checks if the given element is valid to parse.
    *
-   * @param {RTENode} splitNode - The split node of the block.
-   * @returns {Nullable<RTETextBlock>} - The new text block.
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
    */
-  getNewParagraph(splitNode) {
-    const newParagraph = this.createNewParagraph('');
-    if (newParagraph) {
-      let textNode = newParagraph.children[0];
-      if (splitNode.isTextNode() && splitNode.isContentEditable()) {
-        newParagraph.children = [];
-        textNode = splitNode.cloneWithText('');
-        // The link annotation don't need inherited
-        textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
-        newParagraph.apply(new AppendChildrenAction([textNode]));
-      }
-      return newParagraph;
-    }
+  isInvalidElement(element) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    return ['META', 'STYLE'].includes(element.nodeName);
+  }
+  /**
+   * Get the register element to block strategies.
+   *
+   * @returns {ElementToDTOStrategy[]} - The register element to block strategies.
+   */
+  getElementToBlockStrategies() {
+    return ElementToDTOClassStrategyManager.getElementToBlockStrategies();
   }
 }
+const ElementToDtoStrategyProcessor$1 = new ElementToDtoStrategyProcessor();
 
 /**
  * Update the cursor position in the editor.
- *
- * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset]))
  */
-class UpdateCursorPositionAction extends ModifyContentAction {
+class UpdateCursorPositionStrategy extends ActionHandleStrategy {
   /**
-   * Set the cursor position at end of the current node.
-   *
-   * @param {RTENode} nextFocusNode - The rich text editor needs focus node.
-   * @param {number} offset - The cursor offset position.
+   * @inheritDoc
    */
-  constructor(nextFocusNode, offset) {
-    super();
-    this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
-    this.nextFocusNode = nextFocusNode;
-    this.offset = offset;
+  handleAction(action, target) {
+    const { offset, nextFocusNode, immediatelyRun } = action;
+    const host = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (host) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalUpdateRTECursorPosition), {
+        node: nextFocusNode,
+        offset,
+        updateDirectly: immediatelyRun,
+      });
+    }
+  }
+}
+
+/**
+ * Append new block array or node array to block or VegaRTEContent instance strategy.
+ */
+class AppendChildrenStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newBlocks = action.entityToBeAppended;
+    if (target.children) {
+      newBlocks.forEach((block) => {
+        block.parent = target;
+      });
+      // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
+      const arrayFixed = target.children;
+      target.children = arrayFixed.concat(newBlocks);
+    }
   }
 }
 
 /**
- * Strategy for inserting text into a decorator node. The decorator can not edit, so we insert the text as a new child.
+ * Insert children at the front of the block strategy.
  */
-class InsertTextToDecoratorNodeStrategy extends ActionHandleStrategy {
+class InsertChildrenBeforeStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    const { text, offset, decoratorNode } = action;
-    const paragraph = this.createNewParagraph(text);
-    if (paragraph) {
-      const newTextNode = paragraph.children[0];
-      if (offset !== 0) {
-        target.apply(new InsertChildrenAfterAction(decoratorNode, newTextNode));
-      }
-      else {
-        target.apply(new InsertChildrenBeforeAction(decoratorNode, newTextNode));
-      }
-      this.setTheCursorPosition(newTextNode);
-    }
+    this.replaceElementWithElements(target, action.referChildren, [
+      ...action.childrenToBeInserted,
+      action.referChildren,
+    ]);
   }
   /**
-   * Set the cursor position to the new text node.
+   * Replaces a specific block or node with an array of blocks or nodes within RTEContentBlock array.
    *
-   * @param {RTENode} focusNode - The new text node to focus on.
+   * @param {RTEBlock | VegaRTEContent} target - The block or the VegaRTEContent instance.
+   * @param {RTEBlock | RTENode} referElement - Used as a reference element to identify the element that needs to be replaced in the array.
+   * @param {RTEBlock[] | RTENode[]} elements - An array of block or node objects that you want to replace the `referElement` with in the array.
    */
-  setTheCursorPosition(focusNode) {
-    const rootContent = this.getRootContent(focusNode.parent);
-    if (rootContent) {
-      rootContent.apply(new UpdateCursorPositionAction(focusNode));
+  replaceElementWithElements(target, referElement, elements) {
+    if (target.children) {
+      elements.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.children;
+      target.children = arrayFixed.flatMap((block) => {
+        if (block === referElement) {
+          return elements;
+        }
+        else {
+          return block;
+        }
+      });
     }
   }
 }
 
 /**
- * Insert new paragraph into current list item block at special position.
+ * Insert children at the front of the block strategy.
  */
-class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
+class InsertChildrenAfterStrategy extends InsertChildrenBeforeStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+    this.replaceElementWithElements(target, action.referChildren, [
+      action.referChildren,
+      ...action.childrenToBeInserted,
+    ]);
+  }
+}
+
+/**
+ * Annotation for image
+ */
+class ImageAnnotation extends NodeAnnotation {
+  constructor(size, alt) {
+    super();
+    this.type = NodeAnnotationTypeEnum.IMAGE;
+    this.size = size;
+    this.alt = alt;
   }
   /**
-   * Breaks a single list item block at a specific position.
+   * Generate the map item for the annotation
    *
-   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
-   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
-   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
-   * caret position if it is neither at the start nor at the end.
+   * @param {string} size - Image size
+   * @param {string} alt - Image alt
+   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
    */
-  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
-    const newListItem = target.createNewListItem();
-    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
-    newListItem.apply(new AppendChildrenAction([newBreakNode]));
-    if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
-      return this.breakListItemAtEnd(newListItem, target);
-    }
-    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertChildrenBeforeAction(target, newListItem));
-    }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
-    }
-    return newListItem;
+  static from(size, alt) {
+    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
   }
   /**
-   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
+   * Generate the JSON representation of the annotation
    *
-   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {RTEBlock} Returns a `RTEBlock`.
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
    */
-  breakListItemAtEnd(newListItem, target) {
-    const lastItem = target.parent.children[target.parent.children.length - 1];
-    const currentItemIsEmpty = target.children.length === 1 && target.children[0].isEmpty();
-    if (target === lastItem && currentItemIsEmpty) {
-      const parentParent = target.parent.parent;
-      if (parentParent['type'] !== 'list-item') {
-        const newParagraph = RTETextBlock.from({
-          id: generateUUID(),
-          type: 'paragraph',
-          nodes: [],
-        });
-        newParagraph.apply(new AppendChildrenAction(newListItem.children));
-        parentParent.apply(new InsertChildrenAfterAction(target.parent, newParagraph));
-        target.parent.apply(new RemoveChildrenAction(target));
-        return newParagraph;
-      }
-      else {
-        parentParent.parent.apply(new InsertChildrenAfterAction(parentParent, newListItem));
-        target.parent.apply(new RemoveChildrenAction(target));
+  toJSON() {
+    return isNonNullable(this.alt)
+      ? {
+        size: this.size,
+        alt: this.alt,
       }
-    }
-    else {
-      target.parent.apply(new InsertChildrenAfterAction(target, newListItem));
-    }
-    return newListItem;
+      : {
+        size: this.size,
+      };
   }
   /**
-   * Copy the inline style to new node
-   *
-   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
-   * @returns {RTETextNode} Returns a `RTETextNode`.
+   * @inheritDoc
    */
-  copyInlineStyleToNewNode(needCopedNode) {
-    const textNode = needCopedNode.cloneWithText('');
-    // The link annotation doesn't need to inherit
-    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
-    return textNode;
+  clone() {
+    return new ImageAnnotation(this.size, this.alt);
   }
-}
-
-/**
- * Delete the nest list block action
- *
- * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
- */
-class RemoveNestListAction extends ModifyContentAction {
-  constructor(childList) {
-    super();
-    this.type = ModifyContentActionType.DELETE_NEST_LIST;
-    this.nestListBlockToBeRemoved = childList;
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.size ? `v-rte--image-size-${this.size}` : null;
   }
-}
-
-/**
- * List remove list item strategy.
- */
-class ListRemoveListItemStrategy extends RemoveChildrenStrategy {
   /**
-   * Remove the list item, check the list item and remove self if the list item is empty.
-   *
-   * @param {RemoveChildrenAction} action - The remove action instance.
-   * @param {RTEListBlock} target - The list block.
+   * @inheritDoc
    */
-  handleAction(action, target) {
-    super.handleAction(action, target);
-    const parent = target.parent;
-    if (target.children.length === 0 && parent) {
-      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
-      if (parent['type'] === 'list-item') {
-        parent.apply(new RemoveNestListAction(target));
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    const baseStyle = { verticalAlign: 'bottom' };
+    switch (this.size) {
+      case 'sm': {
+        return Object.assign(Object.assign({}, baseStyle), { width: '25%' });
       }
-      else {
-        parent.apply(new RemoveChildrenAction(target));
+      case 'md': {
+        return Object.assign(Object.assign({}, baseStyle), { width: '50%' });
+      }
+      case 'lg': {
+        return Object.assign(Object.assign({}, baseStyle), { width: '100%' });
       }
     }
   }
 }
 
 /**
- * Manager class for registering DTO action strategies.
+ * Update the image node annotation map strategy.
  */
-class RTEDTOActionStrategyManager {
+class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
   /**
-   * Registers basic strategies for a given DTO class.
-   *
-   * @param {string} dtoClassName - The name of the RTE block class name.
+   * @inheritDoc
    */
-  registerBlockBasicStrategies(dtoClassName) {
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, dtoClassName, dtoClassName === RTEListBlock.name
-      ? new ListRemoveListItemStrategy()
-      : new RemoveChildrenStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, dtoClassName, new AppendChildrenStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, dtoClassName, new InsertChildrenBeforeStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_AFTER, dtoClassName, new InsertChildrenAfterStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, dtoClassName, new BlockDeleteTextOrDecoratorNodeStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NEW_PARAGRAPH, dtoClassName, dtoClassName === RTEListItemBlock.name
-      ? new ListItemInsertNewParagraphStrategy()
-      : new BlockInsertNewParagraphStrategy());
-    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE, dtoClassName, new InsertTextToDecoratorNodeStrategy());
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    target.annotationMap.set(annotation.type, annotation);
   }
 }
-const RTEDTOActionStrategyManager$1 = new RTEDTOActionStrategyManager();
 
 /**
- * Abstract class to define handler for generate the annotations
+ * The image node update property url strategy.
  */
-class AnnotationGeneratorStrategyAbstract {
-}
-
-/** Handle bold annotation */
-class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+class ImageUpdateUrlStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  handleAction(action, target) {
+    target.url = action.url;
+  }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/**
+ * Image node
+ */
+class RTEImageNode extends RTEDecoratorNode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parent = parentBlock;
   }
   /**
-   * Handle annotation.
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
    *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
    */
-  handle(element, parentAnnotations = {}) {
-    return this.isBold(element) || parentAnnotations.bold ? { bold: true } : {};
+  static from(node, parentBlock, options = { autoMatchFormat: true }) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
+    const autoMatchFormat = !!options.autoMatchFormat;
+    const _a = Object.assign({}, node.annotations), { size } = _a, otherAnnotations = __rest(_a, ["size"]);
+    const annotations = Object.assign(Object.assign({}, otherAnnotations), { size: size !== null && size !== void 0 ? size : (autoMatchFormat ? 'md' : undefined) });
+    imageNode.annotationMap = new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'size' || type === 'alt') {
+        return ImageAnnotation.from(annotations.size, annotations.alt);
+      }
+      return this.createAnnotationEntity(type, annotations[type]);
+    })
+      .filter(isNonNullable));
+    return imageNode;
   }
   /**
-   * Is bold element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
+   * @inheritDoc
    */
-  isBold(element) {
-    return (element.nodeName === 'STRONG' ||
-      element.nodeName === 'B' ||
-      element.style.fontWeight === 'bold' ||
-      element.style.fontWeight === '700' ||
-      element.classList.contains('v-rte--bold'));
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof CommonAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    if (annotations.alt == '')
+      delete annotations.alt;
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
-}
-
-/** Handle custom attribute annotation */
-class CustomAttributeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
-   * @returns {boolean} - .
+   * @inheritDoc
    */
-  canHandle(targetDto, options) {
-    return !options.skipCustomAnnotations && !!targetDto;
+  clone() {
+    return new RTEImageNode(this.id, this.url, this.parent, super.cloneAnnotations());
   }
   /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @inheritDoc
    */
-  handle(element) {
-    const attributes = this.getAttributes(element);
-    return Object.keys(attributes).length > 0 ? { customAttribute: attributes } : {};
+  toHtml() {
+    const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const attrStr = super.generateAttributeString(...[
+      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
+      `src="${this.url}"`,
+      imageAnnotation && imageAnnotation.size ? `data-size="${imageAnnotation.size}"` : null,
+    ].filter(isNonNullable));
+    return `<img${attrStr}>`;
   }
   /**
-   * Obtain the custom attributes of element, excluding 'style' and 'class'.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Record<string, string>} - Record<string, string>.
+   * @inheritDoc
    */
-  getAttributes(element) {
-    const attributeNames = element
-      .getAttributeNames()
-      .filter((attr) => attr !== 'style' && attr !== 'class' && this.isValidAttr(attr));
-    return attributeNames.reduce((acc, item) => {
-      acc[item] = element.getAttribute(item);
-      return acc;
-    }, {});
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
   }
   /**
-   * Check if the attribute name is valid.
-   *
-   * @param {string} attr - Attribute name.
-   * @returns {boolean} - True if valid, false otherwise.
+   * @inheritDoc
    */
-  isValidAttr(attr) {
-    return /^[a-zA-Z_][\w-]*$/.test(attr);
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
 }
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
+  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
+})();
 
-/** Handle custom class annotation */
-class CustomClassAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
   /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
-   * @returns {boolean} - .
+   * @inheritDoc
    */
-  canHandle(targetDto, options) {
-    return !options.skipCustomAnnotations && !!targetDto;
+  handleAction(action, target) {
+    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
   }
   /**
-   * Handle annotation.
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
    *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @param {RTEImageNode} imageNode The split point image node.
+   * @param {number} imageOffset The cursor point 0 | 1.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {Nullable<RTEBlock>} The new block after split
    */
-  handle(element) {
-    const classes = this.getCustomClass(element);
-    return classes.length > 0 ? { customClass: classes } : {};
+  splitImageNodes(imageNode, imageOffset, target) {
+    const nodesSplitIndex = target.children.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = target.children.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = target.children.slice(nodesSplitIndex + imageOffset);
+      target.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes, target);
+      target.parent.apply(new InsertChildrenAfterAction(target, newBlock));
+      return newBlock;
+    }
   }
   /**
-   * Get the custom class
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {string[]} - the class after .
+   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
    */
-  getCustomClass(element) {
-    return element.classList
-      .toString()
-      .split(' ')
-      .filter((item) => !item.includes('v-rte') && item !== '');
+  cloneWithNodes(nodes, target) {
+    const block = target.createNewImageBlock();
+    block.children = [];
+    block.apply(new AppendChildrenAction(nodes));
+    return block;
   }
 }
 
-/** Handle custom style annotation */
-class CustomStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options for annotation generator.
-   * @returns {boolean} - .
-   */
-  canHandle(targetDto, options) {
-    return !options.skipCustomAnnotations && !!targetDto;
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTETextAnnotations} - Annotation.
-   */
-  handle(element) {
-    const styles = this.generateCustomStyleAnnotations(element);
-    return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
+/**
+ * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
+ * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example currentBlock.apply(new InsertNewParagraphAction(startContainerNode, startOffset))
+ */
+class InsertNewParagraphAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NEW_PARAGRAPH;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
   }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
   /**
-   * Obtain and format the style of element.
+   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {AnnotationStyle} - Record<string, string>.
+   * @param {LineBreakSingleBlockAction} action - The action instance.
+   * @param {RTEImageBlock} target - The image block.
    */
-  generateCustomStyleAnnotations(element) {
-    const customStyle = element.getAttribute('style');
-    if (!customStyle)
-      return {};
-    const styleValue = customStyle.split(';').filter(Boolean);
-    return styleValue
-      .filter((key) => key !== ' ')
-      .map((key) => {
-      // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-      const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-      const styleKey = dashCaseToCamel(styleObject[0].trim());
-      return {
-        [styleKey]: styleObject[1].trim().replace(';', ''),
-      };
-    })
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  handleAction(action, target) {
+    const insertNewParagraphAction = new InsertNewParagraphAction(action.startContainerNode, action.startOffset);
+    target.apply(insertNewParagraphAction);
+    const newBlock = insertNewParagraphAction.newBlock;
+    if (newBlock) {
+      action.lineBreakNode = newBlock.children[0];
+    }
   }
 }
 
-/** Handle indent annotation */
-class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   *
+   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
+    });
+    target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildrenAction(afterNodes));
+    return newParagraph['children'][0];
   }
   /**
-   * Handle annotation.
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
    *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
    */
-  handle(element) {
-    const indent = this.getIndent(element);
-    return indent ? { indent: indent } : {};
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block.children);
+        block.parent.apply(new RemoveChildrenAction(block));
+      }
+    });
+    return nodes;
   }
+}
+
+/**
+ * Insert a image node at the special position of image block.
+ */
+class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
   /**
-   * Get indent of current element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<number>} - Indent.
+   * @inheritDoc
    */
-  getIndent(element) {
-    const style = element.style;
-    let marginLeft;
-    if (style.marginLeft) {
-      marginLeft = style.marginLeft;
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    const newImageNodes = newImageBlock.children;
+    if (target.children.length < 1) {
+      target.apply(new AppendChildrenAction(newImageNodes));
     }
-    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 if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, newImageBlock));
     }
     else {
-      return null;
+      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
     }
-    const marginLeftNumber = Number(marginLeft.replace('px', ''));
-    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
   }
 }
 
-/** Handle text align annotation */
-class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Image block
+ */
+class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.children = [];
+  }
   /**
-   * Can be handle.
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
    *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @returns {boolean} - .
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
    */
-  canHandle(targetDto) {
-    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  static from(block, options = { autoMatchFormat: true }) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.children = block.nodes.map((image) => RTEImageNode.from(image, imageBlock, options));
+    if (annotations) {
+      super.convertAnnotationsToMap(imageBlock.annotationMap, annotations);
+    }
+    return imageBlock;
   }
   /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   * @inheritDoc
    */
-  handle(element) {
-    const textAlign = this.getTextAlign(element);
-    return textAlign ? { textAlign: textAlign } : {};
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.children.map((node) => node.toJSON()) });
   }
   /**
-   * Get text align of current element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   * @inheritDoc
    */
-  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;
-    }
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    const children = this.children.map((node) => node.toHtml()).join('');
+    return super.shouldRenderAsInternalWrapper()
+      ? children
+      : [`<div${attrStr}>`, children, `</div>`].join('');
   }
-}
-
-/** Handle code annotation */
-class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((node) => node.url.length > 0);
   }
   /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @inheritDoc
    */
-  handle(element, parentAnnotations = {}) {
-    return this.isCode(element) || parentAnnotations.code ? { code: true } : {};
+  getLastNode() {
+    return this.children[this.children.length - 1];
   }
   /**
-   * Is code element.
+   * Create a new image block.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
+   * @returns {RTEImageBlock} - The empty image block.
    */
-  isCode(element) {
-    return (element.classList.contains('v-rte--code') ||
-      element.nodeName === 'CODE' ||
-      element.nodeName === 'PRE' ||
-      element.style.fontFamily === 'monospace' ||
-      element.style.fontFamily.replace(/["']/g, '') === 'Roboto Mono');
+  createNewImageBlock() {
+    return new RTEImageBlock(generateUUID());
   }
-}
-
-/** Handle color annotation */
-class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  clone() {
+    const clonedBlock = new RTEImageBlock(this.id);
+    clonedBlock.children = this.children.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parent = clonedBlock;
+      return clonedNode;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = this.parent;
+    return clonedBlock;
   }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
-   */
-  handle(element, parentAnnotations = {}) {
-    const color = this.getColor(element) || parentAnnotations.textColor;
-    return color ? { textColor: color } : {};
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+})();
+
+/**
+ * HTML Block
+ */
+class RTEHtmlBlock extends RTEBlock {
+  constructor(id, htmlTag) {
+    super(id);
+    this.type = 'html-block';
+    this.children = [];
+    this.htmlTag = htmlTag;
   }
   /**
-   * Get current color of element.
+   * Converts a VegaRTEHtmlBlock to an RTEHtmlBlock.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<string>} - color.
+   * @param {VegaRTEHtmlBlock} block - The VegaRTEHtmlBlock to convert.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @returns {RTEHtmlBlock} The converted RTEHtmlBlock.
    */
-  getColor(element) {
-    var _a;
-    const color = element.style.color;
-    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    if (hexColor) {
-      // We don't display default text color as inline style, because we defined it in the vega-rich-text-content.scss.
-      const colorSchema = RTE_TEXT_COLORS.filter((item) => item.key !== RTE_DEFAULT_TEXT_COLOR.key).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;
+  static from(block, options) {
+    const htmlBlock = new RTEHtmlBlock(block.id, block.htmlTag);
+    const { annotations } = block;
+    if (annotations) {
+      super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
     }
+    htmlBlock.children = block.children
+      .map((child) => {
+      const BlockClass = RTEDTOClassManager.getRTEBlockClass(child.type);
+      if (BlockClass) {
+        const block = BlockClass.from(child, options);
+        block.parent = htmlBlock;
+        return block;
+      }
+    })
+      .filter(isNonNullable);
+    return htmlBlock;
   }
-}
-
-/** Handle italic annotation */
-class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  clone() {
+    const clonedBlock = new RTEHtmlBlock(this.id, this.htmlTag);
+    clonedBlock.children = this.children.map((child) => child.clone());
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    return clonedBlock;
   }
   /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @inheritDoc
    */
-  handle(element, parentAnnotations = {}) {
-    return this.isItalic(element) || parentAnnotations.italic ? { italic: true } : {};
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
   }
   /**
-   * Is italic element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
+   * @inheritDoc
    */
-  isItalic(element) {
-    return (element.nodeName === 'I' ||
-      element.style.fontStyle === 'italic' ||
-      element.nodeName === 'EM' ||
-      element.classList.contains('v-rte--italic'));
-  }
-}
-
-/** Handle link annotation */
-class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  constructor() {
-    super(...arguments);
-    this.handlers = [
-      new CustomAttributeAnnotationHandler(),
-      new CustomClassAnnotationHandler(),
-      new CustomStyleAnnotationHandler(),
-    ];
+  isNotEmpty() {
+    return this.children.length > 0;
   }
   /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @returns {boolean} - .
+   * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  toHtml() {
+    const BlockTag = this.htmlTag;
+    const attrStr = super.generateAttributeString();
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.children.map((block) => block.toHtml()).join(''),
+      `</${BlockTag}>`,
+    ].join('');
   }
   /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @inheritDoc
    */
-  handle(element, parentAnnotations = {}) {
-    if (parentAnnotations.link)
-      return { link: parentAnnotations.link };
-    return element.tagName === 'A' ? { link: this.generateLinkAnnotations(element) } : {};
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
   }
-  /**
-   * Generate link annotations.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTELink} - link annotations.
-   */
-  generateLinkAnnotations(element) {
-    const annotations = {
-      href: element.getAttribute('href') || '',
-      groupKey: generateUUID(),
-    };
-    this.handlers.forEach((handler) => {
-      Object.assign(annotations, handler.handle(element));
-    });
-    return annotations;
+}
+
+/**
+ * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
+ *
+ * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
+ */
+class MergeTwoBlocksNodesAction extends ModifyContentAction {
+  constructor(blockNeedToBeMerged) {
+    super();
+    this.type = ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.blockNeedToBeMerged = blockNeedToBeMerged;
   }
 }
 
-/** Handle strike through annotation */
-class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Block delete text or decorator node strategy.
+ */
+class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeContentStrategy {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  handleAction(action, target) {
+    const { startContainerNode } = action;
+    if (!startContainerNode.isContentEditable()) {
+      this.deleteDecoratorNodeContent(action, target);
+    }
+    else if (startContainerNode.isTextNode()) {
+      this.deleteTextNodeContent(action, target);
+    }
+    const parent = target.parent;
+    if (parent && target.isListItemBlock() && parent.children.length === 0) {
+      parent.parent.apply(new RemoveChildrenAction(parent));
+    }
   }
   /**
-   * Handle annotation.
+   * Handle the delete text logic when press delete key.
    *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   * @param {RTETextBlock} target - Current text block
    */
-  handle(element, parentAnnotations = {}) {
-    return this.isStrikethrough(element) || parentAnnotations.strikethrough
-      ? { strikethrough: true }
-      : {};
+  deleteTextNodeContent(action, target) {
+    const startContainerNode = action.startContainerNode;
+    const startOffset = action.startOffset;
+    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
+      const newText = startContainerNode.text.slice(0, startOffset - 1) +
+        startContainerNode.text.slice(startOffset);
+      startContainerNode.apply(new UpdateTextAction(newText));
+      if (newText) {
+        action.previousNode = startContainerNode;
+        return;
+      }
+      else {
+        const previousNode = this.getPreviousNode(startContainerNode);
+        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
+        if ((previousNode && previousNode.parent === target && previousNode['text'] === '\n') ||
+          target.children.length === 1) {
+          action.previousNode = startContainerNode;
+          return;
+        }
+        else {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+          action.previousNode = previousNode;
+          return;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      let nextNode = null;
+      const isCurrentNodeEmpty = startContainerNode.isEmpty();
+      if (target.children.length && previousNode && previousNode.parent !== target) {
+        if (isCurrentNodeEmpty) {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+        }
+        if (target.type === previousNode.parent.type) {
+          previousNode.parent.apply(new MergeTwoBlocksNodesAction(target));
+        }
+      }
+      else {
+        if (this.isContentFirstNode(startContainerNode) && isCurrentNodeEmpty) {
+          nextNode = this.getNextNode(startContainerNode);
+        }
+        /**
+         * Remove line break
+         *
+         * @example caret at the first line
+         * \n
+         * test
+         */
+        if (isCurrentNodeEmpty) {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+        }
+        /**
+         * Remove line break or non-editable node
+         *
+         * @example caret at the begin of second line
+         * \n
+         * test
+         * @example caret at the end of non-editable node and start of the text node
+         * <img/><span>test</span>
+         */
+        if (previousNode &&
+          previousNode.isTextNode() &&
+          (previousNode.isEmpty() ||
+            (!previousNode.isContentEditable() && previousNode.parent === target))) {
+          const shouldRemoveNode = previousNode;
+          previousNode = this.getPreviousNode(previousNode);
+          shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
+          if (!previousNode && !isCurrentNodeEmpty) {
+            nextNode = startContainerNode;
+          }
+        }
+      }
+      //Remove the paragraph block if the content is empty
+      if (target.children.length === 0) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
   }
   /**
-   * Is strikethrough element.
+   * Delete decorator node content
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
+   * @param {DeleteBlockContentAction} action - The delete block content action
+   * @param {RTEBlock} target - The target block
    */
-  isStrikethrough(element) {
-    return (element.style.textDecoration.includes('line-through') ||
-      element.nodeName === 'S' ||
-      element.nodeName === 'DEL' ||
-      element.classList.contains('v-rte--strikethrough'));
+  deleteDecoratorNodeContent(action, target) {
+    const startContainerNode = action.startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset !== 0) {
+      const parentBlock = target;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      if (parentBlock.children.length === 1) {
+        parentBlock.parent.apply(new RemoveChildrenAction(parentBlock));
+      }
+      else {
+        parentBlock.apply(new RemoveChildrenAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && !shouldRemoveNode.isContentEditable()) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
   }
 }
 
-/** Handle underline annotation */
-class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Insert new paragraph into current block at special position.
+ */
+class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTETextNode';
+  handleAction(action, target) {
+    const { startContainerNode } = action;
+    action.newBlock = this.breakSingleBlock(startContainerNode, action.startOffset, target);
   }
   /**
-   * Handle annotation.
+   * breakSingleTextBlock
    *
-   * @param {HTMLElement} element - Current elements.
-   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
-   * @returns {VegaRTETextAnnotations} - Annotation.
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTEBlock} target -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
    */
-  handle(element, parentAnnotations = {}) {
-    return this.isUnderline(element) || parentAnnotations.underline ? { underline: true } : {};
+  breakSingleBlock(splitNode, startOffsetOfNode, target) {
+    const newParagraph = this.getNewParagraph(splitNode);
+    if (newParagraph) {
+      if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+      }
+      else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, newParagraph));
+      }
+      else {
+        const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+        target.apply(splitBlockAction);
+        return splitBlockAction.newBlock;
+      }
+      return newParagraph;
+    }
   }
   /**
-   * Is underline element.
+   * Create new Paragraph
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
+   * @param {RTENode} splitNode - The split node of the block.
+   * @returns {Nullable<RTETextBlock>} - The new text block.
    */
-  isUnderline(element) {
-    return (element.style.textDecoration.includes('underline') ||
-      element.nodeName === 'U' ||
-      element.nodeName === 'INS' ||
-      element.classList.contains('v-rte--underline'));
+  getNewParagraph(splitNode) {
+    const newParagraph = this.createNewParagraph('');
+    if (newParagraph) {
+      let textNode = newParagraph.children[0];
+      if (splitNode.isTextNode() && splitNode.isContentEditable()) {
+        newParagraph.children = [];
+        textNode = splitNode.cloneWithText('');
+        // The link annotation don't need inherited
+        textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+        newParagraph.apply(new AppendChildrenAction([textNode]));
+      }
+      return newParagraph;
+    }
   }
 }
 
-/** Handle text style annotation */
-class TextStyleAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
-   * @param {HtmlElementToAnnotationGenerateOptions} options - Options for annotation generator.
-   * @returns {boolean} - .
-   */
-  canHandle(targetDto, options) {
-    return !!options.autoMatchFormat && targetDto.name === 'RTETextBlock';
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTETextBlockAnnotations} - Annotation.
-   */
-  handle(element) {
-    const textStyle = this.getTextStyle(element);
-    return textStyle ? { textStyle: textStyle } : {};
-  }
+/**
+ * Update the cursor position in the editor.
+ *
+ * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset], [immediatelyRun]))
+ */
+class UpdateCursorPositionAction extends ModifyContentAction {
   /**
-   * Get the node type of element. The element type is determined in the following
-   * order: "data-type" attribute, node name, font size and class name.
+   * Set the cursor position at end of the current node.
    *
-   * @param {HTMLElement} element - element.
-   * @returns {Nullable<VegaRTETextStyleType>} - node type.
+   * @param {RTENode} nextFocusNode - The rich text editor needs focus node.
+   * @param {number} offset - The cursor offset position.
+   * @param {boolean} immediatelyRun - Whether to immediately set the cursor position after applying it. Usually the set action will trigger after the UI renders.
    */
-  getTextStyle(element) {
-    const byDataType = this.getElementTypeByDataType(element);
-    if (byDataType)
-      return byDataType;
-    const byNodeName = this.getElementTypeByNodeName(element);
-    if (byNodeName)
-      return byNodeName;
-    const byFontSize = this.getElementTypeByFontSize(element);
-    if (byFontSize)
-      return byFontSize;
-    const byClassName = this.getElementTypeByClassName(element);
-    if (byClassName)
-      return byClassName;
-    return null;
+  constructor(nextFocusNode, offset, immediatelyRun = false) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
+    this.immediatelyRun = false;
+    this.nextFocusNode = nextFocusNode;
+    this.offset = offset;
+    this.immediatelyRun = immediatelyRun;
   }
+}
+
+/**
+ * Insert a new node in nearest position of parent block strategy.
+ */
+class InsertNodeToNearestRootStrategy extends ActionHandleStrategy {
   /**
-   * Get the element type by data-type attribute.
-   *
-   * @param {HTMLElement} element - element.
-   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   * @inheritDoc
    */
-  getElementTypeByDataType(element) {
-    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
-      return element.getAttribute('data-type');
+  handleAction(action, target) {
+    const { rteRange, nodeToBeInserted } = action;
+    const { startNode, startOffset } = rteRange;
+    if (startNode) {
+      const parent = target;
+      if (startNode.isContentEditable() && startNode.isTextNode()) {
+        if (startNode.text === '\n' || !startNode.text || startOffset === 0) {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+        else {
+          const startText = startNode.text.substring(0, startOffset);
+          const endText = startNode.text.substring(startOffset);
+          const startTextNode = startNode.cloneWithText(startText);
+          const endTextNode = startNode.cloneWithText(endText);
+          const insertNodes = [startTextNode, nodeToBeInserted];
+          if (endText) {
+            insertNodes.push(endTextNode);
+          }
+          parent.apply(new InsertChildrenBeforeAction(startNode, ...insertNodes));
+          parent.apply(new RemoveChildrenAction(startNode));
+        }
+      }
+      else {
+        if (startOffset !== 0) {
+          parent.apply(new InsertChildrenAfterAction(startNode, nodeToBeInserted));
+        }
+        else {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+      }
+      this.updateCursorPosition(nodeToBeInserted);
     }
-    return null;
   }
   /**
-   * Get the element type by font size.
+   * Update the cursor position to end of the inserted node.
    *
-   * @param {HTMLElement} element - element.
-   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   * @param {RTENode} node - node to find root content
    */
-  getElementTypeByFontSize(element) {
-    var _a;
-    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';
-      default:
-        return null;
+  updateCursorPosition(node) {
+    const root = this.getRootContent(node.parent);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(node));
     }
   }
+}
+
+/**
+ * Strategy for inserting text into a decorator node. The decorator can not edit, so we insert the text as a new child.
+ */
+class InsertTextToDecoratorNodeStrategy extends ActionHandleStrategy {
   /**
-   * Get the element type by node name.
-   *
-   * @param {HTMLElement} element - element.
-   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   * @inheritDoc
    */
-  getElementTypeByNodeName(element) {
-    switch (element.nodeName) {
-      case 'H1':
-        return 'heading-1';
-      case 'H2':
-        return 'heading-2';
-      case 'H3':
-        return 'heading-3';
-      case 'H4':
-        return 'heading-4';
-      case 'H5':
-        return 'heading-5';
-      case 'H6':
-        return 'heading-6';
-      default:
-        return null;
+  handleAction(action, target) {
+    const { text, offset, decoratorNode } = action;
+    const paragraph = this.createNewParagraph(text);
+    if (paragraph) {
+      const newTextNode = paragraph.children[0];
+      if (offset !== 0) {
+        target.apply(new InsertChildrenAfterAction(decoratorNode, newTextNode));
+      }
+      else {
+        target.apply(new InsertChildrenBeforeAction(decoratorNode, newTextNode));
+      }
+      this.setTheCursorPosition(newTextNode);
     }
   }
   /**
-   * Get the element type by class name.
+   * Set the cursor position to the new text node.
    *
-   * @param {HTMLElement} element - element.
-   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   * @param {RTENode} focusNode - The new text node to focus on.
    */
-  getElementTypeByClassName(element) {
-    if (element.className) {
-      const match = /\bv-rte--text-style-(title|subtitle|heading-1|heading-2|heading-3|paragraph)\b/.exec(element.className);
-      if (match) {
-        return match[1];
-      }
+  setTheCursorPosition(focusNode) {
+    const rootContent = this.getRootContent(focusNode.parent);
+    if (rootContent) {
+      rootContent.apply(new UpdateCursorPositionAction(focusNode));
     }
-    return null;
   }
 }
 
-/** Handle image size annotation */
-class ImageSizeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+/**
+ * Insert new paragraph into current list item block at special position.
+ */
+class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
-  }
-  /**
-   * Handle annotation.
-   *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEImageAnnotations} - Annotation.
-   */
-  handle(element) {
-    const size = this.getImageSize(element);
-    return size ? { size: size } : {};
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
   }
   /**
-   * Determine the image display size based on the width of the current element.
+   * Breaks a single list item block at a specific position.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRichTextImageEditorSizeType>} -Image size, default 'md'.
+   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
+   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
+   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
+   * caret position if it is neither at the start nor at the end.
    */
-  getImageSize(element) {
-    if (element.getAttribute('data-size')) {
-      return element.getAttribute('data-size');
+  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
+    const newListItem = target.createNewListItem();
+    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
+    newListItem.apply(new AppendChildrenAction([newBreakNode]));
+    if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem, target);
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, newListItem));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
     }
-    return null;
+    return newListItem;
   }
-}
-
-/** Handle image alt annotation */
-class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
   /**
-   * @inheritDoc
+   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
+   *
+   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {RTEBlock} Returns a `RTEBlock`.
    */
-  canHandle(targetDto) {
-    return targetDto.name === 'RTEImageNode';
+  breakListItemAtEnd(newListItem, target) {
+    const lastItem = target.parent.children[target.parent.children.length - 1];
+    const currentItemIsEmpty = target.children.length === 1 && target.children[0].isEmpty();
+    if (target === lastItem && currentItemIsEmpty) {
+      const parentParent = target.parent.parent;
+      if (parentParent['type'] !== 'list-item') {
+        const newParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new AppendChildrenAction(newListItem.children));
+        parentParent.apply(new InsertChildrenAfterAction(target.parent, newParagraph));
+        target.parent.apply(new RemoveChildrenAction(target));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new InsertChildrenAfterAction(parentParent, newListItem));
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+    else {
+      target.parent.apply(new InsertChildrenAfterAction(target, newListItem));
+    }
+    return newListItem;
   }
   /**
-   * Handle annotation.
+   * Copy the inline style to new node
    *
-   * @param {HTMLElement} element - Current elements.
-   * @returns {VegaRTEImageAnnotations} - Annotation.
+   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
+   * @returns {RTETextNode} Returns a `RTETextNode`.
    */
-  handle(element) {
-    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    return textNode;
   }
 }
 
 /**
- * Handle inline html annotation
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
  */
-class InlineHtmlAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
-  constructor() {
-    super(...arguments);
-    this.customAttributeHandler = new CustomAttributeAnnotationHandler();
-    this.customStyleAnnotationHandler = new CustomStyleAnnotationHandler();
-    this.customClassAnnotationHandler = new CustomClassAnnotationHandler();
-  }
-  /**
-   * @inheritDoc
-   */
-  canHandle(targetDto, options) {
-    return targetDto.name === 'RTETextNode' && options.autoMatchFormat === false;
-  }
-  /**
-   * @inheritDoc
-   */
-  handle(element, parentAnnotations) {
-    const canHandle = InlineHtmlAnnotationHandler.canHandleTags.includes(element.nodeName);
-    if (canHandle) {
-      const inlineHtml = this.generateInlineHtmlAnnotation(element, Object.assign({}, parentAnnotations));
-      if (inlineHtml) {
-        return { inlineHtml: inlineHtml };
-      }
-    }
-    return {};
+class RemoveNestListAction extends ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
   }
+}
+
+/**
+ * List remove list item strategy.
+ */
+class ListRemoveListItemStrategy extends RemoveChildrenStrategy {
   /**
-   * Generate inline html annotation.
+   * Remove the list item, check the list item and remove self if the list item is empty.
    *
-   * @param {HTMLElement} child - Current element.
-   * @param {VegaRTETextAnnotations} annotations - Current annotations.
-   * @returns {Nullable<VegaInlineHtmlSchema>} - Inline html annotation.
+   * @param {RemoveChildrenAction} action - The remove action instance.
+   * @param {RTEListBlock} target - The list block.
    */
-  generateInlineHtmlAnnotation(child, annotations) {
-    let { inlineHtml } = annotations;
-    if (!RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ||
-      (child.childNodes.length === 1 && child.childNodes[0].nodeType !== Node.TEXT_NODE)) {
-      const childInlineHtmlNode = {
-        htmlTag: child.nodeName.toLowerCase(),
-        customAttribute: this.customAttributeHandler.handle(child).customAttribute,
-        customStyle: this.customStyleAnnotationHandler.handle(child).customStyle,
-        customClass: this.customClassAnnotationHandler.handle(child).customClass,
-      };
-      if (!inlineHtml) {
-        inlineHtml = childInlineHtmlNode;
+  handleAction(action, target) {
+    super.handleAction(action, target);
+    const parent = target.parent;
+    if (target.children.length === 0 && parent) {
+      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
+      if (parent['type'] === 'list-item') {
+        parent.apply(new RemoveNestListAction(target));
       }
       else {
-        let lastChild = inlineHtml;
-        while (lastChild.child &&
-          child.parentNode &&
-          lastChild.child.htmlTag === child.parentNode.nodeName.toLowerCase()) {
-          lastChild = lastChild.child;
-        }
-        lastChild.child = childInlineHtmlNode;
+        parent.apply(new RemoveChildrenAction(target));
       }
     }
-    return inlineHtml ? Object.assign({}, inlineHtml) : null;
   }
 }
-InlineHtmlAnnotationHandler.canHandleTags = [
-  'A',
-  'ABBR',
-  'AUDIO',
-  'B',
-  'BDI',
-  'BDO',
-  'CITE',
-  'CODE',
-  'DEL',
-  'DFN',
-  'EMBED',
-  'EM',
-  'I',
-  'INS',
-  'KBD',
-  'MARK',
-  'METER',
-  'OUTPUT',
-  'PROGRESS',
-  'Q',
-  'S',
-  'SMALL',
-  'SPAN',
-  'STRONG',
-  'SUB',
-  'SUP',
-  'TIME',
-  'U',
-  'VAR',
-  'VIDEO',
-];
 
-/** Html element to annotations generator */
-class HtmlElementToAnnotationGenerator {
-  constructor() {
-    this.handlers = [
-      new TextAlignAnnotationHandler(),
-      new IndentAnnotationHandler(),
-      new BoldAnnotationHandler(),
-      new ItalicAnnotationHandler(),
-      new UnderlineAnnotationHandler(),
-      new StrikeThroughAnnotationHandler(),
-      new ColorAnnotationHandler(),
-      new LinkAnnotationHandler(),
-      new CodeAnnotationHandler(),
-      new ImageSizeAnnotationHandler(),
-      new ImageAltAnnotationHandler(),
-      new CustomAttributeAnnotationHandler(),
-      new CustomClassAnnotationHandler(),
-      new CustomStyleAnnotationHandler(),
-      new LinkAnnotationHandler(),
-      new TextStyleAnnotationHandler(),
-      new InlineHtmlAnnotationHandler(),
-    ];
-  }
+/**
+ * Manager class for registering DTO action strategies.
+ */
+class RTEDTOActionStrategyManager {
   /**
-   * The function generates annotations for a given target DTO and HTML element based on a set of
-   * strategies.
+   * Registers basic strategies for a given DTO class.
    *
-   * @typedef T class name of target DTO
-   * @typedef V generated annotations type
-   * @param {T} targetDto - Which DTO is the generated annotations to set.
-   * @param {HTMLElement} element - Current html element.
-   * @param {HtmlElementToAnnotationGenerateOptions} [options] - Options
-   * @returns {V} Generated annotations.
+   * @param {string} dtoClassName - The name of the RTE block class name.
    */
-  generate(targetDto, element, options = { autoMatchFormat: true }) {
-    const isLinkElement = element.tagName === 'A';
-    return this.handlers
-      .filter((handler) => !options.autoMatchFormat && isLinkElement ? handler instanceof LinkAnnotationHandler : true)
-      .filter((handler) => element.nodeType !== Node.TEXT_NODE &&
-      handler.canHandle(targetDto, {
-        skipCustomAnnotations: options.skipCustomAnnotations || isLinkElement,
-        autoMatchFormat: options.autoMatchFormat,
-      }))
-      .reduce((annotations, handler) => {
-      const result = handler.handle(element, options.parentAnnotations);
-      return Object.assign(Object.assign({}, annotations), result);
-    }, {});
+  registerBlockBasicStrategies(dtoClassName) {
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, dtoClassName, dtoClassName === RTEListBlock.name
+      ? new ListRemoveListItemStrategy()
+      : new RemoveChildrenStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, dtoClassName, new AppendChildrenStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, dtoClassName, new InsertChildrenBeforeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_AFTER, dtoClassName, new InsertChildrenAfterStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, dtoClassName, new BlockDeleteTextOrDecoratorNodeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NEW_PARAGRAPH, dtoClassName, dtoClassName === RTEListItemBlock.name
+      ? new ListItemInsertNewParagraphStrategy()
+      : new BlockInsertNewParagraphStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE, dtoClassName, new InsertTextToDecoratorNodeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT, dtoClassName, new InsertNodeToNearestRootStrategy());
   }
 }
-const htmlElementToAnnotationGenerator = new HtmlElementToAnnotationGenerator();
+const RTEDTOActionStrategyManager$1 = new RTEDTOActionStrategyManager();
 
 /** Abstract class for block html element to RTE block dto */
 class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
@@ -3605,6 +3679,18 @@ class VegaRTEContent {
   apply(action) {
     ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
+  /**
+   * Get the last node in the content.
+   *
+   * @returns {Nullable<RTENode>} The last node in the content or null if there are no nodes.
+   */
+  getLastNode() {
+    if (this.children.length === 0) {
+      return null;
+    }
+    const lastBlock = this.children[this.children.length - 1];
+    return lastBlock.getLastNode();
+  }
   /**
    * Convert text to list.
    *
@@ -3679,4 +3765,59 @@ class VegaRTEContent {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
 })();
 
-export { ElementToDtoStrategyProcessor$1 as E, ImageAnnotation as I, MergeTwoBlocksNodesAction as M, RTEImageBlock as R, VegaRTEContent as V, RTEListItemBlock as a, RTEListBlock as b, RTEImageNode as c, InsertNewParagraphAction as d };
+/**
+ * RTEDTORendererManager is a singleton class that manages the registration and retrieval of RTE DTO renderers.
+ */
+class RTEDTORendererManager {
+  constructor() {
+    // Register RTE DTO renderers, mapping type strings to their respective renderer instances.
+    this.RTE_DTO_RENDERER_MAP = new Map();
+    // Register RTE Toolbar Button Renderers, mapping type strings to their respective renderer instances.
+    this.RTE_TOOLBAR_BUTTON_RENDERER_MAP = new Map();
+  }
+  /**
+   * Registers a new RTE DTO renderer.
+   *
+   * @param {string} type - The type identifier for the RTE DTO renderer.
+   * @param {VegaRTEBaseRenderer} RTEDTORenderer - The renderer instance for the RTE DTO.
+   */
+  registerRTEDTORenderer(type, RTEDTORenderer) {
+    const existRenderer = this.RTE_DTO_RENDERER_MAP.get(type);
+    if (RTEDTORenderer &&
+      existRenderer &&
+      existRenderer.constructor.name !== RTEDTORenderer.constructor.name) {
+      throw new Error(`Renderer for type ${type} is already registered with a different class(${existRenderer.constructor.name}).`);
+    }
+    this.RTE_DTO_RENDERER_MAP.set(type, RTEDTORenderer);
+  }
+  /**
+   * Registers a new RTE Toolbar Button Renderer.
+   *
+   * @param {string} type - The type identifier for the RTE Toolbar Button Renderer.
+   * @param {VegaRTEToolbarButtonRenderer} RTEToolbarButtonRenderer - The renderer instance for the RTE Toolbar Button.
+   */
+  registerRTEToolbarButtonRenderer(type, RTEToolbarButtonRenderer) {
+    this.RTE_TOOLBAR_BUTTON_RENDERER_MAP.set(type, RTEToolbarButtonRenderer);
+  }
+  /**
+   * Retrieves the RTE renderer for a given type.
+   *
+   * @param {string} type - The type identifier for the RTE block.
+   * @returns {Nullable<BaseRenderer>} - The renderer instance for the RTE block, or null if not found.
+   */
+  getRTERenderer(type) {
+    return this.RTE_DTO_RENDERER_MAP.get(type);
+  }
+  /**
+   * Retrieves the RTE Toolbar Button Renderer for a given type.
+   *
+   * @param {string} type - The type identifier for the RTE Toolbar Button Renderer.
+   * @returns {Nullable<VegaRTEToolbarButtonRenderer>} - The renderer instance for the RTE Toolbar Button, or null if not found.
+   */
+  getRTEToolbarButtonRenderer(type) {
+    return this.RTE_TOOLBAR_BUTTON_RENDERER_MAP.get(type);
+  }
+}
+const RTEDTORendererManager$1 = new RTEDTORendererManager();
+
+export { ElementToDTOClassStrategyManager as E, ImageAnnotation as I, MergeTwoBlocksNodesAction as M, RTEDTORendererManager$1 as R, UpdateCursorPositionAction as U, VegaRTEContent as V, RTEDTOActionStrategyManager$1 as a, ElementToDTOStrategy as b, RTEListItemBlock as c, RTEImageBlock as d, RTEListBlock as e, RTEImageNode as f, InsertNewParagraphAction as g, ElementToDtoStrategyProcessor$1 as h };