@heartlandone/vega 2.71.0-RTE-table-preview → 2.72.0-RTE-table-preview

package/dist/esm/dto-renderer-manager-23784148.js

@@ -0,0 +1,3910 @@
+import { d as ActionHandleStrategy, e as RTETextBlock, b as RTETextNode, h as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, m as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, n as BlockUpdateHorizontalAlignmentStrategy, c as ModifyContentActionType, o as BlockInsertLineBreakStrategy, p as BlockInsertLineBreakWithBlocksStrategy, q as BlockSplitWithTextNodeStrategy, r as BlockReplaceNodesStrategy, t as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, l as RemoveChildrenAction, S as SyncUpSelectionAction, j as InsertChildrenBeforeAction, B as BlockAnnotation, u as BlockAnnotationTypeEnum, f as RTEBlock, v as CustomStyleAnnotation, w as CustomClassAnnotation, C as CustomAttributeAnnotation, x as RTECodeBlock, s as stateEntityRenderingRegistry, N as NodeAnnotation, y as NodeAnnotationTypeEnum, z as RTEDecoratorNode, D as NodeTypeEnum, E as CommonAnnotation, F as AnnotationAction, G as ReplaceChildNodesAction, M as ModifyContentAction, J as SplitBlockWithNodeAction, K as BlockDeleteNodeContentStrategy, U as UpdateTextAction, L as RemoveChildrenStrategy, O as RTE_TEXT_COLORS, P as RTE_DEFAULT_TEXT_COLOR, R as RTEDTOClassManager } from './code-block-3d3a9030.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
+import { i as isNonNullable } from './type-guard-b48aec98.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-f81f215f.js';
+import { b as VegaInternalUpdateRTECursorPosition, c as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-54ce7562.js';
+import { d as dashCaseToCamel } from './string-a953eafc.js';
+import { r as rgbToHex, i as isHTMLElement } from './ui-bb99c0c2.js';
+import { c as cleanObject } from './object-66c37948.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+
+/**
+ * Remove list item nest list block strategy.
+ */
+class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the nest list block from the list item, clear the property children when the children is empty.
+   *
+   * @param {RemoveNestListAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    if (target.nestList) {
+      if (target.nestList.length > 1) {
+        target.nestList = target.nestList.filter((child) => child !== action.nestListBlockToBeRemoved);
+      }
+      else {
+        target.nestList = undefined;
+      }
+    }
+  }
+}
+
+/**
+ * Replace list item nest list strategy.
+ */
+class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newList.forEach((listBlock) => {
+      listBlock.parent = target;
+    });
+    target.nestList = action.newList;
+  }
+}
+
+/**
+ * Insert image node to list item block strategy.
+ */
+class ListItemInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * The image node can not insert into list item block, so insert image after parent list block.
+   *
+   * @param {InsertImageToBlockAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.parent.apply(action);
+  }
+}
+
+/**
+ * List item block
+ */
+class RTEListItemBlock extends RTETextBlock {
+  constructor(id, nestList, options) {
+    super(id, 'list-item', options);
+    /**
+     * TODO: Refactor the list item properties children and nestList, merge two properties together.
+     *
+     * 1. Update the type of `children` to include `RTEListBlock` as a possible type.
+     * 2. The list block children should text block array and nest list block array, The text block should wrap a `li` tag when rendering.
+     */
+    this.nestList = [];
+    this.nestList = nestList;
+  }
+  /**
+   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    const listItemBlock = new RTEListItemBlock(block.id, undefined, options);
+    listItemBlock.children = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock, options));
+    if (block.children) {
+      listItemBlock.nestList = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    var _a;
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.nestList) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    return [
+      `<li${attrStr}>`,
+      this.children.map((node) => node.toHtml()).join(''),
+      `</li>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTEListItemBlock(generateUUID());
+    block.children = [];
+    block.apply(new AppendChildrenAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    if (this.nestList && this.nestList.length > 0) {
+      const childListBlock = this.nestList[this.nestList.length - 1];
+      return childListBlock.getLastNode();
+    }
+    return super.getLastNode();
+  }
+  /**
+   * Create a new list item block.
+   *
+   * @returns {RTEListItemBlock} - A list item block.
+   */
+  createNewListItem() {
+    return new RTEListItemBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    var _a;
+    const block = new RTEListItemBlock(this.id);
+    block.children = this.children.map((node) => node.clone(block));
+    block.annotationMap = super.cloneAnnotations();
+    block.nestList = (_a = this.nestList) === null || _a === void 0 ? void 0 : _a.map((child) => child.clone(block));
+    block.parent = parent;
+    return block;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
+})();
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class ListTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const bulletList = target.parent.createList(action.listType);
+    const isSameList = selectedBlocks.every((block) => block.parent === target);
+    if (isSameList) {
+      // Select one or more list items belonging to the same list, and all items in this list should be updated
+      bulletList.apply(new AppendChildrenAction(target.children));
+      target.parent.apply(new InsertChildrenAfterAction(target, bulletList));
+      target.parent.apply(new RemoveChildrenAction(target));
+      selectedBlocks.forEach((block) => block.children.map((node) => node.apply(new SyncUpSelectionAction())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
+      bulletList.apply(new AppendChildrenAction(listItems));
+      target.parent.apply(new InsertChildrenAfterAction(target, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new RemoveChildrenAction(block));
+      });
+      if (target.children.length === 0) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected list block to paragraph strategy.
+ */
+class ListTransformToParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    let isSelectedFirstBlock = false;
+    let isSelectedLastBlock = false;
+    const selectedBlocks = action.selectedBlocks;
+    const currentParagraph = selectedBlocks.map((block) => {
+      block.children.map((node) => node.apply(new SyncUpSelectionAction()));
+      if (block === target.children[0])
+        isSelectedFirstBlock = true;
+      if (block === target.children[target.children.length - 1])
+        isSelectedLastBlock = true;
+      return this.toParagraph(block);
+    });
+    if (isSelectedFirstBlock) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      target.parent.apply(new InsertChildrenAfterAction(target, ...currentParagraph));
+    }
+    else {
+      const startIndex = target.children.indexOf(selectedBlocks[0]);
+      const lastIndex = target.children.indexOf(selectedBlocks[selectedBlocks.length - 1]);
+      const firstBulletList = target.parent.createList(target.type);
+      firstBulletList.apply(new AppendChildrenAction(target.children.slice(0, startIndex)));
+      const lastBulletList = target.parent.createList(target.type);
+      lastBulletList.apply(new AppendChildrenAction(target.children.slice(lastIndex + 1)));
+      target.parent.apply(new InsertChildrenBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
+      target.parent.apply(new RemoveChildrenAction(target));
+    }
+    selectedBlocks.map((block) => {
+      target.apply(new RemoveChildrenAction(block));
+    });
+    if (target.children.length === 0) {
+      target.parent.apply(new RemoveChildrenAction(target));
+    }
+  }
+  /**
+   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
+   *
+   * @param {RTEListItemBlock} block - The block that will be covered
+   * @returns {RTETextBlock} Returns a `RTETextBlock`.
+   */
+  toParagraph(block) {
+    const textBlock = new RTETextBlock(generateUUID(), 'paragraph');
+    textBlock.apply(new AppendChildrenAction(block['children']));
+    textBlock['annotationMap'] = block['annotationMap'];
+    return textBlock;
+  }
+}
+
+/**
+ * Insert image to list block strategy.
+ */
+class ListInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the list item block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    if (target.parent['type'] !== 'list-item') {
+      target.parent.apply(new InsertChildrenAfterAction(target, imageBlock));
+    }
+    else {
+      target.parent.apply(action);
+    }
+  }
+}
+
+/**
+ * List annotation
+ */
+class ListAnnotation extends BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = BlockAnnotationTypeEnum.LIST;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return {
+      paddingLeft: '8px',
+      marginLeft: '16px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte--list';
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ListAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return undefined;
+  }
+}
+
+/**
+ * List block
+ */
+class RTEListBlock extends RTEBlock {
+  constructor(id, type, options) {
+    super(id);
+    this.type = 'bullet-list';
+    this.children = [];
+    this.type = type;
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(BlockAnnotationTypeEnum.LIST, new ListAnnotation());
+    }
+  }
+  /**
+   * Converts a VegaRTEListBlock object to an RTEListBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    const listBlock = new RTEListBlock(block.id, block.type, options);
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    listBlock.children = block.blocks.map((item) => {
+      const listItemBlock = RTEListItemBlock.from(item, options);
+      listItemBlock.parent = listBlock;
+      return listItemBlock;
+    });
+    return listBlock;
+  }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.children.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString();
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.children.map((block) => block.toHtml()).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedListBlock = new RTEListBlock(this.id, this.type);
+    clonedListBlock.children = this.children.map((item) => item.clone(clonedListBlock));
+    clonedListBlock.annotationMap = super.cloneAnnotations();
+    clonedListBlock.parent = parent;
+    return clonedListBlock;
+  }
+  /**
+   * Returns the block tag based on the type of the list block.
+   *
+   * @returns {RTEListBlockTagType} - The block tag for the list block, either 'ol' or 'ul'.
+   */
+  getBlockTag() {
+    return this.type === 'number-list' ? 'ol' : 'ul';
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
+})();
+
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+class BlockTransformToCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * Get the all select text and create a new code block.
+   *
+   * @param {TransformToCodeBlockAction} action - The action instance.
+   * @param {VegaRTEContent} target - The block top parent instance.
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const codeBlock = new RTECodeBlock(generateUUID(), this.getCodeContent(selectedBlocks), 'plainText');
+    target.apply(new InsertChildrenBeforeAction(selectedBlocks[0], codeBlock));
+    action.newCodeBlock = codeBlock;
+    this.removeSelectBlocks(selectedBlocks, target);
+  }
+  /**
+   * Get the selected text block text content.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @returns {string} - The selected text content.
+   */
+  getCodeContent(selectedBlocks) {
+    const selectedTextBlocks = selectedBlocks.filter((item) => item.type !== 'image' && item.type !== 'list-item');
+    return selectedTextBlocks
+      .map((block) => {
+      return block.children.map((node) => node.text).join('');
+    })
+      .join('\n');
+  }
+  /**
+   * Remove the selected blocks after append new code block.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @param {VegaRTEContent} target - The selected block top parent object.
+   */
+  removeSelectBlocks(selectedBlocks, target) {
+    for (let i = 0; i < selectedBlocks.length; i++) {
+      target.apply(new RemoveChildrenAction(selectedBlocks[i]));
+    }
+  }
+}
+
+/**
+ * Abstract class to define strategies for processing HTML elements
+ */
+class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
+  }
+  /**
+   * 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;
+  }
+}
+
+/**
+ * Manager for registering and retrieving strategies that convert HTML elements to DTOs.
+ */
+class elementToDTOClassStrategyManager {
+  constructor() {
+    this.elementToBlockStrategies = [];
+    this.elementToNodeStrategies = [];
+  }
+  /**
+   * 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.
+   */
+  registerElementToBlockStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToBlockStrategies)) {
+      this.elementToBlockStrategies.unshift(strategy);
+    }
+  }
+  /**
+   * 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 {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToNodeStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToNodeStrategies)) {
+      this.elementToNodeStrategies.unshift(strategy);
+    }
+  }
+  /**
+   * Retrieves all registered element to block strategies for converting HTML elements to DTOs.
+   *
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to block strategies.
+   */
+  getElementToBlockStrategies() {
+    return this.elementToBlockStrategies;
+  }
+  /**
+   * Retrieves all registered element to node strategies for converting HTML elements to DTOs.
+   *
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to node strategies.
+   */
+  getElementToNodeStrategies() {
+    return this.elementToNodeStrategies;
+  }
+  /**
+   * Checks if a strategy is already registered in the provided strategy list.
+   *
+   * @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.
+   */
+  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;
+        }
+      }
+      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;
+  }
+  /**
+   * Checks if the given element is valid to parse.
+   *
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
+   */
+  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.
+ */
+class UpdateCursorPositionStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  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);
+    }
+  }
+}
+
+/**
+ * Insert children at the front of the block strategy.
+ */
+class InsertChildrenBeforeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceElementWithElements(target, action.referChildren, [
+      ...action.childrenToBeInserted,
+      action.referChildren,
+    ]);
+  }
+  /**
+   * Replaces a specific block or node with an array of blocks or nodes within RTEContentBlock array.
+   *
+   * @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.
+   */
+  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 children at the front of the block strategy.
+ */
+class InsertChildrenAfterStrategy extends InsertChildrenBeforeStrategy {
+  /**
+   * @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;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} size - Image size
+   * @param {string} alt - Image alt
+   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
+   */
+  static from(size, alt) {
+    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return isNonNullable(this.alt)
+      ? {
+        size: this.size,
+        alt: this.alt,
+      }
+      : {
+        size: this.size,
+      };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ImageAnnotation(this.size, this.alt);
+  }
+  /**
+   * @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;
+  }
+  /**
+   * @inheritDoc
+   */
+  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%' });
+      }
+      case 'md': {
+        return Object.assign(Object.assign({}, baseStyle), { width: '50%' });
+      }
+      case 'lg': {
+        return Object.assign(Object.assign({}, baseStyle), { width: '100%' });
+      }
+    }
+  }
+}
+
+/**
+ * Update the image node annotation map strategy.
+ */
+class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    target.annotationMap.set(annotation.type, annotation);
+  }
+}
+
+/**
+ * The image node update property url strategy.
+ */
+class ImageUpdateUrlStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  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;
+  }
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @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`
+   */
+  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;
+  }
+  /**
+   * @inheritDoc
+   */
+  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 });
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    return new RTEImageNode(this.id, this.url, parent, super.cloneAnnotations());
+  }
+  /**
+   * @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}>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  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());
+})();
+
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @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
+   */
+  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;
+    }
+  }
+  /**
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   *
+   * @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.
+   */
+  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;
+  }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
+   *
+   * @param {LineBreakSingleBlockAction} action - The action instance.
+   * @param {RTEImageBlock} target - The image block.
+   */
+  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];
+    }
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  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];
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @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
+   */
+  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 {
+  /**
+   * @inheritDoc
+   */
+  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));
+    }
+  }
+}
+
+/**
+ * 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.
+   *
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  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;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.children.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const attrStr = super.generateAttributeString();
+    const children = this.children.map((node) => node.toHtml()).join('');
+    return super.shouldRenderAsInternalWrapper()
+      ? children
+      : [`<div${attrStr}>`, children, `</div>`].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((node) => node.url.length > 0);
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * Create a new image block.
+   *
+   * @returns {RTEImageBlock} - The empty image block.
+   */
+  createNewImageBlock() {
+    return new RTEImageBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEImageBlock(this.id);
+    clonedBlock.children = this.children.map((node) => node.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+}
+(() => {
+  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;
+  }
+  /**
+   * Converts a VegaRTEHtmlBlock to an RTEHtmlBlock.
+   *
+   * @param {VegaRTEHtmlBlock} block - The VegaRTEHtmlBlock to convert.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @returns {RTEHtmlBlock} The converted RTEHtmlBlock.
+   */
+  static from(block, options) {
+    const htmlBlock = new RTEHtmlBlock(block.id, block.htmlTag);
+    const { annotations } = block;
+    if (annotations) {
+      super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
+    }
+    htmlBlock.children = this.generateBlockChildren(block.children, options, htmlBlock);
+    return htmlBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEHtmlBlock(this.id, this.htmlTag);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.htmlTag;
+    const attrStr = super.generateAttributeString();
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.children.map((block) => block.toHtml()).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+/**
+ * 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;
+  }
+}
+
+/**
+ * Block delete text or decorator node strategy.
+ */
+class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  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 the delete text logic when press delete key.
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   * @param {RTETextBlock} target - Current text block
+   */
+  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
+      // TODO: Check whether need to remove below logic because already handled the same logic in remove node strategy
+      if (target.children.length === 0) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
+  }
+  /**
+   * Delete decorator node content
+   *
+   * @param {DeleteBlockContentAction} action - The delete block content action
+   * @param {RTEBlock} target - The target block
+   */
+  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;
+    }
+  }
+}
+
+/**
+ * Insert new paragraph into current block at special position.
+ */
+class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { startContainerNode } = action;
+    action.newBlock = this.breakSingleBlock(startContainerNode, action.startOffset, target);
+  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTEBlock} target -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
+  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;
+    }
+  }
+  /**
+   * Create new Paragraph
+   *
+   * @param {RTENode} splitNode - The split node of the block.
+   * @returns {Nullable<RTETextBlock>} - The new text block.
+   */
+  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;
+    }
+  }
+}
+
+/**
+ * Update the cursor position in the editor.
+ *
+ * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset], [immediatelyRun]))
+ */
+class UpdateCursorPositionAction extends ModifyContentAction {
+  /**
+   * 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.
+   * @param {boolean} immediatelyRun - Whether to immediately set the cursor position after applying it. Usually the set action will trigger after the UI renders.
+   */
+  constructor(nextFocusNode, offset, immediatelyRun = false) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
+    this.immediatelyRun = false;
+    this.nextFocusNode = nextFocusNode;
+    this.offset = offset;
+    this.immediatelyRun = immediatelyRun;
+    // Don't flush changes if we want to immediately run the cursor update. Usually the current value is the latest value.
+    if (this.immediatelyRun) {
+      this.isFlushable = false;
+    }
+  }
+}
+
+/**
+ * Insert a new node in nearest position of parent block strategy.
+ */
+class InsertNodeToNearestRootStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  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);
+    }
+  }
+  /**
+   * Update the cursor position to end of the inserted node.
+   *
+   * @param {RTENode} node - node to find root content
+   */
+  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 {
+  /**
+   * @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);
+    }
+  }
+  /**
+   * Set the cursor position to the new text node.
+   *
+   * @param {RTENode} focusNode - The new text node to focus on.
+   */
+  setTheCursorPosition(focusNode) {
+    const rootContent = this.getRootContent(focusNode.parent);
+    if (rootContent) {
+      rootContent.apply(new UpdateCursorPositionAction(focusNode));
+    }
+  }
+}
+
+/**
+ * Insert new paragraph into current list item block at special position.
+ */
+class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Breaks a single list item block at a specific position.
+   *
+   * @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.
+   */
+  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;
+  }
+  /**
+   * 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`.
+   */
+  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;
+  }
+  /**
+   * Copy the inline style to new node
+   *
+   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
+   * @returns {RTETextNode} Returns a `RTETextNode`.
+   */
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * 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;
+  }
+}
+
+/**
+ * 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.
+   */
+  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 {
+        parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Strategy to handle the paste content into function block.
+ */
+class PasteContentStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    if (target.parent) {
+      const { blocksToBeInserted, startNode, startOffset } = action;
+      let futureFocusBlock = target;
+      if (startNode === target.children[0] && startOffset === 0) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, ...blocksToBeInserted));
+      }
+      else {
+        const breakAction = new SplitBlockWithNodeAction(startNode, startOffset);
+        target.apply(breakAction);
+        target.parent.apply(new InsertChildrenAfterAction(target, ...blocksToBeInserted));
+        futureFocusBlock = breakAction.newBlock;
+      }
+      action.futureFocusBlock = futureFocusBlock;
+    }
+  }
+}
+
+/**
+ * Manager class for registering DTO action strategies.
+ */
+class RTEDTOActionStrategyManager {
+  /**
+   * Registers basic strategies for a given DTO class.
+   *
+   * @param {string} dtoClassName - The name of the RTE block class name.
+   */
+  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());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.PASTE_CONTENT, dtoClassName, new PasteContentStrategy());
+  }
+}
+const RTEDTOActionStrategyManager$1 = new RTEDTOActionStrategyManager();
+
+/**
+ * Abstract class to define handler for generate the annotations
+ */
+class AnnotationGeneratorStrategyAbstract {
+}
+
+/** Handle bold annotation */
+class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isBold(element) || parentAnnotations.bold ? { bold: true } : {};
+  }
+  /**
+   * Is bold element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
+      element.style.fontWeight === 'bold' ||
+      element.style.fontWeight === '700' ||
+      element.classList.contains('v-rte--bold'));
+  }
+}
+
+/** 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;
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element) {
+    const attributes = this.getAttributes(element);
+    return Object.keys(attributes).length > 0 ? { customAttribute: attributes } : {};
+  }
+  /**
+   * Obtain the custom attributes of element, excluding 'style' and 'class'.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Record<string, string>} - Record<string, string>.
+   */
+  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;
+    }, {});
+  }
+  /**
+   * Check if the attribute name is valid.
+   *
+   * @param {string} attr - Attribute name.
+   * @returns {boolean} - True if valid, false otherwise.
+   */
+  isValidAttr(attr) {
+    return /^[a-zA-Z_][\w-]*$/.test(attr);
+  }
+}
+
+/** Handle custom class annotation */
+class CustomClassAnnotationHandler 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 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 !== '');
+  }
+}
+
+/** 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 } : {};
+  }
+  /**
+   * Obtain and format the style of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {AnnotationStyle} - Record<string, string>.
+   */
+  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)), {});
+  }
+}
+
+/** Handle indent annotation */
+class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   */
+  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;
+  }
+}
+
+/** Handle text align annotation */
+class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   */
+  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;
+    }
+  }
+}
+
+/** Handle code annotation */
+class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isCode(element) || parentAnnotations.code ? { code: true } : {};
+  }
+  /**
+   * Is code element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  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
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * 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 } : {};
+  }
+  /**
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
+   */
+  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;
+    }
+  }
+}
+
+/** Handle italic annotation */
+class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  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'));
+  }
+}
+
+/** Handle link annotation */
+class LinkAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.handlers = [
+      new CustomAttributeAnnotationHandler(),
+      new CustomClassAnnotationHandler(),
+      new CustomStyleAnnotationHandler(),
+    ];
+  }
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    if (parentAnnotations.link)
+      return { link: parentAnnotations.link };
+    return element.tagName === 'A' ? { link: this.generateLinkAnnotations(element) } : {};
+  }
+  /**
+   * 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;
+  }
+}
+
+/** Handle strike through annotation */
+class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isStrikethrough(element) || parentAnnotations.strikethrough
+      ? { strikethrough: true }
+      : {};
+  }
+  /**
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes('line-through') ||
+      element.nodeName === 'S' ||
+      element.nodeName === 'DEL' ||
+      element.classList.contains('v-rte--strikethrough'));
+  }
+}
+
+/** Handle underline annotation */
+class UnderlineAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isUnderline(element) || parentAnnotations.underline ? { underline: true } : {};
+  }
+  /**
+   * Is underline element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isUnderline(element) {
+    return (element.style.textDecoration.includes('underline') ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
+  }
+}
+
+/** 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 } : {};
+  }
+  /**
+   * 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 {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - node type.
+   */
+  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;
+  }
+  /**
+   * Get the element type by data-type attribute.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   */
+  getElementTypeByDataType(element) {
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    return null;
+  }
+  /**
+   * Get the element type by font size.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   */
+  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;
+    }
+  }
+  /**
+   * Get the element type by node name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   */
+  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;
+    }
+  }
+  /**
+   * Get the element type by class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {Nullable<VegaRTETextStyleType>} - element type or null if not found.
+   */
+  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
+   */
+  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 } : {};
+  }
+  /**
+   * 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'.
+   */
+  getImageSize(element) {
+    if (element.getAttribute('data-size')) {
+      return element.getAttribute('data-size');
+    }
+    return null;
+  }
+}
+
+/** Handle image alt annotation */
+class ImageAltAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTEImageNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEImageAnnotations} - Annotation.
+   */
+  handle(element) {
+    return element.hasAttribute('alt') ? { alt: element.getAttribute('alt') } : {};
+  }
+}
+
+/**
+ * Handle inline html annotation
+ */
+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 {};
+  }
+  /**
+   * Generate inline html annotation.
+   *
+   * @param {HTMLElement} child - Current element.
+   * @param {VegaRTETextAnnotations} annotations - Current annotations.
+   * @returns {Nullable<VegaInlineHtmlSchema>} - Inline html annotation.
+   */
+  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;
+  }
+}
+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(),
+    ];
+  }
+  /**
+   * 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.
+   */
+  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 for block html element to RTE block dto */
+class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
+  constructor() {
+    super(...arguments);
+    this.annotationHandler = new TextStyleAnnotationHandler();
+  }
+  /**
+   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
+   *   flat the child nodes.
+   *
+   * Example:
+   *   <li>
+   *     <u><i>text1</i></u>
+   *     <span></span>
+   *     <span style='font-weight: bold;'><span>text2</span></span>
+   *     text3
+   *   </li>
+   * will tranform to:
+   *   <li>
+   *     <span>text1</span> // with underline and italic annotations
+   *     <span></span>      // empty span
+   *     <span>text2</span> // with bold annotations
+   *     <span>text3</span> // no annotations
+   *   </li>
+   *
+   * @param {HTMLElement[]} elements - Child elements.
+   * @param {VegaRTETextAnnotations} annotations - Parent annotations.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {VegaRTETextNode[]} - Text node DTO.
+   */
+  generateChildNodes(elements, annotations, options) {
+    const childNodes = [];
+    const disableAutoMatchFormat = !!(options && options.autoMatchFormat === false);
+    const parentAnnotations = Object.assign({}, annotations);
+    elements.forEach((child) => {
+      const strategy = ElementToDTOClassStrategyManager.getElementToNodeStrategies().find((item) => item.canHandle([child], 0, options) > 0);
+      let textNodeJson = null;
+      if (strategy) {
+        textNodeJson = strategy.handle([child], options, parentAnnotations);
+      }
+      if (textNodeJson) {
+        childNodes.push(textNodeJson);
+      }
+      else if (isHTMLElement(child) && child.childNodes.length > 0) {
+        const curAnnotations = htmlElementToAnnotationGenerator.generate(RTETextNode, child, Object.assign({ parentAnnotations: disableAutoMatchFormat
+            ? {
+              inlineHtml: parentAnnotations.inlineHtml,
+              link: parentAnnotations.link,
+              code: parentAnnotations.code,
+            }
+            : annotations }, options));
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), curAnnotations, options));
+      }
+    });
+    return childNodes;
+  }
+  /**
+   * 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 {HTMLElement} element - element.
+   * @returns {VegaRTETextBlockType} - Block type.
+   */
+  matchTextBlockType(element) {
+    var _a;
+    return (_a = this.annotationHandler.handle(element).textStyle) !== null && _a !== void 0 ? _a : 'paragraph';
+  }
+}
+
+/**
+ * Converting HTML block elements into RTE blocks.
+ */
+class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex, options) {
+    const element = elementsArray[currentIndex];
+    // - div + img should be handled by RTEImageBlock
+    const isCustomContainer = element.nodeName === 'DIV'
+      ? element.childNodes.length > 0 && element.childNodes[0].nodeName !== 'IMG'
+      : true;
+    return !options.autoMatchFormat &&
+      isCustomContainer &&
+      HtmlBlockStrategy.canHandleTags.includes(elementsArray[currentIndex].nodeName)
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    return RTEHtmlBlock.from(this.generateHtmlBlock(element, options), options);
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+  /**
+   * Generate HTML block DTO from an HTML element.
+   *
+   * @param {HTMLElement} element - HTML element to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {VegaRTEHtmlBlock} - HTML block DTO.
+   */
+  generateHtmlBlock(element, options) {
+    return {
+      id: generateUUID(),
+      type: 'html-block',
+      htmlTag: element.nodeName.toLowerCase(),
+      annotations: htmlElementToAnnotationGenerator.generate(RTEHtmlBlock, element, options),
+      children: [],
+    };
+  }
+}
+HtmlBlockStrategy.canHandleTags = [
+  'ADDRESS',
+  'ARTICLE',
+  'ASIDE',
+  'BLOCKQUOTE',
+  'BUTTON',
+  'CAPTION',
+  'COL',
+  'COLGROUP',
+  'DIV',
+  'DD',
+  'DETAILS',
+  'DL',
+  'DT',
+  'FIELDSET',
+  'FIGCAPTION',
+  'FIGURE',
+  'FOOTER',
+  'FORM',
+  'HEADER',
+  'HR',
+  'HX',
+  'INPUT',
+  'LEGEND',
+  'MAIN',
+  'NAV',
+  'PRE',
+  'SECTION',
+  'SUMMARY',
+  'TABLE',
+  'TBODY',
+  'TD',
+  'TFOOT',
+  'TH',
+  'THEAD',
+  'TR',
+];
+
+/** Transform ul element to list block DTO */
+class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
+  }
+  /**
+   * Parse to a block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray, options) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListBlock, elementsArray[0], options),
+    }, options);
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform ol element to list block DTO */
+class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  }
+  /**
+   * Parse to a number list block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray, options) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListBlock, elementsArray[0], options),
+    }, options);
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform child element of UL element which are not LI element to list item block DTO */
+class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    const isLiNode = element.nodeName !== 'LI';
+    // while child is empty text node like newline or empty string, we should not covert it.
+    const isEmptyNode = element.nodeType === Node.TEXT_NODE && element.textContent.trim() === '';
+    // The node must be in list item.
+    const isInList = isNonNullable(parent) && ['UL', 'OL'].includes(parent.nodeName);
+    return isLiNode && !isEmptyNode && isInList ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray, options) {
+    const nodes = this.generateChildNodes(elementsArray, {}, options);
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    }, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform li element to list item block DTO */
+class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handled.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const parent = elementsArray[currentIndex].parentElement;
+    if (!['UL', 'OL'].includes(parent.nodeName) &&
+      elementsArray.some((element) => element.nodeName === 'LI')) {
+      let count = 0;
+      for (let i = currentIndex; i < elementsArray.length; i++) {
+        if (elementsArray[i].nodeName === 'LI') {
+          count++;
+        }
+        else {
+          break;
+        }
+      }
+      return count;
+    }
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray, options) {
+    const firstElement = elementsArray[0];
+    const parent = firstElement.parentElement;
+    if (!['UL', 'OL'].includes(parent.nodeName)) {
+      return this.generateWithListBlock(elementsArray, options);
+    }
+    return RTEListItemBlock.from(this.generateListItemBlockDTO(firstElement, options), options);
+  }
+  /**
+   * Append child list blocks to current list item block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.nestList = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+  /**
+   * Generate list block from a list of HTML elements.
+   *
+   * @param {HTMLElement[]} elements - List of HTML elements to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {RTEListBlock} - List block DTO.
+   */
+  generateWithListBlock(elements, options) {
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: elements.map((item) => {
+        return this.generateListItemBlockDTO(item, options);
+      }),
+    }, options);
+  }
+  /**
+   * Generate list item block DTO from an HTML element.
+   *
+   * @param {HTMLElement} element - HTML element to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {VegaRTEListItemBlock} - List item block DTO.
+   */
+  generateListItemBlockDTO(element, options) {
+    return {
+      id: generateUUID(),
+      type: 'list-item',
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListItemBlock, element, options),
+      nodes: this.generateChildNodes(Array.from(element.childNodes.length ? element.childNodes : [element]).filter((item) => {
+        return !['UL', 'OL'].includes(item.nodeName);
+      }), htmlElementToAnnotationGenerator.generate(RTETextNode, element, Object.assign(Object.assign({}, options), { skipCustomAnnotations: true })), options),
+    };
+  }
+}
+
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-code-block element to code block DTO */
+class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      // eslint-disable-next-line no-restricted-globals
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
+}
+
+/** Transform inline block element to text block DTO */
+class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+      'subtitle',
+    ].includes(super.matchTextBlockType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray, options) {
+    const nodes = this.generateChildNodes(Array.from(elementsArray[0].childNodes), {}, options);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: super.matchTextBlockType(elementsArray[0]),
+      nodes: nodes,
+      annotations: htmlElementToAnnotationGenerator.generate(RTETextBlock, elementsArray[0], options),
+    }, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Abstract class for block html element to RTE block dto */
+class ElementToRTEImageBlockStrategyAbstract extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Create a RTE Image block according to the img element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {RTEImageBlock} -RTE Image block.
+   */
+  createRTEImageBlock(element, options) {
+    // RTEImageBlock is also wrapped by a div, should not as internal wrapper if the parent is a div.
+    const isInternalWrapper = !(options && options.autoMatchFormat) &&
+      !!(element.parentNode && element.parentNode.nodeName !== 'DIV');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: htmlElementToAnnotationGenerator.generate(RTEImageNode, element, options),
+        },
+      ],
+      annotations: Object.assign(Object.assign({}, htmlElementToAnnotationGenerator.generate(RTEImageBlock, element.parentElement, options)), { internalWrapper: isInternalWrapper }),
+    }, options);
+  }
+}
+
+/** Transform img element to image block DTO */
+class ImgToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    return this.createRTEImageBlock(element, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-rich-text-image-editor element to image block DTO */
+class VegaImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    if (isNonNullable(image)) {
+      return RTEImageBlock.from({
+        id: generateUUID(),
+        type: 'image',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'image',
+            url: image.src,
+            annotations: htmlElementToAnnotationGenerator.generate(RTEImageNode, element, options),
+          },
+        ],
+        annotations: htmlElementToAnnotationGenerator.generate(RTEImageBlock, element.parentElement, options),
+      }, options);
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0].querySelector('img');
+    return this.createRTEImageBlock(element, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform continue inline block elements to text block DTO */
+class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (element.nodeType === Node.TEXT_NODE ||
+        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
+          !(element.textContent === '' && element.querySelector('IMG')))) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray, options) {
+    const parent = elementsArray[0].parentElement;
+    const autoMatchFormat = options && options.autoMatchFormat;
+    const nodes = this.generateChildNodes(elementsArray, autoMatchFormat
+      ? htmlElementToAnnotationGenerator.generate(RTETextNode, parent, Object.assign(Object.assign({}, options), { skipCustomAnnotations: true }))
+      : {}, options);
+    const blockType = autoMatchFormat
+      ? super.matchTextBlockType(parent)
+      : this.matchTextBlockTypeByTagName(parent);
+    const internalWrapper = !autoMatchFormat && !blockType;
+    return RTETextBlock.from(Object.assign({ id: generateUUID(), type: blockType || 'paragraph', nodes: nodes }, (internalWrapper
+      ? { annotations: { internalWrapper: internalWrapper } }
+      : {
+        annotations: htmlElementToAnnotationGenerator.generate(RTETextBlock, parent, options),
+      })), options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Match the block type by tag name.
+   *
+   * @param {HTMLElement} element - Target element.
+   * @returns {Nullable<VegaRTETextBlockType>} - Block type.
+   */
+  matchTextBlockTypeByTagName(element) {
+    switch (element.nodeName) {
+      case 'P':
+        return 'paragraph';
+      default:
+        return null;
+    }
+  }
+}
+ContinueInlineToRTETextBlockStrategy.canHandleTags = [
+  ...InlineHtmlAnnotationHandler.canHandleTags,
+  'CODE',
+  'A',
+  'VEGA-RICH-TEXT-LINK-EDITOR',
+  'BR',
+];
+
+/**
+ * Class to handle text node elements and convert them to text node DTOs
+ */
+class ElementToTextNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Generate text node DTO object
+   *
+   * @param {string} text - text content.
+   * @param {VegaRTETextAnnotations} annotations - Current annotations.
+   * @returns {VegaRTETextNode} - Text node DTO.
+   */
+  generateTextNode(text, annotations) {
+    return {
+      id: generateUUID(),
+      type: 'text',
+      text: text,
+      annotations: annotations,
+    };
+  }
+}
+
+/**
+ * Class to handle plain text nodes and convert them to RTE text node DTOs
+ */
+class PlainTextToTextNodeStrategy extends ElementToTextNodeStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.TEXT_NODE ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options, parentTextAnnotations) {
+    const parentAnnotations = Object.assign({}, parentTextAnnotations);
+    const disableAutoMatchFormat = !!(options && options.autoMatchFormat === false);
+    const child = elementsArray[0];
+    const parentNodeName = child.parentNode.nodeName.toLowerCase();
+    const plainText = disableAutoMatchFormat && !RTETextNode.supportsHtmlTag(parentNodeName);
+    const textNode = this.generateTextNode(String(child.textContent), disableAutoMatchFormat
+      ? cleanObject(Object.assign(Object.assign({}, (parentNodeName === 'span'
+        ? parentAnnotations
+        : {
+          // text node could be wrapped in <a> tag, so we need to keep the parent link annotation
+          link: parentAnnotations.link,
+          code: parentNodeName === 'code' ? parentAnnotations.code : undefined,
+        })), { inlineHtml: parentAnnotations.inlineHtml, plainText: plainText || undefined }))
+      : parentAnnotations);
+    return Object.assign({}, textNode);
+  }
+}
+
+/**
+ * Class to handle inline html element to text node dto
+ */
+class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return isHTMLElement(element) && (element.nodeName === 'BR' || element.childNodes.length === 0)
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options, annotations) {
+    const disableAutoMatchFormat = !!(options && options.autoMatchFormat === false);
+    const parentAnnotations = Object.assign({}, annotations);
+    const child = elementsArray[0];
+    const curAnnotations = htmlElementToAnnotationGenerator.generate(RTETextNode, child, Object.assign({ parentAnnotations: disableAutoMatchFormat
+        ? {
+          inlineHtml: parentAnnotations.inlineHtml,
+          link: parentAnnotations.link,
+          code: parentAnnotations.code,
+        }
+        : annotations }, options));
+    if (child.nodeName === 'BR') {
+      return this.generateTextNode('\n', curAnnotations);
+    }
+    else if (child.childNodes.length === 0) {
+      // For empty dom, there will be no internal iteration, we need to handle it directly here.
+      // Example: <span></span>, <video src='...'></video>
+      const emptyNodeAnnotations = disableAutoMatchFormat
+        ? cleanObject(Object.assign(Object.assign({}, (RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ? curAnnotations : {})), { inlineHtml: curAnnotations.inlineHtml, plainText: isNonNullable(curAnnotations.inlineHtml) }))
+        : curAnnotations;
+      return Object.assign({}, this.generateTextNode('', emptyNodeAnnotations));
+    }
+  }
+}
+
+/**
+ * Register and setup the default DTO classes and their basic action strategies.
+ */
+// Register the default block DTOs
+RTEDTOClassManager.registerRTEDTOClass('paragraph', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('title', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('subtitle', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-1', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-2', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-3', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-4', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-5', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('list-item', RTEListItemBlock);
+RTEDTOClassManager.registerRTEDTOClass('bullet-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('number-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageBlock);
+RTEDTOClassManager.registerRTEDTOClass('code-block', RTECodeBlock);
+RTEDTOClassManager.registerRTEDTOClass('html-block', RTEHtmlBlock);
+// Register the default node DTOs
+RTEDTOClassManager.registerRTEDTOClass('text', RTETextNode);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageNode);
+// Register basic strategies for default block DTOs
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTETextBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEListBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEListItemBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEImageBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEHtmlBlock.name);
+// Register element to DTO strategies for default node DTOs, The order of registration matters, the later registered strategy has higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ContinueInlineToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new SpanImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ImgToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new InlineBlockToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new LiToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ULNotLiChildToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new OlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new UlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new HtmlBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());
+
+/**
+ * StylePreservator handles CSP-compliant style management by temporarily converting
+ * inline styles to data attributes during HTML parsing operations.
+ *
+ * @example
+ * ```typescript
+ * const context = StylePreservator.preserve('<div style="color: red;">Content</div>');
+ * const safeHtml = context.getProcessedHtml();
+ * context.restore(parsedElements);
+ * ```
+ */
+class StylePreservator {
+  /**
+   * Preserves inline styles by converting them to data attributes.
+   *
+   * @param {string} htmlString - The HTML string containing inline styles
+   * @returns {StylePreservationContext} A context object for later style restoration
+   */
+  static preserve(htmlString) {
+    const processedHtml = htmlString.replace(/\s+style=/g, ' data-style=');
+    return new StylePreservationContext(processedHtml);
+  }
+}
+/**
+ * Context class that manages the lifecycle of preserved styles.
+ */
+class StylePreservationContext {
+  constructor(processedHtml) {
+    this.processedHtml = processedHtml;
+  }
+  /**
+   * Returns the HTML string with style attributes converted to data-style.
+   *
+   * @returns {string} The processed HTML string
+   */
+  getProcessedHtml() {
+    return this.processedHtml;
+  }
+  /**
+   * Restores data-style attributes back to style attributes.
+   *
+   * @param {HTMLElement[]} elements - Array of HTML elements to process
+   * @returns {void}
+   */
+  restore(elements) {
+    this.walkNodes(elements);
+  }
+  /**
+   * Recursively walk through nodes and restore styles
+   *
+   * @param {HTMLElement[]} elements - list of nodes
+   * @returns {void}
+   */
+  walkNodes(elements) {
+    elements.forEach((element) => {
+      if (isHTMLElement(element)) {
+        // Restore data-style back to style
+        const dataStyle = element.getAttribute('data-style');
+        if (dataStyle) {
+          element.style.cssText = dataStyle;
+          element.removeAttribute('data-style');
+        }
+        // Recursively process child nodes
+        if (element.children.length > 0) {
+          this.walkNodes(Array.from(element.children));
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Class representing the content state of the rich text editor.
+ */
+class VegaRTEContent {
+  constructor(blocks) {
+    blocks.forEach((block) => {
+      block.parent = this;
+    });
+    this.children = blocks;
+  }
+  /**
+   * Converts a JSON array of blocks to a class array of RTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
+   */
+  static fromJSON(value, options = { autoMatchFormat: true }) {
+    const blocks = value.map((block) => {
+      const BlockClass = RTEDTOClassManager.getRTEBlockClass(block.type);
+      if (BlockClass) {
+        return BlockClass.from(block, options);
+      }
+      else {
+        throw new Error(`[Vega] Unknown block type: ${block.type}`);
+      }
+    });
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Create an empty content state
+   *
+   * @returns {VegaRTEContent} An empty content state
+   */
+  static createEmptyContent() {
+    return VegaRTEContent.fromJSON([
+      {
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ]);
+  }
+  /**
+   * Converts HTML content to a VegaRTEContent instance.
+   *
+   * @param {string} html - The HTML string to convert.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {VegaRTEContent} The converted content state.
+   */
+  static fromHtml(html, options = { autoMatchFormat: true, skipCustomAnnotations: false }) {
+    /**
+     * remove redundant spaces between tags, for example:
+     * case1:
+     * '<p>\n\t <span>test</span>\n\t </p>' will be formatted into '<p><span>test</span></p>'
+     * '<p>
+     * 		test
+     * 	</p>' will be formatted into '<p>test</p>'
+     *
+     * case2:
+     * <h1>
+     * _test&*....
+     * </h1> will be formatted into <h1>_test&*....</h1>
+     *
+     * The blank space between individual tags should be preserved:
+     * <span> </span>
+     */
+    const formattedHtml = html
+      .replace(/>\s+<\/?/g, (match) => {
+      return match.endsWith('</') ? match : '><';
+    })
+      .replace(/(>)[\n\t]+(?=[a-zA-Z0-9_\W])/g, '$1')
+      .replace(/([a-zA-Z0-9_\W])[\n\t]+(?=<)/g, '$1');
+    const context = StylePreservator.preserve(formattedHtml);
+    const safeHtml = context.getProcessedHtml();
+    const body = new DOMParser().parseFromString(safeHtml, 'text/html').body;
+    const htmlElements = Array.from(body.childNodes);
+    context.restore(htmlElements);
+    const blocks = ElementToDtoStrategyProcessor$1.process(htmlElements, options)
+      .filter(isNonNullable)
+      .map((output) => output.toDto(options))
+      .filter(isNonNullable);
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Clones the content state.
+   *
+   * @param {boolean} deep - If true, performs a deep clone of the content state.
+   * @returns {VegaRTEContent} The cloned content state.
+   */
+  clone(deep = false) {
+    return deep
+      ? new VegaRTEContent(this.children.map((block) => block.clone(this)))
+      : new VegaRTEContent([...this.children]);
+  }
+  /**
+   * Converts the content state to a JSON array of blocks.
+   *
+   * @returns {VegaRTEContentBlock[]} The JSON array of blocks.
+   */
+  toJSON() {
+    return this.children.map((block) => block.toJSON());
+  }
+  /**
+   * Converts the content state to HTML.
+   *
+   * @deprecated The [`options`]{@link options} parameter is deprecated and will be removed in the future.
+   * @param {VegaRTETransformOptions} [options] - Deprecated. Optional rendering context (currently unused).
+   * @returns {string} The HTML representation of the content state.
+   */
+  toHtml(options) {
+    if (options) {
+      LogUtility.warn(`The 'options' parameter in toHtml method is deprecated and will be removed in the future.`);
+    }
+    return this.children.map((block) => block.toHtml()).join('');
+  }
+  /**
+   * Internal method to add the block item, remove the block item
+   *
+   * @param {ModifyContentAction} action - Modify content action
+   */
+  apply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    // Check if the action has been executed and is flushable
+    if (action['executedFlag'] && action.isFlushable) {
+      const host = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (host) {
+        ChangeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalRichTextEditorFlushChanges), {});
+      }
+    }
+  }
+  /**
+   * 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.
+   *
+   * @param {RTETextBlock} block - block
+   * @returns {RTEListItemBlock} list item block dto.
+   */
+  toListItem(block) {
+    block.children.map((node) => node.apply(new SyncUpSelectionAction()));
+    const listItemBlock = new RTEListItemBlock(generateUUID());
+    listItemBlock.apply(new AppendChildrenAction(block['children']));
+    listItemBlock['annotationMap'] = block['annotationMap'];
+    return listItemBlock;
+  }
+  /**
+   * create list.
+   *
+   * @param {ListType} type - type
+   * @returns {RTEListBlock} list block dto.
+   */
+  createList(type) {
+    return new RTEListBlock(generateUUID(), type);
+  }
+  /**
+   * Finds a node by its ID in the content.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeById(id) {
+    return this.findNodeInBlocksById(id, this.children);
+  }
+  /**
+   * Recursively searches for a node by its ID in the given blocks.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @param {RTEContentBlock[]} blocks - The blocks to search within.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeInBlocksById(id, blocks) {
+    for (const block of blocks) {
+      if ('children' in block) {
+        for (const node of block.children) {
+          if (node.id === id) {
+            return node;
+          }
+        }
+      }
+      if (block instanceof RTEListItemBlock && block.nestList) {
+        for (const cBlock of block.nestList) {
+          const foundNode = this.findNodeInBlocksById(id, cBlock.children);
+          if (foundNode) {
+            return foundNode;
+          }
+        }
+      }
+      if (block instanceof RTEListBlock && block.children) {
+        const foundNode = this.findNodeInBlocksById(id, block.children);
+        if (foundNode) {
+          return foundNode;
+        }
+      }
+    }
+    return null;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, VegaRTEContent.name, new RemoveChildrenStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, VegaRTEContent.name, new AppendChildrenStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, VegaRTEContent.name, new InsertChildrenBeforeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_AFTER, VegaRTEContent.name, new InsertChildrenAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
+})();
+
+/**
+ * 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 { BlockToRTEBlockStrategyAbstract as B, ElementToDTOClassStrategyManager as E, InsertNewParagraphAction as I, MergeTwoBlocksNodesAction as M, PasteContentStrategy as P, RTEDTORendererManager$1 as R, StylePreservator as S, UpdateCursorPositionAction as U, VegaRTEContent as V, RTEDTOActionStrategyManager$1 as a, ElementToDTOStrategy as b, RTEListItemBlock as c, RTEImageBlock as d, InsertChildrenBeforeStrategy as e, RTEListBlock as f, RTEImageNode as g, htmlElementToAnnotationGenerator as h, ImageAnnotation as i, ElementToDtoStrategyProcessor$1 as j };