@globalpayments/vega 2.57.1 → 2.59.0

package/dist/cjs/{code-block-7650c868.js → code-block-4bfae76d.js}

@@ -1,12 +1,15 @@
 'use strict';
 
-const typeGuard = require('./type-guard-aa8fdeaf.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda08efa.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
+const vegaInternalEventId = require('./vega-internal-event-id-ae6e2c13.js');
+const string = require('./string-39438062.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const typeGuard = require('./type-guard-aa8fdeaf.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-const darkModeStyleController = require('./dark-mode-style-controller-f9a32d68.js');
+const darkModeStyleController = require('./dark-mode-style-controller-ab0703e1.js');
+const object = require('./object-e2e28e3d.js');
+const ui = require('./ui-4ce1fa08.js');
 
 exports.InternalAnnotationTypeEnum = void 0;
 (function (InternalAnnotationTypeEnum) {
@@ -25,6 +28,8 @@ exports.BlockAnnotationTypeEnum = void 0;
   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.
@@ -39,16 +44,23 @@ 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} entity The entity to register.
+   * @param {RTEBlock | RTENode | VegaRTEContent} entity The entity to register.
    */
   register(dom, entity) {
-    this.domToEntity.set(dom, entity);
-    this.entityToDOM.set(entity, dom);
+    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.
@@ -66,7 +78,12 @@ class StateEntityRenderingRegistry {
    * @returns {Nullable<HTMLElement>} The DOM element corresponding to the entity, or null if not found.
    */
   getDOMByEntity(entity) {
-    return this.entityToDOM.get(entity);
+    if (!this.isVegaRTEContent(entity)) {
+      return this.entityToDOM.get(entity);
+    }
+    else {
+      return this.contentEntityToRootDom.get(entity);
+    }
   }
   /**
    * Delete the dirty element to entity ref.
@@ -77,25 +94,46 @@ class StateEntityRenderingRegistry {
   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_CHILD"] = "DELETE_CHILD";
+  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_CHILD_NODES"] = "APPEND_CHILD_NODES";
-  ModifyContentActionType["INSERT_BLOCKS_AFTER"] = "INSERT_BLOCKS_AFTER";
-  ModifyContentActionType["INSERT_BLOCKS_BEFORE"] = "INSERT_BLOCKS_BEFORE";
-  ModifyContentActionType["INSERT_NODES_AFTER"] = "INSERT_NODES_AFTER";
-  ModifyContentActionType["INSERT_NODES_BEFORE"] = "INSERT_NODES_BEFORE";
+  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["BREAK_SINGLE_BLOCK"] = "BREAK_SINGLE_BLOCK";
+  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";
@@ -107,6 +145,11 @@ exports.ModifyContentActionType = void 0;
   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";
 })(exports.ModifyContentActionType || (exports.ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -117,6 +160,116 @@ class ModifyContentAction {
   }
 }
 
+/**
+ * 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, []]]);
+  }
+  clone() {
+    const clonedAnnotation = new LinkGroupAnnotation('');
+    this.linkGroups.forEach((nodes, key) => {
+      clonedAnnotation.linkGroups.set(key, nodes.map((node) => node.clone()));
+    });
+    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, options);
+    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) {
+      linkStyle.color = 'rgba(var(--v-text-link, 19, 98, 226, 1))';
+    }
+    return linkStyle;
+  }
+  /**
+   * Get the custom attribute for the annotation
+   *
+   * @param {LinkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - Render context options.
+   * @returns {Record<string, string>} Link attributes
+   */
+  getAttribute(linkAnnotation, options) {
+    var _a;
+    const { href, customAttribute = {} } = linkAnnotation.link;
+    const autoMatchFormat = (_a = options === null || options === void 0 ? void 0 : options.autoMatchFormat) !== null && _a !== void 0 ? _a : true;
+    const target = customAttribute.target || (autoMatchFormat ? '_blank' : '');
+    return Object.assign(Object.assign(Object.assign({}, customAttribute), (href ? { href } : autoMatchFormat ? { 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
  */
@@ -146,12 +299,20 @@ class HorizontalAlignmentAnnotation extends BlockAnnotation {
     };
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {string} - Annotation class
+   * @inheritDoc
    */
-  renderClass() {
-    return `v-rte--horizontal-alignment-${this.textAlign}`;
+  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
@@ -160,12 +321,20 @@ class HorizontalAlignmentAnnotation extends BlockAnnotation {
     return new HorizontalAlignmentAnnotation(this.textAlign);
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   * @inheritDoc
    */
-  render() {
-    return null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    switch (this.textAlign) {
+      case 'right':
+      case 'center':
+      case 'justify':
+        return { textAlign: this.textAlign };
+      case 'left':
+      default:
+        return { textAlign: 'left' };
+    }
   }
 }
 
@@ -201,13 +370,19 @@ class IndentAnnotation extends BlockAnnotation {
   clone() {
     return new IndentAnnotation(this.indent);
   }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return null;
+  }
   /**
    * Generate the style for the annotation
    *
    * @returns {Nullable<AnnotationStyle>} - Annotation style
    */
-  render() {
-    return this.indent > 0 ? { 'margin-left': `${this.indent * 16}px` } : null;
+  renderStyle() {
+    return this.indent > 0 ? { marginLeft: `${this.indent * 16}px` } : null;
   }
 }
 
@@ -266,6 +441,259 @@ class ActionHandleStrategyRegistry {
 }
 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;
+  }
+}
+
 /**
  * Abstract class for block
  */
@@ -274,6 +702,15 @@ class RTEBlock {
     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.`);
+  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -283,7 +720,7 @@ class RTEBlock {
    * @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<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
    * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
    */
   static createAnnotationEntity(type, value) {
@@ -292,6 +729,44 @@ class RTEBlock {
         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;
     }
   }
   /**
@@ -301,7 +776,7 @@ class RTEBlock {
    */
   toJSON() {
     const annotations = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof BlockAnnotation)
+      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CommonAnnotation)
       .reduce((record, annotation) => {
       return Object.assign(Object.assign({}, record), annotation.toJSON());
     }, {});
@@ -342,6 +817,61 @@ class RTEBlock {
   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 }) {
+    return Object.assign(Object.assign({}, Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof BlockAnnotation || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(typeGuard.isNonNullable)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {})), (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 styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join('');
+    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
    *
@@ -362,7 +892,9 @@ class RTEBlock {
    */
   applyAnnotationAction(action) {
     const annotation = action.toAnnotation();
-    this.annotationMap.set(annotation.type, annotation);
+    if (!(annotation instanceof LinkGroupAnnotation)) {
+      this.annotationMap.set(annotation.type, annotation);
+    }
     typeof this.doAnnotationActionApply === 'function' && this.doAnnotationActionApply(action);
   }
   /**
@@ -375,12 +907,32 @@ class RTEBlock {
   }
 }
 
-var NodeTypeEnum;
-(function (NodeTypeEnum) {
-  NodeTypeEnum["TEXT"] = "TEXT";
+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 {
+}
+
+exports.NodeTypeEnum = void 0;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
   NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
-})(NodeTypeEnum || (NodeTypeEnum = {}));
+})(exports.NodeTypeEnum || (exports.NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes
  */
@@ -392,6 +944,34 @@ class RTENode {
       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
    *
@@ -425,576 +1005,151 @@ class RTENode {
     return this;
   }
   /**
-   * apply annotation action or modify content action
-   *
-   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
-   */
-  doApply(action) {
-    if (action instanceof ModifyContentAction) {
-      this.doModifyActionApply(action);
-    }
-    else {
-      this.doAnnotationActionApply(action);
-    }
-  }
-  /**
-   * Flush the value change
-   */
-  flushChange() {
-    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
-    if (domNode) {
-      const nodeSubject = domNodeSubjectFactory.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()]));
-  }
-}
-
-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";
-})(exports.NodeAnnotationTypeEnum || (exports.NodeAnnotationTypeEnum = {}));
-/**
- * Abstract class for all annotations
- */
-class NodeAnnotation extends Annotation {
-}
-
-/**
- * Annotation for image
- */
-class ImageAnnotation extends NodeAnnotation {
-  constructor(size = 'md', alt) {
-    super();
-    this.type = exports.NodeAnnotationTypeEnum.IMAGE;
-    this.size = size;
-    this.alt = alt;
-  }
-  /**
-   * Generate the map item for the annotation
-   *
-   * @param {string} size - Image size
-   * @param {string} alt - Image alt
-   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
-   */
-  static from(size, alt) {
-    return [exports.NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
-  }
-  /**
-   * Generate the JSON representation of the annotation
+   * Get styles from annotations
    *
-   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
    */
-  toJSON() {
-    return typeGuard.isNonNullable(this.alt)
-      ? {
-        size: this.size,
-        alt: this.alt,
-      }
-      : {
-        size: this.size,
-      };
+  getStyles(options = { standalone: false }) {
+    const styles = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(Boolean);
+    return this.mergeAnnotationStyles(styles, ['textDecoration']);
   }
   /**
-   * @inheritDoc
-   */
-  clone() {
-    return new ImageAnnotation(this.size, this.alt);
-  }
-  /**
-   * Generate the style for the image
-   *
-   * @returns {Nullable<AnnotationStyle>} image style
-   */
-  render() {
-    switch (this.size) {
-      case 'sm': {
-        return { width: '25%' };
-      }
-      case 'md': {
-        return { width: '50%' };
-      }
-      case 'lg': {
-        return { width: '100%' };
-      }
-    }
-  }
-}
-
-/**
- * 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.
+   * Get classes from annotations
    *
-   * @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);
-  }
-  /**
-   * 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 start 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.
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
    */
-  isCaretPositionAtTextBlockStart(textBlock, node, startOffset) {
-    return node === textBlock.children[0] && startOffset === 0;
+  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(), '');
   }
   /**
-   * Checks if the caret position is at the start of a specified RTEImageNode.
+   * Get custom attribute annotation, excluding "class" and "style"
    *
-   * @param {RTEImageBlock} target - The image block.
-   * @param {RTEImageNode} node - `RTEImageNode` - 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 RTEImageNode.
+   * @returns {CustomAttributeAnnotation} - custom attribute annotation
    */
-  isCaretPositionAtImageBlockStart(target, node, startOffset) {
-    return node === target.children[0] && startOffset === 0;
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(exports.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
   }
   /**
-   * Checks if the caret position is at the end of a given RTEImageNode.
+   * Check if the node is a text node.
    *
-   * @param {RTEImageBlock} target - The image block.
-   * @param {RTEImageNode} node - `node` is a RTEImageNode
-   * @param {number} startOffset - The position within the `RTEImageNode` where the caret is located.
-   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEImageNode`.
+   * @returns {boolean} - True if the node is a text node, false otherwise.
    */
-  isCaretPositionAtImageBlockEnd(target, node, startOffset) {
-    const lastNode = target.children[target.children.length - 1];
-    return node === lastNode && startOffset === 1;
+  isTextNode() {
+    return false;
   }
-}
-
-/**
- * Update the image node annotation map strategy.
- */
-class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const annotation = action.toAnnotation();
-    target.annotationMap.set(annotation.type, annotation);
-  }
-}
-
-/**
- * The image node update property url strategy.
- */
-class ImageUpdateUrlStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    target.url = action.url;
-  }
-}
-
-/**
- * Abstract class for annotation actions
- */
-class AnnotationAction {
-}
-
-/**
- * Image node
- */
-class RTEImageNode extends RTENode {
-  constructor(id, url, parentBlock, annotationMap) {
-    super(id, annotationMap);
-    this.type = NodeTypeEnum.IMAGE;
-    this.url = url;
-    this.parent = parentBlock;
-  }
-  /**
-   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   * Generate attributes as string
    *
-   * @param {VegaRTEImageNode} node - The node to be converted.
-   * @param {RTEImageBlock} parentBlock - The parent block
-   * @returns {RTEImageNode} An instance of `RTEImageBlock`
-   */
-  static from(node, parentBlock) {
-    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
-    let annotations;
-    if (!node.annotations || Object.keys(node.annotations).length === 0) {
-      annotations = { size: 'md' };
-    }
-    else {
-      annotations = node.annotations;
-    }
-    imageNode.annotationMap = new Map(Object.keys(annotations)
-      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
-      .filter(typeGuard.isNonNullable));
-    return imageNode;
-  }
-  /**
-   * @inheritDoc
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
    */
-  toJSON() {
-    const imageAnnotation = this.annotationMap.get(exports.NodeAnnotationTypeEnum.IMAGE);
-    const annotations = {};
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
-      annotations.size = imageAnnotation.size;
-    }
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
-      annotations.alt = imageAnnotation.alt;
-    }
-    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  generateAttributeString(...attrs) {
+    var _a;
+    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join('');
+    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(' ')}` : '';
   }
   /**
-   * @inheritDoc
-   */
-  clone() {
-    return new RTEImageNode(this.id, this.url, this.parent, super.cloneAnnotations());
-  }
-  /**
-   * @inheritDoc
-   */
-  doAnnotationActionApply(action) {
-    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
-    if (strategy) {
-      strategy.execute(action, this);
-    }
-  }
-  /**
-   * @inheritDoc
-   */
-  doModifyActionApply(action) {
-    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
-  }
-}
-(() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
-  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
-})();
-
-/**
- * Delete child node or child block from the current list action
- *
- * @example needRemovedNode.parentBlock.apply(new RemoveChildAction(needRemovedNode))
- * @example needRemovedBlock.parent.apply(new RemoveChildAction(needRemovedBlock))
- */
-class RemoveChildAction extends ModifyContentAction {
-  constructor(childNode) {
-    super();
-    this.type = exports.ModifyContentActionType.DELETE_CHILD;
-    this.entityToBeRemoved = childNode;
-  }
-}
-
-/**
- * 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 ((currentBlock.parent['type'] === 'number-list' ||
-        currentBlock.parent['type'] === 'bullet-list') &&
-        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.
+   * apply annotation action or modify content action
    *
-   * @param {RTEBlock} currentBlock - Returns the first node within that block.
-   * @returns {Nullable<RTENode>} Returns the first node of the given `currentBlock` object.
+   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
    */
-  getBlockFirstNode(currentBlock) {
-    if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
-      if (currentBlock.children) {
-        const firstListItem = currentBlock.children[0];
-        return this.getBlockFirstNode(firstListItem);
-      }
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
     }
     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);
-      }
+      this.doAnnotationActionApply(action);
     }
   }
-}
-
-/** Append blocks or nodes to a block */
-class AppendChildNodesAction extends ModifyContentAction {
-  constructor(childNodes) {
-    super();
-    this.type = exports.ModifyContentActionType.APPEND_CHILD_NODES;
-    this.entityToBeAppended = childNodes;
-  }
-}
-
-/**
- * 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.
+   * Flush the value change
    */
-  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 AppendChildNodesAction(shouldMergeNodes));
-      anotherBlock.parent.apply(new RemoveChildAction(anotherBlock));
-    }
-  }
-}
-
-/**
- * Remove the node from the text block or image block strategy.
- */
-class BlockRemoveNodeStrategy extends ActionHandleStrategy {
+  flushChange() {
+    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (domNode) {
+      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
   /**
-   * Remove the text node from the parent text block or remove the image node from the parent image block.
-   * Remove the block if the block nodes is empty after delete the current node.
+   * Clones the annotations of the current RTETextNode.
    *
-   * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTEBlockWithNodes} target - The parent block of the node that will be removed.
+   * @returns {NodeAnnotations} A new Map containing cloned annotations.
    */
-  handleAction(action, target) {
-    const arrayFixed = target.children;
-    target.children = arrayFixed.filter((node) => node !== action.entityToBeRemoved);
-    if (target.children.length === 0 && target.parent) {
-      target.parent.apply(new RemoveChildAction(target));
-    }
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
   }
-}
-
-/**
- * Append the nodes to the text block or image block strategy.
- */
-class BlockAppendNodesStrategy extends ActionHandleStrategy {
+  /* istanbul ignore next */
   /**
-   * Append the text nodes to the text block or the image block.
+   * Placeholder for the method to be implemented in sub classes.
    *
-   * @param {AppendChildNodesAction} action - The remove child action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   * @param {AnnotationAction} action Annotation action
    */
-  handleAction(action, target) {
-    const nodesToBeAppended = action.entityToBeAppended;
-    nodesToBeAppended.forEach((node) => {
-      node.parent = target;
-    });
-    // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
-    const arrayFixed = target.children;
-    target.children = arrayFixed.concat(nodesToBeAppended);
+  doAnnotationActionApply(action) {
   }
-}
-
-/**
- * Remove all nodes and append new nodes strategy.
- */
-class BlockReplaceNodesStrategy extends ActionHandleStrategy {
+  /* istanbul ignore next */
   /**
-   * Empty the text block or image block nodes and add new nodes.
+   * Placeholder for the method to be implemented in sub classes.
    *
-   * @param {ReplaceChildNodesAction} action - The replace child nodes action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The text block or the image block.
+   * @param {ModifyContentAction} action ModifyContentAction
    */
-  handleAction(action, target) {
-    target.children = [];
-    target.apply(new AppendChildNodesAction(action.newChildNodes));
-  }
-}
-
-/**
- * Insert a new block after a existing block
- *
- * @example currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, newBlock, ...))
- */
-class InsertBlocksAfterAction extends ModifyContentAction {
-  constructor(referBlock, ...blocksToBeInserted) {
-    super();
-    this.type = exports.ModifyContentActionType.INSERT_BLOCKS_AFTER;
-    this.referBlock = referBlock;
-    this.blocksToBeInserted = 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;
+  doModifyActionApply(action) {
   }
-}
-
-/**
- * Insert a new block before a existing block
- *
- * @example currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, newBlock, ...))
- */
-class InsertBlocksBeforeAction extends ModifyContentAction {
-  constructor(referBlock, ...blocksToBeInserted) {
-    super();
-    this.type = exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE;
-    this.referBlock = referBlock;
-    this.blocksToBeInserted = blocksToBeInserted;
+  /**
+   * 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;
   }
 }
 
 /**
- * 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))
+ * Abstract class for annotation actions
  */
-class SplitBlockWithNodeAction extends ModifyContentAction {
-  constructor(splitPointNode, startOffsetOfNode) {
-    super();
-    this.type = exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
-    this.splitPointNode = splitPointNode;
-    this.startOffsetOfNode = startOffsetOfNode;
-  }
+class AnnotationAction {
 }
 
 /**
@@ -1064,20 +1219,20 @@ class StrikethroughAnnotation extends NodeAnnotation {
     return new StrikethroughAnnotation(this.strikethrough);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
-  renderClass() {
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
     return this.strikethrough ? 'v-rte--strikethrough' : null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   * @inheritDoc
    */
-  render() {
-    return null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.strikethrough ? { textDecoration: 'line-through' } : null;
   }
 }
 
@@ -1116,20 +1271,20 @@ class UnderlineAnnotation extends NodeAnnotation {
     return new UnderlineAnnotation(this.underline);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
-  renderClass() {
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
     return this.underline ? 'v-rte--underline' : null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   * @inheritDoc
    */
-  render() {
-    return null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.underline ? { textDecoration: 'underline' } : null;
   }
 }
 
@@ -1168,12 +1323,20 @@ class ItalicAnnotation extends NodeAnnotation {
     return new ItalicAnnotation(this.italic);
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Italic style
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.italic ? 'v-rte--italic' : null;
+  }
+  /**
+   * @inheritDoc
    */
-  render() {
-    return this.italic ? { 'font-style': 'italic' } : null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.italic ? { fontStyle: 'italic' } : null;
   }
 }
 
@@ -1212,12 +1375,20 @@ class BoldAnnotation extends NodeAnnotation {
     return new BoldAnnotation(this.bold);
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Bold style
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.bold ? 'v-rte--bold' : null;
+  }
+  /**
+   * @inheritDoc
    */
-  render() {
-    return this.bold ? { 'font-weight': '700' } : null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.bold ? { fontWeight: '700' } : null;
   }
 }
 
@@ -1225,19 +1396,21 @@ class BoldAnnotation extends NodeAnnotation {
  * Annotation to make text code
  */
 class CodeAnnotation extends NodeAnnotation {
-  constructor(code) {
+  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) {
-    return [exports.NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  static from(code, useInternalStyle) {
+    return [exports.NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code, useInternalStyle)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1253,32 +1426,38 @@ class CodeAnnotation extends NodeAnnotation {
    * @inheritDoc
    */
   clone() {
-    return new CodeAnnotation(this.code);
+    return new CodeAnnotation(this.code, this.useInternalStyle);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
-  renderClass() {
-    return this.code ? 'v-rte--code' : null;
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return this.code && this.useInternalStyle ? 'v-rte--code' : null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Bold style
+   * @inheritDoc
    */
-  render() {
-    return null;
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return this.code && this.useInternalStyle
+      ? {
+        fontFamily: 'Roboto Mono',
+        whiteSpace: 'pre-wrap',
+      }
+      : null;
   }
 }
 
+const RTE_DEFAULT_TEXT_COLOR = {
+  key: 'black',
+  light: '#111128',
+  dark: '#E3E3E8',
+};
 const RTE_TEXT_COLORS = [
-  {
-    key: 'black',
-    light: '#111128',
-    dark: '#E3E3E8',
-  },
+  RTE_DEFAULT_TEXT_COLOR,
   {
     key: 'gray',
     light: '#5E5E6D',
@@ -1342,19 +1521,15 @@ class TextColorAnnotation extends NodeAnnotation {
     return new TextColorAnnotation(this.textColor.key);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
   renderClass() {
     return null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   * @inheritDoc
    */
-  render() {
+  renderStyle() {
     return {
       color: darkModeStyleController.VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
     };
@@ -1374,22 +1549,21 @@ class TextColorAnnotation extends NodeAnnotation {
  * Annotation to make text a link
  */
 class LinkAnnotation extends NodeAnnotation {
-  constructor(link) {
+  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) {
-    return [
-      exports.NodeAnnotationTypeEnum.LINK,
-      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
-    ];
+  static from(link, useInternalStyle = true) {
+    return [exports.NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link, useInternalStyle)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1397,7 +1571,9 @@ class LinkAnnotation extends NodeAnnotation {
    * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
    */
   toJSON() {
-    return { link: { href: this.link.href, groupKey: this.link.groupKey } };
+    return {
+      link: this.link,
+    };
   }
   /**
    * @inheritDoc
@@ -1415,31 +1591,16 @@ class LinkAnnotation extends NodeAnnotation {
     return this.link.groupKey === annotation.link.groupKey;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} Link style
+   * @inheritDoc
    */
-  render() {
+  renderClass() {
     return null;
   }
-}
-
-/**
- * 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, []]]);
-  }
-  clone() {
-    const clonedAnnotation = new LinkGroupAnnotation('');
-    this.linkGroups.forEach((nodes, key) => {
-      clonedAnnotation.linkGroups.set(key, nodes.map((node) => node.clone()));
-    });
-    return clonedAnnotation;
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return null;
   }
 }
 
@@ -1447,11 +1608,12 @@ class LinkGroupAnnotation extends Annotation {
  * Action to link a group of nodes
  */
 class LinkGroupAnnotationAction extends AnnotationAction {
-  constructor(groupKey, nodes) {
+  constructor(groupKey, nodes, type) {
     super();
     this.isFlushable = false;
     this.groupKey = groupKey;
     this.nodes = nodes;
+    this.type = type;
   }
   /**
    * Converts the action to an annotation
@@ -1482,80 +1644,188 @@ class SyncUpSelectionAction extends AnnotationAction {
 }
 
 /**
- * Update the editor text node text content strategy.
+ * 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 NodeUpdateTextStrategy extends ActionHandleStrategy {
+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();
+  }
   /**
-   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   * Registers a new RTE DTO class.
    *
-   * @param {UpdateTextAction} action - The update text action instance.
-   * @param {RTETextNode} target - The text node instance which need update the text.
+   * @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.
    */
-  handleAction(action, target) {
-    target.text = action.newTextContent;
-    // The link node should unlink when delete all text
-    if (!target.text && target.annotationMap.has('LINK')) {
-      target.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
+  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}`);
     }
   }
-}
-
-/**
- * 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;
+  /**
+   * 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();
 
 /**
- * Replaces the rich text node selected text strategy.
+ * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
  */
-class NodeReplaceSelectedTextStrategy extends ActionHandleStrategy {
+class ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * 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.
    */
-  handleAction(action, target) {
-    this.replaceSelectedText(action.textToBeInsert, action.currentRange, target);
+  execute(action, target) {
+    globalSlimmerRegistry.LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
+    return this.handleAction(action, target);
   }
   /**
-   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   * Update the custom style annotation of a block or node
    *
-   * @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.
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
    */
-  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);
+  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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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 {
-        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);
+        return this.getRootContent(parent);
       }
-      target.apply(new UpdateTextAction(newText));
     }
   }
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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;
+  }
 }
 
 /**
@@ -1586,7 +1856,11 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
             return this.insertNewNode(startOffset, target);
           }
           if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
-            return this.splitTextNode(selectionRangeAnnotation.range, target);
+            const splittedTextNodes = this.splitTextNode(selectionRangeAnnotation.range, target);
+            if (item.annotationMap.has('LINK')) {
+              item.apply(new LinkGroupNodeSplitAction(splittedTextNodes));
+            }
+            return splittedTextNodes;
           }
           else {
             this.setApplyTargetNode(target);
@@ -1689,6 +1963,25 @@ class NodeSplitTextStrategy extends ActionHandleStrategy {
   }
 }
 
+/**
+ * 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
  */
@@ -1703,6 +1996,7 @@ class ClearFormattingAnnotation extends Annotation {
       exports.NodeAnnotationTypeEnum.STRIKETHROUGH,
       exports.NodeAnnotationTypeEnum.TEXT_COLOR,
       exports.NodeAnnotationTypeEnum.CODE,
+      exports.CommonAnnotationTypeEnum.CUSTOM_STYLE,
     ];
   }
 }
@@ -1763,16 +2057,36 @@ class DeleteNodeAnnotationAction extends AnnotationAction {
   }
 }
 
+/**
+ * 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, }) {
+  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;
     }
@@ -1787,6 +2101,44 @@ class LinkAnnotationAction extends TextSplittableAction {
   }
 }
 
+/**
+ * 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.
  */
@@ -1814,44 +2166,319 @@ class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
         if (typeGuard.isNonNullable(action.newText)) {
           target.text = action.newText;
         }
-        target.parent.apply(new LinkGroupAnnotationAction(action.link.groupKey, [target]));
+        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 { plainText: this.plainText };
+  }
+}
+
 /**
  * Text node
  */
 class RTETextNode extends RTENode {
   constructor(id, text, parentBlock, annotationMap) {
     super(id, annotationMap);
-    this.type = NodeTypeEnum.TEXT;
+    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) {
+  static from(richText, parentBlock, options = { autoMatchFormat: true }) {
     const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
     const { annotations } = richText;
     if (annotations) {
       textNode.annotationMap = new Map(Object.keys(annotations)
         .map((type) => {
-        if (annotations.link) {
-          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode]));
+        if (type === 'link' && annotations.link && parentBlock) {
+          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode], 'link'));
         }
-        return this.createAnnotationEntity(type, annotations[type]);
+        return this.createAnnotationEntity(type, annotations[type], options);
       })
         .filter(typeGuard.isNonNullable));
     }
@@ -1862,10 +2489,12 @@ class RTETextNode extends RTENode {
    *
    * @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) {
+  static createAnnotationEntity(type, value, options) {
+    const autoMatchFormat = !!(options && options.autoMatchFormat);
     switch (type) {
       case 'bold':
         return BoldAnnotation.from(value);
@@ -1876,24 +2505,40 @@ class RTETextNode extends RTENode {
       case 'strikethrough':
         return StrikethroughAnnotation.from(value);
       case 'code':
-        return CodeAnnotation.from(value);
+        return CodeAnnotation.from(value, autoMatchFormat);
       case 'textColor':
         return TextColorAnnotation.from(value);
       case 'link':
-        return LinkAnnotation.from(value);
+        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)
+      .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.
    *
@@ -1901,13 +2546,15 @@ class RTETextNode extends RTENode {
    * @returns {RTETextNode} An new RTETextNode
    */
   cloneWithText(text) {
-    return new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), text, this.parent, super.cloneAnnotations());
+    const cloned = new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), text, this.parent, super.cloneAnnotations());
+    return cloned;
   }
   /**
    * @inheritDoc
    */
   clone() {
-    return new RTETextNode(this.id, this.text, this.parent, super.cloneAnnotations());
+    const cloned = new RTETextNode(this.id, this.text, this.parent, super.cloneAnnotations());
+    return cloned;
   }
   /**
    * Checks if a node is empty
@@ -1917,13 +2564,67 @@ class RTETextNode extends RTENode {
   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 = stateEntityRenderingRegistry.getDOMByEntity(this);
+    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(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+      }
+      ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+      ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_LINK_GROUP, dtoClassName, new DeleteLinkGroupStrategy());
+      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, RTETextNode.name);
+      const splitStrategy = ActionHandleStrategyRegistry.get(TextSplittableAction.name, this.constructor.name);
       if (splitStrategy) {
         const newNode = splitStrategy.execute(action, this);
         if (newNode) {
@@ -1934,7 +2635,9 @@ class RTETextNode extends RTENode {
     else {
       this.applyActionToNode(this, action);
     }
-    this.parent.mergeNodes(action);
+    if (typeof this.parent.mergeNodes === 'function') {
+      this.parent.mergeNodes(action);
+    }
   }
   /**
    * @inheritDoc
@@ -1978,13 +2681,76 @@ class RTETextNode extends RTENode {
       }
     }
   }
+  /**
+   * 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;
+  }
 }
-(() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_TEXT, RTETextNode.name, new NodeUpdateTextStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_SELECTED_TEXT, RTETextNode.name, new NodeReplaceSelectedTextStrategy());
-  ActionHandleStrategyRegistry.register(TextSplittableAction.name, RTETextNode.name, new NodeSplitTextStrategy());
-  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTETextNode.name, new NodeUpdateAnnotationMapStrategy());
-})();
 
 /**
  * Text style annotation
@@ -2019,44 +2785,106 @@ class TextStyleAnnotation extends BlockAnnotation {
     return new TextStyleAnnotation(this.textStyle);
   }
   /**
-   * Render the styles by block type
-   *
-   * @returns {AnnotationStyle} the styles to apply
+   * @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
    */
-  render() {
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
     const paragraphStyle = {
       fontFamily: 'Inter',
       fontSize: '16px',
       lineHeight: '22px',
       fontWeight: '500',
+      marginTop: '0px',
+      marginBottom: '0px',
     };
     switch (this.textStyle) {
       case 'paragraph': {
         return paragraphStyle;
       }
       case 'title': {
-        return { fontFamily: 'Inter', fontSize: '36px', lineHeight: '40px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '36px',
+          lineHeight: '40px',
+          fontWeight: '500',
+        };
       }
       case 'subtitle': {
-        return { fontFamily: 'Inter', fontSize: '28px', lineHeight: '32px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '28px',
+          lineHeight: '32px',
+          fontWeight: '500',
+        };
       }
       case 'heading-1': {
-        return { fontFamily: 'Inter', fontSize: '22px', lineHeight: '24px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '22px',
+          lineHeight: '24px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
       case 'heading-2': {
-        return { fontFamily: 'Inter', fontSize: '20px', lineHeight: '24px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '20px',
+          lineHeight: '24px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
       case 'heading-3': {
-        return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '18px',
+          lineHeight: '22px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
       case 'heading-4': {
-        return { fontFamily: 'Inter', fontSize: '16px', lineHeight: '22px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '16px',
+          lineHeight: '22px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
       case 'heading-5': {
-        return { fontFamily: 'Inter', fontSize: '14px', lineHeight: '22px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '14px',
+          lineHeight: '22px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
       case 'heading-6': {
-        return { fontFamily: 'Inter', fontSize: '12px', lineHeight: '22px', fontWeight: '500' };
+        return {
+          fontFamily: 'Inter',
+          fontSize: '12px',
+          lineHeight: '22px',
+          fontWeight: '500',
+          marginTop: '0px',
+          marginBottom: '0px',
+        };
       }
     }
   }
@@ -2082,25 +2910,6 @@ class TextStyleAnnotationAction extends AnnotationAction {
   }
 }
 
-/**
- * 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);
-  }
-}
-
 /**
  * Update the text block text style strategy.
  */
@@ -2127,6 +2936,7 @@ class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(exports.NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }
 
@@ -2141,15 +2951,56 @@ class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
    * @param {RTETextBlock} target - The current text block.
    */
   handleAction(action, target) {
-    const linkGroupAnnotation = target.getAnnotationByType(exports.InternalAnnotationTypeEnum.LINK_GROUP);
-    if (linkGroupAnnotation) {
-      const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
-      linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+    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.
  */
@@ -2184,7 +3035,7 @@ class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
         }
         textBlock.apply(new ReplaceChildNodesAction(beforeNodes));
         const newBlock = textBlock.cloneWithNodes(afterNodes);
-        textBlock.parent.apply(new InsertBlocksAfterAction(textBlock, newBlock));
+        textBlock.parent.apply(new InsertChildrenAfterAction(textBlock, newBlock));
         return newBlock;
       }
     }
@@ -2192,52 +3043,54 @@ class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
 }
 
 /**
- * Insert new paragraph into current text block at special position.
+ * Remove all nodes and append new nodes strategy.
  */
-class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
+class BlockReplaceNodesStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * 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) {
-    action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset, target);
+    target.children = [];
+    target.apply(new AppendChildrenAction(action.newChildNodes));
   }
-  /**
-   * breakSingleTextBlock
-   *
-   * @param {RTETextNode} splitNode -
-   * @param {number} startOffsetOfNode -
-   * @param {RTETextBlock} target -
-   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
-   */
-  breakSingleTextBlock(splitNode, startOffsetOfNode, target) {
-    const newParagraph = this.copyInlineStyleToNewParagraph(splitNode, target);
-    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
-    }
-    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
-    }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
-    }
-    return newParagraph;
+}
+
+/**
+ * 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 {
   /**
-   * copyInlineStyleToNewParagraph
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
    *
-   * @param {RTETextNode} needCopedNode - The text node.
-   * @param {RTETextBlock} target - The text block.
-   * @returns {RTETextBlock} - The new paragraph.
+   * @param {MergeTwoBlocksNodesAction} action - The merge block nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The first text block or image block.
    */
-  copyInlineStyleToNewParagraph(needCopedNode, target) {
-    const textNode = needCopedNode.cloneWithText('');
-    // The link annotation don't need inherited
-    textNode.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
-    const newParagraph = target.createNewParagraph();
-    newParagraph.apply(new AppendChildNodesAction([textNode]));
-    return newParagraph;
+  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));
+    }
   }
 }
 
@@ -2330,7 +3183,7 @@ class BlockInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
     blocks.map((block) => {
       if (block.type !== 'image') {
         nodes.push(...block.children);
-        block.parent.apply(new RemoveChildAction(block));
+        block.parent.apply(new RemoveChildrenAction(block));
       }
     });
     return nodes;
@@ -2352,112 +3205,31 @@ class BlockInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
 }
 
 /**
- * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
+ * Insert a children before a existing children
  *
- * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
+ * @example parent.apply(new InsertChildrenBeforeAction(existingChildren, newChildren, ...))
  */
-class MergeTwoBlocksNodesAction extends ModifyContentAction {
-  constructor(blockNeedToBeMerged) {
+class InsertChildrenBeforeAction extends ModifyContentAction {
+  constructor(referChildren, ...childrenToBeInserted) {
     super();
-    this.type = exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
-    this.blockNeedToBeMerged = blockNeedToBeMerged;
+    this.type = exports.ModifyContentActionType.INSERT_CHILDREN_BEFORE;
+    this.referChildren = referChildren;
+    this.childrenToBeInserted = childrenToBeInserted;
   }
 }
 
 /**
- * The text block delete text content strategy.
+ * 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 BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.deleteNodeContent(action, target);
-  }
-  /**
-   * Handle the delete text logic when press delete key.
-   *
-   * @param {DeleteBlockContentAction} action - ModifyContentAction
-   * @param {RTETextBlock} target - Current text block
-   */
-  deleteNodeContent(action, target) {
-    const startContainerNode = action.startContainerNode;
-    const startOffset = action.startOffset;
-    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
-      const newText = startContainerNode.text.slice(0, startOffset - 1) +
-        startContainerNode.text.slice(startOffset);
-      startContainerNode.apply(new UpdateTextAction(newText));
-      if (newText) {
-        action.previousNode = startContainerNode;
-        return;
-      }
-      else {
-        const previousNode = this.getPreviousNode(startContainerNode);
-        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
-        if ((previousNode && previousNode.parent === target && previousNode['text'] === '\n') ||
-          target.children.length === 1) {
-          action.previousNode = startContainerNode;
-          return;
-        }
-        else {
-          target.apply(new RemoveChildAction(startContainerNode));
-          action.previousNode = previousNode;
-          return;
-        }
-      }
-    }
-    else {
-      let previousNode = this.getPreviousNode(startContainerNode);
-      let nextNode = null;
-      if (target.children.length && previousNode && previousNode.parent !== target) {
-        if (startContainerNode.isEmpty()) {
-          target.apply(new RemoveChildAction(startContainerNode));
-        }
-        if (target.type === previousNode.parent.type) {
-          previousNode.parent.apply(new MergeTwoBlocksNodesAction(target));
-        }
-      }
-      else {
-        if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
-          nextNode = this.getNextNode(startContainerNode);
-        }
-        /**
-         * Remove line break
-         *
-         * @example caret at the first line
-         * \n
-         * test
-         */
-        if (startContainerNode.isEmpty()) {
-          target.apply(new RemoveChildAction(startContainerNode));
-        }
-        /**
-         * Remove line break
-         *
-         * @example caret at the begin of second line
-         * \n
-         * test
-         */
-        if (previousNode instanceof RTETextNode && previousNode.isEmpty()) {
-          const shouldRemoveNode = previousNode;
-          previousNode = this.getPreviousNode(previousNode);
-          shouldRemoveNode.parent.apply(new RemoveChildAction(shouldRemoveNode));
-          if (!previousNode) {
-            nextNode = startContainerNode;
-          }
-        }
-      }
-      //Remove the paragraph block if the content is empty
-      if (target.children.length === 0) {
-        target.parent.apply(new RemoveChildAction(target));
-      }
-      if (previousNode) {
-        action.previousNode = previousNode;
-      }
-      else if (nextNode) {
-        action.nextNode = nextNode;
-      }
-    }
+class SplitBlockWithNodeAction extends ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode) {
+    super();
+    this.type = exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
   }
 }
 
@@ -2475,82 +3247,131 @@ class BlockInsertImageIntoTextStrategy extends ActionHandleStrategy {
     const splitNode = action.splitPointNode;
     const startOffsetOfNode = action.startOffsetOfNode;
     const newImageBlock = action.imageBlockToBeInserted;
-    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    if (this.isCaretPositionAtBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
     }
-    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(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 InsertBlocksAfterAction(target, newImageBlock));
+      target.parent.apply(new InsertChildrenAfterAction(target, newImageBlock));
     }
   }
 }
 
 /**
- * Replace the node with new node array strategy.
+ * 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 BlockReplaceNodeWithNodesStrategy extends ActionHandleStrategy {
+class BlockUpdateIndentStrategy extends ActionHandleStrategy {
   /**
-   * Replace the current node to the new node array.
+   * Updating the indent of a block requires cascading updates to the custom style.
    *
-   * @param {RTEBlock} target - The image block or the text block.
-   * @param {RTENode} referNode - The text node or the image node.
-   * @param {RTENode[]} newNodes - The array of the text node or the image node.
+   * @param {IndentAnnotationAction} _action - The indent annotation action.
+   * @param {RTETextBlock} target - The current text block.
    */
-  replaceNodeWithNodes(target, referNode, newNodes) {
-    if (target.children) {
-      newNodes.forEach((node) => {
-        node.parent = target;
-      });
-      target.children = target.children.flatMap((node) => {
-        if (node === referNode) {
-          return newNodes;
-        }
-        else {
-          return node;
-        }
-      });
-    }
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['marginLeft']);
   }
 }
 
 /**
- * Insert some text nodes at the before of the node strategy.
+ * Action to toggle block indent annotation
  */
-class BlockInsertNodesBeforeNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+class IndentAnnotationAction extends AnnotationAction {
+  constructor(indent) {
+    super();
+    this.isFlushable = true;
+    this.indent = indent;
+  }
   /**
-   * @inheritDoc
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
    */
-  handleAction(action, target) {
-    const referNode = action.referNode;
-    const nodes = [...action.nodesToBeInserted, referNode];
-    this.replaceNodeWithNodes(target, referNode, nodes);
+  toAnnotation() {
+    return new IndentAnnotation(this.indent);
   }
 }
 
 /**
- * Convert the selected blocks to list strategy.
+ * Unlink the text block link group annotation strategy.
  */
-class BlockTransformToListStrategy extends ActionHandleStrategy {
+class BlockUnlinkLinkGroupStrategy extends ActionHandleStrategy {
   /**
-   * This method will create a empty list block and append all selected blocks as list item block.
+   * Unlink the link group based on group key
    *
-   * @param {TransformListAction} action - The transform list action instance.
-   * @param {RTETextBlock} target - The first item of the selected block.
+   * @param {UnlinkLinkGroupAction} action - The unlink link group action instance.
+   * @param {RTETextBlock} target - The current text 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 AppendChildNodesAction(listItems));
-    contentState.apply(new InsertBlocksAfterAction(action.selectedBlocks[0], bulletList));
-    selectedBlocks.forEach((block) => {
-      block.parent.apply(new RemoveChildAction(block));
-    });
+    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);
+      }
+    }
   }
 }
 
@@ -2558,34 +3379,42 @@ class BlockTransformToListStrategy extends ActionHandleStrategy {
  * Text block
  */
 class RTETextBlock extends RTEBlock {
-  constructor(id, type) {
+  constructor(id, type, options) {
     super(id);
     this.children = [];
     this.type = type;
-    if (RTETextBlock.isAcceptableTextStyle(type)) {
-      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
-    }
-    else {
-      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+    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) {
-    const textBlock = new RTETextBlock(block.id, block.type);
-    const { annotations } = block;
-    textBlock.children = block.nodes.map((richText) => RTETextNode.from(richText, textBlock));
+  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) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (typeGuard.isNonNullable(item)) {
-          textBlock.annotationMap.set(...item);
-        }
-      });
+      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
     }
     return textBlock;
   }
@@ -2598,7 +3427,7 @@ class RTETextBlock extends RTEBlock {
    * @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<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * @returns {Nullable<BlockAnnotationsEntity>} The `createAnnotationEntity` function returns a nullable tuple containing a
    * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
    */
   static createAnnotationEntity(type, value) {
@@ -2655,16 +3484,31 @@ class RTETextBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.children.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml(options) {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString();
+    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, options);
+    }
+    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 {RTEBlock} New block
+   * @returns {RTETextBlock} New block
    */
   cloneWithNodes(nodes) {
     const block = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), this.type);
-    block.children = [];
-    block.apply(new AppendChildNodesAction(nodes));
+    block.annotationMap = super.cloneAnnotations();
+    block.apply(new AppendChildrenAction(nodes));
     return block;
   }
   /**
@@ -2694,12 +3538,31 @@ class RTETextBlock extends RTEBlock {
     return this.children[this.children.length - 1];
   }
   /**
-   * Create new empty paragraph.
-   *
-   * @returns {RTETextBlock} Paragraph.
-   */
-  createNewParagraph() {
-    return new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+   * 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';
+    }
   }
   /**
    * @inheritDoc
@@ -2710,24 +3573,193 @@ class RTETextBlock extends RTEBlock {
       strategy.execute(action, this);
     }
   }
+  /**
+   * Generate Link Html
+   *
+   * @param {LinkGroupAnnotation} linkGroupAnnotation - linkGroupAnnotation
+   * @param {string} nodesHtml - The nodes html
+   * @param {VegaRTETransformOptions} options - options
+   * @returns {string} link html
+   */
+  generateLinkHtml(linkGroupAnnotation, nodesHtml, options) {
+    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,
+            autoMatchFormat: options === null || options === void 0 ? void 0 : options.autoMatchFormat,
+          });
+          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.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());
+  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.BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertNewParagraphStrategy());
   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.DELETE_BLOCK_CONTENT, RTETextBlock.name, new BlockDeleteTextContentStrategy());
   ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTETextBlock.name, new BlockInsertNodesBeforeNodeStrategy());
   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 ((currentBlock.parent['type'] === 'number-list' ||
+        currentBlock.parent['type'] === 'bullet-list') &&
+        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);
+      }
+    }
+  }
+}
+
 /**
  * Remove the code block from the value, call this action if want to flush value after action.
  */
@@ -2745,7 +3777,7 @@ class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
         focusNode = this.getNextNode(node);
         offset = 0;
       }
-      parent.apply(new RemoveChildAction(target));
+      parent.apply(new RemoveChildrenAction(target));
       const focusElement = focusNode
         ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
         : null;
@@ -2755,7 +3787,7 @@ class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
           type: 'paragraph',
           nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
         });
-        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        target.parent.apply(new AppendChildrenAction([defaultParagraph]));
         focusNode = defaultParagraph.children[0];
         offset = 0;
       }
@@ -2830,7 +3862,7 @@ class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
       type: 'paragraph',
       nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), text: '', type: 'text' }],
     });
-    target.parent.apply(new InsertBlocksAfterAction(target, textBlock));
+    target.parent.apply(new InsertChildrenAfterAction(target, textBlock));
     // Focus the next text node after value update.
     const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
     if (currentNodeDom) {
@@ -2887,13 +3919,69 @@ class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
   }
 }
 
+/**
+ * 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 = stateEntityRenderingRegistry.getDOMByEntity(this);
+    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 RTENode {
+class RTECodeBlockNode extends RTEDecoratorNode {
   constructor(id, content, language, parentBlock) {
     super(id);
-    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.type = exports.NodeTypeEnum.CODE_BLOCK_NODE;
     this.text = '';
     this.annotationMap = new Map();
     this.text = content;
@@ -2908,6 +3996,12 @@ class RTECodeBlockNode extends RTENode {
   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
    */
@@ -2944,7 +4038,43 @@ class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
    */
   handleAction(action, target) {
     const imageBlock = action.imageBlockToBeInserted;
-    target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+    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));
+      }
+    }
   }
 }
 
@@ -2978,6 +4108,13 @@ class RTECodeBlock extends RTEBlock {
       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
    */
@@ -3028,7 +4165,7 @@ class RTECodeBlock extends RTEBlock {
 }
 (() => {
   ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  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());
 })();
@@ -3037,52 +4174,53 @@ RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element
 exports.ActionHandleStrategy = ActionHandleStrategy;
 exports.ActionHandleStrategyRegistry = ActionHandleStrategyRegistry;
 exports.AnnotationAction = AnnotationAction;
-exports.AppendChildNodesAction = AppendChildNodesAction;
+exports.AppendChildrenAction = AppendChildrenAction;
 exports.BlockAnnotation = BlockAnnotation;
-exports.BlockAppendNodesStrategy = BlockAppendNodesStrategy;
 exports.BlockDeleteNodeContentStrategy = BlockDeleteNodeContentStrategy;
-exports.BlockDeleteTextContentStrategy = BlockDeleteTextContentStrategy;
 exports.BlockInsertLineBreakStrategy = BlockInsertLineBreakStrategy;
 exports.BlockInsertLineBreakWithBlocksStrategy = BlockInsertLineBreakWithBlocksStrategy;
-exports.BlockInsertNodesBeforeNodeStrategy = BlockInsertNodesBeforeNodeStrategy;
 exports.BlockMergeNodesStrategy = BlockMergeNodesStrategy;
-exports.BlockRemoveNodeStrategy = BlockRemoveNodeStrategy;
-exports.BlockReplaceNodeWithNodesStrategy = BlockReplaceNodeWithNodesStrategy;
 exports.BlockReplaceNodesStrategy = BlockReplaceNodesStrategy;
 exports.BlockSplitWithTextNodeStrategy = BlockSplitWithTextNodeStrategy;
+exports.BlockUpdateHorizontalAlignmentStrategy = BlockUpdateHorizontalAlignmentStrategy;
 exports.BoldAnnotation = BoldAnnotation;
 exports.BoldAnnotationAction = BoldAnnotationAction;
 exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
 exports.CodeAnnotationAction = CodeAnnotationAction;
-exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
-exports.ImageAnnotation = ImageAnnotation;
-exports.IndentAnnotation = IndentAnnotation;
-exports.InsertBlocksAfterAction = InsertBlocksAfterAction;
-exports.InsertBlocksBeforeAction = InsertBlocksBeforeAction;
-exports.ItalicAnnotation = ItalicAnnotation;
+exports.CommonAnnotation = CommonAnnotation;
+exports.CustomAttributeAnnotation = CustomAttributeAnnotation;
+exports.CustomClassAnnotation = CustomClassAnnotation;
+exports.CustomStyleAnnotation = CustomStyleAnnotation;
+exports.HorizontalAlignmentAnnotationAction = HorizontalAlignmentAnnotationAction;
+exports.IndentAnnotationAction = IndentAnnotationAction;
+exports.InsertChildrenAfterAction = InsertChildrenAfterAction;
+exports.InsertChildrenBeforeAction = InsertChildrenBeforeAction;
+exports.ItalicAnnotationAction = ItalicAnnotationAction;
 exports.LinkAnnotationAction = LinkAnnotationAction;
-exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
 exports.ModifyContentAction = ModifyContentAction;
 exports.NodeAnnotation = NodeAnnotation;
 exports.RTEBlock = RTEBlock;
 exports.RTECodeBlock = RTECodeBlock;
 exports.RTECodeBlockNode = RTECodeBlockNode;
-exports.RTEImageNode = RTEImageNode;
+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.RemoveChildAction = RemoveChildAction;
+exports.RemoveChildrenAction = RemoveChildrenAction;
+exports.RemoveChildrenStrategy = RemoveChildrenStrategy;
 exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
 exports.SelectionChangeAction = SelectionChangeAction;
 exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
-exports.StrikethroughAnnotation = StrikethroughAnnotation;
+exports.StrikethroughAnnotationAction = StrikethroughAnnotationAction;
 exports.SyncUpSelectionAction = SyncUpSelectionAction;
 exports.TextColorAnnotation = TextColorAnnotation;
 exports.TextSplittableAction = TextSplittableAction;
 exports.TextStyleAnnotation = TextStyleAnnotation;
 exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
-exports.UnderlineAnnotation = UnderlineAnnotation;
+exports.UnderlineAnnotationAction = UnderlineAnnotationAction;
 exports.UpdateCodeBlockAction = UpdateCodeBlockAction;
 exports.UpdateTextAction = UpdateTextAction;
 exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;