@heartlandone/vega 2.78.0 → 2.80.0

package/dist/cjs/code-block-71a330a1.js

@@ -0,0 +1,4521 @@
+'use strict';
+
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a3a60da4.js');
+const vegaInternalEventId = require('./vega-internal-event-id-a1837fa2.js');
+const string = require('./string-39438062.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const typeGuard = require('./type-guard-d760850a.js');
+const misc = require('./misc-3d30df91.js');
+const darkModeStyleController = require('./dark-mode-style-controller-3a04af3d.js');
+const object = require('./object-b53e9416.js');
+const ui = require('./ui-9e8c9732.js');
+
+exports.InternalAnnotationTypeEnum = void 0;
+(function (InternalAnnotationTypeEnum) {
+  InternalAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  InternalAnnotationTypeEnum["CLEAR_FORMATTING"] = "CLEAR_FORMATTING";
+  InternalAnnotationTypeEnum["LINK_GROUP"] = "LINK_GROUP";
+})(exports.InternalAnnotationTypeEnum || (exports.InternalAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class Annotation {
+}
+
+exports.BlockAnnotationTypeEnum = void 0;
+(function (BlockAnnotationTypeEnum) {
+  BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
+  BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
+  BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
+  BlockAnnotationTypeEnum["INTERNAL_WRAPPER"] = "INTERNAL_WRAPPER";
+})(exports.BlockAnnotationTypeEnum || (exports.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();
+
+exports.ModifyContentActionType = void 0;
+(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";
+})(exports.ModifyContentActionType || (exports.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 = exports.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 `${string.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]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join(' ');
+  }
+}
+
+/**
+ * Annotation to make block with horizontal alignment
+ */
+class HorizontalAlignmentAnnotation extends BlockAnnotation {
+  constructor(textAlign) {
+    super();
+    this.type = exports.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 [exports.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 = exports.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 [exports.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 {
+        globalSlimmerRegistry.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();
+
+exports.CommonAnnotationTypeEnum = void 0;
+(function (CommonAnnotationTypeEnum) {
+  CommonAnnotationTypeEnum["CUSTOM_ATTRIBUTE"] = "CUSTOM_ATTRIBUTE";
+  CommonAnnotationTypeEnum["CUSTOM_CLASS"] = "CUSTOM_CLASS";
+  CommonAnnotationTypeEnum["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+})(exports.CommonAnnotationTypeEnum || (exports.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 = exports.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 [exports.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(typeGuard.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 = exports.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 [exports.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 = exports.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 [exports.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 = exports.BlockAnnotationTypeEnum.INTERNAL_WRAPPER;
+    this.internalWrapper = internalWrapper;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(internalWrapper) {
+    return [exports.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;
+  }
+}
+
+exports.NodeAnnotationTypeEnum = void 0;
+(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";
+})(exports.NodeAnnotationTypeEnum || (exports.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]) => `${string.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(typeGuard.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;
+  }
+}
+
+exports.NodeTypeEnum = void 0;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
+})(exports.NodeTypeEnum || (exports.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(typeGuard.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(exports.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(exports.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(typeGuard.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        changeManager.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(typeGuard.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 (typeGuard.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(exports.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.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(typeGuard.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(exports.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(exports.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(typeGuard.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 = exports.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 = exports.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 [exports.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 = exports.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 [exports.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 = exports.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 [exports.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 = exports.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 [exports.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 = exports.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 [exports.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 = exports.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 [exports.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: darkModeStyleController.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 = exports.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 [exports.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) {
+    globalSlimmerRegistry.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(exports.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: misc.generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: misc.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 = exports.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(exports.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 = exports.InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      exports.NodeAnnotationTypeEnum.BOLD,
+      exports.NodeAnnotationTypeEnum.ITALIC,
+      exports.NodeAnnotationTypeEnum.UNDERLINE,
+      exports.NodeAnnotationTypeEnum.STRIKETHROUGH,
+      exports.NodeAnnotationTypeEnum.TEXT_COLOR,
+      exports.NodeAnnotationTypeEnum.CODE,
+      exports.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 (typeGuard.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 (typeGuard.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 = exports.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 = exports.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 = exports.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 [exports.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: object.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(exports.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(exports.InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const currentGroupKey = target.annotationMap.get(exports.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(exports.InternalAnnotationTypeEnum.LINK_GROUP);
+        }
+      }
+    }
+    target.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
+  }
+}
+
+/**
+ * Annotation to make text as plain text
+ */
+class PlainTextAnnotation extends NodeAnnotation {
+  constructor(plainText) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.PLAIN_TEXT;
+    this.plainText = true;
+    this.plainText = plainText;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(plainText) {
+    return [exports.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 = exports.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(typeGuard.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(exports.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(misc.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(exports.ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
+        ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
+        ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+        ActionHandleStrategyRegistry.register(LinkAnnotationAction.name, dtoClassName, new NodeUpdateAnnotationMapStrategy());
+      }
+      ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+      ActionHandleStrategyRegistry.register(exports.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(exports.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.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(typeGuard.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(exports.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(exports.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 = exports.ModifyContentActionType.APPEND_CHILDREN;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
+/**
+ * Text style annotation
+ */
+class TextStyleAnnotation extends BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = exports.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 [exports.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(exports.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(exports.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(exports.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 = exports.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 = exports.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 = exports.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(misc.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(misc.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(misc.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(misc.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 = exports.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 = exports.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(exports.InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      if (linkGroupAnnotation.linkGroups.size > 1) {
+        linkGroupAnnotation.linkGroups.delete(action.groupKey);
+      }
+      else {
+        target.annotationMap.delete(exports.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(typeGuard.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(exports.NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(exports.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(misc.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(exports.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(exports.NodeAnnotationTypeEnum.LINK);
+      const nextLinkAnnotation = this.children[i + 1]
+        ? this.children[i + 1].getAnnotationByType(exports.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(exports.ModifyContentActionType.UNLINK_LINK_GROUP, RTETextBlock.name, new BlockUnlinkLinkGroupStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTETextBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTETextBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTETextBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTETextBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
+  ActionHandleStrategyRegistry.register(exports.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: misc.generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: misc.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.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 = exports.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: misc.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: misc.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.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(exports.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 ui.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 = exports.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(exports.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));
+  }
+}
+
+exports.CodeLanguage = void 0;
+(function (CodeLanguage) {
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["JavaScript"] = "js";
+  CodeLanguage["JSX"] = "jsx";
+  CodeLanguage["Plain Text"] = "plainText";
+  CodeLanguage["TypeScript"] = "ts";
+  CodeLanguage["TSX"] = "tsx";
+})(exports.CodeLanguage || (exports.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 = exports.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 = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.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(exports.InternalAnnotationTypeEnum.SELECTION_RANGE);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILDREN, RTECodeBlock.name, new RemoveChildrenStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
+})();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
+
+exports.ActionHandleStrategy = ActionHandleStrategy;
+exports.ActionHandleStrategyRegistry = ActionHandleStrategyRegistry;
+exports.ActionHandlerInterceptorRegistry = ActionHandlerInterceptorRegistry;
+exports.AnnotationAction = AnnotationAction;
+exports.AppendChildrenAction = AppendChildrenAction;
+exports.BOLD_FONT_WEIGHT = BOLD_FONT_WEIGHT;
+exports.BOLD_FONT_WEIGHT_KEYWORD = BOLD_FONT_WEIGHT_KEYWORD;
+exports.BlockAnnotation = BlockAnnotation;
+exports.BlockDeleteNodeContentStrategy = BlockDeleteNodeContentStrategy;
+exports.BlockInsertLineBreakStrategy = BlockInsertLineBreakStrategy;
+exports.BlockInsertLineBreakWithBlocksStrategy = BlockInsertLineBreakWithBlocksStrategy;
+exports.BlockMergeNodesStrategy = BlockMergeNodesStrategy;
+exports.BlockReplaceNodesStrategy = BlockReplaceNodesStrategy;
+exports.BlockSplitWithTextNodeStrategy = BlockSplitWithTextNodeStrategy;
+exports.BlockUpdateHorizontalAlignmentStrategy = BlockUpdateHorizontalAlignmentStrategy;
+exports.BlockUpdateTextStyleStrategy = BlockUpdateTextStyleStrategy;
+exports.BoldAnnotation = BoldAnnotation;
+exports.BoldAnnotationAction = BoldAnnotationAction;
+exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
+exports.CodeAnnotation = CodeAnnotation;
+exports.CodeAnnotationAction = CodeAnnotationAction;
+exports.CommonAnnotation = CommonAnnotation;
+exports.CustomAttributeAnnotation = CustomAttributeAnnotation;
+exports.CustomClassAnnotation = CustomClassAnnotation;
+exports.CustomStyleAnnotation = CustomStyleAnnotation;
+exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
+exports.HorizontalAlignmentAnnotationAction = HorizontalAlignmentAnnotationAction;
+exports.ITALIC_FONT_STYLE = ITALIC_FONT_STYLE;
+exports.IndentAnnotationAction = IndentAnnotationAction;
+exports.InsertChildrenAfterAction = InsertChildrenAfterAction;
+exports.InsertChildrenBeforeAction = InsertChildrenBeforeAction;
+exports.ItalicAnnotationAction = ItalicAnnotationAction;
+exports.LinkAnnotationAction = LinkAnnotationAction;
+exports.LinkGroupAnnotation = LinkGroupAnnotation;
+exports.ModifyContentAction = ModifyContentAction;
+exports.NodeAnnotation = NodeAnnotation;
+exports.RTEAnnotationStyle = RTEAnnotationStyle;
+exports.RTEBlock = RTEBlock;
+exports.RTECodeBlock = RTECodeBlock;
+exports.RTECodeBlockNode = RTECodeBlockNode;
+exports.RTEDTOClassManager = RTEDTOClassManager$1;
+exports.RTEDecoratorNode = RTEDecoratorNode;
+exports.RTENode = RTENode;
+exports.RTETextBlock = RTETextBlock;
+exports.RTETextNode = RTETextNode;
+exports.RTE_DEFAULT_TEXT_COLOR = RTE_DEFAULT_TEXT_COLOR;
+exports.RTE_TEXT_COLORS = RTE_TEXT_COLORS;
+exports.RemoveChildrenAction = RemoveChildrenAction;
+exports.RemoveChildrenStrategy = RemoveChildrenStrategy;
+exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
+exports.STRIKETHROUGH_TEXT_DECORATION = STRIKETHROUGH_TEXT_DECORATION;
+exports.SelectionChangeAction = SelectionChangeAction;
+exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
+exports.StrikethroughAnnotationAction = StrikethroughAnnotationAction;
+exports.SyncUpSelectionAction = SyncUpSelectionAction;
+exports.TextColorAnnotationAction = TextColorAnnotationAction;
+exports.TextStyleAnnotation = TextStyleAnnotation;
+exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
+exports.UNDERLINE_TEXT_DECORATION = UNDERLINE_TEXT_DECORATION;
+exports.UnderlineAnnotationAction = UnderlineAnnotationAction;
+exports.UpdateCodeBlockAction = UpdateCodeBlockAction;
+exports.UpdateTextAction = UpdateTextAction;
+exports.VegaRTEPresetToolbarItems = VegaRTEPresetToolbarItems;
+exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
+exports.stateEntityRenderingRegistry = stateEntityRenderingRegistry;