@heartlandone/vega 2.78.0 → 2.80.0

package/dist/esm/code-block-7d6f231b.js

@@ -0,0 +1,4455 @@
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-cea9248d.js';
+import { d as VegaInternalRichTextEditorFlushChanges, e as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-70bd893d.js';
+import { c as camelToDashCase } from './string-a953eafc.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { i as isNonNullable } from './type-guard-23a08026.js';
+import { g as generateUUID } from './misc-9fdbcfbb.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
+import { c as cleanObject } from './object-0c277f57.js';
+import { f as findParent } from './ui-ba5a4758.js';
+
+var InternalAnnotationTypeEnum;
+(function (InternalAnnotationTypeEnum) {
+  InternalAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  InternalAnnotationTypeEnum["CLEAR_FORMATTING"] = "CLEAR_FORMATTING";
+  InternalAnnotationTypeEnum["LINK_GROUP"] = "LINK_GROUP";
+})(InternalAnnotationTypeEnum || (InternalAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class Annotation {
+}
+
+var BlockAnnotationTypeEnum;
+(function (BlockAnnotationTypeEnum) {
+  BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
+  BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
+  BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
+  BlockAnnotationTypeEnum["INTERNAL_WRAPPER"] = "INTERNAL_WRAPPER";
+})(BlockAnnotationTypeEnum || (BlockAnnotationTypeEnum = {}));
+/**
+ * BlockAnnotation is an abstract class that represents a block annotation.
+ */
+class BlockAnnotation extends Annotation {
+}
+
+/**
+ * This class is responsible for keeping track of the DOM elements and their corresponding entities.
+ */
+class StateEntityRenderingRegistry {
+  constructor() {
+    this.domToEntity = new WeakMap();
+    this.entityToDOM = new WeakMap();
+    this.contentEntityToRootDom = new Map();
+    this.rootDomToContentEntity = new WeakMap();
+  }
+  /**
+   * Registers a DOM element and its corresponding entity.
+   *
+   * @param {HTMLElement} dom The DOM element to register.
+   * @param {RTEBlock | RTENode | VegaRTEContent} entity The entity to register.
+   */
+  register(dom, entity) {
+    if (!this.isVegaRTEContent(entity)) {
+      this.domToEntity.set(dom, entity);
+      this.entityToDOM.set(entity, dom);
+    }
+    else {
+      this.registerRootDomAndContentEntity(dom, entity);
+    }
+  }
+  /**
+   * Retrieves the entity corresponding to a DOM element.
+   *
+   * @param {HTMLElement} dom The DOM element to retrieve the entity for.
+   * @returns {Nullable<RTEBlock | RTENode>} The entity corresponding to the DOM element, or null if not found.
+   */
+  getEntityByDOM(dom) {
+    return this.domToEntity.get(dom);
+  }
+  /**
+   * Retrieves the DOM element corresponding to an entity.
+   *
+   * @param {RTEBlock | RTENode} entity The entity to retrieve the DOM element for.
+   * @returns {Nullable<HTMLElement>} The DOM element corresponding to the entity, or null if not found.
+   */
+  getDOMByEntity(entity) {
+    if (!this.isVegaRTEContent(entity)) {
+      return this.entityToDOM.get(entity);
+    }
+    else {
+      return this.contentEntityToRootDom.get(entity);
+    }
+  }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
+  /**
+   * Bind the root dom ref and content entity.
+   *
+   * @param {HTMLElement} dom - The vega rich text editor ref.
+   * @param {VegaRTEContent} contentEntity - The rich text editor value content.
+   */
+  registerRootDomAndContentEntity(dom, contentEntity) {
+    const oldContent = this.rootDomToContentEntity.get(dom);
+    if (oldContent && oldContent !== contentEntity) {
+      this.contentEntityToRootDom.delete(oldContent);
+    }
+    this.rootDomToContentEntity.set(dom, contentEntity);
+    this.contentEntityToRootDom.set(contentEntity, dom);
+  }
+  /**
+   * Check the entity is VegaRTEContent instance.
+   *
+   * @param {VegaRTEContent | RTEBlock | RTENode} entity - The entity to check.
+   * @returns {entity is VegaRTEContent} - True if the entity is a VegaRTEContent instance, false otherwise.
+   */
+  isVegaRTEContent(entity) {
+    return entity && entity.constructor.name === 'VegaRTEContent';
+  }
+}
+const stateEntityRenderingRegistry = new StateEntityRenderingRegistry();
+
+var ModifyContentActionType;
+(function (ModifyContentActionType) {
+  ModifyContentActionType["DELETE_CHILDREN"] = "DELETE_CHILDREN";
+  ModifyContentActionType["DELETE_NEST_LIST"] = "DELETE_NEST_LIST";
+  ModifyContentActionType["UPDATE_TEXT"] = "UPDATE_TEXT";
+  ModifyContentActionType["REPLACE_SELECTED_TEXT"] = "REPLACE_SELECTED_TEXT";
+  ModifyContentActionType["APPEND_CHILDREN"] = "APPEND_CHILDREN";
+  ModifyContentActionType["INSERT_CHILDREN_AFTER"] = "INSERT_CHILDREN_AFTER";
+  ModifyContentActionType["INSERT_CHILDREN_BEFORE"] = "INSERT_CHILDREN_BEFORE";
+  ModifyContentActionType["SPLIT_BLOCK_WITH_NODE"] = "SPLIT_BLOCK_WITH_NODE";
+  ModifyContentActionType["REPLACE_CHILD_NODES"] = "REPLACE_CHILD_NODES";
+  ModifyContentActionType["REPLACE_NEST_LIST"] = "REPLACE_NEST_LIST";
+  ModifyContentActionType["MERGE_TWO_BLOCKS_NODES"] = "MERGE_TWO_BLOCKS_NODES";
+  ModifyContentActionType["INSERT_NEW_PARAGRAPH"] = "INSERT_NEW_PARAGRAPH";
+  ModifyContentActionType["LINE_BREAK_SINGLE_BLOCK"] = "LINE_BREAK_SINGLE_BLOCK";
+  ModifyContentActionType["LINE_BREAK_MULTIPLE_BLOCKS"] = "LINE_BREAK_MULTIPLE_BLOCKS";
+  ModifyContentActionType["TRANSFORM_LIST_BLOCK"] = "TRANSFORM_LIST_BLOCK";
+  ModifyContentActionType["TRANSFORM_PARAGRAPH_BLOCK"] = "TRANSFORM_PARAGRAPH_BLOCK";
+  ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
+  ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
+  ModifyContentActionType["UPDATE_IMAGE_NODE_URL"] = "UPDATE_IMAGE_NODE_URL";
+  ModifyContentActionType["TRANSFORM_TO_CODE_BLOCK"] = "TRANSFORM_TO_CODE_BLOCK";
+  ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
+  ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
+  ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
+  ModifyContentActionType["UNLINK_LINK_GROUP"] = "UNLINK_LINK_GROUP";
+  ModifyContentActionType["LINK_GROUP_NODE_SPLIT"] = "LINK_GROUP_NODE_SPLIT";
+  ModifyContentActionType["DELETE_LINK_GROUP"] = "DELETE_LINK_GROUP";
+  ModifyContentActionType["UPDATE_CURSOR_POSITION"] = "UPDATE_CURSOR_POSITION";
+  ModifyContentActionType["INSERT_TEXT_TO_DECORATOR_NODE"] = "INSERT_TEXT_TO_DECORATOR_NODE";
+  ModifyContentActionType["INSERT_NODE_TO_NEAREST_ROOT"] = "INSERT_NODE_TO_NEAREST_ROOT";
+  ModifyContentActionType["PASTE_CONTENT"] = "PASTE_CONTENT";
+})(ModifyContentActionType || (ModifyContentActionType = {}));
+/**
+ * Abstract class for update node content, delete node, insert node
+ */
+class ModifyContentAction {
+  constructor() {
+    this.isFlushable = false;
+  }
+}
+
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+  /**
+   * Get the default standalone styles applied to a link by Vega's internal style.
+   * These are redundant when parsed back from standalone HTML and should be stripped.
+   *
+   * @returns {AnnotationStyle} The default styles.
+   */
+  static getDefaultStyles() {
+    return {
+      color: 'rgba(var(--v-text-link, 19, 98, 226, 1))',
+    };
+  }
+  clone() {
+    const clonedAnnotation = new LinkGroupAnnotation('');
+    this.linkGroups.forEach((nodes, key) => {
+      clonedAnnotation.linkGroups.set(key, nodes.map((node) => node.clone(node.parent)));
+    });
+    return clonedAnnotation;
+  }
+  /**
+   * Convert the custom style, class and attribute to string which html can used
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {string} - string.
+   */
+  toString(linkAnnotation, options) {
+    const attributes = this.toJsx(linkAnnotation, options);
+    return Object.entries(attributes)
+      .map(([key, value]) => {
+      const valueString = typeof value === 'string' ? value : this.formatStyleToString(value);
+      return `${camelToDashCase(key)}="${valueString}"`;
+    })
+      .join(' ');
+  }
+  /**
+   * Convert the custom style, class and attribute to JSX attributes
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {Record<string, string | AnnotationStyle>} JSX used attributes.
+   */
+  toJsx(linkAnnotation, options) {
+    const linkStyle = this.getStyle(linkAnnotation, options);
+    const linkClass = this.getClass(linkAnnotation, options);
+    const attributes = this.getAttribute(linkAnnotation);
+    if (linkClass.length > 0) {
+      attributes.class = linkClass.join(' ');
+    }
+    if (linkStyle && Object.keys(linkStyle).length > 0) {
+      attributes.style = linkStyle;
+    }
+    return attributes;
+  }
+  /**
+   * Get the custom class for the annotation
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {string[]} Link class
+   */
+  getClass(linkAnnotation, options) {
+    const linkClass = [];
+    if (linkAnnotation.link.customClass)
+      linkClass.push(...linkAnnotation.link.customClass);
+    if (!(options === null || options === void 0 ? void 0 : options.standalone) && linkAnnotation.useInternalStyle)
+      linkClass.push('v-rte--link');
+    return linkClass;
+  }
+  /**
+   * Get the custom style for the annotation
+   *
+   * @param {LinkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {AnnotationStyle} Link style
+   */
+  getStyle(linkAnnotation, options) {
+    const linkStyle = {};
+    if (linkAnnotation.link.customStyle)
+      Object.assign(linkStyle, linkAnnotation.link.customStyle);
+    if ((options === null || options === void 0 ? void 0 : options.standalone) && linkAnnotation.useInternalStyle) {
+      Object.assign(linkStyle, LinkGroupAnnotation.getDefaultStyles());
+    }
+    return linkStyle;
+  }
+  /**
+   * Get the custom attribute for the annotation
+   *
+   * @param {LinkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @returns {Record<string, string>} Link attributes
+   */
+  getAttribute(linkAnnotation) {
+    const { href, customAttribute = {} } = linkAnnotation.link;
+    const useInternalStyle = linkAnnotation.useInternalStyle;
+    const target = customAttribute.target || (useInternalStyle ? '_blank' : '');
+    return Object.assign(Object.assign(Object.assign({}, customAttribute), (href ? { href } : useInternalStyle ? { href } : {})), (target ? { target } : {}));
+  }
+  /**
+   * Convert style to string which can be used to html string.
+   *
+   * @param {AnnotationStyle} style Style object.
+   * @returns {string} Style string
+   */
+  formatStyleToString(style) {
+    return Object.entries(style)
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join(' ');
+  }
+}
+
+/**
+ * Annotation to make block with horizontal alignment
+ */
+class HorizontalAlignmentAnnotation extends BlockAnnotation {
+  constructor(textAlign) {
+    super();
+    this.type = BlockAnnotationTypeEnum.ALIGNMENT;
+    this.textAlign = textAlign;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTEBlockAlignment} textAlign - Text alignment
+   * @returns {[BlockAnnotationTypeEnum.ALIGNMENT, HorizontalAlignmentAnnotation]} Map item for the annotation
+   */
+  static from(textAlign) {
+    return [BlockAnnotationTypeEnum.ALIGNMENT, new HorizontalAlignmentAnnotation(textAlign)];
+  }
+  /**
+   * Get the default standalone styles for a given alignment value.
+   *
+   * @param {VegaRTEBlockAlignment} textAlign - The alignment value.
+   * @returns {AnnotationStyle} The default standalone styles.
+   */
+  static getDefaultStyles(textAlign) {
+    switch (textAlign) {
+      case 'right':
+      case 'center':
+      case 'justify':
+        return { textAlign };
+      case 'left':
+      default:
+        return { textAlign: 'left' };
+    }
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textAlign: this.textAlign,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    switch (this.textAlign) {
+      case 'right':
+      case 'center':
+      case 'justify':
+        return `v-rte--horizontal-alignment-${this.textAlign}`;
+      case 'left':
+      default:
+        return `v-rte--horizontal-alignment-left`;
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new HorizontalAlignmentAnnotation(this.textAlign);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return HorizontalAlignmentAnnotation.getDefaultStyles(this.textAlign);
+  }
+}
+
+/**
+ * Annotation for block indentation
+ */
+class IndentAnnotation extends BlockAnnotation {
+  constructor(indent) {
+    super();
+    this.type = BlockAnnotationTypeEnum.INDENT;
+    this.indent = Math.max(0, indent);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {number} indent - Text alignment
+   * @returns {[BlockAnnotationTypeEnum.INDENT, IndentAnnotation]} Map item for the annotation
+   */
+  static from(indent) {
+    return [BlockAnnotationTypeEnum.INDENT, new IndentAnnotation(indent)];
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return this.indent > 0 ? { indent: this.indent } : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new IndentAnnotation(this.indent);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  renderStyle() {
+    return this.indent > 0 ? { marginLeft: `${this.indent * 16}px` } : null;
+  }
+}
+
+/**
+ * Registry for action handler interceptors, which can register and retrieve interceptors for specific actions and targets.
+ */
+class ActionHandlerInterceptorRegistry {
+  /**
+   * Bind a specific strategy to a special action type of the rich text node.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandlerInterceptor} strategy - The action handle strategy instance.
+   */
+  static register(actionType, targetClass, strategy) {
+    if (!this.registry.has(targetClass)) {
+      this.registry.set(targetClass, new Map());
+    }
+    /* eslint-disable @typescript-eslint/no-non-null-assertion */
+    if (!this.registry.get(targetClass).has(actionType)) {
+      this.registry.get(targetClass).set(actionType, new Set());
+    }
+    this.registry.get(targetClass).get(actionType).add(strategy);
+    /* eslint-enable @typescript-eslint/no-non-null-assertion */
+  }
+  /**
+   * Unregister the strategy for the specific action type and target class.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandlerInterceptor} strategy - The action handler interceptor instance.
+   */
+  static unregister(actionType, targetClass, strategy) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      const strategySet = strategyMap.get(actionType);
+      if (strategySet) {
+        strategySet.delete(strategy);
+      }
+    }
+  }
+  /**
+   * Get the special interceptor strategy that before handle the action logic.
+   *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @param {RTEActionType} action - The special action .
+   * @param {string} targetClass - The rich text node class name.
+   * @returns {Nullable<ActionHandlerInterceptor<T, target>>} - The action handler interceptor instance or null if not found.
+   */
+  static get(action, targetClass) {
+    const targetClassName = targetClass.constructor.name;
+    const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
+    const strategyMap = this.registry.get(targetClassName);
+    if (strategyMap) {
+      const set = strategyMap.get(actionType);
+      if (set && set.size > 0) {
+        return Array.from(set).find((interceptor) => interceptor.canIntercept(action, targetClass));
+      }
+    }
+  }
+}
+ActionHandlerInterceptorRegistry.registry = new Map();
+
+/**
+ * The strategies registry, contains static methods `register`, `get` and `getStrategyAndExecute`.
+ */
+class ActionHandleStrategyRegistry {
+  /**
+   * Bind a specific strategy to a special action type of the rich text node.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandleStrategy} strategy - The action handle strategy instance.
+   */
+  static register(actionType, targetClass, strategy) {
+    if (!this.registry.has(targetClass)) {
+      this.registry.set(targetClass, new Map());
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.registry.get(targetClass).set(actionType, strategy);
+  }
+  /**
+   * Unregister the strategy for the specific action type and target class.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   */
+  static unregister(actionType, targetClass) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      strategyMap.delete(actionType);
+    }
+  }
+  /**
+   * Get the special strategy that handle the action logic.
+   *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @typedef R generic type
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @returns {Nullable<ActionHandleStrategy<T, target, R>>} - The action handle strategy instance if defined.
+   */
+  static get(actionType, targetClass) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      return strategyMap.get(actionType);
+    }
+  }
+  /**
+   * Get the special strategy from the registry and run the strategy execute method.
+   *
+   * @typedef R generic type
+   * @param {ModifyContentAction | AnnotationAction} action - The update node action instance.
+   * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
+   * @returns {R | undefined} The return value of the strategy method execute invoke result.
+   */
+  static executeTheStrategy(action, RTEInstance) {
+    const interceptor = ActionHandlerInterceptorRegistry.get(action, RTEInstance);
+    // eslint-disable-next-line jsdoc/require-jsdoc
+    const executeStrategy = () => {
+      const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
+      const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+      if (strategy) {
+        action['executedFlag'] = true;
+        return strategy.execute(action, RTEInstance);
+      }
+      else {
+        LogUtility.warn(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
+      }
+    };
+    if (interceptor) {
+      return interceptor.intercept(executeStrategy, action, RTEInstance);
+    }
+    else {
+      return executeStrategy();
+    }
+  }
+  /**
+   * Check if the action type can be handled by strategy for the specific RTE instance.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
+   * @returns {boolean} - Whether the action type can be handled by the strategy.
+   */
+  static canHandle(actionType, RTEInstance) {
+    const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+    return strategy ? true : false;
+  }
+}
+ActionHandleStrategyRegistry.registry = new Map();
+
+var CommonAnnotationTypeEnum;
+(function (CommonAnnotationTypeEnum) {
+  CommonAnnotationTypeEnum["CUSTOM_ATTRIBUTE"] = "CUSTOM_ATTRIBUTE";
+  CommonAnnotationTypeEnum["CUSTOM_CLASS"] = "CUSTOM_CLASS";
+  CommonAnnotationTypeEnum["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+})(CommonAnnotationTypeEnum || (CommonAnnotationTypeEnum = {}));
+/**
+ * CommonAnnotation is an abstract class that represents common annotation for block and node.
+ */
+class CommonAnnotation extends Annotation {
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomAttributeAnnotation extends CommonAnnotation {
+  constructor(customAttribute) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE;
+    this.BOOLEAN_ATTRS = new Set([
+      'controls',
+      'disabled',
+      'checked',
+      'readonly',
+      'multiple',
+      'required',
+      'autoplay',
+      'muted',
+    ]);
+    this.customAttribute = customAttribute;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Record<string, string>} customizeAttribute - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, CustomAttributeAnnotation]} Map item for the annotation
+   */
+  static from(customizeAttribute) {
+    return [CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, new CustomAttributeAnnotation(customizeAttribute)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customAttribute: this.customAttribute,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomAttributeAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomAttributeAnnotation(this.customAttribute);
+  }
+  /**
+   * Generate the custom attribute of current element, excluding 'style' and 'class'
+   *
+   * @param {string[]} filterAttr - should filter these existed attrs
+   * @returns {string[]} - Custom attributes
+   */
+  toString(filterAttr = []) {
+    const filterAttrKeys = filterAttr.map((attr) => attr.split('=')[0]);
+    return Object.keys(this.customAttribute)
+      .map((key) => {
+      return !filterAttrKeys.includes(key) ? `${key}="${this.customAttribute[key]}"` : null;
+    })
+      .filter(isNonNullable);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @param {RTERenderCustomAttributes} options - should filter these certain attrs
+   * @returns {Record<string, string>} custom attribute
+   */
+  render(options = {}) {
+    var _a;
+    const customAttribute = Object.assign({}, this.customAttribute);
+    (_a = options.filterAttributes) === null || _a === void 0 ? void 0 : _a.forEach((attr) => delete customAttribute[attr]);
+    Object.keys(customAttribute).forEach((key) => {
+      if (this.BOOLEAN_ATTRS.has(key) && customAttribute[key] === '') {
+        customAttribute[key] = 'true';
+      }
+    });
+    return customAttribute;
+  }
+}
+
+/**
+ * Annotation to add custom class of element
+ */
+class CustomClassAnnotation extends CommonAnnotation {
+  constructor(customClass) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_CLASS;
+    this.customClass = customClass;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string[]} customClass - custom class annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_CLASS, CustomClassAnnotation]} Map item for the annotation
+   */
+  static from(customClass) {
+    return [CommonAnnotationTypeEnum.CUSTOM_CLASS, new CustomClassAnnotation(customClass)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customClass: this.customClass,
+    };
+  }
+  /**
+   * Create a new custom class annotation
+   *
+   * @returns {CustomClassAnnotation} - Custom class annotation
+   */
+  clone() {
+    return new CustomClassAnnotation(this.customClass);
+  }
+  /**
+   * Generate the custom class of current element
+   *
+   * @returns {string} - Custom class
+   */
+  toString() {
+    return `class="${this.customClass.join(' ')}"`;
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {string[]} custom classes
+   */
+  renderClass() {
+    return this.customClass;
+  }
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomStyleAnnotation extends CommonAnnotation {
+  constructor(customStyle) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_STYLE;
+    this.customStyle = customStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {AnnotationStyle} customStyle - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_STYLE, CustomStyleAnnotation]} Map item for the annotation
+   */
+  static from(customStyle) {
+    return [CommonAnnotationTypeEnum.CUSTOM_STYLE, new CustomStyleAnnotation(customStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customStyle: this.customStyle,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomStyleAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomStyleAnnotation(this.customStyle);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {AnnotationStyle} custom attribute
+   */
+  renderStyle() {
+    return this.customStyle;
+  }
+  /**
+   * Remove the style
+   *
+   * @param {string[]} styleKeys - custom attribute annotation
+   * @returns {AnnotationStyle} Map item for the annotation
+   */
+  removeStyles(styleKeys) {
+    const customStyle = Object.assign({}, this.customStyle);
+    styleKeys.forEach((item) => delete customStyle[item]);
+    return customStyle;
+  }
+  /**
+   * Generate the custom style string for the annotation
+   *
+   * @returns {string} custom style string
+   */
+  toString() {
+    return `style="${Object.entries(this.customStyle)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(' ')}"`;
+  }
+}
+
+/**
+ * Internal wrapper annotation for block node.
+ */
+class InternalWrapperAnnotation extends BlockAnnotation {
+  constructor(internalWrapper) {
+    super();
+    this.type = BlockAnnotationTypeEnum.INTERNAL_WRAPPER;
+    this.internalWrapper = internalWrapper;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(internalWrapper) {
+    return [BlockAnnotationTypeEnum.INTERNAL_WRAPPER, new InternalWrapperAnnotation(internalWrapper)];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new InternalWrapperAnnotation(this.internalWrapper);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return this.internalWrapper ? { internalWrapper: this.internalWrapper } : undefined;
+  }
+}
+
+var NodeAnnotationTypeEnum;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+  NodeAnnotationTypeEnum["INLINE_HTML"] = "INLINE_HTML";
+  NodeAnnotationTypeEnum["PLAIN_TEXT"] = "PLAIN_TEXT";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+/**
+ * Class to handle the style representation of annotations for RTE blocks and nodes.
+ */
+class RTEAnnotationStyle {
+  constructor(dto) {
+    this.dtoType = dto instanceof RTEBlock ? 'block' : 'node';
+    this.annotationMap = dto.annotationMap;
+  }
+  /**
+   * Convert an AnnotationStyle object to a CSS text string.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @param {Nullable<AnnotationStyle>} annotationStyle - The annotation style object, if null, get from toJSON().
+   * @returns {string} A string representing the CSS text.
+   */
+  toCssText(options = { standalone: false }, canMergeKeyList, annotationStyle) {
+    annotationStyle = annotationStyle ? annotationStyle : this.toJSON(options, canMergeKeyList);
+    return Object.entries(Object.assign({}, annotationStyle))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+  }
+  /**
+   * Convert the annotation map to a JSON representation.
+   *
+   * @param {RTERenderContext} options - Rendering context options.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The JSON representation of the annotation styles.
+   */
+  toJSON(options = { standalone: false }, canMergeKeyList) {
+    const styles = Array.from(this.annotationMap.values())
+      .filter((annotation) => this.filterAnnotation(annotation) || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(isNonNullable);
+    if (canMergeKeyList && canMergeKeyList.length > 0) {
+      return this.mergeAnnotationStyles(styles, canMergeKeyList);
+    }
+    else {
+      return styles.reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+    }
+  }
+  /**
+   * Filter annotations based on whether they are block or node annotations.
+   *
+   * @param {RTENodeAnnotationMapValue | RTEBlockAnnotationMapValue} annotation - The annotation to filter.
+   * @returns {boolean} - True if the annotation matches the DTO type, false otherwise.
+   */
+  filterAnnotation(annotation) {
+    return this.dtoType === 'block'
+      ? annotation instanceof BlockAnnotation
+      : annotation instanceof NodeAnnotation;
+  }
+  /**
+   * Merge an array of annotation styles into a single style object.
+   * e.g.,
+   * { textDecoration: 'underline', textDecoration: 'line-through' }
+   * -> { textDecoration: 'underline line-through' }
+   *
+   * @param {AnnotationStyle[]} styles - Array of annotation style objects to merge.
+   * @param {string[]} canMergeKeyList - List of style keys that can be merged by concatenation.
+   * @returns {AnnotationStyle} - The merged annotation style object.
+   */
+  mergeAnnotationStyles(styles, canMergeKeyList) {
+    const merged = {};
+    for (const style of styles) {
+      for (const key in style) {
+        const value = style[key];
+        const existing = merged[key];
+        if (typeof existing === 'string' &&
+          typeof value === 'string' &&
+          canMergeKeyList.includes(key)) {
+          merged[key] = Array.from(new Set(`${existing} ${value}`.split(/\s+/).filter(Boolean))).join(' ');
+        }
+        else {
+          merged[key] = value;
+        }
+      }
+    }
+    return merged;
+  }
+}
+
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
+})(NodeTypeEnum || (NodeTypeEnum = {}));
+/**
+ * Abstract class for all nodes
+ */
+class RTENode {
+  constructor(id, annotationMap) {
+    this.annotationMap = new Map();
+    this.id = id;
+    if (annotationMap) {
+      this.annotationMap = annotationMap;
+    }
+  }
+  /**
+   * Creates a new instance of the RTENode from the given JSON data.
+   *
+   * @param {unknown} json - The JSON data to create the node from.
+   * @param {RTEBlock} parentBlock - The parent block of the node.
+   * @param {VegaRTETransformOptions} options - Options for transforming the node.
+   */
+  static from(json, parentBlock, options) {
+    throw new Error(`[Vega] ${this.constructor.name}.from(${JSON.stringify(json)}, ${parentBlock}, ${options}) is not implemented. Please implement this method in the subclass.`);
+  }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+    }
+  }
+  /**
+   * Get annotation by type
+   *
+   * @typedef T generic type
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   * @returns {Nullable<T>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Delete annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   */
+  deleteAnnotationByType(type) {
+    this.annotationMap.delete(type);
+    this.flushChange();
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {AnnotationAction} action - Annotation action
+   * @returns {this} - Node
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      this.flushChange();
+    }
+    return this;
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
+   */
+  getStyles(options = { standalone: false }) {
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    return rteAnnotationStyle.toJSON(options, ['textDecoration']);
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomClassAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {CustomAttributeAnnotation} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Check if the node is a text node.
+   *
+   * @returns {boolean} - True if the node is a text node, false otherwise.
+   */
+  isTextNode() {
+    return false;
+  }
+  /**
+   * Get the HTMLElement reference associated with this node.
+   *
+   * @returns {Nullable<HTMLElement>} The HTMLElement reference or null if not found.
+   */
+  getElementRef() {
+    return stateEntityRenderingRegistry.getDOMByEntity(this);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const nodeAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = nodeAnnotationStyle.toCssText({ standalone: true }, [
+      'textDecoration',
+    ]);
+    const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
+  /**
+   * apply annotation action or modify content action
+   *
+   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.doAnnotationActionApply(action);
+    }
+  }
+  /**
+   * Flush the value change
+   */
+  flushChange() {
+    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (domNode) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
+  /**
+   * Clones the annotations of the current RTETextNode.
+   *
+   * @returns {NodeAnnotations} A new Map containing cloned annotations.
+   */
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
+  }
+  /* istanbul ignore next */
+  /**
+   * Placeholder for the method to be implemented in sub classes.
+   *
+   * @param {AnnotationAction} action Annotation action
+   */
+  doAnnotationActionApply(action) {
+  }
+  /* istanbul ignore next */
+  /**
+   * Placeholder for the method to be implemented in sub classes.
+   *
+   * @param {ModifyContentAction} action ModifyContentAction
+   */
+  doModifyActionApply(action) {
+  }
+}
+
+/**
+ * RTEDTOClassManager is a singleton class that manages the registration and retrieval of RTE DTO classes.
+ * It allows for the dynamic handling of different RTE blocks and nodes by their types.
+ */
+class RTEDTOClassManager {
+  constructor() {
+    // Register RTE Block DTO classes.
+    this.RTE_BLOCK_DTO_CLASS_MAP = new Map();
+    // Register RTE Block DTO classes.
+    this.RTE_NODE_DTO_CLASS_MAP = new Map();
+  }
+  /**
+   * Registers a new RTE DTO class.
+   *
+   * @typedef T - The type of the RTE DTO class to register.
+   * @param {string} type - The type identifier for the RTE DTO class.
+   * @param {ClassType<T>} RTEDTOClass - The class constructor for the RTE DTO.
+   */
+  registerRTEDTOClass(type, RTEDTOClass) {
+    if (RTEDTOClass.prototype instanceof RTEBlock) {
+      this.RTE_BLOCK_DTO_CLASS_MAP.set(type, RTEDTOClass);
+    }
+    else if (RTEDTOClass.prototype instanceof RTENode) {
+      this.RTE_NODE_DTO_CLASS_MAP.set(type, RTEDTOClass);
+    }
+    else {
+      throw new Error(`Invalid RTE DTO class type: ${type}`);
+    }
+  }
+  /**
+   * Retrieves the RTE block class for a given type.
+   *
+   * @param {string} type - The type identifier for the RTE block.
+   * @returns {Nullable<RTEBlockDTOClass>} - The class constructor for the RTE block, or null if not found.
+   */
+  getRTEBlockClass(type) {
+    return this.RTE_BLOCK_DTO_CLASS_MAP.get(type);
+  }
+  /**
+   * Retrieves the RTE node class for a given type.
+   *
+   * @param {string} type - The type identifier for the RTE node.
+   * @returns {Nullable<RTENodeDTOClass>} - The class constructor for the RTE node, or null if not found.
+   */
+  getRTENodeClass(type) {
+    return this.RTE_NODE_DTO_CLASS_MAP.get(type);
+  }
+}
+const RTEDTOClassManager$1 = new RTEDTOClassManager();
+
+/**
+ * Abstract class for block
+ */
+class RTEBlock {
+  constructor(id) {
+    this.annotationMap = new Map();
+    this.id = id;
+  }
+  /**
+   * Creates a new instance of the block from the given JSON object.
+   *
+   * @param {unknown} json - The JSON object to create the block from.
+   * @param {VegaRTETransformOptions} options - Options for transforming the block.
+   */
+  static from(json, options) {
+    throw new Error(`[Vega] ${this.constructor.name}.from(${JSON.stringify(json)}, ${options}) is not implemented. Please implement this method in the subclass.`);
+  }
+  /**
+   * Generates block children from an array of VegaRTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} blockArray - The array of VegaRTEContentBlock to generate children from.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @param {VegaRTEContent | RTEBlock} [parentBlock] - Optional parent block.
+   * @returns {RTEBlock[]} An array of generated RTEBlock children.
+   */
+  static generateBlockChildren(blockArray, options, parentBlock) {
+    return blockArray
+      .map((child) => {
+      const BlockClass = RTEDTOClassManager$1.getRTEBlockClass(child.type);
+      if (BlockClass) {
+        const block = BlockClass.from(child, options);
+        block.parent = parentBlock;
+        return block;
+      }
+    })
+      .filter(isNonNullable);
+  }
+  /**
+   * 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 'textAlign':
+        return HorizontalAlignmentAnnotation.from(value);
+      case 'indent':
+        return IndentAnnotation.from(value);
+      case 'customAttribute':
+        return CustomAttributeAnnotation.from(value);
+      case 'customClass':
+        return CustomClassAnnotation.from(value);
+      case 'customStyle':
+        return CustomStyleAnnotation.from(value);
+      case 'internalWrapper':
+        return InternalWrapperAnnotation.from(value);
+    }
+  }
+  /**
+   * Converts annotations to an array of block annotation entities.
+   *
+   * @param {BlockAnnotations} annotationMap - The map to store the converted annotations.
+   * @param {VegaRTEBlockAnnotations} annotations - The annotations to convert.
+   */
+  static convertAnnotationsToMap(annotationMap, annotations) {
+    Object.entries(annotations).forEach(([type, value]) => {
+      const item = this.createAnnotationEntity(type, value);
+      if (isNonNullable(item)) {
+        annotationMap.set(...item);
+      }
+    });
+  }
+  /**
+   * Check if the block should be rendered as a wrapper.
+   *
+   * @returns {boolean} - Returns true if the block is an internal wrapper.
+   */
+  shouldRenderAsInternalWrapper() {
+    const internalWrapperAnnotation = this.getAnnotationByType(BlockAnnotationTypeEnum.INTERNAL_WRAPPER);
+    if (internalWrapperAnnotation) {
+      return (internalWrapperAnnotation.internalWrapper &&
+        Array.from(this.annotationMap.values()).filter((annotation) => !(annotation instanceof LinkGroupAnnotation) &&
+          !(annotation instanceof InternalWrapperAnnotation)).length === 0);
+    }
+    else {
+      return false;
+    }
+  }
+  /**
+   * Class to JSON object
+   *
+   * @returns {VegaRTEBlockBase} - JSON object
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CommonAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {}));
+  }
+  /**
+   * Get annotation by type
+   *
+   * @typedef T generic type
+   * @param {string} type - Annotation type
+   * @returns {Nullable<T>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * Get the first node of the block
+   *
+   * @returns {Nullable<RTENode>} The first RTENode or null if no children exist.
+   */
+  getFirstNode() {
+    if (!this.children || !this.children[0])
+      return null;
+    const firstItem = this.children[0];
+    if (firstItem instanceof RTEBlock) {
+      return firstItem.getFirstNode();
+    }
+    return firstItem;
+  }
+  /**
+   * Check if the block is a list item block
+   *
+   * @returns {boolean} True if the block is a list item block, false otherwise.
+   */
+  isListItemBlock() {
+    return this.type === 'list-item';
+  }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
+   */
+  getStyles(options = { standalone: false }) {
+    const rteAnnotationStyle = new RTEAnnotationStyle(this);
+    const blockAnnotationStyle = rteAnnotationStyle.toJSON(options);
+    return Object.assign(Object.assign({}, blockAnnotationStyle), (this.shouldRenderAsInternalWrapper() ? { display: 'contents' } : {}));
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control standalone mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CustomClassAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {Nullable<CustomAttributeAnnotation>} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const blockAnnotationStyle = new RTEAnnotationStyle(this);
+    const styles = blockAnnotationStyle.toCssText({ standalone: true });
+    const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction|ModifyContentAction} action - Annotation action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    }
+    else {
+      this.applyAnnotationAction(action);
+    }
+  }
+  /**
+   * Apply annotation action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  applyAnnotationAction(action) {
+    const annotation = action.toAnnotation();
+    if (!(annotation instanceof LinkGroupAnnotation)) {
+      this.annotationMap.set(annotation.type, annotation);
+    }
+    if (typeof this.doAnnotationActionApply === 'function') {
+      this.doAnnotationActionApply(action);
+    }
+    else {
+      const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, this.constructor.name);
+      if (strategy) {
+        strategy.execute(action, this);
+      }
+    }
+  }
+  /**
+   * clone annotations of the block
+   *
+   * @returns {BlockAnnotations} - Cloned annotations
+   */
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
+  }
+}
+
+/**
+ * Abstract class for annotation actions
+ */
+class AnnotationAction {
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Annotation to represent a selection range
+ */
+class SelectionRangeAnnotation extends Annotation {
+  constructor(range) {
+    super();
+    this.type = InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+  /**
+   * Clone the selection range annotation
+   *
+   * @returns {SelectionRangeAnnotation} A cloned instance of the selection range annotation
+   */
+  clone() {
+    return new SelectionRangeAnnotation(this.range);
+  }
+}
+
+/**
+ * Default CSS style values produced by inline text-formatting annotations.
+ *
+ * These constants are the single source of truth for the CSS values that
+ * bold, italic, underline and strikethrough semantic annotations render as
+ * (in standalone mode) and that annotation handlers / filter strategies use
+ * to detect or remove redundant inline styles.
+ */
+/** CSS `font-weight` value rendered by the bold annotation. */
+const BOLD_FONT_WEIGHT = '700';
+/** Alternative `font-weight` keyword that browsers report for bold elements. */
+const BOLD_FONT_WEIGHT_KEYWORD = 'bold';
+/** CSS `font-style` value rendered by the italic annotation. */
+const ITALIC_FONT_STYLE = 'italic';
+/** CSS `text-decoration` token rendered by the underline annotation. */
+const UNDERLINE_TEXT_DECORATION = 'underline';
+/** CSS `text-decoration` token rendered by the strikethrough annotation. */
+const STRIKETHROUGH_TEXT_DECORATION = 'line-through';
+/** CSS `font-family` value rendered by the code annotation. */
+const CODE_FONT_FAMILY = 'Roboto Mono';
+/** CSS `white-space` value rendered by the code annotation. */
+const CODE_WHITE_SPACE = 'pre-wrap';
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new StrikethroughAnnotation(this.strikethrough);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.strikethrough ? { textDecoration: STRIKETHROUGH_TEXT_DECORATION } : null;
+  }
+}
+
+/**
+ * Annotation to make text with underline
+ */
+class UnderlineAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new UnderlineAnnotation(this.underline);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.underline ? { textDecoration: UNDERLINE_TEXT_DECORATION } : null;
+  }
+}
+
+/**
+ * Annotation to make text Italic
+ */
+class ItalicAnnotation extends NodeAnnotation {
+  constructor(italic) {
+    super();
+    this.type = NodeAnnotationTypeEnum.ITALIC;
+    this.italic = italic;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} italic - Italic annotation
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
+   */
+  static from(italic) {
+    return [NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      italic: this.italic,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ItalicAnnotation(this.italic);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.italic ? 'v-rte--italic' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.italic ? { fontStyle: ITALIC_FONT_STYLE } : null;
+  }
+}
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new BoldAnnotation(this.bold);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.bold ? 'v-rte--bold' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.bold ? { fontWeight: BOLD_FONT_WEIGHT } : null;
+  }
+}
+
+/**
+ * Annotation to make text code
+ */
+class CodeAnnotation extends NodeAnnotation {
+  constructor(code, useInternalStyle = true) {
+    super();
+    this.type = NodeAnnotationTypeEnum.CODE;
+    this.code = code;
+    this.useInternalStyle = useInternalStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} code - Bold annotation
+   * @param {boolean} useInternalStyle - Whether to use default style for the link
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static from(code, useInternalStyle) {
+    return [NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code, useInternalStyle)];
+  }
+  /**
+   * Get the default standalone styles for an inline code annotation.
+   *
+   * @returns {AnnotationStyle} The default styles.
+   */
+  static getDefaultStyles() {
+    return {
+      fontFamily: CODE_FONT_FAMILY,
+      whiteSpace: CODE_WHITE_SPACE,
+    };
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      code: this.code,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new CodeAnnotation(this.code, this.useInternalStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.code && this.useInternalStyle ? 'v-rte--code' : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.code && this.useInternalStyle ? CodeAnnotation.getDefaultStyles() : null;
+  }
+}
+
+const RTE_DEFAULT_TEXT_COLOR = {
+  key: 'black',
+  light: '#111128',
+  dark: '#E3E3E8',
+};
+const RTE_TEXT_COLORS = [
+  RTE_DEFAULT_TEXT_COLOR,
+  {
+    key: 'gray',
+    light: '#5E5E6D',
+    dark: '#B9B9C1',
+  },
+  {
+    key: 'green',
+    light: '#01801F',
+    dark: '#59D977',
+  },
+  {
+    key: 'red',
+    light: '#BD2947',
+    dark: '#FFB2B5',
+  },
+  {
+    key: 'purple',
+    light: '#563D82',
+    dark: '#BEB2FF',
+  },
+  {
+    key: 'teal',
+    light: '#17758F',
+    dark: '#4CD8FF',
+  },
+];
+const ZERO_WIDTH_SPACE = '\u200b';
+const VegaRTEPresetToolbarItems = [
+  ['textStyles'],
+  ['bold', 'italic', 'underline', 'strikethrough', 'code'],
+  ['textColor'],
+  ['horizontalAlignment', 'bulletsNumbers'],
+  ['moreIndent', 'lessIndent'],
+  ['link'],
+  ['image'],
+  ['clearStyle'],
+];
+
+/**
+ * Annotation to make text with text color
+ */
+class TextColorAnnotation extends NodeAnnotation {
+  constructor(textColor) {
+    super();
+    this.type = NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new TextColorAnnotation(this.textColor.key);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return {
+      color: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
+  }
+  /**
+   * format text color
+   *
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
+   */
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
+  }
+}
+
+/**
+ * Annotation to make text a link
+ */
+class LinkAnnotation extends NodeAnnotation {
+  constructor(link, useInternalStyle = true) {
+    super();
+    this.type = NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+    this.useInternalStyle = useInternalStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @param {boolean} useInternalStyle - Whether to use default style for the link
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link, useInternalStyle = true) {
+    return [NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link, useInternalStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      link: this.link,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LinkAnnotation(this.link, this.useInternalStyle);
+  }
+  /**
+   * Verify whether two link annotation is same or not
+   *
+   * @param {LinkAnnotation} annotation - Compared annotation
+   * @returns {boolean} Whether two link annotation is same or not
+   */
+  toEqual(annotation) {
+    return this.link.groupKey === annotation.link.groupKey;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return null;
+  }
+}
+
+/**
+ * Action to link a group of nodes
+ */
+class LinkGroupAnnotationAction extends AnnotationAction {
+  constructor(groupKey, nodes, type) {
+    super();
+    this.isFlushable = false;
+    this.groupKey = groupKey;
+    this.nodes = nodes;
+    this.type = type;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
+   */
+  toAnnotation() {
+    return new LinkGroupAnnotation(this.groupKey);
+  }
+}
+
+/**
+ * Sync up selection action
+ */
+class SyncUpSelectionAction extends AnnotationAction {
+  constructor() {
+    super();
+    this.isFlushable = false;
+  }
+  /**
+   * annotation null
+   *
+   * @returns {Nullable<Annotation>} null
+   */
+  toAnnotation() {
+    return null;
+  }
+}
+
+/**
+ * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
+ */
+class ActionHandleStrategy {
+  /**
+   * Public method to invoke the handle logic.
+   *
+   * @typedef R generic type
+   * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
+   * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
+   * @returns {R} - The invoke result in special strategy.
+   */
+  execute(action, target) {
+    LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
+    return this.handleAction(action, target);
+  }
+  /**
+   * Update the custom style annotation of a block or node
+   *
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   */
+  updateCustomStyleAnnotation(item, styleKeys) {
+    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
+  }
+  /**
+   * Create a new paragraph block with the given text.
+   *
+   * @param {string} text - The text content for the new paragraph.
+   * @returns {Nullable<RTETextBlock>} - The newly created paragraph block, or null if creation failed.
+   */
+  createNewParagraph(text) {
+    const dtoClass = RTEDTOClassManager$1.getRTEBlockClass('paragraph');
+    if (dtoClass) {
+      const newParagraph = dtoClass.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text }],
+      });
+      return newParagraph;
+    }
+  }
+  /**
+   * Get the root content from a child block or node.
+   *
+   * @param {RTEBlock | RTENode} child - The child block or node.
+   * @returns {Nullable<VegaRTEContent>} The root content, if found.
+   */
+  getRootContent(child) {
+    const parent = child.parent;
+    if (parent) {
+      if (parent.constructor.name === 'VegaRTEContent') {
+        return parent;
+      }
+      else {
+        return this.getRootContent(parent);
+      }
+    }
+  }
+  /**
+   * Check the caret position at the start of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the start of the block.
+   */
+  isCaretPositionAtBlockStart(block, node, offset) {
+    return node === block.children[0] && offset === 0;
+  }
+  /**
+   * Check the caret position at the end of a block.
+   *
+   * @param {RTEBlock} block - The RTE Block.
+   * @param {RTENode} node - The RTE Node.
+   * @param {number} offset - The offset position.
+   * @returns {boolean} - Whether the caret is at the end of the block.
+   */
+  isCaretPositionAtBlockEnd(block, node, offset) {
+    if (!node.isContentEditable()) {
+      return this.isCaretPositionAtDecoratorBlockEnd(block, node, offset);
+    }
+    else {
+      return this.isCaretPositionAtTextBlockEnd(block, node, offset);
+    }
+  }
+  /**
+   * Get the registered DOM element by the RTE entity.
+   *
+   * @param {RTEBlock | RTENode} instance - The RTE block or node instance.
+   * @returns {Nullable<HTMLElement>} The registered DOM element.
+   */
+  getDOMByEntity(instance) {
+    return stateEntityRenderingRegistry.getDOMByEntity(instance);
+  }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
+  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
+    const lastNode = textBlock.children[textBlock.children.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  }
+  /**
+   * Checks if the caret position is at the end of a given decorator node.
+   *
+   * @param {RTEBlock} target - The image block.
+   * @param {RTENode} node - `node` is a RTEDecoratorNode or non-editable text node.
+   * @param {number} startOffset - The position within the `RTEDecoratorNode` where the caret is located.
+   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEDecoratorNode`.
+   */
+  isCaretPositionAtDecoratorBlockEnd(target, node, startOffset) {
+    return node === target.children[target.children.length - 1] && startOffset !== 0;
+  }
+  /**
+   * Determines if the custom style annotation includes any the custom style.
+   *
+   * @param {CustomStyleAnnotation} customStyleAnnotation - custom style annotation
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   * @returns {boolean} - True if the custom key includes the custom style, false otherwise.
+   */
+  isCustomStyle(customStyleAnnotation, styleKeys) {
+    return styleKeys.some((item) => Object.keys(customStyleAnnotation.customStyle).includes(item));
+  }
+}
+
+/**
+ * Split the corresponding link group nodes *
+ */
+class LinkGroupNodeSplitAction extends ModifyContentAction {
+  constructor(splittedTextNodes) {
+    super();
+    this.type = ModifyContentActionType.LINK_GROUP_NODE_SPLIT;
+    this.splittedTextNodes = splittedTextNodes;
+  }
+}
+
+/**
+ * Split the text node into two or there nodes according to the rules.
+ */
+class NodeSplitTextStrategy extends ActionHandleStrategy {
+  constructor() {
+    super(...arguments);
+    // The new create node that need apply annotation or the current target. This property used to export after the execute method invoke.
+    this.applyTargetNode = null;
+  }
+  /**
+   * Split the text node.
+   *
+   * @param {TextSplittableAction} action - The split action.
+   * @param {RTETextNode} target - The text node that need to be splited.
+   * @returns {Nullable<RTETextNode>} - The new insert text node or the current text node that need to apply the action.
+   */
+  handleAction(action, target) {
+    const selectionRangeAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    this.setApplyTargetNode(null);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const { startContainer, endContainer, startOffset, endOffset } = selectionRangeAnnotation.range;
+      const noTextRangeSelected = startContainer === endContainer && startOffset === endOffset;
+      target.parent.children = target.parent.children.flatMap((item) => {
+        if (item.id === target.id) {
+          if (noTextRangeSelected) {
+            return this.insertNewNode(startOffset, target);
+          }
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range) &&
+            target.isContentEditable()) {
+            const splittedTextNodes = this.splitTextNode(selectionRangeAnnotation.range, target);
+            if (item.annotationMap.has('LINK')) {
+              item.apply(new LinkGroupNodeSplitAction(splittedTextNodes));
+            }
+            return splittedTextNodes;
+          }
+          else {
+            this.setApplyTargetNode(target);
+            return target;
+          }
+        }
+        return item;
+      });
+    }
+    return this.applyTargetNode;
+  }
+  /**
+   * Insert the new node at the start offset
+   *
+   * @param {number} startOffset - The start position offset
+   * @param {RTETextNode} target - RTETextNode
+   * @returns {RTETextNode[]} - RTETextNode array
+   */
+  insertNewNode(startOffset, target) {
+    const newNode = target.cloneWithText('');
+    this.setApplyTargetNode(newNode);
+    const index = target.parent.children.findIndex((node) => node === target);
+    if (startOffset === 0 || (!target.isContentEditable() && startOffset === index)) {
+      return [newNode, target];
+    }
+    if (startOffset === target.text.length ||
+      (!target.isContentEditable() && startOffset === index + 1)) {
+      return [target, newNode];
+    }
+    const beforeNode = target.cloneWithText(target.text.substring(0, startOffset));
+    const afterNode = target.cloneWithText(target.text.substring(startOffset));
+    return [beforeNode, newNode, afterNode];
+  }
+  /**
+   * Whether a given range should be split based on various conditions within the range.
+   *
+   * @param {Range} range - Selection range
+   * @returns {boolean} Returns a boolean value indicating whether the selection range should be split.
+   */
+  shouldSplitSelection(range) {
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    const isCrossNode = startContainer !== endContainer;
+    const isPartialStart = startOffset > 0;
+    const isPartialEnd = endOffset < (endContainer.textContent ? endContainer.textContent.length : 0);
+    const isPartialSelection = isPartialStart || isPartialEnd;
+    return isCrossNode || isPartialSelection;
+  }
+  /**
+   * Split text node with range
+   *
+   * @param {Range} range - Selection range
+   * @param {RTETextNode} target - RTETextNode
+   * @returns {RTETextNode[] | RTETextNode} RTETextNode array
+   */
+  splitTextNode(range, target) {
+    const { startContainer, endContainer, startOffset } = range;
+    const startNode = startContainer.parentElement;
+    const endNode = endContainer.parentElement;
+    /**
+     * Split the text from the start offset to the end offset
+     *
+     * @param {string} text - The text string
+     * @param {number} startOffset - The start offset position
+     * @param {number} endOffset - The end offset position
+     * @returns {RTETextNode[]} - The split text node array
+     */
+    const splitText = (text, startOffset, endOffset) => {
+      const beforeText = text.substring(0, startOffset);
+      const selectedText = text.substring(startOffset, endOffset);
+      const afterText = text.substring(endOffset);
+      return [
+        target.cloneWithText(beforeText),
+        target.cloneWithText(selectedText),
+        target.cloneWithText(afterText),
+      ];
+    };
+    const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+    if (startItemDto && startItemDto.id === target.id) {
+      const endOffset = startContainer === endContainer ? range.endOffset : target.text.length;
+      const [beforeNode, selectedNode, afterNode] = splitText(target.text, startOffset, endOffset);
+      this.setApplyTargetNode(selectedNode);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else if (endItemDto && endItemDto.id === target.id) {
+      const [beforeNode, selectedNode, afterNode] = splitText(target.text, 0, range.endOffset);
+      this.setApplyTargetNode(selectedNode);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else {
+      this.setApplyTargetNode(target);
+      return target;
+    }
+  }
+  /**
+   * Store the text node which need to apply the annotation. Clear the value if the input is null.
+   *
+   * @param {RTETextNode | null} node - The new text node.
+   */
+  setApplyTargetNode(node) {
+    this.applyTargetNode = node;
+  }
+}
+
+/**
+ * Action to toggle bold annotation
+ */
+class BoldAnnotationAction extends TextSplittableAction {
+  constructor(bold) {
+    super();
+    this.isFlushable = true;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {BoldAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new BoldAnnotation(this.bold);
+  }
+}
+
+/**
+ * Annotation to host which annotations will be clear formatting
+ */
+class ClearFormattingAnnotation extends Annotation {
+  constructor() {
+    super(...arguments);
+    this.type = InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      NodeAnnotationTypeEnum.BOLD,
+      NodeAnnotationTypeEnum.ITALIC,
+      NodeAnnotationTypeEnum.UNDERLINE,
+      NodeAnnotationTypeEnum.STRIKETHROUGH,
+      NodeAnnotationTypeEnum.TEXT_COLOR,
+      NodeAnnotationTypeEnum.CODE,
+      CommonAnnotationTypeEnum.CUSTOM_STYLE,
+    ];
+  }
+}
+
+/**
+ * Action to toggle clear formatting
+ */
+class ClearFormattingAnnotationAction extends TextSplittableAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} the annotation
+   */
+  toAnnotation() {
+    return new ClearFormattingAnnotation();
+  }
+}
+
+/**
+ * Action to toggle code annotation
+ */
+class CodeAnnotationAction extends TextSplittableAction {
+  constructor(code) {
+    super();
+    this.isFlushable = true;
+    this.code = code;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {CodeAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new CodeAnnotation(this.code);
+  }
+}
+
+/**
+ * Delete the node annotation by type
+ */
+class DeleteNodeAnnotationAction extends AnnotationAction {
+  constructor(annotationType) {
+    super();
+    this.isFlushable = true;
+    this.annotationType = annotationType;
+  }
+  /**
+   * Don't need this for this action
+   *
+   * @returns {Nullable<Annotation>} undefined
+   */
+  toAnnotation() {
+    return undefined;
+  }
+}
+
+/**
+ * Action to toggle the italic annotation
+ */
+class ItalicAnnotationAction extends TextSplittableAction {
+  constructor(italic) {
+    super();
+    this.isFlushable = true;
+    this.italic = italic;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {ItalicAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new ItalicAnnotation(this.italic);
+  }
+}
+
+/**
+ * Action to toggle link annotation
+ */
+class LinkAnnotationAction extends TextSplittableAction {
+  constructor({ link, newText, needMergeNode, doSplit, type, }) {
+    super();
+    this.isFlushable = true;
+    this.link = link;
+    this.needMergeNode = needMergeNode;
+    this.newText = newText;
+    this.type = type;
+    if (isNonNullable(doSplit)) {
+      this.doSplit = doSplit;
+    }
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new LinkAnnotation(this.link);
+  }
+}
+
+/**
+ * Action to toggle the strikethrough annotation
+ */
+class StrikethroughAnnotationAction extends TextSplittableAction {
+  constructor(underline) {
+    super();
+    this.isFlushable = true;
+    this.strikethrough = underline;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} the annotation
+   */
+  toAnnotation() {
+    return new StrikethroughAnnotation(this.strikethrough);
+  }
+}
+
+/**
+ * Action to toggle the underline annotation
+ */
+class UnderlineAnnotationAction extends TextSplittableAction {
+  constructor(underline) {
+    super();
+    this.isFlushable = true;
+    this.underline = underline;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} the annotation
+   */
+  toAnnotation() {
+    return new UnderlineAnnotation(this.underline);
+  }
+}
+
+/**
+ * The current strategy used to modify the text node annotation map.
+ */
+class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
+  /**
+   * Remove or set annotation to the text node annotation map.
+   *
+   * @param {AnnotationAction} action - The annotation action instance.
+   * @param {RTETextNode} target - The current text node.
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    if (action instanceof DeleteNodeAnnotationAction) {
+      target.annotationMap.delete(action.annotationType);
+      return;
+    }
+    if (annotation instanceof ClearFormattingAnnotation) {
+      annotation.items.forEach((item) => {
+        target.deleteAnnotationByType(item);
+      });
+      return;
+    }
+    if (annotation instanceof NodeAnnotation || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (isNonNullable(action.newText)) {
+          target.text = action.newText;
+        }
+        target.parent.apply(new LinkGroupAnnotationAction(action.link.groupKey, [target], action.type));
+      }
+      if (action instanceof CodeAnnotationAction) {
+        this.handleAction(new ClearFormattingAnnotationAction(), target);
+      }
+      if (action instanceof BoldAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontWeight']);
+      }
+      if (action instanceof ItalicAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['fontStyle']);
+      }
+      if (action instanceof UnderlineAnnotationAction ||
+        action instanceof StrikethroughAnnotationAction) {
+        this.updateCustomStyleAnnotation(target, ['textDecoration']);
+      }
+      target.annotationMap.set(annotation.type, annotation);
+      return;
+    }
+  }
+}
+
+/**
+ * Delete the corresponding link group according to the text node *
+ */
+class DeleteLinkGroupAction extends ModifyContentAction {
+  constructor() {
+    super(...arguments);
+    this.type = ModifyContentActionType.DELETE_LINK_GROUP;
+  }
+}
+
+/**
+ * Update the editor text node text content strategy.
+ */
+class NodeUpdateTextStrategy extends ActionHandleStrategy {
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {UpdateTextAction} action - The update text action instance.
+   * @param {RTETextNode} target - The text node instance which need update the text.
+   */
+  handleAction(action, target) {
+    target.text = action.newTextContent;
+    // The link node should unlink when delete all text
+    if (!target.text && target.annotationMap.has('LINK')) {
+      target.apply(new DeleteLinkGroupAction());
+    }
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Replaces the rich text node selected text strategy.
+ */
+class NodeReplaceSelectedTextStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceSelectedText(action.textToBeInsert, action.currentRange, target);
+  }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   * @param {RTETextNode} target - The RTE text node instance.
+   */
+  replaceSelectedText(text, currentRange, target) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      let newText = target.text;
+      if (startContainer === endContainer && startOffset === endOffset && text) {
+        newText = target.text.slice(0, startOffset) + text + target.text.slice(startOffset);
+      }
+      else {
+        const startNode = startContainer.parentElement;
+        const endNode = endContainer.parentElement;
+        const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+        const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+        let startIndex = 0, endIndex = target.text.length;
+        if (startItemDto && startItemDto === target) {
+          startIndex = startOffset;
+          endIndex = startContainer === endContainer ? endOffset : endIndex;
+        }
+        else if (endItemDto && endItemDto === target) {
+          endIndex = endOffset;
+        }
+        newText = target.text.slice(0, startIndex) + text + target.text.slice(endIndex);
+      }
+      target.apply(new UpdateTextAction(newText));
+    }
+  }
+}
+
+/**
+ * Inline HTML annotation
+ */
+class InlineHtmlAnnotation extends Annotation {
+  constructor(htmlTag) {
+    super();
+    this.type = NodeAnnotationTypeEnum.INLINE_HTML;
+    this.htmlTag = htmlTag;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaInlineHtmlSchema} inlineHtml - Inline HTML node
+   * @returns {[NodeAnnotationTypeEnum.INLINE_HTML, InlineHtmlAnnotation]} Map item for the annotation
+   */
+  static from(inlineHtml) {
+    const { htmlTag, child, customStyle, customClass, customAttribute } = inlineHtml;
+    const inlineHtmlAnnotation = new InlineHtmlAnnotation(htmlTag);
+    inlineHtmlAnnotation.child = child ? InlineHtmlAnnotation.from(child)[1] : undefined;
+    inlineHtmlAnnotation.customAttribute = customAttribute
+      ? CustomAttributeAnnotation.from(customAttribute)[1]
+      : undefined;
+    inlineHtmlAnnotation.customClass = customClass
+      ? CustomClassAnnotation.from(customClass)[1]
+      : undefined;
+    inlineHtmlAnnotation.customStyle = customStyle
+      ? CustomStyleAnnotation.from(customStyle)[1]
+      : undefined;
+    return [NodeAnnotationTypeEnum.INLINE_HTML, inlineHtmlAnnotation];
+  }
+  /**
+   * Create a new inline HTML annotation
+   *
+   * @returns {InlineHtmlAnnotation} - Inline HTML annotation
+   */
+  clone() {
+    var _a, _b, _c, _d;
+    const inlineHtmlAnnotation = new InlineHtmlAnnotation(this.htmlTag);
+    inlineHtmlAnnotation.child = (_a = this.child) === null || _a === void 0 ? void 0 : _a.clone();
+    inlineHtmlAnnotation.customAttribute = (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.clone();
+    inlineHtmlAnnotation.customClass = (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.clone();
+    inlineHtmlAnnotation.customStyle = (_d = this.customStyle) === null || _d === void 0 ? void 0 : _d.clone();
+    return inlineHtmlAnnotation;
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    var _a, _b, _c, _d;
+    return {
+      inlineHtml: cleanObject({
+        htmlTag: this.htmlTag,
+        child: (_a = this.child) === null || _a === void 0 ? void 0 : _a.toJSON().inlineHtml,
+        customAttribute: (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.toJSON().customAttribute,
+        customClass: (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.toJSON().customClass,
+        customStyle: (_d = this.customStyle) === null || _d === void 0 ? void 0 : _d.toJSON().customStyle,
+      }),
+    };
+  }
+}
+
+/**
+ * Split the link nodes in the corresponding link group
+ */
+class LinkGroupNodeSplitStrategy extends ActionHandleStrategy {
+  /**
+   * Split the text node.
+   *
+   * @param {LinkGroupNodeSplitAction} action - The split action.
+   * @param {RTETextNode} target - The text node that need to be splitted.
+   */
+  handleAction(action, target) {
+    const linkGroupAnnotation = target.parent.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const currentGroupKey = target.annotationMap.get('LINK').link
+        .groupKey;
+      const currentLinkGroup = linkGroupAnnotation.linkGroups.get(currentGroupKey);
+      if (currentLinkGroup) {
+        const index = currentLinkGroup.indexOf(target);
+        if (index !== -1) {
+          /* istanbul ignore next */
+          currentLinkGroup.splice(index, 1, ...(Array.isArray(action.splittedTextNodes)
+            ? action.splittedTextNodes
+            : [action.splittedTextNodes]));
+          linkGroupAnnotation.linkGroups.set(currentGroupKey, currentLinkGroup);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Delete the corresponding link group
+ */
+class DeleteLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Delete the corresponding link group
+   *
+   * @param {DeleteLinkGroupAction} _action - The delete link group action.
+   * @param {RTETextNode} target - The text node that need to remove link annotation.
+   */
+  handleAction(_action, target) {
+    const linkGroupAnnotation = target.parent.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const currentGroupKey = target.annotationMap.get(NodeAnnotationTypeEnum.LINK).link.groupKey;
+      const currentLinkGroup = linkGroupAnnotation.linkGroups.get(currentGroupKey);
+      if (currentLinkGroup) {
+        const index = currentLinkGroup.indexOf(target);
+        if (index !== -1) {
+          currentLinkGroup.splice(index, 1);
+        }
+        if (currentLinkGroup.length === 0) {
+          linkGroupAnnotation.linkGroups.delete(currentGroupKey);
+        }
+        if (linkGroupAnnotation.linkGroups.size === 0) {
+          target.parent.annotationMap.delete(InternalAnnotationTypeEnum.LINK_GROUP);
+        }
+      }
+    }
+    target.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+  }
+}
+
+/**
+ * Annotation to make text as plain text
+ */
+class PlainTextAnnotation extends NodeAnnotation {
+  constructor(plainText) {
+    super();
+    this.type = NodeAnnotationTypeEnum.PLAIN_TEXT;
+    this.plainText = true;
+    this.plainText = plainText;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(plainText) {
+    return [NodeAnnotationTypeEnum.PLAIN_TEXT, new PlainTextAnnotation(plainText)];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new PlainTextAnnotation(this.plainText);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return this.plainText ? { plainText: this.plainText } : undefined;
+  }
+}
+
+/**
+ * Action to toggle the text color annotation visibility/state.
+ */
+class TextColorAnnotationAction extends TextSplittableAction {
+  constructor(textColor) {
+    super();
+    this.isFlushable = true;
+    this.textColor = textColor;
+  }
+  /**
+   * Converts the action into a text color annotation.
+   *
+   * @returns {Annotation} the annotation
+   */
+  toAnnotation() {
+    return new TextColorAnnotation(this.textColor);
+  }
+}
+
+/**
+ * Text node
+ */
+class RTETextNode extends RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.TEXT;
+    this.parent = parentBlock;
+    this.text = text;
+    this.registerModifyStrategy();
+  }
+  /**
+   * Determines if the given HTML tag is supported by the RTETextNode.
+   *
+   * @param {string} tag - The HTML tag to check.
+   * @returns {boolean} `true` if the tag is supported, otherwise `false`.
+   */
+  static supportsHtmlTag(tag) {
+    return ['span', 'code'].includes(tag);
+  }
+  /**
+   * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
+   *
+   * @param {VegaRTETextNode} richText - A rich text node
+   * @param {RTETextBlock} parentBlock - Parent block
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTETextNode} an RTETextNode
+   */
+  static from(richText, parentBlock, options = { autoMatchFormat: true }) {
+    const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
+    const { annotations } = richText;
+    if (annotations) {
+      textNode.annotationMap = this.generateTextAnnotationMap(annotations, options, parentBlock, textNode);
+    }
+    return textNode;
+  }
+  /**
+   * Generates a map of text annotations for the given set of annotations.
+   *
+   * @param {VegaRTETextAnnotations} annotations - The annotations to be converted into a map.
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @param {RTETextBlock} parentBlock - The parent text block.
+   * @param {RTETextNode} textNode - The text node.
+   * @returns {NodeAnnotations} The map of text annotations.
+   */
+  static generateTextAnnotationMap(annotations, options, parentBlock, textNode) {
+    return new Map(Object.keys(annotations)
+      .map((type) => {
+      if (type === 'link' && annotations.link && parentBlock && textNode) {
+        parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
+      }
+      return this.createAnnotationEntity(type, annotations[type], options);
+    })
+      .filter(isNonNullable));
+  }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options that may be used for creating the annotation entity.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
+  static createAnnotationEntity(type, value, options) {
+    const autoMatchFormat = !!(options && options.autoMatchFormat);
+    switch (type) {
+      case 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value, autoMatchFormat);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value, autoMatchFormat);
+      case 'inlineHtml': {
+        return InlineHtmlAnnotation.from(value);
+      }
+      case 'plainText': {
+        return PlainTextAnnotation.from(value);
+      }
+    }
+    return RTENode.createAnnotationEntity(type, value);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation ||
+      annotation instanceof CommonAnnotation ||
+      annotation instanceof InlineHtmlAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const inlineHtmlAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.INLINE_HTML);
+    return inlineHtmlAnnotation ? this.renderWithWrapperStr(inlineHtmlAnnotation) : this.renderTextStr();
+  }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
+  cloneWithText(text) {
+    const cloned = new RTETextNode(generateUUID(), text, this.parent, super.cloneAnnotations());
+    return cloned;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const cloned = new RTETextNode(this.id, this.text, parent, super.cloneAnnotations());
+    return cloned;
+  }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  /**
+   * @inheritDoc
+   */
+  isTextNode() {
+    return true;
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeEndOffset() {
+    if (!this.isContentEditable() && this.parent) {
+      const parent = this.parent;
+      const nodeIndex = parent.children.indexOf(this);
+      return nodeIndex + 1; // place the cursor after the non-editable text node;
+    }
+    return this.text === '\n' ? 0 : this.text.length;
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeContainer() {
+    const element = this.getElementRef();
+    if (element) {
+      if (this.isContentEditable()) {
+        return element.firstChild;
+      }
+      else {
+        return element.parentElement;
+      }
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isContentEditable() {
+    return true;
+  }
+  /**
+   * Registers the action strategies for the RTETextNode.
+   */
+  registerModifyStrategy() {
+    const dtoClassName = this.constructor.name;
+    if (!RTETextNode.registerActionStrategyStatus[dtoClassName]) {
+      if (this.isContentEditable()) {
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+        ActionHandleStrategyRegistry.register(LinkAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      }
+      ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+      ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
+      ActionHandleStrategyRegistry.register(BoldAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ClearFormattingAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(ItalicAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(UnderlineAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(TextColorAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(StrikethroughAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(CodeAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      ActionHandleStrategyRegistry.register(AnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      RTETextNode.registerActionStrategyStatus[dtoClassName] = true;
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const splitStrategy = ActionHandleStrategyRegistry.get(TextSplittableAction.name, this.constructor.name);
+      if (splitStrategy) {
+        const newNode = splitStrategy.execute(action, this);
+        if (newNode) {
+          this.applyActionToNode(newNode, action);
+        }
+      }
+    }
+    else {
+      this.applyActionToNode(this, action);
+    }
+    if (typeof this.parent.mergeNodes === 'function') {
+      this.parent.mergeNodes(action);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
+   */
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
+    }
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
+    }
+    /**
+     * 1. Try to get the specific strategy for the action and node type first (e.g., LinkAnnotationAction on RTETextNode).
+     * 2. If no specific strategy found, try to get the generic NodeUpdateAnnotationMapStrategy for AnnotationAction on RTETextNode.
+     */
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, node.constructor.name);
+    if (strategy) {
+      strategy.execute(action, node);
+      return;
+    }
+    const updateAnnotationMapStrategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTETextNode.name);
+    if (updateAnnotationMapStrategy) {
+      updateAnnotationMapStrategy.execute(action, node);
+      return;
+    }
+  }
+  /**
+   * Sync up the selected node by change manager
+   *
+   * @param {RTETextNode} selectedNode - The selected node
+   */
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = this.getElementRef();
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+  /**
+   * Render the text node with the inline HTML wrapper.
+   *
+   * @param {VegaInlineHtmlSchema} inlineHtmlNode - The inline HTML schema to wrap the text node.
+   * @returns {string} The HTML string representation of the text node wrapped with the inline HTML.
+   */
+  renderWithWrapperStr(inlineHtmlNode) {
+    const { htmlTag, customAttribute, customClass, customStyle, child } = inlineHtmlNode;
+    const attrs = [
+      ...((customAttribute === null || customAttribute === void 0 ? void 0 : customAttribute.toString()) || []),
+      customClass === null || customClass === void 0 ? void 0 : customClass.toString(),
+      customStyle === null || customStyle === void 0 ? void 0 : customStyle.toString(),
+    ].filter(isNonNullable);
+    const attrStr = attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+    if (!child) {
+      return `<${htmlTag}${attrStr}>${this.renderTextStr()}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child)}</${htmlTag}>`;
+  }
+  /**
+   * Generates the HTML representation of the text node.
+   *
+   * @returns {string} The HTML string representation of the text node.
+   */
+  renderTextStr() {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString();
+    // If the text contains a newline character, we need to replace it with a <br> tag.
+    if (this.text === '\n') {
+      return `<br>`;
+    }
+    return this.shouldRenderAsPlainText() ? this.text : `<${NodeTag}${attrStr}>${this.text}</${NodeTag}>`;
+  }
+  /**
+   * Determines if the text node should be rendered as plain text.
+   *
+   * @returns {boolean} `true` if the text node should be rendered as plain text, otherwise `false`.
+   */
+  shouldRenderAsPlainText() {
+    const plainTextAnnotation = super.getAnnotationByType(NodeAnnotationTypeEnum.PLAIN_TEXT);
+    if (plainTextAnnotation) {
+      return (plainTextAnnotation.plainText &&
+        Array.from(this.annotationMap.values()).filter((annotation) => (annotation instanceof NodeAnnotation &&
+          !(annotation instanceof LinkAnnotation) &&
+          !(annotation instanceof PlainTextAnnotation)) ||
+          annotation instanceof CommonAnnotation).length === 0);
+    }
+    else {
+      return false;
+    }
+  }
+}
+RTETextNode.registerActionStrategyStatus = {};
+RTETextNode.htmlTag = 'span';
+
+/**
+ * Append children to a block or rte content
+ *
+ * @example parent.apply(new AppendChildrenAction([newChildren]))
+ */
+class AppendChildrenAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = ModifyContentActionType.APPEND_CHILDREN;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
+/**
+ * Text style annotation
+ */
+class TextStyleAnnotation extends BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = BlockAnnotationTypeEnum.TEXT_STYLE;
+    this.textStyle = textStyle;
+  }
+  /**
+   * Generate the map item for the annotations
+   *
+   * @param {VegaRTETextStyleType} textStyle - the text style type
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static from(textStyle) {
+    return [BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Get the default styles for a given text style type.
+   *
+   * @param {VegaRTETextStyleType} textStyle - The text style type.
+   * @returns {Nullable<AnnotationStyle>} The default styles for the given text style type.
+   */
+  static getDefaultStyles(textStyle) {
+    const textStyleBase = {
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      lineHeight: '22px',
+      minHeight: '22px',
+      fontWeight: '500',
+    };
+    const paragraphStyle = Object.assign(Object.assign({}, textStyleBase), { marginTop: '0px', marginBottom: '0px' });
+    switch (textStyle) {
+      case 'paragraph': {
+        return paragraphStyle;
+      }
+      case 'title': {
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '36px', lineHeight: '40px', minHeight: '40px' });
+      }
+      case 'subtitle': {
+        return Object.assign(Object.assign({}, textStyleBase), { fontSize: '28px', lineHeight: '32px', minHeight: '32px' });
+      }
+      case 'heading-1': {
+        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '22px', lineHeight: '24px', minHeight: '24px' });
+      }
+      case 'heading-2': {
+        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '20px', lineHeight: '24px', minHeight: '24px' });
+      }
+      case 'heading-3': {
+        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '18px' });
+      }
+      case 'heading-4': {
+        return Object.assign({}, paragraphStyle);
+      }
+      case 'heading-5': {
+        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '14px' });
+      }
+      case 'heading-6': {
+        return Object.assign(Object.assign({}, paragraphStyle), { fontSize: '12px' });
+      }
+      default:
+        return null;
+    }
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new TextStyleAnnotation(this.textStyle);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.textStyle ? `v-rte--text-style-${this.textStyle}` : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.textStyle ? TextStyleAnnotation.getDefaultStyles(this.textStyle) : null;
+  }
+}
+
+/**
+ * Action to change the text style of a block
+ */
+class TextStyleAnnotationAction extends AnnotationAction {
+  constructor(textStyle, bold) {
+    super();
+    this.isFlushable = true;
+    this.textStyle = textStyle;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to a block annotation
+   *
+   * @returns {BlockAnnotation} the block annotation
+   */
+  toAnnotation() {
+    return new TextStyleAnnotation(this.textStyle);
+  }
+}
+
+/**
+ * Update the text block text style strategy.
+ */
+class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
+  /**
+   * Update the text block type and add or remove the bold style from child nodes.
+   *
+   * @param {TextStyleAnnotationAction} action - The text style annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    if (target.type !== 'list-item') {
+      target.type = action.textStyle;
+    }
+    if (action.bold) {
+      target.children.forEach((node) => {
+        const boldAnnotationAction = new BoldAnnotationAction(true);
+        boldAnnotationAction.doSplit = false;
+        node.apply(boldAnnotationAction);
+      });
+    }
+    else {
+      target.children.forEach((node) => {
+        node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
+      });
+    }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
+  }
+}
+
+/**
+ * Update the text block link group annotation strategy.
+ */
+class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Update link group after the child link node update.
+   *
+   * @param {LinkGroupAnnotationAction} action - The link group annotation action instance.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    let linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (action.type === 'update_link') {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        if (linkGroup) {
+          linkGroupAnnotation.linkGroups.set(action.groupKey, [linkGroup[0]]);
+        }
+      }
+    }
+    else {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey) || [];
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      }
+      else {
+        linkGroupAnnotation = action.toAnnotation();
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...action.nodes]);
+      }
+      target.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+    }
+  }
+}
+
+/**
+ * Insert a new children after a existing children
+ *
+ * @example parent.apply(new InsertChildrenAfterAction(existingChildren, newChildren, ...))
+ */
+class InsertChildrenAfterAction extends ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_CHILDREN_AFTER;
+    this.referChildren = referBlock;
+    this.childrenToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
+ */
+class ReplaceChildNodesAction extends ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
+/**
+ * Split the current node with a special position strategy.
+ */
+class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @param {RTETextBlock} textBlock - The text block need to be splited.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
+  splitTextNodeBlock(splitNode, startOffsetOfNode, textBlock) {
+    if (splitNode) {
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = textBlock.children.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = textBlock.children.slice(0, nodesSplitIndex);
+        const afterNodes = textBlock.children.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        textBlock.apply(new ReplaceChildNodesAction(beforeNodes));
+        const newBlock = textBlock.cloneWithNodes(afterNodes);
+        textBlock.parent.apply(new InsertChildrenAfterAction(textBlock, newBlock));
+        return newBlock;
+      }
+    }
+  }
+}
+
+/**
+ * Remove all nodes and append new nodes strategy.
+ */
+class BlockReplaceNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Empty the text block or image block nodes and add new nodes.
+   *
+   * @param {ReplaceChildNodesAction} action - The replace child nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The text block or the image block.
+   */
+  handleAction(action, target) {
+    target.children = [];
+    target.apply(new AppendChildrenAction(action.newChildNodes));
+  }
+}
+
+/**
+ * Remove a children from the current block
+ *
+ * @example needRemovedChildren.parent.apply(new RemoveChildrenAction(needRemovedChildren))
+ */
+class RemoveChildrenAction extends ModifyContentAction {
+  constructor(childNode) {
+    super();
+    this.type = ModifyContentActionType.DELETE_CHILDREN;
+    this.entityToBeRemoved = childNode;
+  }
+}
+
+/**
+ * Append the second block child nodes to the first block child nodes and remove the second block strategy.
+ */
+class BlockMergeNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
+   *
+   * @param {MergeTwoBlocksNodesAction} action - The merge block nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The first text block or image block.
+   */
+  handleAction(action, target) {
+    const anotherBlock = action.blockNeedToBeMerged;
+    if (target.type === anotherBlock.type || (target.type !== 'image' && anotherBlock.type !== 'image')) {
+      let shouldMergeNodes = anotherBlock.children;
+      if (anotherBlock.type !== 'image') {
+        shouldMergeNodes = anotherBlock.children.filter((node) => node.text);
+      }
+      target.apply(new AppendChildrenAction(shouldMergeNodes));
+      anotherBlock.parent.apply(new RemoveChildrenAction(anotherBlock));
+    }
+  }
+}
+
+/**
+ * Insert a line break node into current text block at special position strategy.
+ */
+class BlockInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * lineBreakSingleBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTETextBlock} target -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
+  lineBreakSingleBlock(splitNode, startOffsetOfNode, target) {
+    if (splitNode) {
+      const lineBreakNode = new RTETextNode(generateUUID(), '\n', target);
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = target.children.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = target.children.slice(0, nodesSplitIndex);
+        const afterNodes = target.children.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target);
+      }
+      return lineBreakNode;
+    }
+  }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   * @param {RTETextBlock} target -
+   */
+  mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target) {
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', target, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+    }
+    target.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class BlockInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @param {RTETextBlock} target -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const beforeNodes = target.children;
+    const lineBreakNode = new RTETextNode(generateUUID(), '\n', target);
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target);
+    return lineBreakNode;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   * @param {RTETextBlock} target -
+   */
+  mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target) {
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(generateUUID(), '\n', target, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+    }
+    target.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
+  }
+}
+
+/**
+ * Insert a children before a existing children
+ *
+ * @example parent.apply(new InsertChildrenBeforeAction(existingChildren, newChildren, ...))
+ */
+class InsertChildrenBeforeAction extends ModifyContentAction {
+  constructor(referChildren, ...childrenToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_CHILDREN_BEFORE;
+    this.referChildren = referChildren;
+    this.childrenToBeInserted = childrenToBeInserted;
+  }
+}
+
+/**
+ * Split the block with a split point node.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class SplitBlockWithNodeAction extends ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode) {
+    super();
+    this.type = ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Insert a image block into the text block at special position strategy.
+ */
+class BlockInsertImageIntoTextStrategy extends ActionHandleStrategy {
+  /**
+   * insertImage
+   *
+   * @param {InsertImageToBlockAction} action - Insert image action instance.
+   * @param {RTETextBlock} target - The text block.
+   */
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    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 {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class BlockTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * This method will create a empty list block and append all selected blocks as list item block.
+   *
+   * @param {TransformListAction} action - The transform list action instance.
+   * @param {RTETextBlock} target - The first item of the selected block.
+   */
+  handleAction(action, target) {
+    const contentState = target.parent;
+    const bulletList = contentState.createList(action.listType);
+    const selectedBlocks = action.selectedBlocks;
+    const listItems = selectedBlocks.map((block) => contentState.toListItem(block));
+    bulletList.apply(new AppendChildrenAction(listItems));
+    contentState.apply(new InsertChildrenAfterAction(action.selectedBlocks[0], bulletList));
+    selectedBlocks.forEach((block) => {
+      block.parent.apply(new RemoveChildrenAction(block));
+    });
+  }
+}
+
+/**
+ * Action to toggle block horizontal alignment annotation
+ */
+class HorizontalAlignmentAnnotationAction extends AnnotationAction {
+  constructor(textAlign) {
+    super();
+    this.isFlushable = true;
+    this.textAlign = textAlign;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {HorizontalAlignmentAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new HorizontalAlignmentAnnotation(this.textAlign);
+  }
+}
+
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+class BlockUpdateHorizontalAlignmentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the horizontal alignment of a block requires cascading updates to the custom style.
+   *
+   * @param {HorizontalAlignmentAnnotationAction} _action - The horizontal alignment annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['textAlign']);
+  }
+}
+
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+class BlockUpdateIndentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the indent of a block requires cascading updates to the custom style.
+   *
+   * @param {IndentAnnotationAction} _action - The indent annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['marginLeft']);
+  }
+}
+
+/**
+ * Action to toggle block indent annotation
+ */
+class IndentAnnotationAction extends AnnotationAction {
+  constructor(indent) {
+    super();
+    this.isFlushable = true;
+    this.indent = indent;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
+   */
+  toAnnotation() {
+    return new IndentAnnotation(this.indent);
+  }
+}
+
+/**
+ * Unlink the text block link group annotation strategy.
+ */
+class BlockUnlinkLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Unlink the link group based on group key
+   *
+   * @param {UnlinkLinkGroupAction} action - The unlink link group action instance.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    const linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      if (linkGroupAnnotation.linkGroups.size > 1) {
+        linkGroupAnnotation.linkGroups.delete(action.groupKey);
+      }
+      else {
+        target.annotationMap.delete(InternalAnnotationTypeEnum.LINK_GROUP);
+      }
+    }
+  }
+}
+
+/**
+ * Text block
+ */
+class RTETextBlock extends RTEBlock {
+  constructor(id, type, options) {
+    super(id);
+    this.children = [];
+    this.type = type;
+    const { autoMatchFormat } = options || { autoMatchFormat: true };
+    if (autoMatchFormat) {
+      if (RTETextBlock.isAcceptableTextStyle(type)) {
+        this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+      }
+      else {
+        this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+      }
+    }
+  }
+  /**
+   * Converts a VegaRTETextBlock into an RTETextBlock.
+   *
+   * @param {VegaRTETextBlock} block - The block object
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
+   * @returns {RTETextBlock} A RTETextBlock class
+   */
+  static from(block, options = { autoMatchFormat: true }) {
+    var _a, _b;
+    const textBlock = new RTETextBlock(block.id, block.type, options);
+    const annotations = options.autoMatchFormat
+      ? Object.assign(Object.assign({}, block.annotations), { textStyle: (_b = (_a = block.annotations) === null || _a === void 0 ? void 0 : _a.textStyle) !== null && _b !== void 0 ? _b : textBlock.type }) : block.annotations;
+    textBlock.children = block.nodes
+      .map((richText) => {
+      const NodeClass = RTEDTOClassManager$1.getRTENodeClass(richText.type);
+      if (NodeClass) {
+        return NodeClass.from(richText, textBlock, options);
+      }
+    })
+      .filter(isNonNullable);
+    if (annotations) {
+      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
+    }
+    return textBlock;
+  }
+  /**
+   * 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) {
+    if (type === 'textStyle') {
+      return TextStyleAnnotation.from(value);
+    }
+    else {
+      return super.createAnnotationEntity(type, value);
+    }
+  }
+  /**
+   * Checks if a given text block type is one of the acceptable text styles.
+   *
+   * @param {VegaRTETextBlockType} type - The text block type
+   * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
+   */
+  static isAcceptableTextStyle(type) {
+    return [
+      'title',
+      'subtitle',
+      'paragraph',
+      'heading-1',
+      'heading-2',
+      'heading-3',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+    ].includes(type);
+  }
+  /**
+   * Merges RTETextNode nodes based on certain conditions.
+   *
+   * @param {AnnotationAction} action - AnnotationAction
+   */
+  mergeNodes(action) {
+    this.children = this.children.reduce((prev, cur) => {
+      const lastNode = prev.at(-1);
+      if (action instanceof LinkAnnotationAction && action.needMergeNode) {
+        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        if (lastNodeLinkAnnotation &&
+          curNodeLinkAnnotation &&
+          lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
+          return prev;
+        }
+      }
+      // TODO: handle other cases like merge bold nodes
+      return [...prev, cur];
+    }, []);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.children.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString();
+    const nodesHtml = this.getChildrenHtml();
+    return super.shouldRenderAsInternalWrapper()
+      ? nodesHtml
+      : [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
+  }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTETextBlock} New block
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTETextBlock(generateUUID(), this.type);
+    block.annotationMap = super.cloneAnnotations();
+    block.apply(new AppendChildrenAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETextBlock(this.id, this.type);
+    clonedBlock.children = this.children.map((node) => node.clone(clonedBlock));
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((node) => !node.isEmpty());
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * Get the HTML tag for the block based on its type.
+   *
+   * @returns {RTETextBlockTagType} The HTML tag for the block.
+   */
+  getBlockTag() {
+    switch (this.type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'heading-4':
+        return `h4`;
+      case 'heading-5':
+        return `h5`;
+      case 'heading-6':
+        return `h6`;
+      case 'paragraph':
+      default:
+        return 'p';
+    }
+  }
+  /**
+   * Get the HTML string for the children nodes, including handling link group annotations.
+   *
+   * @returns {string} The HTML string representing the children nodes.
+   */
+  getChildrenHtml() {
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    let nodesHtml = this.children.map((node) => node.toHtml()).join('');
+    if (linkGroupAnnotation && this.children.length > 0) {
+      nodesHtml = this.generateLinkHtml(linkGroupAnnotation, nodesHtml);
+    }
+    return nodesHtml;
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, RTETextBlock.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+  /**
+   * Generate Link Html
+   *
+   * @param {LinkGroupAnnotation} linkGroupAnnotation - linkGroupAnnotation
+   * @param {string} nodesHtml - The nodes html
+   * @returns {string} link html
+   */
+  generateLinkHtml(linkGroupAnnotation, nodesHtml) {
+    nodesHtml = '';
+    let linkGroupNodes = [];
+    for (let i = 0; i < this.children.length; i++) {
+      const currentLinkAnnotation = this.children[i].getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+      const nextLinkAnnotation = this.children[i + 1]
+        ? this.children[i + 1].getAnnotationByType(NodeAnnotationTypeEnum.LINK)
+        : null;
+      if (currentLinkAnnotation) {
+        linkGroupNodes.push(this.children[i]);
+        if (!nextLinkAnnotation ||
+          currentLinkAnnotation.link.groupKey !== nextLinkAnnotation.link.groupKey) {
+          const linkAttributes = linkGroupAnnotation.toString(currentLinkAnnotation, {
+            standalone: true,
+          });
+          nodesHtml += [
+            `<a${linkAttributes ? ` ${linkAttributes}` : ''}>`,
+            linkGroupNodes.map((linkNode) => linkNode.toHtml()).join(''),
+            `</a>`,
+          ].join('');
+          linkGroupNodes = [];
+        }
+      }
+      else {
+        nodesHtml += this.children[i].toHtml();
+      }
+    }
+    return nodesHtml;
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTETextBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(HorizontalAlignmentAnnotationAction.name, RTETextBlock.name, new BlockUpdateHorizontalAlignmentStrategy());
+  ActionHandleStrategyRegistry.register(IndentAnnotationAction.name, RTETextBlock.name, new BlockUpdateIndentStrategy());
+  ActionHandleStrategyRegistry.register(LinkGroupAnnotationAction.name, RTETextBlock.name, new BlockUpdateLinkGroupStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UNLINK_LINK_GROUP, RTETextBlock.name, new BlockUnlinkLinkGroupStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTETextBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTETextBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTETextBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTETextBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTETextBlock.name, new BlockTransformToListStrategy());
+})();
+
+/**
+ * The delete node content contains some common functions that used for image block delete the image node or text block delete text node.
+ */
+class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
+  /**
+   * Returns the previous node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the previous block last node
+   */
+  getPreviousNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    if (currentIndex > 0) {
+      return currentBlock.children[currentIndex - 1];
+    }
+    else if (currentBlock.parent) {
+      const previousBlock = this.getPreviousBlock(currentBlock);
+      if (previousBlock) {
+        return this.getBlockLastNode(previousBlock);
+      }
+    }
+  }
+  /**
+   * Returns the next node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the next block first node
+   */
+  getNextNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    if (currentBlock.children[currentIndex + 1]) {
+      return currentBlock.children[currentIndex + 1];
+    }
+    else if (currentBlock.parent) {
+      const nextBlock = this.getNextBlock(currentBlock);
+      if (nextBlock) {
+        return this.getBlockFirstNode(nextBlock);
+      }
+    }
+  }
+  /**
+   * Determines if a given node is the first node within the current state.
+   *
+   * @param {RTENode} currentNode - An object representing a node in a rich text editor (RTE).
+   * @returns {boolean} True or false;
+   */
+  isContentFirstNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    const parent = currentBlock.parent;
+    if (currentBlock.isListItemBlock()) {
+      const listParent = parent.parent;
+      return (currentIndex === 0 &&
+        Array.isArray(parent.children) &&
+        parent.children[0] === currentBlock &&
+        listParent['type'] !== 'list-item' &&
+        Array.isArray(listParent.children) &&
+        listParent.children[0] === parent);
+    }
+    else {
+      return (currentIndex === 0 && Array.isArray(parent.children) && parent.children[0] === currentBlock);
+    }
+  }
+  /**
+   * TODO: The getPreviousBlock add nest list support
+   * This function retrieves the previous block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the previous block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The previous block if existing
+   */
+  getPreviousBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.children) {
+      const currentBlockIndex = currentBlock.parent.children.indexOf(currentBlock);
+      if (currentBlockIndex > 0) {
+        return currentBlock.parent.children[currentBlockIndex - 1];
+      }
+      else if (this.isRTEBlock(currentBlock.parent) && currentBlockIndex === 0) {
+        return this.getPreviousBlock(currentBlock.parent);
+      }
+    }
+  }
+  /**
+   * Returns the last node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the last node within that block.
+   * @returns {Nullable<RTENode>} Returns the last node of the given `currentBlock` object.
+   */
+  getBlockLastNode(currentBlock) {
+    return currentBlock.getLastNode();
+  }
+  /**
+   * Returns the first node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the first node within that block.
+   * @returns {Nullable<RTENode>} Returns the first node of the given `currentBlock` object.
+   */
+  getBlockFirstNode(currentBlock) {
+    if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
+      if (currentBlock.children) {
+        const firstListItem = currentBlock.children[0];
+        return this.getBlockFirstNode(firstListItem);
+      }
+    }
+    else {
+      if (currentBlock.children) {
+        return currentBlock.children[0];
+      }
+    }
+  }
+  /**
+   * This function retrieves the next block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the next block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The next block if existing
+   */
+  getNextBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.children) {
+      const currentBlockIndex = currentBlock.parent.children.indexOf(currentBlock);
+      if (currentBlock.parent.children[currentBlockIndex + 1]) {
+        return currentBlock.parent.children[currentBlockIndex + 1];
+      }
+      else if (currentBlock.type === 'list-item' &&
+        currentBlock.parent.children.length === currentBlockIndex + 1) {
+        return this.getNextBlock(currentBlock.parent);
+      }
+    }
+  }
+  /**
+   * Checks if the given instance is not the root content block.
+   *
+   * @param {RTEBlock | VegaRTEContent} block - The instance to check.
+   * @returns {boolean} True if the block is not the root content block, false otherwise.
+   */
+  isRTEBlock(block) {
+    return block && block.constructor.name !== 'VegaRTEContent';
+  }
+}
+
+/**
+ * Remove the code block from the value, call this action if want to flush value after action.
+ */
+class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const node = target.children[0];
+    const parent = target.parent;
+    if (parent) {
+      let focusNode = this.getPreviousNode(node);
+      let offset = this.getRTENodeEndOffset(focusNode);
+      if (!focusNode) {
+        focusNode = this.getNextNode(node);
+        offset = 0;
+      }
+      parent.apply(new RemoveChildrenAction(target));
+      const focusElement = focusNode
+        ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
+        : null;
+      if (parent.children.length === 0) {
+        const defaultParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildrenAction([defaultParagraph]));
+        focusNode = defaultParagraph.children[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
+  }
+  /**
+   * Update the rich text next selection range.
+   *
+   * @param {RTENode} focusNode - The next focus node dto.
+   * @param {Nullable<HTMLElement>} focusElement - The next focus element. The update selection task could run directly when the element is exist.
+   * @param {number} offset - The next focus text offset.
+   * @param {RTECodeBlock} target - The code block dto.
+   */
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
+    }
+  }
+  /**
+   * Get the node content end offset.
+   *
+   * @param {Nullable<RTENode>} node - The RTENode.
+   * @returns {number} - The number value.
+   */
+  getRTENodeEndOffset(node) {
+    if (node) {
+      return node.getRangeEndOffset();
+    }
+    return 0;
+  }
+}
+
+/**
+ * Update the code block content or language action.
+ *
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
+ */
+class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}
+
+/**
+ * Remove the line break and insert new paragraph after code block.
+ */
+class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    const textArray = content.split('\n');
+    const updateAction = new UpdateCodeBlockAction(textArray.slice(0, textArray.length - 2).join('\n'), language);
+    updateAction.isFlushable = false;
+    target.children[0].apply(updateAction);
+    const textBlock = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), text: '', type: 'text' }],
+    });
+    target.parent.apply(new InsertChildrenAfterAction(target, textBlock));
+    // Focus the next text node after value update.
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: textBlock.children[0] });
+      }
+    }
+  }
+}
+
+/**
+ * Update the language or content of code block strategy.
+ */
+class UpdateCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
+  }
+}
+
+/**
+ * Action to change the selection range
+ */
+class SelectionChangeAction extends AnnotationAction {
+  constructor(range) {
+    super();
+    this.isFlushable = false;
+    this.range = range;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {SelectionRangeAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new SelectionRangeAnnotation(this.range);
+  }
+}
+
+/**
+ * Update the code block node annotation map strategy.
+ */
+class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.annotationMap.set(InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
+  }
+}
+
+/**
+ * Abstract class for decorator nodes. A decorator node modifies content like an image node that will delete the whole node when the delete button is pressed.
+ */
+class RTEDecoratorNode extends RTENode {
+  constructor() {
+    super(...arguments);
+    this.type = 'decorator-node';
+    this.isSelected = false;
+  }
+  /**
+   * Check the element is a decorator node container.
+   *
+   * @param {HTMLElement} element - The checked element.
+   * @returns {boolean} - The result of the check.
+   */
+  static isDecoratorNodeContainerElement(element) {
+    return element && element.classList.contains(RTEDecoratorNode.DECORATOR_CONTAINER_CLASS);
+  }
+  /**
+   * Get the decorator node element within the container.
+   *
+   * @param {HTMLElement} container - The container element.
+   * @returns {Nullable<HTMLElement>} - The decorator node element, if found.
+   */
+  static getDecoratorNodeElement(container) {
+    return container.querySelector(`.${RTEDecoratorNode.DECORATOR_NODE_CLASS}`);
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeEndOffset() {
+    return 1;
+  }
+  /**
+   * @inheritDoc
+   */
+  getRangeContainer() {
+    const element = this.getElementRef();
+    if (element) {
+      return findParent(element, `.${RTEDecoratorNode.DECORATOR_CONTAINER_CLASS}`);
+    }
+  }
+  /**
+   * The decorator node is not content editable from the outside.
+   *
+   * @returns {boolean} - Always returns false for decorator nodes.
+   */
+  isContentEditable() {
+    return false;
+  }
+}
+// CSS class names for the decorator node parent element
+RTEDecoratorNode.DECORATOR_CONTAINER_CLASS = 'v-internal-decorator-container';
+// CSS class names for the decorator node element
+RTEDecoratorNode.DECORATOR_NODE_CLASS = 'v-internal-decorator-node';
+
+/**
+ * RTE code node DTO class.
+ */
+class RTECodeBlockNode extends RTEDecoratorNode {
+  constructor(id, content, language, parentBlock) {
+    super(id);
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parent = parentBlock;
+    this.language = language;
+  }
+  /**
+   * The code node toJSON method will called internal.
+   *
+   * @returns {VegaRTECodeNode} - An object contains content property.
+   */
+  toJSON() {
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    return `<code style='box-sizing: border-box;color: rgba(var(--v-text-primary, 32, 54, 69, 1));text-align: left;font-family: "Roboto Mono";font-weight: 400;line-height: 22px;font-size: 16px;white-space: pre-wrap;min-height: 22px;tab-size: 2px;'>${this.text}</code>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const cloned = new RTECodeBlockNode(this.id, this.text, this.language, parent);
+    return cloned;
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
+})();
+
+/**
+ * Insert image behind after code block strategy.
+ */
+class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the RTE code block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertChildrenAfterAction(target, imageBlock));
+  }
+}
+
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["JavaScript"] = "js";
+  CodeLanguage["JSX"] = "jsx";
+  CodeLanguage["Plain Text"] = "plainText";
+  CodeLanguage["TypeScript"] = "ts";
+  CodeLanguage["TSX"] = "tsx";
+})(CodeLanguage || (CodeLanguage = {}));
+
+/**
+ * Remove the node from the text block or image block strategy.
+ */
+class RemoveChildrenStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the node or block from the parent.
+   * Remove the block if the block children is empty after delete the current element.
+   *
+   * @param {RemoveChildrenAction} action - The remove child action instance.
+   * @param {RTEBlock | VegaRTEContent} target - The parent block of the node that will be removed.
+   */
+  handleAction(action, target) {
+    const arrayFixed = target.children;
+    target.children = arrayFixed.filter((node) => node !== action.entityToBeRemoved);
+    if (target.children.length === 0 && 'parent' in target && target.parent) {
+      if (!target.isListItemBlock()) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+      else if (!target.nestList || !target.nestList.length) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * The code block DTO class.
+ */
+class RTECodeBlock extends RTEBlock {
+  constructor(id, content, language) {
+    super(id);
+    this.type = 'code-block';
+    this.children = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
+  }
+  /**
+   * Converts a VegaRTECodeBlock into an RTECodeBlock.
+   *
+   * @param {VegaRTECodeBlock} block - The block object
+   * @returns {RTECodeBlock} A RTECodeBlock class
+   */
+  static from(block) {
+    return new RTECodeBlock(block.id, block.content, block.language);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const { language, text } = this.children[0];
+    return {
+      id: this.id,
+      type: 'code-block',
+      content: text,
+      language,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const { language = CodeLanguage['Plain Text'] } = this.children[0];
+    return `<pre data-language="${language}" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px">${this.children.map((node) => node.toHtml())}</pre>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const cloneCodeBlock = RTECodeBlock.from(this.toJSON());
+    cloneCodeBlock.parent = parent;
+    return cloneCodeBlock;
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {ModifyContentAction} action - modify content action.
+   */
+  apply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    }
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return !!this.children.length;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[0];
+  }
+  /**
+   * The code block is selected or not.
+   *
+   * @returns {boolean} - The boolean result.
+   */
+  isSelected() {
+    return this.children[0].annotationMap.has(InternalAnnotationTypeEnum.SELECTION_RANGE);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, RTECodeBlock.name, new RemoveChildrenStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
+})();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
+
+export { TextStyleAnnotation as $, ActionHandleStrategyRegistry as A, BlockAnnotation as B, CommonAnnotationTypeEnum as C, NodeAnnotationTypeEnum as D, RTEDecoratorNode as E, NodeTypeEnum as F, CommonAnnotation as G, HorizontalAlignmentAnnotationAction as H, InsertChildrenAfterAction as I, ReplaceChildNodesAction as J, SplitBlockWithNodeAction as K, BlockDeleteNodeContentStrategy as L, ModifyContentAction as M, NodeAnnotation as N, RemoveChildrenStrategy as O, BOLD_FONT_WEIGHT_KEYWORD as P, BOLD_FONT_WEIGHT as Q, RTEDTOClassManager$1 as R, SyncUpSelectionAction as S, TextStyleAnnotationAction as T, UpdateTextAction as U, VegaRTEPresetToolbarItems as V, RTE_TEXT_COLORS as W, RTE_DEFAULT_TEXT_COLOR as X, ITALIC_FONT_STYLE as Y, STRIKETHROUGH_TEXT_DECORATION as Z, UNDERLINE_TEXT_DECORATION as _, ActionHandlerInterceptorRegistry as a, HorizontalAlignmentAnnotation as a0, CodeAnnotation as a1, LinkGroupAnnotation as a2, CodeLanguage as a3, ZERO_WIDTH_SPACE as a4, LinkAnnotationAction as a5, UpdateCodeBlockAction as a6, SelectionChangeAction as a7, TextColorAnnotationAction as a8, RTECodeBlockNode as a9, BoldAnnotationAction as aa, ItalicAnnotationAction as ab, UnderlineAnnotationAction as ac, BoldAnnotation as ad, ClearFormattingAnnotationAction as ae, CodeAnnotationAction as af, StrikethroughAnnotationAction as ag, IndentAnnotationAction as ah, RTETextNode as b, RTEBlock as c, RTETextBlock as d, RTEAnnotationStyle as e, ActionHandleStrategy as f, AppendChildrenAction as g, RTENode as h, InsertChildrenBeforeAction as i, InternalAnnotationTypeEnum as j, ModifyContentActionType as k, AnnotationAction as l, RemoveChildrenAction as m, CustomAttributeAnnotation as n, BlockUpdateTextStyleStrategy as o, BlockUpdateHorizontalAlignmentStrategy as p, BlockInsertLineBreakStrategy as q, BlockInsertLineBreakWithBlocksStrategy as r, stateEntityRenderingRegistry as s, BlockSplitWithTextNodeStrategy as t, BlockReplaceNodesStrategy as u, BlockMergeNodesStrategy as v, BlockAnnotationTypeEnum as w, CustomStyleAnnotation as x, CustomClassAnnotation as y, RTECodeBlock as z };