@heartlandone/vega 2.79.0 → 2.81.0

package/dist/esm/content-state-89f8eecb.js

@@ -0,0 +1,4942 @@
+import { g as ActionHandleStrategy, e as RTETextBlock, c as RTETextNode, h as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, q as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, r as BlockUpdateHorizontalAlignmentStrategy, l as ModifyContentActionType, t as BlockInsertLineBreakStrategy, u as BlockInsertLineBreakWithBlocksStrategy, v as BlockSplitWithTextNodeStrategy, w as BlockReplaceNodesStrategy, x as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, n as RemoveChildrenAction, S as SyncUpSelectionAction, j as InsertChildrenBeforeAction, B as BlockAnnotation, y as BlockAnnotationTypeEnum, d as RTEBlock, z as CustomStyleAnnotation, D as CustomClassAnnotation, o as CustomAttributeAnnotation, E as RTECodeBlock, s as stateEntityRenderingRegistry, N as NodeAnnotation, F as NodeAnnotationTypeEnum, G as RTEDecoratorNode, J as NodeTypeEnum, K as CommonAnnotation, m as AnnotationAction, L as ReplaceChildNodesAction, M as ModifyContentAction, O as SplitBlockWithNodeAction, P as HTML_VOID_TAGS, Q as BlockDeleteNodeContentStrategy, U as UpdateTextAction, W as RemoveChildrenStrategy, X as BOLD_FONT_WEIGHT_KEYWORD, Y as BOLD_FONT_WEIGHT, Z as createStyleMapFromElement, _ as RTE_TEXT_COLORS, $ as RTE_DEFAULT_TEXT_COLOR, a0 as ITALIC_FONT_STYLE, a1 as STRIKETHROUGH_TEXT_DECORATION, a2 as UNDERLINE_TEXT_DECORATION, R as RTEFilterStylesStrategyRegistry, a3 as TextStyleAnnotation, p as RTEFilterStylesStrategy, a4 as Predicate$1, a5 as HorizontalAlignmentAnnotation, a6 as CodeAnnotation, b as RTEDTOClassManager, a7 as LinkFilterStylesStrategy, a8 as CodeBlockFilterStylesStrategy, a9 as RTECodeBlockNode, aa as CodeBlockNodeFilterStylesStrategy } from './code-block-cd913077.js';
+import { g as generateUUID } from './misc-9fdbcfbb.js';
+import { i as isNonNullable } from './type-guard-f6c9c89d.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
+import { c as VegaInternalUpdateRTECursorPosition, d as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-70bd893d.js';
+import { r as rgbToHex, i as isHTMLElement } from './ui-b7600a48.js';
+import { c as cleanObject } from './object-0c277f57.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+
+/**
+ * Remove list item nest list block strategy.
+ */
+class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the nest list block from the list item, clear the property children when the children is empty.
+   *
+   * @param {RemoveNestListAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    if (target.nestList) {
+      if (target.nestList.length > 1) {
+        target.nestList = target.nestList.filter((child) => child !== action.nestListBlockToBeRemoved);
+      }
+      else {
+        target.nestList = undefined;
+      }
+    }
+  }
+}
+
+/**
+ * Replace list item nest list strategy.
+ */
+class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newList.forEach((listBlock) => {
+      listBlock.parent = target;
+    });
+    target.nestList = action.newList;
+  }
+}
+
+/**
+ * Insert image node to list item block strategy.
+ */
+class ListItemInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * The image node can not insert into list item block, so insert image after parent list block.
+   *
+   * @param {InsertImageToBlockAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.parent.apply(action);
+  }
+}
+
+/**
+ * List item block
+ */
+class RTEListItemBlock extends RTETextBlock {
+  constructor(id, nestList, options) {
+    super(id, 'list-item', options);
+    /**
+     * TODO: Refactor the list item properties children and nestList, merge two properties together.
+     *
+     * 1. Update the type of `children` to include `RTEListBlock` as a possible type.
+     * 2. The list block children should text block array and nest list block array, The text block should wrap a `li` tag when rendering.
+     */
+    this.nestList = [];
+    this.nestList = nestList;
+  }
+  /**
+   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    const listItemBlock = new RTEListItemBlock(block.id, undefined, options);
+    listItemBlock.children = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock, options));
+    if (block.children) {
+      listItemBlock.nestList = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    var _a;
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.nestList) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const attrStr = super.generateAttributeString(options);
+    return [`<li${attrStr}>`, this.getChildrenHtml(options), `</li>`].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTEListItemBlock(generateUUID());
+    block.children = [];
+    block.apply(new AppendChildrenAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    if (this.nestList && this.nestList.length > 0) {
+      const childListBlock = this.nestList[this.nestList.length - 1];
+      return childListBlock.getLastNode();
+    }
+    return super.getLastNode();
+  }
+  /**
+   * Create a new list item block.
+   *
+   * @returns {RTEListItemBlock} - A list item block.
+   */
+  createNewListItem() {
+    return new RTEListItemBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    var _a;
+    const block = new RTEListItemBlock(this.id);
+    block.children = this.children.map((node) => node.clone(block));
+    block.annotationMap = super.cloneAnnotations();
+    block.nestList = (_a = this.nestList) === null || _a === void 0 ? void 0 : _a.map((child) => child.clone(block));
+    block.parent = parent;
+    return block;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEListItemBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
+})();
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class ListTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const bulletList = target.parent.createList(action.listType);
+    const isSameList = selectedBlocks.every((block) => block.parent === target);
+    if (isSameList) {
+      // Select one or more list items belonging to the same list, and all items in this list should be updated
+      bulletList.apply(new AppendChildrenAction(target.children));
+      target.parent.apply(new InsertChildrenAfterAction(target, bulletList));
+      target.parent.apply(new RemoveChildrenAction(target));
+      selectedBlocks.forEach((block) => block.children.map((node) => node.apply(new SyncUpSelectionAction())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
+      bulletList.apply(new AppendChildrenAction(listItems));
+      target.parent.apply(new InsertChildrenAfterAction(target, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new RemoveChildrenAction(block));
+      });
+      if (target.children.length === 0) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected list block to paragraph strategy.
+ */
+class ListTransformToParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    let isSelectedFirstBlock = false;
+    let isSelectedLastBlock = false;
+    const selectedBlocks = action.selectedBlocks;
+    const currentParagraph = selectedBlocks.map((block) => {
+      block.children.map((node) => node.apply(new SyncUpSelectionAction()));
+      if (block === target.children[0])
+        isSelectedFirstBlock = true;
+      if (block === target.children[target.children.length - 1])
+        isSelectedLastBlock = true;
+      return this.toParagraph(block);
+    });
+    if (isSelectedFirstBlock) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      target.parent.apply(new InsertChildrenAfterAction(target, ...currentParagraph));
+    }
+    else {
+      const startIndex = target.children.indexOf(selectedBlocks[0]);
+      const lastIndex = target.children.indexOf(selectedBlocks[selectedBlocks.length - 1]);
+      const firstBulletList = target.parent.createList(target.type);
+      firstBulletList.apply(new AppendChildrenAction(target.children.slice(0, startIndex)));
+      const lastBulletList = target.parent.createList(target.type);
+      lastBulletList.apply(new AppendChildrenAction(target.children.slice(lastIndex + 1)));
+      target.parent.apply(new InsertChildrenBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
+      target.parent.apply(new RemoveChildrenAction(target));
+    }
+    selectedBlocks.map((block) => {
+      target.apply(new RemoveChildrenAction(block));
+    });
+    if (target.children.length === 0) {
+      target.parent.apply(new RemoveChildrenAction(target));
+    }
+  }
+  /**
+   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
+   *
+   * @param {RTEListItemBlock} block - The block that will be covered
+   * @returns {RTETextBlock} Returns a `RTETextBlock`.
+   */
+  toParagraph(block) {
+    const textBlock = new RTETextBlock(generateUUID(), 'paragraph');
+    textBlock.apply(new AppendChildrenAction(block['children']));
+    textBlock['annotationMap'] = block['annotationMap'];
+    return textBlock;
+  }
+}
+
+/**
+ * Insert image to list block strategy.
+ */
+class ListInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the list item block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    if (target.parent['type'] !== 'list-item') {
+      target.parent.apply(new InsertChildrenAfterAction(target, imageBlock));
+    }
+    else {
+      target.parent.apply(action);
+    }
+  }
+}
+
+/**
+ * List annotation
+ */
+class ListAnnotation extends BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = BlockAnnotationTypeEnum.LIST;
+  }
+  /**
+   * 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 RTEBlock {
+  constructor(id, type, options) {
+    super(id);
+    this.type = 'bullet-list';
+    this.children = [];
+    this.type = type;
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      this.annotationMap.set(BlockAnnotationTypeEnum.LIST, new ListAnnotation());
+    }
+  }
+  /**
+   * Converts a VegaRTEListBlock object to an RTEListBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    const listBlock = new RTEListBlock(block.id, block.type, options);
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    listBlock.children = block.blocks.map((item) => {
+      const listItemBlock = RTEListItemBlock.from(item, options);
+      listItemBlock.parent = listBlock;
+      return listItemBlock;
+    });
+    return listBlock;
+  }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.children.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString(options);
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.children.map((block) => block.toHtml(options)).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedListBlock = new RTEListBlock(this.id, this.type);
+    clonedListBlock.children = this.children.map((item) => item.clone(clonedListBlock));
+    clonedListBlock.annotationMap = super.cloneAnnotations();
+    clonedListBlock.parent = parent;
+    return clonedListBlock;
+  }
+  /**
+   * Returns the block tag based on the type of the list block.
+   *
+   * @returns {RTEListBlockTagType} - The block tag for the list block, either 'ol' or 'ul'.
+   */
+  getBlockTag() {
+    return this.type === 'number-list' ? 'ol' : 'ul';
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
+})();
+
+/**
+ * Transform the selected text blocks to a code block strategy.
+ */
+class BlockTransformToCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * Get the all select text and create a new code block.
+   *
+   * @param {TransformToCodeBlockAction} action - The action instance.
+   * @param {VegaRTEContent} target - The block top parent instance.
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const codeBlock = new RTECodeBlock(generateUUID(), this.getCodeContent(selectedBlocks), 'plainText');
+    target.apply(new InsertChildrenBeforeAction(selectedBlocks[0], codeBlock));
+    action.newCodeBlock = codeBlock;
+    this.removeSelectBlocks(selectedBlocks, target);
+  }
+  /**
+   * Get the selected text block text content.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @returns {string} - The selected text content.
+   */
+  getCodeContent(selectedBlocks) {
+    const selectedTextBlocks = selectedBlocks.filter((item) => item.type !== 'image' && item.type !== 'list-item');
+    return selectedTextBlocks
+      .map((block) => {
+      return block.children.map((node) => node.text).join('');
+    })
+      .join('\n');
+  }
+  /**
+   * Remove the selected blocks after append new code block.
+   *
+   * @param {RTEBlock[]} selectedBlocks - The selected blocks.
+   * @param {VegaRTEContent} target - The selected block top parent object.
+   */
+  removeSelectBlocks(selectedBlocks, target) {
+    for (let i = 0; i < selectedBlocks.length; i++) {
+      target.apply(new RemoveChildrenAction(selectedBlocks[i]));
+    }
+  }
+}
+
+/**
+ * Abstract class to define strategies for processing HTML elements
+ */
+class ElementToDTOStrategy {
+}
+/**
+ * Class to represent the output of a strategy applied to HTML elements
+ */
+class ElementToDTOStrategyOutput {
+  constructor(currentStrategy, currentElements) {
+    this.childrenOutput = [];
+    this.currentStrategy = currentStrategy;
+    this.currentElements = currentElements;
+  }
+  /**
+   * Set children output.
+   *
+   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
+   */
+  setChildrenOutput(childrenOutput) {
+    this.childrenOutput = childrenOutput;
+  }
+  /**
+   * Transform current output and children output to DTO
+   *
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - DTO.
+   */
+  toDto(options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
+    const currentBlock = this.currentStrategy.handle(this.currentElements, options);
+    if (this.childrenOutput.length > 0 && currentBlock) {
+      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
+        .map((childOutput) => childOutput.toDto(options))
+        .filter(isNonNullable));
+    }
+    return currentBlock;
+  }
+}
+
+/**
+ * Manager for registering and retrieving strategies that convert HTML elements to DTOs.
+ */
+class elementToDTOClassStrategyManager {
+  constructor() {
+    this.elementToBlockStrategies = [];
+    this.elementToNodeStrategies = [];
+  }
+  /**
+   * Registers a element to block strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToBlockStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToBlockStrategies)) {
+      this.elementToBlockStrategies.unshift(strategy);
+    }
+  }
+  /**
+   * Registers an element to node strategy for converting HTML elements to DTOs. The new strategy is added to the beginning of the list to give it higher priority.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToNodeStrategy(strategy) {
+    if (!this.hasDuplicateStrategy(strategy, this.elementToNodeStrategies)) {
+      this.elementToNodeStrategies.unshift(strategy);
+    }
+  }
+  /**
+   * Retrieves all registered element to block strategies for converting HTML elements to DTOs.
+   *
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to block strategies.
+   */
+  getElementToBlockStrategies() {
+    return this.elementToBlockStrategies;
+  }
+  /**
+   * Retrieves all registered element to node strategies for converting HTML elements to DTOs.
+   *
+   * @returns {ElementToDTOStrategy[]} - A set of all registered element to node strategies.
+   */
+  getElementToNodeStrategies() {
+    return this.elementToNodeStrategies;
+  }
+  /**
+   * Checks if a strategy is already registered in the provided strategy list.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to check for duplicates.
+   * @param {ElementToDTOStrategy[]} strategyList - The list of strategies to check against.
+   * @returns {boolean} - True if the strategy is a duplicate, false otherwise.
+   */
+  hasDuplicateStrategy(strategy, strategyList) {
+    return strategyList.includes(strategy);
+  }
+}
+const ElementToDTOClassStrategyManager = new elementToDTOClassStrategyManager();
+
+/** Element to DTO processor */
+class ElementToDtoStrategyProcessor {
+  /**
+   * Transform process.
+   *
+   * @param {HTMLElement[]} elements - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   */
+  process(elements, options = { autoMatchFormat: true, skipCustomAnnotations: true }) {
+    const strategies = this.getElementToBlockStrategies();
+    const outputs = [];
+    for (let i = 0; i < elements.length; i++) {
+      if (this.isInvalidElement(elements[i], options))
+        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 should be skipped during processing.
+   *
+   * Comment nodes are always skipped. META and STYLE elements are skipped only
+   * in auto-match mode; in raw-HTML mode (autoMatchFormat: false) they are passed
+   * through so downstream strategies can decide how to handle them.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {VegaRTETransformOptions} options - Transform options.
+   * @returns {boolean} True when the element should be skipped.
+   */
+  isInvalidElement(element, options) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    if (options.autoMatchFormat === false)
+      return false;
+    return ['META', 'STYLE'].includes(element.nodeName);
+  }
+  /**
+   * Get the register element to block strategies.
+   *
+   * @returns {ElementToDTOStrategy[]} - The register element to block strategies.
+   */
+  getElementToBlockStrategies() {
+    return ElementToDTOClassStrategyManager.getElementToBlockStrategies();
+  }
+}
+const ElementToDtoStrategyProcessor$1 = new ElementToDtoStrategyProcessor();
+
+/**
+ * Update the cursor position in the editor.
+ */
+class UpdateCursorPositionStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { offset, nextFocusNode, immediatelyRun } = action;
+    const host = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (host) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalUpdateRTECursorPosition), {
+        node: nextFocusNode,
+        offset,
+        updateDirectly: immediatelyRun,
+      });
+    }
+  }
+}
+
+/**
+ * Append new block array or node array to block or VegaRTEContent instance strategy.
+ */
+class AppendChildrenStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newBlocks = action.entityToBeAppended;
+    if (target.children) {
+      newBlocks.forEach((block) => {
+        block.parent = target;
+      });
+      // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
+      const arrayFixed = target.children;
+      target.children = arrayFixed.concat(newBlocks);
+    }
+  }
+}
+
+/**
+ * Insert children at the front of the block strategy.
+ */
+class InsertChildrenBeforeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceElementWithElements(target, action.referChildren, [
+      ...action.childrenToBeInserted,
+      action.referChildren,
+    ]);
+  }
+  /**
+   * Replaces a specific block or node with an array of blocks or nodes within RTEContentBlock array.
+   *
+   * @param {RTEBlock | VegaRTEContent} target - The block or the VegaRTEContent instance.
+   * @param {RTEBlock | RTENode} referElement - Used as a reference element to identify the element that needs to be replaced in the array.
+   * @param {RTEBlock[] | RTENode[]} elements - An array of block or node objects that you want to replace the `referElement` with in the array.
+   */
+  replaceElementWithElements(target, referElement, elements) {
+    if (target.children) {
+      elements.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.children;
+      target.children = arrayFixed.flatMap((block) => {
+        if (block === referElement) {
+          return elements;
+        }
+        else {
+          return block;
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Insert children at the front of the block strategy.
+ */
+class InsertChildrenAfterStrategy extends InsertChildrenBeforeStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceElementWithElements(target, action.referChildren, [
+      action.referChildren,
+      ...action.childrenToBeInserted,
+    ]);
+  }
+}
+
+/**
+ * Annotation for image
+ */
+class ImageAnnotation extends NodeAnnotation {
+  constructor(size, alt) {
+    super();
+    this.type = NodeAnnotationTypeEnum.IMAGE;
+    this.size = size;
+    this.alt = alt;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} size - Image size
+   * @param {string} alt - Image alt
+   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
+   */
+  static from(size, alt) {
+    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
+  }
+  /**
+   * 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 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%' });
+      }
+    }
+  }
+}
+ImageAnnotation.BASE_STYLES = { verticalAlign: 'bottom' };
+
+/**
+ * Update the image node annotation map strategy.
+ */
+class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    target.annotationMap.set(annotation.type, annotation);
+  }
+}
+
+/**
+ * The image node update property url strategy.
+ */
+class ImageUpdateUrlStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.url = action.url;
+  }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/**
+ * Image node
+ */
+class RTEImageNode extends RTEDecoratorNode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parent = parentBlock;
+  }
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
+   */
+  static from(node, parentBlock, options = { autoMatchFormat: true }) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
+    const autoMatchFormat = !!options.autoMatchFormat;
+    const _a = Object.assign({}, node.annotations), { size } = _a, otherAnnotations = __rest(_a, ["size"]);
+    const annotations = Object.assign(Object.assign({}, otherAnnotations), { size: size !== null && size !== void 0 ? size : (autoMatchFormat ? 'md' : undefined) });
+    imageNode.annotationMap = new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'size' || type === 'alt') {
+        return ImageAnnotation.from(annotations.size, annotations.alt);
+      }
+      return this.createAnnotationEntity(type, annotations[type]);
+    })
+      .filter(isNonNullable));
+    return imageNode;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof CommonAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    if (annotations.alt == '')
+      delete annotations.alt;
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    return new RTEImageNode(this.id, this.url, parent, super.cloneAnnotations());
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const attrStr = super.generateAttributeString(options, ...[
+      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
+      `src="${this.url}"`,
+      imageAnnotation && imageAnnotation.size ? `data-size="${imageAnnotation.size}"` : null,
+    ].filter(isNonNullable));
+    return `<img${attrStr}>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
+  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
+})();
+
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @param {RTEImageNode} imageNode The split point image node.
+   * @param {number} imageOffset The cursor point 0 | 1.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {Nullable<RTEBlock>} The new block after split
+   */
+  splitImageNodes(imageNode, imageOffset, target) {
+    const nodesSplitIndex = target.children.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = target.children.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = target.children.slice(nodesSplitIndex + imageOffset);
+      target.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes, target);
+      target.parent.apply(new InsertChildrenAfterAction(target, newBlock));
+      return newBlock;
+    }
+  }
+  /**
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   *
+   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   */
+  cloneWithNodes(nodes, target) {
+    const block = target.createNewImageBlock();
+    block.children = [];
+    block.apply(new AppendChildrenAction(nodes));
+    return block;
+  }
+}
+
+/**
+ * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
+ * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example currentBlock.apply(new InsertNewParagraphAction(startContainerNode, startOffset))
+ */
+class InsertNewParagraphAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NEW_PARAGRAPH;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
+   *
+   * @param {LineBreakSingleBlockAction} action - The action instance.
+   * @param {RTEImageBlock} target - The image block.
+   */
+  handleAction(action, target) {
+    const insertNewParagraphAction = new InsertNewParagraphAction(action.startContainerNode, action.startOffset);
+    target.apply(insertNewParagraphAction);
+    const newBlock = insertNewParagraphAction.newBlock;
+    if (newBlock) {
+      action.lineBreakNode = newBlock.children[0];
+    }
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   *
+   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
+    });
+    target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildrenAction(afterNodes));
+    return newParagraph['children'][0];
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
+   */
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block.children);
+        block.parent.apply(new RemoveChildrenAction(block));
+      }
+    });
+    return nodes;
+  }
+}
+
+/**
+ * Insert a image node at the special position of image block.
+ */
+class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    const newImageNodes = newImageBlock.children;
+    if (target.children.length < 1) {
+      target.apply(new AppendChildrenAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, newImageBlock));
+    }
+    else {
+      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Image block
+ */
+class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.children = [];
+  }
+  /**
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.children = block.nodes.map((image) => RTEImageNode.from(image, imageBlock, options));
+    if (annotations) {
+      super.convertAnnotationsToMap(imageBlock.annotationMap, annotations);
+    }
+    return imageBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.children.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const attrStr = super.generateAttributeString(options);
+    const children = this.children.map((node) => node.toHtml(options)).join('');
+    return super.shouldRenderAsInternalWrapper()
+      ? children
+      : [`<div${attrStr}>`, children, `</div>`].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((node) => node.url.length > 0);
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * Create a new image block.
+   *
+   * @returns {RTEImageBlock} - The empty image block.
+   */
+  createNewImageBlock() {
+    return new RTEImageBlock(generateUUID());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEImageBlock(this.id);
+    clonedBlock.children = this.children.map((node) => node.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTEImageBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+})();
+
+/**
+ * HTML Block
+ */
+class RTEHtmlBlock extends RTEBlock {
+  constructor(id, htmlTag) {
+    super(id);
+    this.type = 'html-block';
+    this.children = [];
+    this.htmlTag = htmlTag;
+  }
+  /**
+   * Converts a VegaRTEHtmlBlock to an RTEHtmlBlock.
+   *
+   * @param {VegaRTEHtmlBlock} block - The VegaRTEHtmlBlock to convert.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @returns {RTEHtmlBlock} The converted RTEHtmlBlock.
+   */
+  static from(block, options) {
+    const htmlBlock = new RTEHtmlBlock(block.id, block.htmlTag);
+    const { annotations } = block;
+    if (annotations) {
+      super.convertAnnotationsToMap(htmlBlock.annotationMap, annotations);
+    }
+    htmlBlock.children = this.generateBlockChildren(block.children, options, htmlBlock);
+    return htmlBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEHtmlBlock(this.id, this.htmlTag);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    // Any RTEHtmlBlock — whether void (hr, br), childless (canvas, iframe),
+    // or with children — represents real user content. Only the default empty
+    // text paragraph should make the editor report as empty.
+    return true;
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const BlockTag = this.htmlTag;
+    const attrStr = super.generateAttributeString(options);
+    // Handle void/self-closing tags (hr, input, col, etc.)
+    // Uses HTML5 syntax without self-closing slash for consistency with img and br tags
+    if (HTML_VOID_TAGS.has(this.htmlTag)) {
+      return `<${BlockTag}${attrStr}>`;
+    }
+    // Handle normal tags with children
+    return [
+      `<${BlockTag}${attrStr}>`,
+      this.children.map((block) => block.toHtml(options)).join(''),
+      `</${BlockTag}>`,
+    ].join('');
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, htmlTag: this.htmlTag, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+
+/**
+ * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
+ *
+ * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
+ */
+class MergeTwoBlocksNodesAction extends ModifyContentAction {
+  constructor(blockNeedToBeMerged) {
+    super();
+    this.type = ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.blockNeedToBeMerged = blockNeedToBeMerged;
+  }
+}
+
+/**
+ * Block delete text or decorator node strategy.
+ */
+class BlockDeleteTextOrDecoratorNodeStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { startContainerNode } = action;
+    if (!startContainerNode.isContentEditable()) {
+      this.deleteDecoratorNodeContent(action, target);
+    }
+    else if (startContainerNode.isTextNode()) {
+      this.deleteTextNodeContent(action, target);
+    }
+    const parent = target.parent;
+    if (parent && target.isListItemBlock() && parent.children.length === 0) {
+      parent.parent.apply(new RemoveChildrenAction(parent));
+    }
+  }
+  /**
+   * Handle the delete text logic when press delete key.
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   * @param {RTETextBlock} target - Current text block
+   */
+  deleteTextNodeContent(action, target) {
+    const startContainerNode = action.startContainerNode;
+    const startOffset = action.startOffset;
+    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
+      const newText = startContainerNode.text.slice(0, startOffset - 1) +
+        startContainerNode.text.slice(startOffset);
+      startContainerNode.apply(new UpdateTextAction(newText));
+      if (newText) {
+        action.previousNode = startContainerNode;
+        return;
+      }
+      else {
+        const previousNode = this.getPreviousNode(startContainerNode);
+        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
+        if ((previousNode && previousNode.parent === target && previousNode['text'] === '\n') ||
+          target.children.length === 1) {
+          action.previousNode = startContainerNode;
+          return;
+        }
+        else {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+          action.previousNode = previousNode;
+          return;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      let nextNode = null;
+      const isCurrentNodeEmpty = startContainerNode.isEmpty();
+      if (target.children.length && previousNode && previousNode.parent !== target) {
+        if (isCurrentNodeEmpty) {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+        }
+        if (target.type === previousNode.parent.type) {
+          previousNode.parent.apply(new MergeTwoBlocksNodesAction(target));
+        }
+      }
+      else {
+        if (this.isContentFirstNode(startContainerNode) && isCurrentNodeEmpty) {
+          nextNode = this.getNextNode(startContainerNode);
+        }
+        /**
+         * Remove line break
+         *
+         * @example caret at the first line
+         * \n
+         * test
+         */
+        if (isCurrentNodeEmpty) {
+          target.apply(new RemoveChildrenAction(startContainerNode));
+        }
+        /**
+         * Remove line break or non-editable node
+         *
+         * @example caret at the begin of second line
+         * \n
+         * test
+         * @example caret at the end of non-editable node and start of the text node
+         * <img/><span>test</span>
+         */
+        if (previousNode &&
+          previousNode.isTextNode() &&
+          (previousNode.isEmpty() ||
+            (!previousNode.isContentEditable() && previousNode.parent === target))) {
+          const shouldRemoveNode = previousNode;
+          previousNode = this.getPreviousNode(previousNode);
+          shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
+          if (!previousNode && !isCurrentNodeEmpty) {
+            nextNode = startContainerNode;
+          }
+        }
+      }
+      // Remove the paragraph block if the content is empty
+      // TODO: Check whether need to remove below logic because already handled the same logic in remove node strategy
+      if (target.children.length === 0) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
+  }
+  /**
+   * Delete decorator node content
+   *
+   * @param {DeleteBlockContentAction} action - The delete block content action
+   * @param {RTEBlock} target - The target block
+   */
+  deleteDecoratorNodeContent(action, target) {
+    const startContainerNode = action.startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset !== 0) {
+      const parentBlock = target;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      if (parentBlock.children.length === 1) {
+        parentBlock.parent.apply(new RemoveChildrenAction(parentBlock));
+      }
+      else {
+        parentBlock.apply(new RemoveChildrenAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && !shouldRemoveNode.isContentEditable()) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parent.apply(new RemoveChildrenAction(shouldRemoveNode));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
+  }
+}
+
+/**
+ * Insert new paragraph into current block at special position.
+ */
+class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { startContainerNode } = action;
+    action.newBlock = this.breakSingleBlock(startContainerNode, action.startOffset, target);
+  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTEBlock} target -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
+  breakSingleBlock(splitNode, startOffsetOfNode, target) {
+    const newParagraph = this.getNewParagraph(splitNode);
+    if (newParagraph) {
+      if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+      }
+      else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, newParagraph));
+      }
+      else {
+        const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+        target.apply(splitBlockAction);
+        return splitBlockAction.newBlock;
+      }
+      return newParagraph;
+    }
+  }
+  /**
+   * Create new Paragraph
+   *
+   * @param {RTENode} splitNode - The split node of the block.
+   * @returns {Nullable<RTETextBlock>} - The new text block.
+   */
+  getNewParagraph(splitNode) {
+    const newParagraph = this.createNewParagraph('');
+    if (newParagraph) {
+      let textNode = newParagraph.children[0];
+      if (splitNode.isTextNode() && splitNode.isContentEditable()) {
+        newParagraph.children = [];
+        textNode = splitNode.cloneWithText('');
+        // The link annotation don't need inherited
+        textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+        newParagraph.apply(new AppendChildrenAction([textNode]));
+      }
+      return newParagraph;
+    }
+  }
+}
+
+/**
+ * Update the cursor position in the editor.
+ *
+ * @example richEditorRef.value.apply(new UpdateCursorPositionAction(nextFocusNode, [offset], [immediatelyRun]))
+ */
+class UpdateCursorPositionAction extends ModifyContentAction {
+  /**
+   * Set the cursor position at end of the current node.
+   *
+   * @param {RTENode} nextFocusNode - The rich text editor needs focus node.
+   * @param {number} offset - The cursor offset position.
+   * @param {boolean} immediatelyRun - Whether to immediately set the cursor position after applying it. Usually the set action will trigger after the UI renders.
+   */
+  constructor(nextFocusNode, offset, immediatelyRun = false) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CURSOR_POSITION;
+    this.immediatelyRun = false;
+    this.nextFocusNode = nextFocusNode;
+    this.offset = offset;
+    this.immediatelyRun = immediatelyRun;
+    // Don't flush changes if we want to immediately run the cursor update. Usually the current value is the latest value.
+    if (this.immediatelyRun) {
+      this.isFlushable = false;
+    }
+  }
+}
+
+/**
+ * Insert a new node in nearest position of parent block strategy.
+ */
+class InsertNodeToNearestRootStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rteRange, nodeToBeInserted } = action;
+    const { startNode, startOffset } = rteRange;
+    if (startNode) {
+      const parent = target;
+      if (startNode.isContentEditable() && startNode.isTextNode()) {
+        if (startNode.text === '\n' || !startNode.text || startOffset === 0) {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+        else {
+          const startText = startNode.text.substring(0, startOffset);
+          const endText = startNode.text.substring(startOffset);
+          const startTextNode = startNode.cloneWithText(startText);
+          const endTextNode = startNode.cloneWithText(endText);
+          const insertNodes = [startTextNode, nodeToBeInserted];
+          if (endText) {
+            insertNodes.push(endTextNode);
+          }
+          parent.apply(new InsertChildrenBeforeAction(startNode, ...insertNodes));
+          parent.apply(new RemoveChildrenAction(startNode));
+        }
+      }
+      else {
+        if (startOffset !== 0) {
+          parent.apply(new InsertChildrenAfterAction(startNode, nodeToBeInserted));
+        }
+        else {
+          parent.apply(new InsertChildrenBeforeAction(startNode, nodeToBeInserted));
+        }
+      }
+      this.updateCursorPosition(nodeToBeInserted);
+    }
+  }
+  /**
+   * Update the cursor position to end of the inserted node.
+   *
+   * @param {RTENode} node - node to find root content
+   */
+  updateCursorPosition(node) {
+    const root = this.getRootContent(node.parent);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(node));
+    }
+  }
+}
+
+/**
+ * Strategy for inserting text into a decorator node. The decorator can not edit, so we insert the text as a new child.
+ */
+class InsertTextToDecoratorNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { text, offset, decoratorNode } = action;
+    const paragraph = this.createNewParagraph(text);
+    if (paragraph) {
+      const newTextNode = paragraph.children[0];
+      if (offset !== 0) {
+        target.apply(new InsertChildrenAfterAction(decoratorNode, newTextNode));
+      }
+      else {
+        target.apply(new InsertChildrenBeforeAction(decoratorNode, newTextNode));
+      }
+      this.setTheCursorPosition(newTextNode);
+    }
+  }
+  /**
+   * Set the cursor position to the new text node.
+   *
+   * @param {RTENode} focusNode - The new text node to focus on.
+   */
+  setTheCursorPosition(focusNode) {
+    const rootContent = this.getRootContent(focusNode.parent);
+    if (rootContent) {
+      rootContent.apply(new UpdateCursorPositionAction(focusNode));
+    }
+  }
+}
+
+/**
+ * Insert new paragraph into current list item block at special position.
+ */
+class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Breaks a single list item block at a specific position.
+   *
+   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
+   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
+   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
+   * caret position if it is neither at the start nor at the end.
+   */
+  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
+    const newListItem = target.createNewListItem();
+    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
+    newListItem.apply(new AppendChildrenAction([newBreakNode]));
+    if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem, target);
+    }
+    else if (this.isCaretPositionAtBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenBeforeAction(target, newListItem));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newListItem;
+  }
+  /**
+   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
+   *
+   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {RTEBlock} Returns a `RTEBlock`.
+   */
+  breakListItemAtEnd(newListItem, target) {
+    const lastItem = target.parent.children[target.parent.children.length - 1];
+    const currentItemIsEmpty = target.children.length === 1 && target.children[0].isEmpty();
+    if (target === lastItem && currentItemIsEmpty) {
+      const parentParent = target.parent.parent;
+      if (parentParent['type'] !== 'list-item') {
+        const newParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new AppendChildrenAction(newListItem.children));
+        parentParent.apply(new InsertChildrenAfterAction(target.parent, newParagraph));
+        target.parent.apply(new RemoveChildrenAction(target));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new InsertChildrenAfterAction(parentParent, newListItem));
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+    else {
+      target.parent.apply(new InsertChildrenAfterAction(target, newListItem));
+    }
+    return newListItem;
+  }
+  /**
+   * Copy the inline style to new node
+   *
+   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
+   * @returns {RTETextNode} Returns a `RTETextNode`.
+   */
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+/**
+ * List remove list item strategy.
+ */
+class ListRemoveListItemStrategy extends RemoveChildrenStrategy {
+  /**
+   * Remove the list item, check the list item and remove self if the list item is empty.
+   *
+   * @param {RemoveChildrenAction} action - The remove action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    super.handleAction(action, target);
+    const parent = target.parent;
+    if (target.children.length === 0 && parent) {
+      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
+      if (parent['type'] === 'list-item') {
+        parent.apply(new RemoveNestListAction(target));
+      }
+      else {
+        parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Strategy to handle the paste content into function block.
+ */
+class PasteContentStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    if (target.parent) {
+      const { blocksToBeInserted, startNode, startOffset } = action;
+      let futureFocusBlock = target;
+      if (startNode === target.children[0] && startOffset === 0) {
+        target.parent.apply(new InsertChildrenBeforeAction(target, ...blocksToBeInserted));
+      }
+      else {
+        const breakAction = new SplitBlockWithNodeAction(startNode, startOffset);
+        target.apply(breakAction);
+        target.parent.apply(new InsertChildrenAfterAction(target, ...blocksToBeInserted));
+        futureFocusBlock = breakAction.newBlock;
+      }
+      action.futureFocusBlock = futureFocusBlock;
+    }
+  }
+}
+
+/**
+ * Manager class for registering DTO action strategies.
+ */
+class RTEDTOActionStrategyManager {
+  /**
+   * Registers basic strategies for a given DTO class.
+   *
+   * @param {string} dtoClassName - The name of the RTE block class name.
+   */
+  registerBlockBasicStrategies(dtoClassName) {
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, dtoClassName, dtoClassName === RTEListBlock.name
+      ? new ListRemoveListItemStrategy()
+      : new RemoveChildrenStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, dtoClassName, new AppendChildrenStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, dtoClassName, new InsertChildrenBeforeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_AFTER, dtoClassName, new InsertChildrenAfterStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, dtoClassName, new BlockDeleteTextOrDecoratorNodeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NEW_PARAGRAPH, dtoClassName, dtoClassName === RTEListItemBlock.name
+      ? new ListItemInsertNewParagraphStrategy()
+      : new BlockInsertNewParagraphStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE, dtoClassName, new InsertTextToDecoratorNodeStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT, dtoClassName, new InsertNodeToNearestRootStrategy());
+    ActionHandleStrategyRegistry.register(ModifyContentActionType.PASTE_CONTENT, dtoClassName, new PasteContentStrategy());
+  }
+}
+const RTEDTOActionStrategyManager$1 = new RTEDTOActionStrategyManager();
+
+/**
+ * Abstract class to define handler for generate the annotations
+ */
+class AnnotationGeneratorStrategyAbstract {
+}
+
+/** Handle bold annotation */
+class BoldAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isBold(element) || parentAnnotations.bold ? { bold: true } : {};
+  }
+  /**
+   * Is bold element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isBold(element) {
+    return (element.nodeName === 'STRONG' ||
+      element.nodeName === 'B' ||
+      element.style.fontWeight === BOLD_FONT_WEIGHT_KEYWORD ||
+      element.style.fontWeight === 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 = createStyleMapFromElement(element);
+    return Object.keys(styles).length > 0 ? { customStyle: styles } : {};
+  }
+}
+
+/** Handle indent annotation */
+class IndentAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   */
+  handle(element) {
+    const indent = this.getIndent(element);
+    return indent ? { indent: indent } : {};
+  }
+  /**
+   * Get indent of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<number>} - Indent.
+   */
+  getIndent(element) {
+    const style = element.style;
+    let marginLeft;
+    if (style.marginLeft) {
+      marginLeft = style.marginLeft;
+    }
+    else if (style.margin) {
+      const margins = style.margin.split(' ');
+      switch (margins.length) {
+        case 4:
+          marginLeft = margins[3];
+          break;
+        case 2:
+        case 3:
+          marginLeft = margins[1];
+          break;
+        default:
+          marginLeft = margins[0];
+          break;
+      }
+    }
+    else {
+      return null;
+    }
+    const marginLeftNumber = Number(marginLeft.replace('px', ''));
+    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
+  }
+}
+
+/** Handle text align annotation */
+class TextAlignAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {RTEDtoClassPrototype} targetDto - Target DTO.
+   * @returns {boolean} - .
+   */
+  canHandle(targetDto) {
+    return ['RTETextBlock', 'RTEListItemBlock', 'RTEListBlock'].includes(targetDto.name);
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTEBlockAnnotations} - Annotation.
+   */
+  handle(element) {
+    const textAlign = this.getTextAlign(element);
+    return textAlign ? { textAlign: textAlign } : {};
+  }
+  /**
+   * Get text align of current element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   */
+  getTextAlign(element) {
+    const classList = element.classList;
+    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
+      return 'left';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
+      return 'center';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
+      return 'right';
+    }
+    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
+      return 'justify';
+    }
+    const style = element.style;
+    switch (style.textAlign) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'right';
+      case 'justify':
+        return 'justify';
+      case 'left':
+        return 'left';
+      default:
+        return null;
+    }
+  }
+}
+
+/** Handle code annotation */
+class CodeAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isCode(element) || parentAnnotations.code ? { code: true } : {};
+  }
+  /**
+   * Is code element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isCode(element) {
+    return (element.classList.contains('v-rte--code') ||
+      element.nodeName === 'CODE' ||
+      element.nodeName === 'PRE' ||
+      element.style.fontFamily === 'monospace' ||
+      element.style.fontFamily.replace(/["']/g, '') === 'Roboto Mono');
+  }
+}
+
+/** Handle color annotation */
+class ColorAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    const color = this.getColor(element) || parentAnnotations.textColor;
+    return color ? { textColor: color } : {};
+  }
+  /**
+   * Get current color of element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {Nullable<string>} - color.
+   */
+  getColor(element) {
+    var _a;
+    const color = element.style.color;
+    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
+    if (hexColor) {
+      // We don't display default text color as inline style, because we defined it in the vega-rich-text-content.scss.
+      const colorSchema = RTE_TEXT_COLORS.filter((item) => item.key !== RTE_DEFAULT_TEXT_COLOR.key).find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      if (colorSchema)
+        return colorSchema.key;
+      return null;
+    }
+    else {
+      for (const color of RTE_TEXT_COLORS) {
+        if (element.style.color.includes(color.key)) {
+          return color.key;
+        }
+      }
+      return null;
+    }
+  }
+}
+
+/** Handle italic annotation */
+class ItalicAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isItalic(element) || parentAnnotations.italic ? { italic: true } : {};
+  }
+  /**
+   * Is italic element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isItalic(element) {
+    return (element.nodeName === 'I' ||
+      element.style.fontStyle === ITALIC_FONT_STYLE ||
+      element.nodeName === 'EM' ||
+      element.classList.contains('v-rte--italic'));
+  }
+}
+
+/** 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) {
+      // Match class name with pattern "v-rte--text-style-{textStyle}" or "v-rte-{textStyle}".
+      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;
+  }
+}
+
+/**
+ * Predicate class provides static methods to check specific conditions on HTML elements.
+ */
+class Predicate {
+  /**
+   * Checks if the given element is a title or subtitle.
+   *
+   * @param {HTMLElement} element The element to check.
+   * @returns {boolean} True if the element is a title or subtitle, false otherwise.
+   */
+  static isTitleOrSubtitle(element) {
+    if (element.nodeName === 'DIV') {
+      const textBlockType = Predicate.textStyleHandler['getTextStyle'](element);
+      return textBlockType === 'title' || textBlockType === 'subtitle';
+    }
+    return false;
+  }
+  /**
+   * Check if the given element is a link element (anchor tag).
+   *
+   * @param {HTMLElement} element The element to check.
+   * @returns {boolean} True if the element is a link element, false otherwise.
+   */
+  static isLinkElement(element) {
+    return element.nodeName === 'A';
+  }
+}
+Predicate.textStyleHandler = new TextStyleAnnotationHandler();
+
+/** 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 Predicate.isLinkElement(element) ? { link: this.generateLinkAnnotations(element) } : {};
+  }
+  /**
+   * Generate link annotations.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @returns {VegaRTELink} - link annotations.
+   */
+  generateLinkAnnotations(element) {
+    const annotations = {
+      href: element.getAttribute('href') || '',
+      groupKey: generateUUID(),
+    };
+    this.handlers.forEach((handler) => {
+      Object.assign(annotations, handler.handle(element));
+    });
+    return annotations;
+  }
+}
+
+/** Handle strike through annotation */
+class StrikeThroughAnnotationHandler extends AnnotationGeneratorStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(targetDto) {
+    return targetDto.name === 'RTETextNode';
+  }
+  /**
+   * Handle annotation.
+   *
+   * @param {HTMLElement} element - Current elements.
+   * @param {VegaRTETextAnnotations} parentAnnotations - Parent annotations.
+   * @returns {VegaRTETextAnnotations} - Annotation.
+   */
+  handle(element, parentAnnotations = {}) {
+    return this.isStrikethrough(element) || parentAnnotations.strikethrough
+      ? { strikethrough: true }
+      : {};
+  }
+  /**
+   * Is strikethrough element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @returns {boolean} - boolean.
+   */
+  isStrikethrough(element) {
+    return (element.style.textDecoration.includes(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(UNDERLINE_TEXT_DECORATION) ||
+      element.nodeName === 'U' ||
+      element.nodeName === 'INS' ||
+      element.classList.contains('v-rte--underline'));
+  }
+}
+
+/** 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') } : {};
+  }
+}
+
+/**
+ * Tags whose direct children are always phrasing (inline) content (P, H1-H6, LI).
+ *
+ * This is spec knowledge from the HTML Living Standard — these grouping-content
+ * elements have a phrasing-content content model and cannot contain block-level
+ * descendants. It cannot be derived from the strategy registry and must be
+ * maintained alongside the HTML spec.
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+ */
+const BLOCK_TEXT_CONTAINER_TAGS = new Set([
+  'P',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'LI',
+]);
+/**
+ * Tags with dedicated element-to-DTO block strategies
+ * (P, H1-H6, LI, UL, OL, IMG, CODE).
+ *
+ * HtmlBlockStrategy skips these to avoid double-processing or overriding their
+ * specialized block semantics.
+ *
+ * Why hard-coded: strategies use heterogeneous matching (`tagName ===`,
+ * `matchTextBlockType` via font-size/class, etc.) so there is no single
+ * declarative contract to derive this set from. It must be kept in sync with
+ * the strategies registered in `dto/setup.ts`.
+ *
+ * Intentionally independent of {@link BLOCK_TEXT_CONTAINER_TAGS} — the two
+ * sets encode different concepts (app architecture vs. HTML spec) and must
+ * be maintained separately.
+ */
+const DEDICATED_STRATEGY_TAGS = new Set([
+  'P',
+  'H1',
+  'H2',
+  'H3',
+  'H4',
+  'H5',
+  'H6',
+  'LI',
+  'UL',
+  'OL',
+  'IMG',
+  'CODE',
+]);
+/**
+ * Tags that are always treated as phrasing (inline) content, even when they
+ * also appear in {@link DEDICATED_STRATEGY_TAGS} (CODE).
+ * A tag in this set overrides the dedicated-strategy skip in HtmlBlockStrategy.
+ *
+ * Mix of HTML5 spec phrasing-content elements (BR, CODE, A) and
+ * RTE-internal custom elements (VEGA-RICH-TEXT-LINK-EDITOR).
+ */
+const ALWAYS_INLINE_TAGS = new Set(['BR', 'VEGA-RICH-TEXT-LINK-EDITOR', 'CODE', 'A']);
+/**
+ * Tags whose content model requires each child to be a distinct block-level
+ * element (table model and definition list).
+ *
+ * TABLE expects CAPTION/THEAD/TBODY/TFOOT/TR; TR expects TH/TD;
+ * THEAD/TBODY/TFOOT expect TR; DL expects DT/DD.
+ *
+ * Used by HtmlBlockStrategy to prevent text-only children (e.g. CAPTION,
+ * TH, TD) from being treated as inline — they must become html-blocks so
+ * the table structure round-trips correctly.
+ *
+ * Note: COLGROUP is intentionally excluded. Its only permitted child is the
+ * void element COL, which can never produce text-node children, so the
+ * text-only heuristic in HtmlBlockStrategy can never fire for a COLGROUP
+ * parent.
+ *
+ * @see https://html.spec.whatwg.org/multipage/tables.html#the-table-element
+ * @see https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
+ */
+const STRUCTURED_CONTAINER_TAGS = new Set([
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'TFOOT',
+  'TR',
+  'DL',
+]);
+/**
+ * Formatting phrasing-content elements that CAN remain inline even when empty.
+ *
+ * Any element NOT in this set (DIV, SECTION, ARTICLE, custom elements, etc.)
+ * is treated as a block separator. Phrasing content is a closed, finite set
+ * per the HTML Living Standard, making an allowlist safer than blocklisting
+ * block containers (which is open-ended — custom elements default to block).
+ *
+ * Intentionally excludes:
+ * - BR, CODE, A, VEGA-RICH-TEXT-LINK-EDITOR → handled by {@link ALWAYS_INLINE_TAGS}
+ * - P, H1-H6, LI, UL, OL, IMG → handled by {@link DEDICATED_STRATEGY_TAGS}
+ * - VIDEO, AUDIO, EMBED → embedded content that carries media even when empty;
+ *   must be treated as block-level, not as inline formatting artifacts
+ *
+ * @see https://html.spec.whatwg.org/multipage/dom.html#phrasing-content
+ */
+const PHRASING_CONTENT_TAGS = new Set([
+  'ABBR',
+  'B',
+  'BDI',
+  'BDO',
+  'CITE',
+  'DEL',
+  'DFN',
+  'EM',
+  'I',
+  'INS',
+  'KBD',
+  'MARK',
+  'METER',
+  'OUTPUT',
+  'PROGRESS',
+  'Q',
+  'S',
+  'SAMP',
+  'SMALL',
+  'SPAN',
+  'STRONG',
+  'SUB',
+  'SUP',
+  'TIME',
+  'U',
+  'VAR',
+]);
+/**
+ * Returns true when the element is a direct child of a block text container
+ * (P, H1-H6, LI), meaning it must be treated as phrasing content regardless
+ * of its own DOM structure.
+ *
+ * @param {HTMLElement} element - Element to test.
+ * @returns {boolean} True if the element is inside a block text container.
+ */
+function isInBlockTextContext(element) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  return BLOCK_TEXT_CONTAINER_TAGS.has(element.parentElement.nodeName);
+}
+
+/**
+ * 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) {
+    // Skip block-level dedicated tags (P, H1-H6, LI, UL, OL, IMG).
+    // Tags in ALWAYS_INLINE_TAGS (CODE, A) are exempt and still produce inlineHtml annotations.
+    if (DEDICATED_STRATEGY_TAGS.has(element.nodeName) && !ALWAYS_INLINE_TAGS.has(element.nodeName)) {
+      return {};
+    }
+    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;
+    const hasElementChildren = Array.from(child.childNodes).some((c) => c.nodeType === Node.ELEMENT_NODE);
+    if (!RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) || hasElementChildren) {
+      const childInlineHtmlNode = Object.assign(Object.assign({ htmlTag: child.nodeName.toLowerCase() }, (hasElementChildren ? { groupId: generateUUID() } : {})), { customAttribute: this.customAttributeHandler.handle(child).customAttribute, customStyle: this.customStyleAnnotationHandler.handle(child).customStyle, customClass: this.customClassAnnotationHandler.handle(child).customClass });
+      if (!inlineHtml) {
+        inlineHtml = childInlineHtmlNode;
+      }
+      else {
+        inlineHtml = this.appendToInlineHtmlChain(inlineHtml, childInlineHtmlNode, child.parentNode);
+      }
+    }
+    return inlineHtml ? Object.assign({}, inlineHtml) : null;
+  }
+  /**
+   * Immutably appends `toAppend` at the correct position in the chain — the
+   * deepest node whose `child.htmlTag` still matches `parentNode.nodeName`.
+   * Each level is reconstructed via spread so the original chain is never mutated.
+   *
+   * @param {VegaInlineHtmlSchema} node - Current chain node.
+   * @param {VegaInlineHtmlSchema} toAppend - Node to append at the tail.
+   * @param {ParentNode | null} parentNode - DOM parent of the element being processed.
+   * @returns {VegaInlineHtmlSchema} A new chain with `toAppend` inserted.
+   */
+  appendToInlineHtmlChain(node, toAppend, parentNode) {
+    if (node.child && parentNode && node.child.htmlTag === parentNode.nodeName.toLowerCase()) {
+      return Object.assign(Object.assign({}, node), { child: this.appendToInlineHtmlChain(node.child, toAppend, parentNode) });
+    }
+    return Object.assign(Object.assign({}, node), { child: toAppend });
+  }
+}
+
+/** 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 }) {
+    if (options && options.filterInlineStyles) {
+      RTEFilterStylesStrategyRegistry.executeTheStrategyRefillAction(targetDto.name, element);
+    }
+    // Guard against <a> wrapping block content (e.g. <a><video></a>), which is processed as an
+    // html-block (targetDto !== RTETextNode) — link-only mode should not apply in that case.
+    const isLinkElement = Predicate.isLinkElement(element) && targetDto.name === 'RTETextNode';
+    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 = 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 (isHTMLElement(child) && child.childNodes.length > 0) {
+        const curAnnotations = htmlElementToAnnotationGenerator.generate(RTETextNode, child, Object.assign({ parentAnnotations: disableAutoMatchFormat
+            ? {
+              inlineHtml: parentAnnotations.inlineHtml,
+              link: parentAnnotations.link,
+              code: parentAnnotations.code,
+            }
+            : annotations }, options));
+        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), curAnnotations, options));
+      }
+    });
+    return childNodes;
+  }
+  /**
+   * Get the node type of element. The element type is determined in the following
+   * order: "data-type" attribute, node name, font size and class name.
+   *
+   * @param {HTMLElement} element - element.
+   * @returns {VegaRTETextBlockType} - Block type.
+   */
+  matchTextBlockType(element) {
+    var _a;
+    return (_a = this.annotationHandler.handle(element).textStyle) !== null && _a !== void 0 ? _a : 'paragraph';
+  }
+}
+
+/**
+ * Converting HTML block elements into RTE blocks.
+ */
+class HtmlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex, options) {
+    const element = elementsArray[currentIndex];
+    if (element.nodeType === Node.TEXT_NODE || this.isInlineTagWithoutBlockChildren(element, options)) {
+      return 0;
+    }
+    // Skip dedicated-strategy tags unless all children are block-level embedded
+    // elements (e.g. <p><video></p>), in which case fall back to html-block.
+    if (DEDICATED_STRATEGY_TAGS.has(element.nodeName) && !this.shouldFallBackToHtmlBlock(element)) {
+      return 0;
+    }
+    return !options.autoMatchFormat &&
+      this.isCustomHtmlContainer(element) &&
+      !Predicate.isTitleOrSubtitle(element)
+      ? 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;
+  }
+  /**
+   * Returns true for elements that should be treated as inline content even if they have no element children (e.g. <span>text</span>).
+   * This includes any element in a block text context (P, H1-H6, LI) and any element with text-node children but no element-node children.
+   *
+   * In raw-HTML mode (autoMatchFormat: false), the text-only heuristic only
+   * applies to elements whose parent is itself a text-only wrapper (e.g.
+   * {@code <div><span>Title</span></div>}). Structural children of non-text
+   * containers (TABLE → CAPTION, TR → TH/TD, etc.) skip this heuristic so
+   * they reach {@link isCustomHtmlContainer} and become html-blocks.
+   *
+   * @param {HTMLElement} element - Element to check.
+   * @param {VegaRTETransformOptions} options - Transform options.
+   * @returns {boolean} True if the element should be treated as inline content.
+   */
+  isInlineTagWithoutBlockChildren(element, options) {
+    if (isInBlockTextContext(element)) {
+      // Empty elements that are not recognized inline elements should not
+      // be forced inline — they may represent block-level embedded content
+      // (e.g. <video src="...">, <audio>, <iframe src="...">).
+      if (element.childNodes.length === 0 &&
+        element.textContent === '' &&
+        !ALWAYS_INLINE_TAGS.has(element.nodeName) &&
+        !PHRASING_CONTENT_TAGS.has(element.nodeName)) {
+        return false;
+      }
+      return true;
+    }
+    const childNodes = Array.from(element.childNodes);
+    const isTextOnly = !childNodes.some((child) => child.nodeType === Node.ELEMENT_NODE) &&
+      childNodes.some((child) => child.nodeType === Node.TEXT_NODE);
+    if (!isTextOnly) {
+      return false;
+    }
+    // In raw-HTML mode, a text-only element is inline only if:
+    // 1. Its parent is not a structured container (TABLE, TR, …)
+    // 2. The element itself is phrasing content (SPAN, EM, …)
+    // Non-phrasing text-only elements (SUMMARY, FIGCAPTION, OPTION, SVG TEXT,
+    // etc.) must fall through to become html-blocks.
+    if (options.autoMatchFormat === false) {
+      if (STRUCTURED_CONTAINER_TAGS.has(element.parentElement.nodeName))
+        return false; // eslint-disable-line @typescript-eslint/no-non-null-assertion
+      return PHRASING_CONTENT_TAGS.has(element.nodeName) || ALWAYS_INLINE_TAGS.has(element.nodeName);
+    }
+    return true;
+  }
+  /**
+   * Returns true when a dedicated-strategy element should fall back to html-block
+   * because all its children are non-text, non-inline, non-dedicated elements
+   * — indicating purely block-level embedded content that the dedicated text-block
+   * strategy cannot represent.
+   *
+   * @param {HTMLElement} element - The dedicated-strategy element to check.
+   * @returns {boolean} True when the element should be treated as html-block.
+   */
+  shouldFallBackToHtmlBlock(element) {
+    const childNodes = Array.from(element.childNodes);
+    if (childNodes.length === 0)
+      return false;
+    // List items are structural children whose dedicated strategies manage
+    // both block and inline children independently — never override them.
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const parentTag = element.parentElement.nodeName;
+    if (parentTag === 'UL' || parentTag === 'OL')
+      return false;
+    return childNodes.every((child) => child.nodeType === Node.ELEMENT_NODE &&
+      child.textContent === '' &&
+      !ALWAYS_INLINE_TAGS.has(child.nodeName) &&
+      !PHRASING_CONTENT_TAGS.has(child.nodeName));
+  }
+  /**
+   * Returns true for elements that should be treated as html containers.
+   * A DIV is only a valid container when its first child is not an IMG
+   * (IMG children are handled by the image strategy instead).
+   *
+   * @param {HTMLElement} element - Element to check.
+   * @returns {boolean} True if the element qualifies as a html container.
+   */
+  isCustomHtmlContainer(element) {
+    if (element.nodeName !== 'DIV') {
+      return true;
+    }
+    return element.childNodes.length > 0 && element.childNodes[0].nodeName !== 'IMG';
+  }
+  /**
+   * Generate HTML block DTO from an HTML element.
+   *
+   * @param {HTMLElement} element - HTML element to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {VegaRTEHtmlBlock} - HTML block DTO.
+   */
+  generateHtmlBlock(element, options) {
+    return {
+      id: generateUUID(),
+      type: 'html-block',
+      htmlTag: element.nodeName.toLowerCase(),
+      annotations: htmlElementToAnnotationGenerator.generate(RTEHtmlBlock, element, options),
+      children: [],
+    };
+  }
+}
+
+/** Transform ul element to list block DTO */
+class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
+  }
+  /**
+   * Parse to a block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
+   */
+  handle(elementsArray, options) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: [],
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListBlock, elementsArray[0], options),
+    }, options);
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform ol element to list block DTO */
+class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  }
+  /**
+   * Parse to a number list block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   */
+  handle(elementsArray, options) {
+    if (elementsArray[0].childNodes.length === 0)
+      return null;
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'number-list',
+      blocks: [],
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListBlock, elementsArray[0], options),
+    }, options);
+  }
+  /**
+   * Append child list item blocks to current list block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list block.
+   * @param {RTEContentBlock[]} childBlocks - Current list item blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.filter((block) => block instanceof RTEListItemBlock);
+    childBlocks.forEach((block) => (block.parent = currentBlock));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/** Transform child element of UL element which are not LI element to list item block DTO */
+class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    const isLiNode = element.nodeName !== 'LI';
+    // while child is empty text node like newline or empty string, we should not covert it.
+    const isEmptyNode = element.nodeType === Node.TEXT_NODE && element.textContent.trim() === '';
+    // The node must be in list item.
+    const isInList = isNonNullable(parent) && ['UL', 'OL'].includes(parent.nodeName);
+    return isLiNode && !isEmptyNode && isInList ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray, options) {
+    const nodes = this.generateChildNodes(elementsArray, {}, options);
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    }, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform li element to list item block DTO */
+class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handled.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const parent = elementsArray[currentIndex].parentElement;
+    if (!['UL', 'OL'].includes(parent.nodeName) &&
+      elementsArray.some((element) => element.nodeName === 'LI')) {
+      let count = 0;
+      for (let i = currentIndex; i < elementsArray.length; i++) {
+        if (elementsArray[i].nodeName === 'LI') {
+          count++;
+        }
+        else {
+          break;
+        }
+      }
+      return count;
+    }
+    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray, options) {
+    const firstElement = elementsArray[0];
+    const parent = firstElement.parentElement;
+    if (!['UL', 'OL'].includes(parent.nodeName)) {
+      return this.generateWithListBlock(elementsArray, options);
+    }
+    return RTEListItemBlock.from(this.generateListItemBlockDTO(firstElement, options), options);
+  }
+  /**
+   * Append child list blocks to current list item block.
+   *
+   * @param {RTEListBlock} currentBlock - Current list item block.
+   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.nestList = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
+  }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+  /**
+   * Generate list block from a list of HTML elements.
+   *
+   * @param {HTMLElement[]} elements - List of HTML elements to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {RTEListBlock} - List block DTO.
+   */
+  generateWithListBlock(elements, options) {
+    return RTEListBlock.from({
+      id: generateUUID(),
+      type: 'bullet-list',
+      blocks: elements.map((item) => {
+        return this.generateListItemBlockDTO(item, options);
+      }),
+    }, options);
+  }
+  /**
+   * Generate list item block DTO from an HTML element.
+   *
+   * @param {HTMLElement} element - HTML element to convert.
+   * @param {VegaRTETransformOptions} options - Options for transformation.
+   * @returns {VegaRTEListItemBlock} - List item block DTO.
+   */
+  generateListItemBlockDTO(element, options) {
+    return {
+      id: generateUUID(),
+      type: 'list-item',
+      annotations: htmlElementToAnnotationGenerator.generate(RTEListItemBlock, element, options),
+      nodes: this.generateChildNodes(Array.from(element.childNodes.length ? element.childNodes : [element]).filter((item) => {
+        return !['UL', 'OL'].includes(item.nodeName);
+      }), htmlElementToAnnotationGenerator.generate(RTETextNode, element, Object.assign(Object.assign({}, options), { skipCustomAnnotations: true })), options),
+    };
+  }
+}
+
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-code-block element to code block DTO */
+class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
+  /**
+   * Can be handle.
+   *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return (elementsArray[currentIndex].tagName === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a code block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
+   */
+  handle(elementsArray) {
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      // eslint-disable-next-line no-restricted-globals
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
+}
+
+/** Transform inline block element to text block DTO */
+class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+      'subtitle',
+    ].includes(super.matchTextBlockType(elementsArray[currentIndex]))
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray, options) {
+    const nodes = this.generateChildNodes(Array.from(elementsArray[0].childNodes), {}, options);
+    if (nodes.length === 0)
+      return null;
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: super.matchTextBlockType(elementsArray[0]),
+      nodes: nodes,
+      annotations: htmlElementToAnnotationGenerator.generate(RTETextBlock, elementsArray[0], options),
+    }, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Abstract class for block html element to RTE block dto */
+class ElementToRTEImageBlockStrategyAbstract extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Create a RTE Image block according to the img element.
+   *
+   * @param {HTMLElement} element - current element.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {RTEImageBlock} -RTE Image block.
+   */
+  createRTEImageBlock(element, options) {
+    // RTEImageBlock is also wrapped by a div, should not as internal wrapper if the parent is a div.
+    const isInternalWrapper = !(options && options.autoMatchFormat) &&
+      !!(element.parentNode && element.parentNode.nodeName !== 'DIV');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: htmlElementToAnnotationGenerator.generate(RTEImageNode, element, options),
+        },
+      ],
+      annotations: Object.assign(Object.assign({}, htmlElementToAnnotationGenerator.generate(RTEImageBlock, element.parentElement, options)), { internalWrapper: isInternalWrapper }),
+    }, options);
+  }
+}
+
+/** Transform img element to image block DTO */
+class ImgToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    return this.createRTEImageBlock(element, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform vega-rich-text-image-editor element to image block DTO */
+class VegaImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const image = element.querySelector('img');
+    if (isNonNullable(image)) {
+      return RTEImageBlock.from({
+        id: generateUUID(),
+        type: 'image',
+        nodes: [
+          {
+            id: generateUUID(),
+            type: 'image',
+            url: image.src,
+            annotations: htmlElementToAnnotationGenerator.generate(RTEImageNode, element, options),
+          },
+        ],
+        annotations: htmlElementToAnnotationGenerator.generate(RTEImageBlock, element.parentElement, options),
+      }, options);
+    }
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy extends ElementToRTEImageBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0].querySelector('img');
+    return this.createRTEImageBlock(element, options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform continue inline block elements to text block DTO */
+class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex, options) {
+    let count = 0;
+    for (let i = currentIndex; i < elementsArray.length; i++) {
+      const element = elementsArray[i];
+      if (this.isInlineCandidate(element, options)) {
+        count++;
+      }
+      else {
+        break;
+      }
+    }
+    return count;
+  }
+  /**
+   * Parse to a text block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {Nullable<RTEContentBlock>} - Text block.
+   */
+  handle(elementsArray, options) {
+    const parent = elementsArray[0].parentElement;
+    const autoMatchFormat = options && options.autoMatchFormat;
+    const nodes = this.generateChildNodes(elementsArray, autoMatchFormat
+      ? htmlElementToAnnotationGenerator.generate(RTETextNode, parent, Object.assign(Object.assign({}, options), { skipCustomAnnotations: true }))
+      : {}, options);
+    const blockType = autoMatchFormat
+      ? super.matchTextBlockType(parent)
+      : this.matchTextBlockTypeByTagName(parent);
+    const internalWrapper = !autoMatchFormat && !blockType;
+    return RTETextBlock.from(Object.assign({ id: generateUUID(), type: blockType || 'paragraph', nodes: nodes }, (internalWrapper
+      ? { annotations: { internalWrapper: internalWrapper } }
+      : {
+        annotations: htmlElementToAnnotationGenerator.generate(RTETextBlock, parent, options),
+      })), options);
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Match the block type by tag name.
+   *
+   * @param {HTMLElement} element - Target element.
+   * @returns {Nullable<VegaRTETextBlockType>} - Block type.
+   */
+  matchTextBlockTypeByTagName(element) {
+    switch (element.nodeName) {
+      case 'P':
+        return 'paragraph';
+      default:
+        return null;
+    }
+  }
+  /**
+   * Check if the element is an inline candidate to be included in the text block.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @param {VegaRTETransformOptions} [options] - Options for transformation.
+   * @returns {boolean} - Whether the element is an inline candidate.
+   */
+  isInlineCandidate(element, options) {
+    if (element.nodeType === Node.TEXT_NODE)
+      return true;
+    if (ALWAYS_INLINE_TAGS.has(element.nodeName))
+      return true;
+    if (this.isDedicatedBlockTag(element.nodeName))
+      return false;
+    if (options.autoMatchFormat === false && isInBlockTextContext(element))
+      return true;
+    return this.isInlineLeafOrWrapper(element);
+  }
+  /**
+   * Returns true when the tag has a dedicated block strategy (excludes inline annotation tags CODE and A).
+   *
+   * @param {string} nodeName - The node name to check.
+   * @returns {boolean} - Whether the tag is a dedicated block tag.
+   */
+  isDedicatedBlockTag(nodeName) {
+    return DEDICATED_STRATEGY_TAGS.has(nodeName) && !ALWAYS_INLINE_TAGS.has(nodeName);
+  }
+  /**
+   * Returns true for empty elements, text-only elements, or elements whose entire
+   * descendant tree contains no block-level elements (e.g. {@code <u><i><b>text</b></i></u>}).
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Whether the element is an inline leaf or wrapper.
+   */
+  isInlineLeafOrWrapper(element) {
+    if (element.childNodes.length === 0) {
+      // An empty element is inline only if it is a known HTML phrasing-content
+      // element (SPAN, EM, STRONG, …). Block containers (DIV, SECTION, …)
+      // and unknown/custom elements default to block separators.
+      return PHRASING_CONTENT_TAGS.has(element.nodeName);
+    }
+    if (this.isTextOnlyElement(element)) {
+      return PHRASING_CONTENT_TAGS.has(element.nodeName) || ALWAYS_INLINE_TAGS.has(element.nodeName);
+    }
+    return this.hasOnlyInlineDescendants(element);
+  }
+  /**
+   * Returns true when the element has text-node children but no element children.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Whether the element contains only text nodes.
+   */
+  isTextOnlyElement(element) {
+    const childNodes = Array.from(element.childNodes);
+    return (!childNodes.some((child) => child.nodeType === Node.ELEMENT_NODE) &&
+      childNodes.some((child) => child.nodeType === Node.TEXT_NODE));
+  }
+  /**
+   * Returns true if the element's subtree contains only inline formatting wrappers.
+   * Instead of maintaining a hard coded tag allowlist, the check derives from:
+   *  1. {@link DEDICATED_STRATEGY_TAGS} — rejects known block/media tags
+   *  2. Void-element check — elements with no child nodes (INPUT, COL, HR, …)
+   *     are replaced/embedded content, not formatting wrappers
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} True if the element has no block-level descendants.
+   */
+  hasOnlyInlineDescendants(element) {
+    for (let i = 0; i < element.children.length; i++) {
+      const child = element.children[i];
+      if (this.isDedicatedBlockTag(child.nodeName))
+        return false;
+      // An empty element is not a formatting wrapper — it is likely a void/embedded
+      // element (INPUT, HR, COL, empty SPAN) that acts as a block separator.
+      if (!child.hasChildNodes())
+        return false;
+      if (!this.hasOnlyInlineDescendants(child))
+        return false;
+    }
+    return true;
+  }
+}
+
+/**
+ * Class to handle text node elements and convert them to text node DTOs
+ */
+class ElementToTextNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Generate text node DTO object
+   *
+   * @param {string} text - text content.
+   * @param {VegaRTETextAnnotations} annotations - Current annotations.
+   * @returns {VegaRTETextNode} - Text node DTO.
+   */
+  generateTextNode(text, annotations) {
+    return {
+      id: generateUUID(),
+      type: 'text',
+      text: text,
+      annotations: annotations,
+    };
+  }
+}
+
+/**
+ * Class to handle plain text nodes and convert them to RTE text node DTOs
+ */
+class PlainTextToTextNodeStrategy extends ElementToTextNodeStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.TEXT_NODE ? 1 : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options, parentTextAnnotations) {
+    const parentAnnotations = Object.assign({}, parentTextAnnotations);
+    const disableAutoMatchFormat = !!(options && options.autoMatchFormat === false);
+    const child = elementsArray[0];
+    const parentNodeName = child.parentNode.nodeName.toLowerCase();
+    const plainText = disableAutoMatchFormat && !RTETextNode.supportsHtmlTag(parentNodeName);
+    const textNode = this.generateTextNode(String(child.textContent), disableAutoMatchFormat
+      ? cleanObject(Object.assign(Object.assign({}, (parentNodeName === 'span'
+        ? parentAnnotations
+        : {
+          // text node could be wrapped in <a> tag, so we need to keep the parent link annotation
+          link: parentAnnotations.link,
+          code: parentNodeName === 'code' ? parentAnnotations.code : undefined,
+        })), { inlineHtml: parentAnnotations.inlineHtml, plainText: plainText || undefined }))
+      : parentAnnotations);
+    return Object.assign({}, textNode);
+  }
+}
+
+/**
+ * Class to handle inline html element to text node dto
+ */
+class InlineElementToTextNodeStrategy extends ElementToTextNodeStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return isHTMLElement(element) && (element.nodeName === 'BR' || element.childNodes.length === 0)
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options, annotations) {
+    const disableAutoMatchFormat = !!(options && options.autoMatchFormat === false);
+    const parentAnnotations = Object.assign({}, annotations);
+    const child = elementsArray[0];
+    const curAnnotations = htmlElementToAnnotationGenerator.generate(RTETextNode, child, Object.assign({ parentAnnotations: disableAutoMatchFormat
+        ? {
+          inlineHtml: parentAnnotations.inlineHtml,
+          link: parentAnnotations.link,
+          code: parentAnnotations.code,
+        }
+        : annotations }, options));
+    if (child.nodeName === 'BR') {
+      return this.generateTextNode('\n', curAnnotations);
+    }
+    else if (child.childNodes.length === 0) {
+      // For empty dom, there will be no internal iteration, we need to handle it directly here.
+      // Example: <span></span>, <video src='...'></video>
+      const emptyNodeAnnotations = disableAutoMatchFormat
+        ? cleanObject(Object.assign(Object.assign({}, (RTETextNode.supportsHtmlTag(child.nodeName.toLowerCase()) ? curAnnotations : {})), { inlineHtml: curAnnotations.inlineHtml }))
+        : curAnnotations;
+      return Object.assign({}, this.generateTextNode('', emptyNodeAnnotations));
+    }
+  }
+}
+
+/**
+ * Filter styles strategy for image node, which defines the styles to be filtered and the conditions for filtering and refilling styles for image nodes.
+ */
+class ImageFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = ImageAnnotation.getDefaultStyles();
+    this.elementTagName = 'img';
+  }
+  /**
+   * Used for the filterAnnotations method.
+   *
+   * @returns {boolean} Always `true` — image defaults are emitted as inline styles.
+   */
+  get alwaysFilter() {
+    return true;
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate$1.isImageNode(blockOrNodeInstance);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(_blockOrNodeClassName, element) {
+    return element.tagName.toLowerCase() === this.elementTagName;
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+
+/**
+ * Filters the default ListAnnotation styles (paddingLeft, marginLeft) from
+ * customStyle when parsing an RTEListBlock.
+ */
+class ListBlockFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = ListAnnotation.getDefaultStyles();
+    this.elementTagName = 'ol,ul';
+  }
+  /**
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate$1.isListBlock(blockOrNodeInstance.constructor.name);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate$1.isListBlock(blockOrNodeClassName) && element.matches(this.elementTagName);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    const selector = this.elementTagName
+      .split(',')
+      .map((tag) => `.${RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${tag.trim()}`)
+      .join(', ');
+    return `${selector} { ${this.convertStylesMapToCssText(this.stylesToBeFiltered)} }`;
+  }
+}
+
+/**
+ * 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 = TextStyleAnnotation.getDefaultStyles('paragraph');
+    this.elementTagName = 'li';
+    this.headingOrTitleClassNamePattern = /^v-rte-(h[1-6]|title|subtitle)$/;
+  }
+  /**
+   * Check the important font-size for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    const styles = blockOrNodeInstance.getStyles();
+    const isDefaultStyles = !styles.fontSize ||
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']);
+    return Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) && isDefaultStyles;
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      this.isElementNotHeadingOrTitle(element));
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName);
+  }
+  /**
+   * Check the list item element does not have heading or title class names.
+   *
+   * @param {HTMLElement} element - The list item element to check.
+   * @returns {boolean} - True if the element does not have heading or title class names, false otherwise.
+   */
+  isElementNotHeadingOrTitle(element) {
+    const classNames = element.className.split(' ');
+    return !classNames.some((className) => this.headingOrTitleClassNamePattern.test(className.trim()));
+  }
+}
+
+/**
+ * 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 = HorizontalAlignmentAnnotation.getDefaultStyles(textAlign);
+    return super.filterAnnotations(annotations);
+  }
+}
+
+/**
+ * The CodeFilterStylesStrategy is responsible for filtering code styles from text nodes that are annotated as code.
+ */
+class CodeFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = CodeAnnotation.getDefaultStyles();
+    this.elementTagName = 'code';
+  }
+  /**
+   * 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);
+  }
+  /**
+   * Determines whether the dto instance is a code text node.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a code text node, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return Predicate$1.isCodeNode(blockOrNodeInstance);
+  }
+  /**
+   * Check if the node is a text node and it is a code node.
+   *
+   * @param {string} blockOrNodeClassName - The class name of the block or node instance to check.
+   * @param {HTMLElement} element - The HTML element of the node instance.
+   * @returns {boolean} True if the node is a text node it a code element.
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return Predicate$1.isTextNode(blockOrNodeClassName) && element.matches(this.elementTagName);
+  }
+  /**
+   * The code style in title and heading no need to be bold in default.
+   *
+   * @returns {string} The CSS text string for code styles.
+   */
+  toCssText() {
+    const selector = `.${RTEFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${this.elementTagName}`;
+    return `${selector} { ${this.convertStylesMapToCssText(Object.assign(Object.assign({}, this.stylesToBeFiltered), { fontWeight: '500' }))} }`;
+  }
+}
+
+/**
+ * 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 === BOLD_FONT_WEIGHT) {
+      delete customStyle.fontWeight;
+    }
+    if (textAnnotations.italic && customStyle.fontStyle === 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 !== UNDERLINE_TEXT_DECORATION && token !== 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(UNDERLINE_TEXT_DECORATION);
+    }
+    if (annotations.strikethrough) {
+      expectedTokens.push(STRIKETHROUGH_TEXT_DECORATION);
+    }
+    if (expectedTokens.length === 0) {
+      return false;
+    }
+    return normalizedTextDecoration === expectedTokens.sort().join(' ');
+  }
+}
+
+/**
+ *
+ */
+class ParagraphFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles('paragraph');
+    this.type = 'paragraph';
+    this.elementTagName = 'p';
+  }
+  /**
+   * Don't run the filterAnnotations for paragraph heading, title, subtitle, list heading item, list title item, list subtitle item.
+   * Already handle it in html-element-to-annotation-generator.ts#removeTextStyleDefaultsFromCustomStyle
+   *
+   * @inheritDoc
+   */
+  filterAnnotations(annotations) {
+    return annotations;
+  }
+  /**
+   * Determines whether the dto instance is text block and has the same type as the strategy's configured type.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a text block with the same type as the strategy, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isTextBlock(blockOrNodeInstance.constructor.name) &&
+      blockOrNodeInstance.type === this.type);
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    const selector = this.classNameToBeAdded
+      ? `.${this.classNameToBeAdded}`
+      : this.elementTagName;
+    return Predicate$1.isTextBlock(blockOrNodeClassName) && element.matches(selector);
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    return this.buildCssTextForStyles(this.elementTagName, this.classNameToBeAdded);
+  }
+}
+
+/**
+ * The HeadingFilterStylesStrategy class is responsible for filtering and refilling styles for heading text blocks (h1 to h6) in the rich text editor.
+ */
+class HeadingFilterStylesStrategy extends ParagraphFilterStylesStrategy {
+  constructor(level) {
+    super();
+    this.type = 'heading-1';
+    this.elementTagName = 'h1';
+    this.type = `heading-${level}`;
+    this.elementTagName = `h${level}`;
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles(this.type);
+  }
+}
+
+/**
+ * The TitleFilterStylesStrategy class is responsible for filtering and refilling styles for title and subtitle text blocks in the rich text editor.
+ */
+class TitleFilterStylesStrategy extends ParagraphFilterStylesStrategy {
+  constructor(titleType) {
+    super();
+    this.type = 'title';
+    this.elementTagName = 'div';
+    this.classNameToBeAdded = 'v-rte-title';
+    this.type = titleType;
+    this.classNameToBeAdded = `v-rte-${titleType}`;
+    this.stylesToBeFiltered = TextStyleAnnotation.getDefaultStyles(this.type);
+  }
+}
+
+/**
+ * The TitleHeadingNodeFilterStylesStrategy is responsible for filtering styles from text nodes that are children of title and heading blocks.
+ * In title and heading blocks, the text nodes will have a default bold style.
+ */
+class TitleHeadingNodeFilterStylesStrategy extends RTEFilterStylesStrategy {
+  constructor() {
+    super(...arguments);
+    this.stylesToBeFiltered = TitleHeadingNodeFilterStylesStrategy.BOLD_STYLES;
+    this.elementTagName = 'span';
+    this.parentBlockTypes = [
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+      'title',
+    ];
+    this.parentElementSelectors = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', '.v-rte-title'];
+    this.toBeCheckedSelector = this.parentElementSelectors.join(',');
+  }
+  /**
+   * Don't run filterAnnotations method, because already handle it in text format filter strategy.
+   *
+   * @inheritDoc
+   */
+  filterAnnotations(annotations) {
+    return annotations;
+  }
+  /**
+   * Determines whether the dto instance is text node and its parent block is a heading or title.
+   *
+   * @param {RTEBlock | RTENode} blockOrNodeInstance - The block or node instance to check.
+   * @returns {boolean} - True if the instance is a text node and its parent block is a heading or title, false otherwise.
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isTextNode(blockOrNodeInstance.constructor.name) &&
+      this.parentBlockIsHeadingOrTitle(blockOrNodeInstance));
+  }
+  /**
+   * Check if the node is a text node and its parent block is a heading or title.
+   *
+   * @param {string} blockOrNodeClassName - The class name of the block or node instance to check.
+   * @param {HTMLElement} element - The HTML element of the node instance.
+   * @returns {boolean} True if the node is a text node and its parent block is a heading or title, false otherwise.
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isTextNode(blockOrNodeClassName) &&
+      element.nodeName === 'SPAN' &&
+      this.isHeadingOrTitleChild(element));
+  }
+  /**
+   * @inheritDoc
+   */
+  toCssText() {
+    const selectors = this.parentElementSelectors.map((key) => `.${TitleHeadingNodeFilterStylesStrategy.RTE_CONTENT_CONTAINER_CLASS_NAME} ${key}`);
+    return `${selectors.join(',')} { ${this.convertStylesMapToCssText()} }`;
+  }
+  /**
+   * Checks if the parent block of the given node instance is a heading or title.
+   *
+   * @param {RTENode | RTEBlock} blockOrNodeInstance - The node instance to check.
+   * @returns {boolean} True if the parent block is a heading or title, false otherwise.
+   */
+  parentBlockIsHeadingOrTitle(blockOrNodeInstance) {
+    const parentBlock = blockOrNodeInstance.parent;
+    return parentBlock ? this.parentBlockTypes.includes(parentBlock.type) : false;
+  }
+  /**
+   * Check if the element is a descendant of a heading or title element.
+   * Traverses upward through the DOM, stopping at the block element or body element
+   * to avoid unbounded traversal to the document root.
+   *
+   * <h1><span>bold text</span></h1>
+   * <h1><a><span>link text</span></a></h1>
+   * <h1><a><b><span>nested text</span></b></a></h1>
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} True if the element is a descendant of a heading or title, false otherwise.
+   */
+  isHeadingOrTitleChild(element) {
+    let current = element.parentElement;
+    while (current) {
+      if (current.matches(this.toBeCheckedSelector))
+        return true;
+      // Stop traversing upward if we reach a block element to prevent unbounded traversal to the document root. The title children will always be wrapped in a div, so we can safely stop at div as well.
+      if (TitleHeadingNodeFilterStylesStrategy.NON_HEADING_TITLE_ELEMENT_TAGS.includes(current.tagName))
+        return false;
+      current = current.parentElement;
+    }
+    return false;
+  }
+}
+TitleHeadingNodeFilterStylesStrategy.BOLD_STYLES = {
+  fontWeight: '700',
+};
+TitleHeadingNodeFilterStylesStrategy.NON_HEADING_TITLE_ELEMENT_TAGS = [
+  'TD',
+  'TH',
+  'TR',
+  'TABLE',
+  'THEAD',
+  'TBODY',
+  'DIV',
+  'BODY',
+];
+
+/**
+ * Filters the default heading styles from customStyle when parsing an RTEListItemBlock that is supposed to be a heading.
+ */
+class ListHeadingItemBlockFilterStylesStrategy extends HeadingFilterStylesStrategy {
+  constructor(level) {
+    super(level);
+    this.classNameToBeAdded = `v-rte-h${level}`;
+    this.elementTagName = 'li';
+  }
+  /**
+   * Check the important font-size and line-height for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}
+
+/**
+ * Filters the default title/subtitle styles from customStyle when parsing an RTEListItemBlock that is supposed to be a title/subtitle.
+ */
+class ListTitleItemBlockFilterStylesStrategy extends TitleFilterStylesStrategy {
+  constructor(type) {
+    super(type);
+    this.classNameToBeAdded = `v-rte-${type}`;
+    this.elementTagName = 'li';
+  }
+  /**
+   * Check the important font-size and line-height for list item block are default styles, and the block is a list item block.
+   *
+   * @inheritDoc
+   */
+  canFilter(blockOrNodeInstance) {
+    return (Predicate$1.isListItemBlock(blockOrNodeInstance.constructor.name) &&
+      this.isBlockOrNodeStylesMatchFilterStyles(blockOrNodeInstance, ['fontSize', 'lineHeight']));
+  }
+  /**
+   * @inheritDoc
+   */
+  canRefill(blockOrNodeClassName, element) {
+    return (Predicate$1.isListItemBlock(blockOrNodeClassName) &&
+      element.matches(this.elementTagName) &&
+      element.classList.contains(this.classNameToBeAdded));
+  }
+}
+
+/**
+ * Register and setup the default DTO classes and their basic action strategies.
+ */
+// Register the default block DTOs
+RTEDTOClassManager.registerRTEDTOClass('paragraph', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('title', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('subtitle', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-1', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-2', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-3', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-4', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-5', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('heading-6', RTETextBlock);
+RTEDTOClassManager.registerRTEDTOClass('list-item', RTEListItemBlock);
+RTEDTOClassManager.registerRTEDTOClass('bullet-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('number-list', RTEListBlock);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageBlock);
+RTEDTOClassManager.registerRTEDTOClass('code-block', RTECodeBlock);
+RTEDTOClassManager.registerRTEDTOClass('html-block', RTEHtmlBlock);
+// Register the default node DTOs
+RTEDTOClassManager.registerRTEDTOClass('text', RTETextNode);
+RTEDTOClassManager.registerRTEDTOClass('image', RTEImageNode);
+// Register basic strategies for default block DTOs
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTETextBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEListBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEListItemBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEImageBlock.name);
+RTEDTOActionStrategyManager$1.registerBlockBasicStrategies(RTEHtmlBlock.name);
+// Register element to DTO strategies for default node DTOs, The order of registration matters, the later registered strategy has higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ContinueInlineToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new SpanImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaImageToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ImgToRTEImageBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new InlineBlockToRTETextBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new LiToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new ULNotLiChildToRTEListItemBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new OlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new UlToRTEListBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new HtmlBlockStrategy());
+//!important: Code block strategies must be registered after HtmlBlockStrategy because registerElementToBlockStrategy uses unshift, giving later registrations higher priority.
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new JiraCodeToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToBlockStrategy(new VegaCodeBlockToRTECodeBlockStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new InlineElementToTextNodeStrategy());
+ElementToDTOClassStrategyManager.registerElementToNodeStrategy(new PlainTextToTextNodeStrategy());
+// Register filter styles strategies (remove redundant default styles during HTML → DTO conversion)
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new AlignmentFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TextFormatFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new ParagraphFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new HeadingFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTETextBlock.name, new TitleFilterStylesStrategy('subtitle'));
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new TitleHeadingNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new CodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTETextNode.name, new LinkFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEImageNode.name, new ImageFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlock.name, new CodeBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTECodeBlockNode.name, new CodeBlockNodeFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListBlock.name, new ListBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListItemBlockFilterStylesStrategy());
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(1));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(2));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(3));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(4));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(5));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListHeadingItemBlockFilterStylesStrategy(6));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('title'));
+RTEFilterStylesStrategyRegistry.register(RTEListItemBlock.name, new ListTitleItemBlockFilterStylesStrategy('subtitle'));
+
+/**
+ * StylePreservator handles CSP-compliant style management by temporarily converting
+ * inline styles to data attributes during HTML parsing operations.
+ *
+ * @example
+ * ```typescript
+ * const context = StylePreservator.preserve('<div style="color: red;">Content</div>');
+ * const safeHtml = context.getProcessedHtml();
+ * context.restore(parsedElements);
+ * ```
+ */
+class StylePreservator {
+  /**
+   * Preserves inline styles by converting them to data attributes.
+   *
+   * @param {string} htmlString - The HTML string containing inline styles
+   * @returns {StylePreservationContext} A context object for later style restoration
+   */
+  static preserve(htmlString) {
+    const processedHtml = htmlString.replace(/\s+style=/g, ' data-style=');
+    return new StylePreservationContext(processedHtml);
+  }
+}
+/**
+ * Context class that manages the lifecycle of preserved styles.
+ */
+class StylePreservationContext {
+  constructor(processedHtml) {
+    this.processedHtml = processedHtml;
+  }
+  /**
+   * Returns the HTML string with style attributes converted to data-style.
+   *
+   * @returns {string} The processed HTML string
+   */
+  getProcessedHtml() {
+    return this.processedHtml;
+  }
+  /**
+   * Restores data-style attributes back to style attributes.
+   *
+   * @param {HTMLElement[]} elements - Array of HTML elements to process
+   * @returns {void}
+   */
+  restore(elements) {
+    this.walkNodes(elements);
+  }
+  /**
+   * Recursively walk through nodes and restore styles
+   *
+   * @param {HTMLElement[]} elements - list of nodes
+   * @returns {void}
+   */
+  walkNodes(elements) {
+    elements.forEach((element) => {
+      if (isHTMLElement(element)) {
+        // Restore data-style back to style
+        const dataStyle = element.getAttribute('data-style');
+        if (dataStyle) {
+          element.style.cssText = dataStyle;
+          element.removeAttribute('data-style');
+        }
+        // Recursively process child nodes
+        if (element.children.length > 0) {
+          this.walkNodes(Array.from(element.children));
+        }
+      }
+    });
+  }
+}
+
+/**
+ * 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 = 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: generateUUID(),
+        type: 'paragraph',
+        annotations: {
+          internalWrapper: !options.autoMatchFormat,
+        },
+        nodes: [
+          {
+            id: 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(isNonNullable)
+      .map((output) => output.toDto(options))
+      .filter(isNonNullable);
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Generates the content style file for the rich text editor based on the registered filter styles strategies.
+   *
+   * @param {VegaRTEGenerateStyleOptions} options - Options for generating the content style file.
+   * @returns {string} The html template style text.
+   */
+  static generateContentStyles(options) {
+    return RTEFilterStylesStrategyRegistry.generateAllStylesContent(options === null || options === void 0 ? void 0 : options.enableFontImports);
+  }
+  /**
+   * 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.
+   *
+   * @param {VegaRTETransformOptions} [options] - The conversion options.
+   * @returns {string} The HTML representation of the content state.
+   */
+  toHtml(options) {
+    if (options &&
+      (isNonNullable(options.autoMatchFormat) || isNonNullable(options.skipCustomAnnotations))) {
+      LogUtility.warn(`The 'options' parameter's properties 'autoMatchFormat' and 'skipCustomAnnotations' in toHtml method are deprecated and will be removed in the future.`);
+    }
+    if (this.isEmpty()) {
+      return '';
+    }
+    return this.children
+      .map((block) => block.toHtml({ filterInlineStyles: options === null || options === void 0 ? void 0 : options.filterInlineStyles }))
+      .join('');
+  }
+  /**
+   * Checks if the content state is empty.
+   *
+   * @returns {boolean} True if the content state is empty, false otherwise.
+   */
+  isEmpty() {
+    if (this.children.length === 0) {
+      return true;
+    }
+    if (this.children.length === 1) {
+      const block = this.children[0];
+      return !block.isNotEmpty();
+    }
+    return false;
+  }
+  /**
+   * Internal method to add the block item, remove the block item
+   *
+   * @param {ModifyContentAction} action - Modify content action
+   */
+  apply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    // Check if the action has been executed and is flushable
+    if (action['executedFlag'] && action.isFlushable) {
+      const host = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (host) {
+        ChangeManager.notify(domNodeSubjectFactory.getSubject(host, VegaInternalRichTextEditorFlushChanges), {});
+      }
+    }
+  }
+  /**
+   * Get the last node in the content.
+   *
+   * @returns {Nullable<RTENode>} The last node in the content or null if there are no nodes.
+   */
+  getLastNode() {
+    if (this.children.length === 0) {
+      return null;
+    }
+    const lastBlock = this.children[this.children.length - 1];
+    return lastBlock.getLastNode();
+  }
+  /**
+   * Convert text to list.
+   *
+   * @param {RTETextBlock} block - block
+   * @returns {RTEListItemBlock} list item block dto.
+   */
+  toListItem(block) {
+    block.children.map((node) => node.apply(new SyncUpSelectionAction()));
+    const listItemBlock = new RTEListItemBlock(generateUUID());
+    listItemBlock.apply(new AppendChildrenAction(block['children']));
+    listItemBlock['annotationMap'] = block['annotationMap'];
+    return listItemBlock;
+  }
+  /**
+   * create list.
+   *
+   * @param {ListType} type - type
+   * @returns {RTEListBlock} list block dto.
+   */
+  createList(type) {
+    return new RTEListBlock(generateUUID(), type);
+  }
+  /**
+   * Finds a node by its ID in the content.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeById(id) {
+    return this.findNodeInBlocksById(id, this.children);
+  }
+  /**
+   * Recursively searches for a node by its ID in the given blocks.
+   *
+   * @param {string} id - The ID of the node to find.
+   * @param {RTEContentBlock[]} blocks - The blocks to search within.
+   * @returns {Nullable<RTENode>} The found node or null if not found.
+   */
+  findNodeInBlocksById(id, blocks) {
+    for (const block of blocks) {
+      if ('children' in block) {
+        for (const node of block.children) {
+          if (node.id === id) {
+            return node;
+          }
+        }
+      }
+      if (block instanceof RTEListItemBlock && block.nestList) {
+        for (const cBlock of block.nestList) {
+          const foundNode = this.findNodeInBlocksById(id, cBlock.children);
+          if (foundNode) {
+            return foundNode;
+          }
+        }
+      }
+      if (block instanceof RTEListBlock && block.children) {
+        const foundNode = this.findNodeInBlocksById(id, block.children);
+        if (foundNode) {
+          return foundNode;
+        }
+      }
+    }
+    return null;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, VegaRTEContent.name, new RemoveChildrenStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILDREN, VegaRTEContent.name, new AppendChildrenStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, VegaRTEContent.name, new InsertChildrenBeforeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_AFTER, VegaRTEContent.name, new InsertChildrenAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, VegaRTEContent.name, new BlockTransformToCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CURSOR_POSITION, VegaRTEContent.name, new UpdateCursorPositionStrategy());
+})();
+
+export { AnnotationGeneratorStrategyAbstract as A, BlockToRTEBlockStrategyAbstract as B, ElementToDTOClassStrategyManager as E, InsertNewParagraphAction as I, MergeTwoBlocksNodesAction as M, PasteContentStrategy as P, RTEDTOActionStrategyManager$1 as R, StylePreservator as S, UpdateCursorPositionAction as U, VegaRTEContent as V, ElementToDTOStrategy as a, RTEImageBlock as b, InsertChildrenBeforeStrategy as c, RTEListItemBlock as d, RTEListBlock as e, RTEImageNode as f, ImageAnnotation as g, htmlElementToAnnotationGenerator as h, ElementToDtoStrategyProcessor$1 as i };