@heartlandone/vega 2.78.0 → 2.80.0

package/dist/cjs/content-state-afa26456.js

@@ -0,0 +1,4459 @@
+'use strict';
+
+const codeBlock = require('./code-block-71a330a1.js');
+const misc = require('./misc-3d30df91.js');
+const typeGuard = require('./type-guard-d760850a.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a3a60da4.js');
+const vegaInternalEventId = require('./vega-internal-event-id-a1837fa2.js');
+const string = require('./string-39438062.js');
+const ui = require('./ui-9e8c9732.js');
+const object = require('./object-b53e9416.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+
+/**
+ * Remove list item nest list block strategy.
+ */
+class ListItemRemoveNestListStrategy extends codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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) => codeBlock.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 (typeGuard.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(misc.generateUUID());
+    block.children = [];
+    block.apply(new codeBlock.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(misc.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;
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.TextStyleAnnotationAction.name, RTEListItemBlock.name, new codeBlock.BlockUpdateTextStyleStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.HorizontalAlignmentAnnotationAction.name, RTEListItemBlock.name, new codeBlock.BlockUpdateHorizontalAlignmentStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new codeBlock.BlockInsertLineBreakStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new codeBlock.BlockInsertLineBreakWithBlocksStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new codeBlock.BlockSplitWithTextNodeStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new codeBlock.BlockReplaceNodesStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new codeBlock.BlockMergeNodesStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
+})();
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class ListTransformToListStrategy extends codeBlock.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 codeBlock.AppendChildrenAction(target.children));
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, bulletList));
+      target.parent.apply(new codeBlock.RemoveChildrenAction(target));
+      selectedBlocks.forEach((block) => block.children.map((node) => node.apply(new codeBlock.SyncUpSelectionAction())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
+      bulletList.apply(new codeBlock.AppendChildrenAction(listItems));
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new codeBlock.RemoveChildrenAction(block));
+      });
+      if (target.children.length === 0) {
+        target.parent.apply(new codeBlock.RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected list block to paragraph strategy.
+ */
+class ListTransformToParagraphStrategy extends codeBlock.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 codeBlock.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 codeBlock.InsertChildrenBeforeAction(target, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      target.parent.apply(new codeBlock.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 codeBlock.AppendChildrenAction(target.children.slice(0, startIndex)));
+      const lastBulletList = target.parent.createList(target.type);
+      lastBulletList.apply(new codeBlock.AppendChildrenAction(target.children.slice(lastIndex + 1)));
+      target.parent.apply(new codeBlock.InsertChildrenBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
+      target.parent.apply(new codeBlock.RemoveChildrenAction(target));
+    }
+    selectedBlocks.map((block) => {
+      target.apply(new codeBlock.RemoveChildrenAction(block));
+    });
+    if (target.children.length === 0) {
+      target.parent.apply(new codeBlock.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 codeBlock.RTETextBlock(misc.generateUUID(), 'paragraph');
+    textBlock.apply(new codeBlock.AppendChildrenAction(block['children']));
+    textBlock['annotationMap'] = block['annotationMap'];
+    return textBlock;
+  }
+}
+
+/**
+ * Insert image to list block strategy.
+ */
+class ListInsertImageStrategy extends codeBlock.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 codeBlock.InsertChildrenAfterAction(target, imageBlock));
+    }
+    else {
+      target.parent.apply(action);
+    }
+  }
+}
+
+/**
+ * List annotation
+ */
+class ListAnnotation extends codeBlock.BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = codeBlock.BlockAnnotationTypeEnum.LIST;
+  }
+  /**
+   * Get the default standalone styles for a list block.
+   *
+   * @returns {AnnotationStyle} The default styles.
+   */
+  static getDefaultStyles() {
+    return {
+      paddingLeft: '8px',
+      marginLeft: '16px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return ListAnnotation.getDefaultStyles();
+  }
+  /**
+   * @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 codeBlock.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(codeBlock.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 (typeGuard.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 codeBlock.CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return codeBlock.CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return codeBlock.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';
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
+})();
+
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+class BlockTransformToCodeBlockStrategy extends codeBlock.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$1 = new codeBlock.RTECodeBlock(misc.generateUUID(), this.getCodeContent(selectedBlocks), 'plainText');
+    target.apply(new codeBlock.InsertChildrenBeforeAction(selectedBlocks[0], codeBlock$1));
+    action.newCodeBlock = codeBlock$1;
+    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 codeBlock.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(typeGuard.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 codeBlock.ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { offset, nextFocusNode, immediatelyRun } = action;
+    const host = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (host) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(host, vegaInternalEventId.VegaInternalUpdateRTECursorPosition), {
+        node: nextFocusNode,
+        offset,
+        updateDirectly: immediatelyRun,
+      });
+    }
+  }
+}
+
+/**
+ * Append new block array or node array to block or VegaRTEContent instance strategy.
+ */
+class AppendChildrenStrategy extends codeBlock.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 codeBlock.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 codeBlock.NodeAnnotation {
+  constructor(size, alt) {
+    super();
+    this.type = codeBlock.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 [codeBlock.NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
+  }
+  /**
+   * Get the default standalone base styles for an image node.
+   *
+   * @returns {AnnotationStyle} The default styles.
+   */
+  static getDefaultStyles() {
+    return {
+      verticalAlign: 'bottom',
+    };
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return typeGuard.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 = ImageAnnotation.getDefaultStyles();
+    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 codeBlock.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 codeBlock.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 codeBlock.RTEDecoratorNode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = codeBlock.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(typeGuard.isNonNullable));
+    return imageNode;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof codeBlock.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(codeBlock.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(typeGuard.isNonNullable));
+    return `<img${attrStr}>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = codeBlock.ActionHandleStrategyRegistry.get(codeBlock.AnnotationAction.name, RTEImageNode.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    codeBlock.ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
+})();
+
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends codeBlock.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 codeBlock.ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes, target);
+      target.parent.apply(new codeBlock.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 codeBlock.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 codeBlock.ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends codeBlock.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 codeBlock.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 = codeBlock.RTETextBlock.from({
+      id: misc.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: misc.generateUUID(), type: 'text', text: '\n' }],
+    });
+    target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new codeBlock.RTETextNode(misc.generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new codeBlock.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 codeBlock.RemoveChildrenAction(block));
+      }
+    });
+    return nodes;
+  }
+}
+
+/**
+ * Insert a image node at the special position of image block.
+ */
+class ImageBlockInsertImageStrategy extends codeBlock.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 codeBlock.AppendChildrenAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new codeBlock.InsertChildrenBeforeAction(target, newImageBlock));
+    }
+    else {
+      target.apply(new codeBlock.SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      target.parent.apply(new codeBlock.InsertChildrenAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Image block
+ */
+class RTEImageBlock extends codeBlock.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(misc.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;
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new codeBlock.BlockMergeNodesStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new codeBlock.BlockReplaceNodesStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new codeBlock.BlockUpdateHorizontalAlignmentStrategy());
+})();
+
+/**
+ * HTML Block
+ */
+class RTEHtmlBlock extends codeBlock.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();
+    // Handle void/self-closing tags (hr, input, col, etc.)
+    // Uses HTML5 syntax without self-closing slash for consistency with img and br tags
+    if (RTEHtmlBlock.VOID_TAGS.has(this.htmlTag)) {
+      return `<${BlockTag}${attrStr}>`;
+    }
+    // Handle normal tags with children
+    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()) });
+  }
+}
+/**
+ * Void/self-closing tags that don't have closing tags and don't contain children.
+ * These tags should be rendered as <tag> or <tag/> instead of <tag></tag>.
+ *
+ * Based on canHandleTags from html-block-strategy.ts, the following are void tags:
+ * - HR: horizontal rule
+ * - INPUT: form input
+ * - COL: table column
+ */
+RTEHtmlBlock.VOID_TAGS = new Set(['hr', 'input', 'col']);
+
+/**
+ * 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 codeBlock.ModifyContentAction {
+  constructor(blockNeedToBeMerged) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.blockNeedToBeMerged = blockNeedToBeMerged;
+  }
+}
+
+/**
+ * Block delete text or decorator node strategy.
+ */
+class BlockDeleteTextOrDecoratorNodeStrategy extends codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.RemoveChildrenAction(parentBlock));
+      }
+      else {
+        parentBlock.apply(new codeBlock.RemoveChildrenAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && !shouldRemoveNode.isContentEditable()) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parent.apply(new codeBlock.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 codeBlock.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 codeBlock.InsertChildrenAfterAction(target, newParagraph));
+      }
+      else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new codeBlock.InsertChildrenBeforeAction(target, newParagraph));
+      }
+      else {
+        const splitBlockAction = new codeBlock.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(codeBlock.NodeAnnotationTypeEnum.LINK);
+        newParagraph.apply(new codeBlock.AppendChildrenAction([textNode]));
+      }
+      return newParagraph;
+    }
+  }
+}
+
+/**
+ * Update the cursor position in the editor.
+ *
+ * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset], [immediatelyRun]))
+ */
+class UpdateCursorPositionAction extends codeBlock.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 = codeBlock.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 codeBlock.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 codeBlock.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 codeBlock.InsertChildrenBeforeAction(startNode, ...insertNodes));
+          parent.apply(new codeBlock.RemoveChildrenAction(startNode));
+        }
+      }
+      else {
+        if (startOffset !== 0) {
+          parent.apply(new codeBlock.InsertChildrenAfterAction(startNode, nodeToBeInserted));
+        }
+        else {
+          parent.apply(new codeBlock.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 codeBlock.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 codeBlock.InsertChildrenAfterAction(decoratorNode, newTextNode));
+      }
+      else {
+        target.apply(new codeBlock.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 codeBlock.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 codeBlock.AppendChildrenAction([newBreakNode]));
+    if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem, target);
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new codeBlock.InsertChildrenBeforeAction(target, newListItem));
+    }
+    else {
+      const splitBlockAction = new codeBlock.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 = codeBlock.RTETextBlock.from({
+          id: misc.generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new codeBlock.AppendChildrenAction(newListItem.children));
+        parentParent.apply(new codeBlock.InsertChildrenAfterAction(target.parent, newParagraph));
+        target.parent.apply(new codeBlock.RemoveChildrenAction(target));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new codeBlock.InsertChildrenAfterAction(parentParent, newListItem));
+        target.parent.apply(new codeBlock.RemoveChildrenAction(target));
+      }
+    }
+    else {
+      target.parent.apply(new codeBlock.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(codeBlock.NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends codeBlock.ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+/**
+ * List remove list item strategy.
+ */
+class ListRemoveListItemStrategy extends codeBlock.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 codeBlock.RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Strategy to handle the paste content into function block.
+ */
+class PasteContentStrategy extends codeBlock.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 codeBlock.InsertChildrenBeforeAction(target, ...blocksToBeInserted));
+      }
+      else {
+        const breakAction = new codeBlock.SplitBlockWithNodeAction(startNode, startOffset);
+        target.apply(breakAction);
+        target.parent.apply(new codeBlock.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) {
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.DELETE_CHILDREN, dtoClassName, dtoClassName === RTEListBlock.name
+      ? new ListRemoveListItemStrategy()
+      : new codeBlock.RemoveChildrenStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.APPEND_CHILDREN, dtoClassName, new AppendChildrenStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, dtoClassName, new InsertChildrenBeforeStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_AFTER, dtoClassName, new InsertChildrenAfterStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.DELETE_BLOCK_CONTENT, dtoClassName, new BlockDeleteTextOrDecoratorNodeStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_NEW_PARAGRAPH, dtoClassName, dtoClassName === RTEListItemBlock.name
+      ? new ListItemInsertNewParagraphStrategy()
+      : new BlockInsertNewParagraphStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE, dtoClassName, new InsertTextToDecoratorNodeStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT, dtoClassName, new InsertNodeToNearestRootStrategy());
+    codeBlock.ActionHandleStrategyRegistry.register(codeBlock.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 === codeBlock.BOLD_FONT_WEIGHT_KEYWORD ||
+      element.style.fontWeight === codeBlock.BOLD_FONT_WEIGHT ||
+      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 = string.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 = ui.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 = codeBlock.RTE_TEXT_COLORS.filter((item) => item.key !== codeBlock.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 codeBlock.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 === codeBlock.ITALIC_FONT_STYLE ||
+      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: misc.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(codeBlock.STRIKETHROUGH_TEXT_DECORATION) ||
+      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(codeBlock.UNDERLINE_TEXT_DECORATION) ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
+  }
+}
+
+/**
+ * Registry for managing filter styles strategies keyed by DTO class name.
+ *
+ * Provides common `register` / `getStrategies` primitives that both output-
+ * filtering strategies (DTO → HTML) and annotation-parsing strategies
+ * (HTML → DTO) build upon.
+ *
+ * TODO: Currently, the filter styles strategies are applied for all rich text editors. We need to apply the strategies with a specific rich text editor instance when we have multiple rich text editors in the future.
+ */
+class RTEFilterStylesStrategyRegistry {
+  /**
+   * Registers a filter styles strategy for a specific DTO class name.
+   * Duplicate strategy instances are ignored.
+   *
+   * @param {string} dtoClassName - The DTO class name (e.g. `RTEListBlock.name`).
+   * @param {RTEFilterStylesStrategy} strategy - The strategy instance to register.
+   */
+  static register(dtoClassName, strategy) {
+    var _a;
+    const set = (_a = this.registry.get(dtoClassName)) !== null && _a !== void 0 ? _a : new Set();
+    set.add(strategy);
+    this.registry.set(dtoClassName, set);
+  }
+  /**
+   * Retrieves all strategies registered for a given DTO class name.
+   *
+   * @param {string} dtoClassName - The DTO class name to look up.
+   * @returns {RTEFilterStylesStrategy[]} Registered strategies (empty array if none).
+   */
+  static getStrategies(dtoClassName) {
+    var _a;
+    return Array.from((_a = this.registry.get(dtoClassName)) !== null && _a !== void 0 ? _a : []);
+  }
+}
+RTEFilterStylesStrategyRegistry.registry = new Map();
+
+/** 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 'P':
+        return 'paragraph';
+      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|heading-4|heading-5|heading-6|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 (!codeBlock.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 TextStyleAnnotationHandler(),
+      new InlineHtmlAnnotationHandler(),
+    ];
+  }
+  /**
+   * Register a custom annotation handler.
+   * Custom handlers are added to the beginning of the handlers array,
+   * giving them higher priority than default handlers.
+   *
+   * @param {AnnotationGeneratorStrategyAbstract} handler - The annotation handler to register.
+   */
+  registerHandler(handler) {
+    this.handlers.unshift(handler);
+  }
+  /**
+   * 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';
+    const annotations = 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);
+    }, {});
+    this.removeTextStyleDefaultsFromCustomStyle(annotations);
+    const strategies = RTEFilterStylesStrategyRegistry.getStrategies(targetDto.name);
+    for (const strategy of strategies) {
+      if (options.autoMatchFormat || strategy.alwaysFilter) {
+        strategy.filterAnnotations(annotations);
+      }
+    }
+    return annotations;
+  }
+  /**
+   * Remove default text-style properties from customStyle.
+   * This prevents repeated styling when switching between source edit and normal mode.
+   *
+   * Note: This method mutates the customStyle object inside `annotations` in place and returns the same reference.
+   *
+   * @param {V} annotations - The generated annotations.
+   * @returns {V} The same annotations reference with customStyle cleaned up.
+   */
+  removeTextStyleDefaultsFromCustomStyle(annotations) {
+    const textStyle = 'textStyle' in annotations ? annotations.textStyle : undefined;
+    const customStyle = annotations.customStyle;
+    if (!textStyle || !customStyle) {
+      return annotations;
+    }
+    const defaultStyles = codeBlock.TextStyleAnnotation.getDefaultStyles(textStyle);
+    if (!defaultStyles) {
+      return annotations;
+    }
+    for (const key of Object.keys(defaultStyles)) {
+      if (customStyle[key] === defaultStyles[key]) {
+        delete customStyle[key];
+      }
+    }
+    if (Object.keys(customStyle).length === 0) {
+      delete annotations.customStyle;
+    }
+    return annotations;
+  }
+}
+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 (ui.isHTMLElement(child) && child.childNodes.length > 0) {
+        const curAnnotations = htmlElementToAnnotationGenerator.generate(codeBlock.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: misc.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: misc.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: misc.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 = typeGuard.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: misc.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: misc.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: misc.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(codeBlock.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 codeBlock.RTECodeBlock.from({
+        id: misc.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 codeBlock.RTETextBlock.from({
+      id: misc.generateUUID(),
+      type: super.matchTextBlockType(elementsArray[0]),
+      nodes: nodes,
+      annotations: htmlElementToAnnotationGenerator.generate(codeBlock.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: misc.generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: misc.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 (typeGuard.isNonNullable(image)) {
+      return RTEImageBlock.from({
+        id: misc.generateUUID(),
+        type: 'image',
+        nodes: [
+          {
+            id: misc.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(codeBlock.RTETextNode, parent, Object.assign(Object.assign({}, options), { skipCustomAnnotations: true }))
+      : {}, options);
+    const blockType = autoMatchFormat
+      ? super.matchTextBlockType(parent)
+      : this.matchTextBlockTypeByTagName(parent);
+    const internalWrapper = !autoMatchFormat && !blockType;
+    return codeBlock.RTETextBlock.from(Object.assign({ id: misc.generateUUID(), type: blockType || 'paragraph', nodes: nodes }, (internalWrapper
+      ? { annotations: { internalWrapper: internalWrapper } }
+      : {
+        annotations: htmlElementToAnnotationGenerator.generate(codeBlock.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: misc.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 && !codeBlock.RTETextNode.supportsHtmlTag(parentNodeName);
+    const textNode = this.generateTextNode(String(child.textContent), disableAutoMatchFormat
+      ? object.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 ui.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(codeBlock.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
+        ? object.cleanObject(Object.assign(Object.assign({}, (codeBlock.RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ? curAnnotations : {})), { inlineHtml: curAnnotations.inlineHtml, plainText: typeGuard.isNonNullable(curAnnotations.inlineHtml) }))
+        : curAnnotations;
+      return Object.assign({}, this.generateTextNode('', emptyNodeAnnotations));
+    }
+  }
+}
+
+/**
+ * Abstract strategy class for filtering default styles in the rich text editor.
+ * Concrete strategies define which styles to strip via `stylesToBeFiltered`.
+ *
+ * This base is shared by two kinds of concrete strategies:
+ *   1. Block/node output strategies – filter inline styles when converting DTO → HTML.
+ *   2. Annotation parsing strategies – strip redundant defaults when converting HTML → DTO.
+ */
+class RTEFilterStylesStrategy {
+  /**
+   * Whether this strategy should always filter, regardless of `autoMatchFormat`.
+   * Override to `true` when the filtered styles are always emitted as inline
+   * styles by the DTO (e.g. image `vertical-align`), so stripping them from
+   * `customStyle` is always safe.
+   *
+   * Defaults to `false` – the strategy only runs when `autoMatchFormat` is enabled.
+   *
+   * @returns {boolean} Whether filtering should always apply.
+   */
+  get alwaysFilter() {
+    return false;
+  }
+  /**
+   * Removes matched default styles from the `customStyle` property of the given annotations object.
+   * If all custom styles are defaults, the `customStyle` key is deleted entirely.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations object (mutated in place).
+   * @returns {VegaRTEAnnotations} The same annotations reference.
+   */
+  filterAnnotations(annotations) {
+    const customStyle = annotations.customStyle;
+    if (!customStyle) {
+      return annotations;
+    }
+    this.extractAndDeleteMatchedStyles(customStyle);
+    if (Object.keys(customStyle).length === 0) {
+      delete annotations.customStyle;
+    }
+    return annotations;
+  }
+  /**
+   * Removes configured default style properties from the target styles object.
+   * Only properties whose value matches the configured default exactly are deleted.
+   *
+   * @param {Nullable<RTEFilterStyles>} styles - The styles object to mutate.
+   * @returns {boolean} `true` if at least one style was extracted.
+   */
+  extractAndDeleteMatchedStyles(styles) {
+    let wasExtracted = false;
+    if (styles) {
+      const defaults = this.stylesToBeFiltered;
+      const styleKeys = Object.keys(defaults);
+      for (const key of styleKeys) {
+        if (styles[key] === defaults[key]) {
+          delete styles[key];
+          wasExtracted = true;
+        }
+      }
+    }
+    return wasExtracted;
+  }
+}
+
+/**
+ * Filters the default ImageAnnotation base styles (verticalAlign) from
+ * customStyle when parsing an RTEImageNode.
+ */
+class ImageFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = ImageAnnotation.getDefaultStyles();
+  }
+  /** @returns {boolean} Always `true` — image defaults are emitted as inline styles. */
+  get alwaysFilter() {
+    return true;
+  }
+}
+
+/**
+ * Filters the default ListAnnotation styles (paddingLeft, marginLeft) from
+ * customStyle when parsing an RTEListBlock.
+ */
+class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = ListAnnotation.getDefaultStyles();
+  }
+}
+
+/**
+ * Filters the default paragraph styles from customStyle when parsing an
+ * RTEListItemBlock.  List-item blocks implicitly use paragraph styling,
+ * so these inline defaults are redundant and should not be persisted.
+ */
+class ListItemBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = codeBlock.TextStyleAnnotation.getDefaultStyles('paragraph') || {};
+  }
+}
+
+/**
+ * Filters redundant `textAlign` from `customStyle` when parsing blocks that carry
+ * a semantic `textAlign` annotation (RTETextBlock, RTEListBlock, RTEListItemBlock).
+ *
+ * During source-to-normal round-trips the `HorizontalAlignmentAnnotation` emits
+ * `text-align` as an inline style (standalone mode), and `CustomStyleAnnotationHandler`
+ * captures it into `customStyle`.  This strategy removes the duplicate so the
+ * semantic annotation is the single source of truth.
+ */
+class AlignmentFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = {};
+  }
+  /**
+   * @returns {boolean} Always `true` — alignment inline styles are always emitted
+   * in standalone/source-edit mode, so the duplicate is always safe to remove.
+   */
+  get alwaysFilter() {
+    return true;
+  }
+  /**
+   * Removes `textAlign` from `customStyle` when it duplicates the value returned
+   * by `HorizontalAlignmentAnnotation.getDefaultStyles(textAlign)`.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations object (mutated in place).
+   * @returns {VegaRTEAnnotations} The same annotations reference.
+   */
+  filterAnnotations(annotations) {
+    const { textAlign, customStyle } = annotations;
+    if (!textAlign || !customStyle) {
+      return annotations;
+    }
+    this.stylesToBeFiltered = codeBlock.HorizontalAlignmentAnnotation.getDefaultStyles(textAlign);
+    return super.filterAnnotations(annotations);
+  }
+}
+
+/**
+ * Filters the default CodeAnnotation styles (fontFamily, whiteSpace) from
+ * customStyle when parsing an RTETextNode that has a `code` annotation.
+ */
+class CodeFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = codeBlock.CodeAnnotation.getDefaultStyles();
+  }
+  /**
+   * Only strips code-default styles when the `code` annotation is present,
+   * so that a user-applied `fontFamily: 'Roboto Mono'` without code is preserved.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations object (mutated in place).
+   * @returns {VegaRTEAnnotations} The same annotations reference.
+   */
+  filterAnnotations(annotations) {
+    const { code, customStyle } = annotations;
+    if (!code || !customStyle) {
+      return annotations;
+    }
+    return super.filterAnnotations(annotations);
+  }
+}
+
+/**
+ * Filters the default internal link styles (color) from `link.customStyle` when
+ * parsing an RTETextNode. Vega applies these styles during standalone rendering;
+ * they are redundant when parsed back and must not be persisted as custom overrides.
+ */
+class LinkFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = codeBlock.LinkGroupAnnotation.getDefaultStyles();
+  }
+  /**
+   * Filter default link styles from `link.customStyle` in annotations.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations to filter.
+   * @returns {VegaRTEAnnotations} The same annotations reference with link.customStyle cleaned up.
+   */
+  filterAnnotations(annotations) {
+    const link = annotations.link;
+    if (!(link === null || link === void 0 ? void 0 : link.customStyle)) {
+      return annotations;
+    }
+    this.extractAndDeleteMatchedStyles(link.customStyle);
+    if (Object.keys(link.customStyle).length === 0) {
+      delete link.customStyle;
+    }
+    return annotations;
+  }
+}
+
+/**
+ * Filters redundant inline text formatting styles from `customStyle` when
+ * parsing an RTETextNode. These styles are already represented by semantic
+ * annotations and should not be persisted as custom overrides after source
+ * edit round-trips.
+ */
+class TextFormatFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = {};
+  }
+  /**
+   * @returns {boolean} Always `true` — this strategy runs regardless of `autoMatchFormat`.
+   */
+  get alwaysFilter() {
+    return true;
+  }
+  /**
+   * Filter redundant text format styles from `customStyle`.
+   *
+   * @param {VegaRTEAnnotations} annotations - The annotations to filter.
+   * @returns {VegaRTEAnnotations} The same annotations reference with customStyle cleaned up.
+   */
+  filterAnnotations(annotations) {
+    const textAnnotations = annotations;
+    const customStyle = textAnnotations.customStyle;
+    if (!customStyle) {
+      return annotations;
+    }
+    // Only delete styles that match the default values(BOLD_FONT_WEIGHT) to avoid affecting normal-source conversion.
+    if (textAnnotations.bold && customStyle.fontWeight === codeBlock.BOLD_FONT_WEIGHT) {
+      delete customStyle.fontWeight;
+    }
+    if (textAnnotations.italic && customStyle.fontStyle === codeBlock.ITALIC_FONT_STYLE) {
+      delete customStyle.fontStyle;
+    }
+    const normalizedTextDecoration = this.normalizeTextDecoration(customStyle.textDecoration);
+    if (normalizedTextDecoration &&
+      this.shouldRemoveTextDecoration(normalizedTextDecoration, textAnnotations)) {
+      delete customStyle.textDecoration;
+    }
+    if (Object.keys(customStyle).length === 0) {
+      delete textAnnotations.customStyle;
+    }
+    return annotations;
+  }
+  /**
+   * Normalizes a `text-decoration` CSS value to a sorted, unique token string of
+   * toolbar-only tokens (`underline`, `line-through`). Returns `undefined` if the
+   * value contains any non-toolbar token (e.g. `wavy`, a color).
+   *
+   * @param {string | undefined} value - The raw `textDecoration` CSS value.
+   * @returns {string | undefined} Normalized token string, or `undefined` if the value cannot be safely removed.
+   */
+  normalizeTextDecoration(value) {
+    if (!value) {
+      return undefined;
+    }
+    const tokens = value.trim().toLowerCase().split(/\s+/);
+    if (tokens.some((token) => token !== codeBlock.UNDERLINE_TEXT_DECORATION && token !== codeBlock.STRIKETHROUGH_TEXT_DECORATION)) {
+      return undefined;
+    }
+    return Array.from(new Set(tokens)).sort().join(' ');
+  }
+  /**
+   * Determines whether the `textDecoration` custom style should be removed based on the
+   * semantic annotations present. Removal happens only when the normalized value exactly
+   * matches the set of `{underline, strikethrough}` annotations.
+   *
+   * @param {string} normalizedTextDecoration - The normalized `textDecoration` token string.
+   * @param {VegaRTETextAnnotations} annotations - The text annotations to check against.
+   * @returns {boolean} `true` if the `textDecoration` style is redundant and should be removed.
+   */
+  shouldRemoveTextDecoration(normalizedTextDecoration, annotations) {
+    const expectedTokens = [];
+    if (annotations.underline) {
+      expectedTokens.push(codeBlock.UNDERLINE_TEXT_DECORATION);
+    }
+    if (annotations.strikethrough) {
+      expectedTokens.push(codeBlock.STRIKETHROUGH_TEXT_DECORATION);
+    }
+    if (expectedTokens.length === 0) {
+      return false;
+    }
+    return normalizedTextDecoration === expectedTokens.sort().join(' ');
+  }
+}
+
+/**
+ * Register and setup the default DTO classes and their basic action strategies.
+ */
+// Register the default block DTOs
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('paragraph', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('title', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('subtitle', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-1', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-2', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-3', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-4', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-5', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-6', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('heading-6', codeBlock.RTETextBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('list-item', RTEListItemBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('bullet-list', RTEListBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('number-list', RTEListBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('image', RTEImageBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('code-block', codeBlock.RTECodeBlock);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('html-block', RTEHtmlBlock);
+// Register the default node DTOs
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('text', codeBlock.RTETextNode);
+codeBlock.RTEDTOClassManager.registerRTEDTOClass('image', RTEImageNode);
+// Register basic strategies for default block DTOs
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(codeBlock.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());
+// Register filter styles strategies (remove redundant default styles during HTML → DTO conversion)
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(codeBlock.RTETextBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(codeBlock.RTETextNode.name, new LinkFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(codeBlock.RTETextNode.name, new TextFormatFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(codeBlock.RTETextNode.name, new CodeFilterStylesStrategy());
+
+/**
+ * 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 (ui.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));
+        }
+      }
+    });
+  }
+}
+
+/**
+ * Removes whitespace between tags, except preserves ALL whitespace between matching opening/closing tag pairs.
+ *
+ * This processor scans for patterns of `<tag>(whitespace)<tag>` and:
+ * - If the first tag is an opening tag and the second tag is its matching closing tag (e.g., `<span> </span>`),
+ *   preserves ALL the whitespace between them (including spaces, tabs, newlines)
+ * - Otherwise, removes all the whitespace between the tags
+ *
+ * Examples:
+ * - `</p>\n\t<div>` → `</p><div>` (different tags: closing p, opening div - whitespace removed)
+ * - `<div>\n\t<span>` → `<div><span>` (different tags: opening div, opening span - whitespace removed)
+ * - `<span> </span>` → `<span> </span>` (matching tags: opening span, closing span - space preserved)
+ * - `<span>  </span>` → `<span>  </span>` (matching tags - multiple spaces preserved)
+ * - `<span>\n\t</span>` → `<span>\n\t</span>` (matching tags - \n\t preserved)
+ * - `<code> </code>` → `<code> </code>` (matching tags - space preserved)
+ * - `</div> <p>` → `</div><p>` (different tags: closing div, opening p - whitespace removed)
+ */
+class RemoveWhitespaceBetweenTagsProcessor {
+  /**
+   * Process the HTML string to remove whitespace between non-matching tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    return html.replace(/(<[^>]+>)(\s+)(<[^>]+>)/g, (_match, tag1, whitespace, tag2) => {
+      const openingTagName = this.extractOpeningTagName(tag1);
+      const closingTagName = this.extractClosingTagName(tag2);
+      // Preserve all whitespace if tags match (e.g., <span> </span>)
+      if (openingTagName && closingTagName && openingTagName === closingTagName) {
+        return `${tag1}${whitespace}${tag2}`;
+      }
+      // Remove whitespace for non-matching tags
+      return `${tag1}${tag2}`;
+    });
+  }
+  /**
+   * Extracts the tag name from an opening HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `<span>` → `span`
+   * - `<div class="test">` → `div`
+   * - `<my-component id="123">` → `my-component`
+   * - `</span>` → `null` (not an opening tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '<span>', '<div class="test">').
+   * @returns {string | null} The tag name or null if not an opening tag.
+   * @private
+   */
+  extractOpeningTagName(tag) {
+    // Pattern: <(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+  /**
+   * Extracts the tag name from a closing HTML tag.
+   *
+   * Supports standard HTML tags (div, span, h1, etc.) and custom elements with hyphens (my-component).
+   *
+   * Examples:
+   * - `</span>` → `span`
+   * - `</div>` → `div`
+   * - `</my-component>` → `my-component`
+   * - `<span>` → `null` (not a closing tag)
+   *
+   * @param {string} tag - The tag string to extract from (e.g., '</span>', '</div>').
+   * @returns {string | null} The tag name or null if not a closing tag.
+   * @private
+   */
+  extractClosingTagName(tag) {
+    // Pattern: </(tag name) where tag name starts with letter, followed by letters/numbers/hyphens
+    const match = tag.match(/<\/(\w[\w-]*)/);
+    return match ? match[1] : null;
+  }
+}
+
+/**
+ * Removes `\n` and `\t` characters after opening tags (before text content).
+ *
+ * Transforms patterns like `>[\n\t]+(text)` to `>(text)`.
+ *
+ * Examples:
+ * - `<p>\n\tHello` → `<p>Hello`
+ * - `<div>\n\n\tWorld` → `<div>World`
+ */
+class RemoveWhitespaceAfterOpeningTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` after opening tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `>[\n\t]+(text)` → `>(text)`
+    return html.replace(/(>)[\n\t]+(?=.)/g, '$1');
+  }
+}
+
+/**
+ * Removes `\n` and `\t` characters before closing tags (after text content).
+ *
+ * Transforms patterns like `(text)[\n\t]+<` to `(text)<`.
+ *
+ * Examples:
+ * - `World\n\t</p>` → `World</p>`
+ * - `Hello\n</div>` → `Hello</div>`
+ */
+class RemoveWhitespaceBeforeClosingTagProcessor {
+  /**
+   * Process the HTML string to remove `\n` and `\t` before closing tags.
+   *
+   * @param {string} html - The HTML string to process.
+   * @returns {string} The processed HTML string.
+   */
+  process(html) {
+    // Pattern: `(text)[\n\t]+<` → `(text)<`
+    return html.replace(/(.?)[\n\t]+(?=<)/g, '$1');
+  }
+}
+
+/**
+ * Main HTML content cleaner that orchestrates multiple cleaning processors.
+ *
+ * This class implements a chain of responsibility pattern where each processor
+ * handles a specific aspect of HTML cleaning. The processors are applied in sequence
+ * and the entire chain is repeated until no more changes occur.
+ *
+ * Processors (in order):
+ * 1. RemoveWhitespaceBetweenTagsProcessor - Removes whitespace between non-matching tags
+ * 2. RemoveWhitespaceAfterOpeningTagProcessor - Removes \n and \t after opening tags
+ * 3. RemoveWhitespaceBeforeClosingTagProcessor - Removes \n and \t before closing tags
+ */
+class HTMLContentCleaner {
+  constructor() {
+    this.processors = [
+      new RemoveWhitespaceBetweenTagsProcessor(),
+      new RemoveWhitespaceAfterOpeningTagProcessor(),
+      new RemoveWhitespaceBeforeClosingTagProcessor(),
+    ];
+  }
+  /**
+   * Cleans HTML by applying all processors in the chain repeatedly until no changes occur.
+   *
+   * The cleaning process:
+   * 1. Applies each processor in sequence
+   * 2. Compares the result with the input
+   * 3. If changes were made, repeats the process
+   * 4. Returns the final cleaned HTML
+   *
+   * Examples of transformations:
+   * - `<p>\n\t <span>test</span>\n\t </p>` → `<p><span>test</span></p>`
+   * - `<p>\n\tHello</p>` → `<p>Hello</p>`
+   * - `<p>Hello\n\t</p>` → `<p>Hello</p>`
+   * - `<span> </span>` → `<span> </span>` (preserved - matching tags)
+   * - `<p>Hello  World</p>` → `<p>Hello  World</p>` (preserved - regular spaces)
+   *
+   * @param {string} html - The HTML string to clean.
+   * @returns {string} The cleaned HTML string.
+   */
+  clean(html) {
+    if (!html || html.trim().length === 0) {
+      return html;
+    }
+    let result = html;
+    let previousResult;
+    // Keep processing until no more changes occur
+    do {
+      previousResult = result;
+      // Apply each processor in the chain
+      for (const processor of this.processors) {
+        result = processor.process(result);
+      }
+    } while (result !== previousResult);
+    return result;
+  }
+}
+
+/**
+ * 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 = codeBlock.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
+   *
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {VegaRTEContent} An empty content state
+   */
+  static createEmptyContent(options = { autoMatchFormat: true }) {
+    return VegaRTEContent.fromJSON([
+      {
+        id: misc.generateUUID(),
+        type: 'paragraph',
+        annotations: {
+          internalWrapper: !options.autoMatchFormat,
+        },
+        nodes: [
+          {
+            id: misc.generateUUID(),
+            annotations: { plainText: !options.autoMatchFormat },
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ], options);
+  }
+  /**
+   * 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 }) {
+    const cleaner = new HTMLContentCleaner();
+    const formattedHtml = cleaner.clean(html);
+    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(typeGuard.isNonNullable)
+      .map((output) => output.toDto(options))
+      .filter(typeGuard.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) {
+      globalSlimmerRegistry.LogUtility.warn(`The 'options' parameter in toHtml method is deprecated and will be removed in the future.`);
+    }
+    if (this.isEmpty()) {
+      return '';
+    }
+    return this.children.map((block) => block.toHtml()).join('');
+  }
+  /**
+   * Checks if the content state is empty.
+   *
+   * @returns {boolean} True if the content state is empty, false otherwise.
+   */
+  isEmpty() {
+    return this.children.length === 0 || (this.children.length === 1 && !this.children[0].isNotEmpty());
+  }
+  /**
+   * Internal method to add the block item, remove the block item
+   *
+   * @param {ModifyContentAction} action - Modify content action
+   */
+  apply(action) {
+    codeBlock.ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    // Check if the action has been executed and is flushable
+    if (action['executedFlag'] && action.isFlushable) {
+      const host = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (host) {
+        changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(host, vegaInternalEventId.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 codeBlock.SyncUpSelectionAction()));
+    const listItemBlock = new RTEListItemBlock(misc.generateUUID());
+    listItemBlock.apply(new codeBlock.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(misc.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;
+  }
+}
+(() => {
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.DELETE_CHILDREN, VegaRTEContent.name, new codeBlock.RemoveChildrenStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.APPEND_CHILDREN, VegaRTEContent.name, new AppendChildrenStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, VegaRTEContent.name, new InsertChildrenBeforeStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.INSERT_CHILDREN_AFTER, VegaRTEContent.name, new InsertChildrenAfterStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
+  codeBlock.ActionHandleStrategyRegistry.register(codeBlock.ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
+})();
+
+exports.AnnotationGeneratorStrategyAbstract = AnnotationGeneratorStrategyAbstract;
+exports.BlockToRTEBlockStrategyAbstract = BlockToRTEBlockStrategyAbstract;
+exports.ElementToDTOClassStrategyManager = ElementToDTOClassStrategyManager;
+exports.ElementToDTOStrategy = ElementToDTOStrategy;
+exports.ElementToDtoStrategyProcessor = ElementToDtoStrategyProcessor$1;
+exports.ImageAnnotation = ImageAnnotation;
+exports.InsertChildrenBeforeStrategy = InsertChildrenBeforeStrategy;
+exports.InsertNewParagraphAction = InsertNewParagraphAction;
+exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
+exports.PasteContentStrategy = PasteContentStrategy;
+exports.RTEDTOActionStrategyManager = RTEDTOActionStrategyManager$1;
+exports.RTEImageBlock = RTEImageBlock;
+exports.RTEImageNode = RTEImageNode;
+exports.RTEListBlock = RTEListBlock;
+exports.RTEListItemBlock = RTEListItemBlock;
+exports.StylePreservator = StylePreservator;
+exports.UpdateCursorPositionAction = UpdateCursorPositionAction;
+exports.VegaRTEContent = VegaRTEContent;
+exports.htmlElementToAnnotationGenerator = htmlElementToAnnotationGenerator;