@globalpayments/vega 2.57.1 → 2.59.0

package/dist/esm/{code-block-7bd4cb87.js → code-block-3d519665.js}

@@ -1,10 +1,13 @@
-import { i as isNonNullable } from './type-guard-84b1f192.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-6374611f.js';
-import { a as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-4072659b.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-202655e7.js';
+import { b as VegaInternalRichTextEditorFlushChanges, c as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-b7c865de.js';
+import { c as camelToDashCase } from './string-a953eafc.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { i as isNonNullable } from './type-guard-84b1f192.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ea798fc8.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-3bbb32dc.js';
+import { c as cleanObject } from './object-66c37948.js';
+import { f as findParent } from './ui-c20be16d.js';
 
 var InternalAnnotationTypeEnum;
 (function (InternalAnnotationTypeEnum) {
@@ -23,6 +26,8 @@ var BlockAnnotationTypeEnum;
   BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
   BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
   BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
+  BlockAnnotationTypeEnum["INTERNAL_WRAPPER"] = "INTERNAL_WRAPPER";
 })(BlockAnnotationTypeEnum || (BlockAnnotationTypeEnum = {}));
 /**
  * BlockAnnotation is an abstract class that represents a block annotation.
@@ -37,16 +42,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.
@@ -64,7 +76,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.
@@ -75,25 +92,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();
 
 var ModifyContentActionType;
 (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";
@@ -105,6 +143,11 @@ var ModifyContentActionType;
   ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
   ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
   ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
+  ModifyContentActionType["UNLINK_LINK_GROUP"] = "UNLINK_LINK_GROUP";
+  ModifyContentActionType["LINK_GROUP_NODE_SPLIT"] = "LINK_GROUP_NODE_SPLIT";
+  ModifyContentActionType["DELETE_LINK_GROUP"] = "DELETE_LINK_GROUP";
+  ModifyContentActionType["UPDATE_CURSOR_POSITION"] = "UPDATE_CURSOR_POSITION";
+  ModifyContentActionType["INSERT_TEXT_TO_DECORATOR_NODE"] = "INSERT_TEXT_TO_DECORATOR_NODE";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -115,6 +158,116 @@ class ModifyContentAction {
   }
 }
 
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+  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 `${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]) => `${camelToDashCase(key)}: ${value};`)
+      .join(' ');
+  }
+}
+
 /**
  * Annotation to make block with horizontal alignment
  */
@@ -144,12 +297,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
@@ -158,12 +319,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' };
+    }
   }
 }
 
@@ -199,13 +368,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;
   }
 }
 
@@ -264,6 +439,259 @@ class ActionHandleStrategyRegistry {
 }
 ActionHandleStrategyRegistry.registry = new Map();
 
+var CommonAnnotationTypeEnum;
+(function (CommonAnnotationTypeEnum) {
+  CommonAnnotationTypeEnum["CUSTOM_ATTRIBUTE"] = "CUSTOM_ATTRIBUTE";
+  CommonAnnotationTypeEnum["CUSTOM_CLASS"] = "CUSTOM_CLASS";
+  CommonAnnotationTypeEnum["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+})(CommonAnnotationTypeEnum || (CommonAnnotationTypeEnum = {}));
+/**
+ * CommonAnnotation is an abstract class that represents common annotation for block and node.
+ */
+class CommonAnnotation extends Annotation {
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomAttributeAnnotation extends CommonAnnotation {
+  constructor(customAttribute) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE;
+    this.BOOLEAN_ATTRS = new Set([
+      'controls',
+      'disabled',
+      'checked',
+      'readonly',
+      'multiple',
+      'required',
+      'autoplay',
+      'muted',
+    ]);
+    this.customAttribute = customAttribute;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Record<string, string>} customizeAttribute - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, CustomAttributeAnnotation]} Map item for the annotation
+   */
+  static from(customizeAttribute) {
+    return [CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, new CustomAttributeAnnotation(customizeAttribute)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customAttribute: this.customAttribute,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomAttributeAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomAttributeAnnotation(this.customAttribute);
+  }
+  /**
+   * Generate the custom attribute of current element, excluding 'style' and 'class'
+   *
+   * @param {string[]} filterAttr - should filter these existed attrs
+   * @returns {string[]} - Custom attributes
+   */
+  toString(filterAttr = []) {
+    const filterAttrKeys = filterAttr.map((attr) => attr.split('=')[0]);
+    return Object.keys(this.customAttribute)
+      .map((key) => {
+      return !filterAttrKeys.includes(key) ? `${key}="${this.customAttribute[key]}"` : null;
+    })
+      .filter(isNonNullable);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @param {RTERenderCustomAttributes} options - should filter these certain attrs
+   * @returns {Record<string, string>} custom attribute
+   */
+  render(options = {}) {
+    var _a;
+    const customAttribute = Object.assign({}, this.customAttribute);
+    (_a = options.filterAttributes) === null || _a === void 0 ? void 0 : _a.forEach((attr) => delete customAttribute[attr]);
+    Object.keys(customAttribute).forEach((key) => {
+      if (this.BOOLEAN_ATTRS.has(key) && customAttribute[key] === '') {
+        customAttribute[key] = 'true';
+      }
+    });
+    return customAttribute;
+  }
+}
+
+/**
+ * Annotation to add custom class of element
+ */
+class CustomClassAnnotation extends CommonAnnotation {
+  constructor(customClass) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_CLASS;
+    this.customClass = customClass;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string[]} customClass - custom class annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_CLASS, CustomClassAnnotation]} Map item for the annotation
+   */
+  static from(customClass) {
+    return [CommonAnnotationTypeEnum.CUSTOM_CLASS, new CustomClassAnnotation(customClass)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customClass: this.customClass,
+    };
+  }
+  /**
+   * Create a new custom class annotation
+   *
+   * @returns {CustomClassAnnotation} - Custom class annotation
+   */
+  clone() {
+    return new CustomClassAnnotation(this.customClass);
+  }
+  /**
+   * Generate the custom class of current element
+   *
+   * @returns {string} - Custom class
+   */
+  toString() {
+    return `class="${this.customClass.join(' ')}"`;
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {string[]} custom classes
+   */
+  renderClass() {
+    return this.customClass;
+  }
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomStyleAnnotation extends CommonAnnotation {
+  constructor(customStyle) {
+    super();
+    this.type = CommonAnnotationTypeEnum.CUSTOM_STYLE;
+    this.customStyle = customStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {AnnotationStyle} customStyle - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_STYLE, CustomStyleAnnotation]} Map item for the annotation
+   */
+  static from(customStyle) {
+    return [CommonAnnotationTypeEnum.CUSTOM_STYLE, new CustomStyleAnnotation(customStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customStyle: this.customStyle,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomStyleAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomStyleAnnotation(this.customStyle);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {AnnotationStyle} custom attribute
+   */
+  renderStyle() {
+    return this.customStyle;
+  }
+  /**
+   * Remove the style
+   *
+   * @param {string[]} styleKeys - custom attribute annotation
+   * @returns {AnnotationStyle} Map item for the annotation
+   */
+  removeStyles(styleKeys) {
+    const customStyle = Object.assign({}, this.customStyle);
+    styleKeys.forEach((item) => delete customStyle[item]);
+    return customStyle;
+  }
+  /**
+   * Generate the custom style string for the annotation
+   *
+   * @returns {string} custom style string
+   */
+  toString() {
+    return `style="${Object.entries(this.customStyle)
+      .map(([key, value]) => `${key}: ${value};`)
+      .join(' ')}"`;
+  }
+}
+
+/**
+ * Internal wrapper annotation for block node.
+ */
+class InternalWrapperAnnotation extends BlockAnnotation {
+  constructor(internalWrapper) {
+    super();
+    this.type = BlockAnnotationTypeEnum.INTERNAL_WRAPPER;
+    this.internalWrapper = internalWrapper;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(internalWrapper) {
+    return [BlockAnnotationTypeEnum.INTERNAL_WRAPPER, new InternalWrapperAnnotation(internalWrapper)];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new InternalWrapperAnnotation(this.internalWrapper);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return this.internalWrapper ? { internalWrapper: this.internalWrapper } : undefined;
+  }
+}
+
 /**
  * Abstract class for block
  */
@@ -272,6 +700,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.
@@ -281,7 +718,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) {
@@ -290,6 +727,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 (isNonNullable(item)) {
+        annotationMap.set(...item);
+      }
+    });
+  }
+  /**
+   * Check if the block should be rendered as a wrapper.
+   *
+   * @returns {boolean} - Returns true if the block is an internal wrapper.
+   */
+  shouldRenderAsInternalWrapper() {
+    const internalWrapperAnnotation = this.getAnnotationByType(BlockAnnotationTypeEnum.INTERNAL_WRAPPER);
+    if (internalWrapperAnnotation) {
+      return (internalWrapperAnnotation.internalWrapper &&
+        Array.from(this.annotationMap.values()).filter((annotation) => !(annotation instanceof LinkGroupAnnotation) &&
+          !(annotation instanceof InternalWrapperAnnotation)).length === 0);
+    }
+    else {
+      return false;
     }
   }
   /**
@@ -299,7 +774,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());
     }, {});
@@ -340,6 +815,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(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(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {Nullable<CustomAttributeAnnotation>} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+    const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
   /**
    * Apply action to block
    *
@@ -360,7 +890,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);
   }
   /**
@@ -373,8 +905,28 @@ class RTEBlock {
   }
 }
 
-var NodeTypeEnum;
-(function (NodeTypeEnum) {
+var NodeAnnotationTypeEnum;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+  NodeAnnotationTypeEnum["INLINE_HTML"] = "INLINE_HTML";
+  NodeAnnotationTypeEnum["PLAIN_TEXT"] = "PLAIN_TEXT";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
   NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
@@ -390,6 +942,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
    *
@@ -423,576 +1003,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.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
-      if (nodeSubject) {
-        ChangeManager.notify(nodeSubject, {});
-      }
-    }
-  }
-  /**
-   * Clones the annotations of the current RTETextNode.
-   *
-   * @returns {NodeAnnotations} A new Map containing cloned annotations.
-   */
-  cloneAnnotations() {
-    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
-  }
-}
-
-var NodeAnnotationTypeEnum;
-(function (NodeAnnotationTypeEnum) {
-  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
-  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
-  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
-  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
-  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
-  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
-  NodeAnnotationTypeEnum["CODE"] = "CODE";
-  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
-  NodeAnnotationTypeEnum["LINK"] = "LINK";
-})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
-/**
- * Abstract class for all annotations
- */
-class NodeAnnotation extends Annotation {
-}
-
-/**
- * Annotation for image
- */
-class ImageAnnotation extends NodeAnnotation {
-  constructor(size = 'md', alt) {
-    super();
-    this.type = NodeAnnotationTypeEnum.IMAGE;
-    this.size = size;
-    this.alt = alt;
-  }
-  /**
-   * Generate the map item for the annotation
-   *
-   * @param {string} size - Image size
-   * @param {string} alt - Image alt
-   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
-   */
-  static from(size, alt) {
-    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
-  }
-  /**
-   * 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 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) {
-    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(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(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(isNonNullable));
-    return imageNode;
-  }
-  /**
-   * @inheritDoc
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
    */
-  toJSON() {
-    const imageAnnotation = this.annotationMap.get(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]) => `${camelToDashCase(key)}: ${value};`)
+      .join('');
+    const customClassAnnotation = this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
   }
   /**
-   * @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(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 = 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 = 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.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        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 = 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 = 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 = 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 = ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
-    this.splitPointNode = splitPointNode;
-    this.startOffsetOfNode = startOffsetOfNode;
-  }
+class AnnotationAction {
 }
 
 /**
@@ -1062,20 +1217,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;
   }
 }
 
@@ -1114,20 +1269,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;
   }
 }
 
@@ -1166,12 +1321,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;
   }
 }
 
@@ -1210,12 +1373,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;
   }
 }
 
@@ -1223,19 +1394,21 @@ class BoldAnnotation extends NodeAnnotation {
  * Annotation to make text code
  */
 class CodeAnnotation extends NodeAnnotation {
-  constructor(code) {
+  constructor(code, useInternalStyle = true) {
     super();
     this.type = NodeAnnotationTypeEnum.CODE;
     this.code = code;
+    this.useInternalStyle = useInternalStyle;
   }
   /**
    * Generate the map item for the annotation
    *
    * @param {boolean} code - Bold annotation
+   * @param {boolean} useInternalStyle - Whether to use default style for the link
    * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
    */
-  static from(code) {
-    return [NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  static from(code, useInternalStyle) {
+    return [NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code, useInternalStyle)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1251,32 +1424,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',
@@ -1340,19 +1519,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: VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
     };
@@ -1372,22 +1547,21 @@ class TextColorAnnotation extends NodeAnnotation {
  * Annotation to make text a link
  */
 class LinkAnnotation extends NodeAnnotation {
-  constructor(link) {
+  constructor(link, useInternalStyle = true) {
     super();
     this.type = NodeAnnotationTypeEnum.LINK;
     this.link = link;
+    this.useInternalStyle = useInternalStyle;
   }
   /**
    * Generate the map item for the annotation
    *
    * @param {VegaRTELink} link - Bold annotation
+   * @param {boolean} useInternalStyle - Whether to use default style for the link
    * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
    */
-  static from(link) {
-    return [
-      NodeAnnotationTypeEnum.LINK,
-      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
-    ];
+  static from(link, useInternalStyle = true) {
+    return [NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link, useInternalStyle)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1395,7 +1569,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
@@ -1413,31 +1589,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 = 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;
   }
 }
 
@@ -1445,11 +1606,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
@@ -1480,80 +1642,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(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 = 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) {
+    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(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
+  }
+  /**
+   * Create a new paragraph block with the given text.
+   *
+   * @param {string} text - The text content for the new paragraph.
+   * @returns {Nullable<RTETextBlock>} - The newly created paragraph block, or null if creation failed.
+   */
+  createNewParagraph(text) {
+    const dtoClass = RTEDTOClassManager$1.getRTEBlockClass('paragraph');
+    if (dtoClass) {
+      const newParagraph = dtoClass.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text }],
+      });
+      return newParagraph;
+    }
+  }
+  /**
+   * Get the root content from a child block or node.
+   *
+   * @param {RTEBlock | RTENode} child - The child block or node.
+   * @returns {Nullable<VegaRTEContent>} The root content, if found.
+   */
+  getRootContent(child) {
+    const parent = child.parent;
+    if (parent) {
+      if (parent.constructor.name === 'VegaRTEContent') {
+        return parent;
       }
       else {
-        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 = ModifyContentActionType.LINK_GROUP_NODE_SPLIT;
+    this.splittedTextNodes = splittedTextNodes;
+  }
 }
 
 /**
@@ -1584,7 +1854,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);
@@ -1687,6 +1961,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
  */
@@ -1701,6 +1994,7 @@ class ClearFormattingAnnotation extends Annotation {
       NodeAnnotationTypeEnum.STRIKETHROUGH,
       NodeAnnotationTypeEnum.TEXT_COLOR,
       NodeAnnotationTypeEnum.CODE,
+      CommonAnnotationTypeEnum.CUSTOM_STYLE,
     ];
   }
 }
@@ -1761,16 +2055,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 (isNonNullable(doSplit)) {
       this.doSplit = doSplit;
     }
@@ -1785,6 +2099,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.
  */
@@ -1812,17 +2164,281 @@ class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
         if (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 = ModifyContentActionType.DELETE_LINK_GROUP;
+  }
+}
+
+/**
+ * Update the editor text node text content strategy.
+ */
+class NodeUpdateTextStrategy extends ActionHandleStrategy {
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {UpdateTextAction} action - The update text action instance.
+   * @param {RTETextNode} target - The text node instance which need update the text.
+   */
+  handleAction(action, target) {
+    target.text = action.newTextContent;
+    // The link node should unlink when delete all text
+    if (!target.text && target.annotationMap.has('LINK')) {
+      target.apply(new DeleteLinkGroupAction());
+    }
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Replaces the rich text node selected text strategy.
+ */
+class NodeReplaceSelectedTextStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceSelectedText(action.textToBeInsert, action.currentRange, target);
+  }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   * @param {RTETextNode} target - The RTE text node instance.
+   */
+  replaceSelectedText(text, currentRange, target) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      let newText = target.text;
+      if (startContainer === endContainer && startOffset === endOffset && text) {
+        newText = target.text.slice(0, startOffset) + text + target.text.slice(startOffset);
+      }
+      else {
+        const startNode = startContainer.parentElement;
+        const endNode = endContainer.parentElement;
+        const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+        const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+        let startIndex = 0, endIndex = target.text.length;
+        if (startItemDto && startItemDto === target) {
+          startIndex = startOffset;
+          endIndex = startContainer === endContainer ? endOffset : endIndex;
+        }
+        else if (endItemDto && endItemDto === target) {
+          endIndex = endOffset;
+        }
+        newText = target.text.slice(0, startIndex) + text + target.text.slice(endIndex);
+      }
+      target.apply(new UpdateTextAction(newText));
+    }
+  }
+}
+
+/**
+ * Inline HTML annotation
+ */
+class InlineHtmlAnnotation extends Annotation {
+  constructor(htmlTag) {
+    super();
+    this.type = NodeAnnotationTypeEnum.INLINE_HTML;
+    this.htmlTag = htmlTag;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaInlineHtmlSchema} inlineHtml - Inline HTML node
+   * @returns {[NodeAnnotationTypeEnum.INLINE_HTML, InlineHtmlAnnotation]} Map item for the annotation
+   */
+  static from(inlineHtml) {
+    const { htmlTag, child, customStyle, customClass, customAttribute } = inlineHtml;
+    const inlineHtmlAnnotation = new InlineHtmlAnnotation(htmlTag);
+    inlineHtmlAnnotation.child = child ? InlineHtmlAnnotation.from(child)[1] : undefined;
+    inlineHtmlAnnotation.customAttribute = customAttribute
+      ? CustomAttributeAnnotation.from(customAttribute)[1]
+      : undefined;
+    inlineHtmlAnnotation.customClass = customClass
+      ? CustomClassAnnotation.from(customClass)[1]
+      : undefined;
+    inlineHtmlAnnotation.customStyle = customStyle
+      ? CustomStyleAnnotation.from(customStyle)[1]
+      : undefined;
+    return [NodeAnnotationTypeEnum.INLINE_HTML, inlineHtmlAnnotation];
+  }
+  /**
+   * Create a new inline HTML annotation
+   *
+   * @returns {InlineHtmlAnnotation} - Inline HTML annotation
+   */
+  clone() {
+    var _a, _b, _c, _d;
+    const inlineHtmlAnnotation = new InlineHtmlAnnotation(this.htmlTag);
+    inlineHtmlAnnotation.child = (_a = this.child) === null || _a === void 0 ? void 0 : _a.clone();
+    inlineHtmlAnnotation.customAttribute = (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.clone();
+    inlineHtmlAnnotation.customClass = (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.clone();
+    inlineHtmlAnnotation.customStyle = (_d = this.customStyle) === null || _d === void 0 ? void 0 : _d.clone();
+    return inlineHtmlAnnotation;
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    var _a, _b, _c, _d;
+    return {
+      inlineHtml: cleanObject({
+        htmlTag: this.htmlTag,
+        child: (_a = this.child) === null || _a === void 0 ? void 0 : _a.toJSON().inlineHtml,
+        customAttribute: (_b = this.customAttribute) === null || _b === void 0 ? void 0 : _b.toJSON().customAttribute,
+        customClass: (_c = this.customClass) === null || _c === void 0 ? void 0 : _c.toJSON().customClass,
+        customStyle: (_d = this.customStyle) === null || _d === void 0 ? void 0 : _d.toJSON().customStyle,
+      }),
+    };
+  }
+}
+
+/**
+ * Split the link nodes in the corresponding link group
+ */
+class LinkGroupNodeSplitStrategy extends ActionHandleStrategy {
+  /**
+   * Split the text node.
+   *
+   * @param {LinkGroupNodeSplitAction} action - The split action.
+   * @param {RTETextNode} target - The text node that need to be splitted.
+   */
+  handleAction(action, target) {
+    const linkGroupAnnotation = target.parent.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const currentGroupKey = target.annotationMap.get('LINK').link
+        .groupKey;
+      const currentLinkGroup = linkGroupAnnotation.linkGroups.get(currentGroupKey);
+      if (currentLinkGroup) {
+        const index = currentLinkGroup.indexOf(target);
+        if (index !== -1) {
+          /* istanbul ignore next */
+          currentLinkGroup.splice(index, 1, ...(Array.isArray(action.splittedTextNodes)
+            ? action.splittedTextNodes
+            : [action.splittedTextNodes]));
+          linkGroupAnnotation.linkGroups.set(currentGroupKey, currentLinkGroup);
+        }
+      }
+    }
+  }
+}
+
+/**
+ * Delete the corresponding link group
+ */
+class DeleteLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Delete the corresponding link group
+   *
+   * @param {DeleteLinkGroupAction} _action - The delete link group action.
+   * @param {RTETextNode} target - The text node that need to remove link annotation.
+   */
+  handleAction(_action, target) {
+    const linkGroupAnnotation = target.parent.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const currentGroupKey = target.annotationMap.get(NodeAnnotationTypeEnum.LINK).link.groupKey;
+      const currentLinkGroup = linkGroupAnnotation.linkGroups.get(currentGroupKey);
+      if (currentLinkGroup) {
+        const index = currentLinkGroup.indexOf(target);
+        if (index !== -1) {
+          currentLinkGroup.splice(index, 1);
+        }
+        if (currentLinkGroup.length === 0) {
+          linkGroupAnnotation.linkGroups.delete(currentGroupKey);
+        }
+        if (linkGroupAnnotation.linkGroups.size === 0) {
+          target.parent.annotationMap.delete(InternalAnnotationTypeEnum.LINK_GROUP);
+        }
+      }
+    }
+    target.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+  }
+}
+
+/**
+ * Annotation to make text as plain text
+ */
+class PlainTextAnnotation extends NodeAnnotation {
+  constructor(plainText) {
+    super();
+    this.type = NodeAnnotationTypeEnum.PLAIN_TEXT;
+    this.plainText = true;
+    this.plainText = plainText;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(plainText) {
+    return [NodeAnnotationTypeEnum.PLAIN_TEXT, new PlainTextAnnotation(plainText)];
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new PlainTextAnnotation(this.plainText);
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
+    return undefined;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return { plainText: this.plainText };
+  }
+}
+
 /**
  * Text node
  */
@@ -1832,24 +2448,35 @@ class RTETextNode extends RTENode {
     this.type = NodeTypeEnum.TEXT;
     this.parent = parentBlock;
     this.text = text;
+    this.registerModifyStrategy();
+  }
+  /**
+   * Determines if the given HTML tag is supported by the RTETextNode.
+   *
+   * @param {string} tag - The HTML tag to check.
+   * @returns {boolean} `true` if the tag is supported, otherwise `false`.
+   */
+  static supportsHtmlTag(tag) {
+    return ['span', 'code'].includes(tag);
   }
   /**
    * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
    *
    * @param {VegaRTETextNode} richText - A rich text node
    * @param {RTETextBlock} parentBlock - Parent block
+   * @param {VegaRTETransformOptions} options - Optional transformation options.
    * @returns {RTETextNode} an RTETextNode
    */
-  static from(richText, parentBlock) {
+  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(isNonNullable));
     }
@@ -1860,10 +2487,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);
@@ -1874,24 +2503,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(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.
    *
@@ -1899,13 +2544,15 @@ class RTETextNode extends RTENode {
    * @returns {RTETextNode} An new RTETextNode
    */
   cloneWithText(text) {
-    return new RTETextNode(generateUUID(), text, this.parent, super.cloneAnnotations());
+    const cloned = new RTETextNode(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
@@ -1915,13 +2562,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(ModifyContentActionType.UPDATE_TEXT, dtoClassName, new NodeUpdateTextStrategy());
+        ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_SELECTED_TEXT, dtoClassName, new NodeReplaceSelectedTextStrategy());
+        ActionHandleStrategyRegistry.register(TextSplittableAction.name, dtoClassName, new NodeSplitTextStrategy());
+      }
+      ActionHandleStrategyRegistry.register(ModifyContentActionType.LINK_GROUP_NODE_SPLIT, dtoClassName, new LinkGroupNodeSplitStrategy());
+      ActionHandleStrategyRegistry.register(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(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) {
@@ -1932,7 +2633,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
@@ -1976,13 +2679,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(isNonNullable);
+    const attrStr = attrs.length > 0 ? ` ${attrs.join(' ')}` : '';
+    if (!child) {
+      return `<${htmlTag}${attrStr}>${this.renderTextStr()}</${htmlTag}>`;
+    }
+    return `<${htmlTag}${attrStr}>${this.renderWithWrapperStr(child)}</${htmlTag}>`;
+  }
+  /**
+   * Generates the HTML representation of the text node.
+   *
+   * @returns {string} The HTML string representation of the text node.
+   */
+  renderTextStr() {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString();
+    // If the text contains a newline character, we need to replace it with a <br> tag.
+    if (this.text === '\n') {
+      return `<br>`;
+    }
+    return this.shouldRenderAsPlainText() ? this.text : `<${NodeTag}${attrStr}>${this.text}</${NodeTag}>`;
+  }
+  /**
+   * Determines if the text node should be rendered as plain text.
+   *
+   * @returns {boolean} `true` if the text node should be rendered as plain text, otherwise `false`.
+   */
+  shouldRenderAsPlainText() {
+    const plainTextAnnotation = super.getAnnotationByType(NodeAnnotationTypeEnum.PLAIN_TEXT);
+    if (plainTextAnnotation) {
+      return (plainTextAnnotation.plainText &&
+        Array.from(this.annotationMap.values()).filter((annotation) => (annotation instanceof NodeAnnotation &&
+          !(annotation instanceof LinkAnnotation) &&
+          !(annotation instanceof PlainTextAnnotation)) ||
+          annotation instanceof CommonAnnotation).length === 0);
+    }
+    else {
+      return false;
+    }
+  }
+}
+RTETextNode.registerActionStrategyStatus = {};
+RTETextNode.htmlTag = 'span';
+
+/**
+ * Append children to a block or rte content
+ *
+ * @example parent.apply(new AppendChildrenAction([newChildren]))
+ */
+class AppendChildrenAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = ModifyContentActionType.APPEND_CHILDREN;
+    this.entityToBeAppended = childNodes;
+  }
 }
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, RTETextNode.name, new NodeUpdateTextStrategy());
-  ActionHandleStrategyRegistry.register(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
@@ -2017,44 +2783,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',
+        };
       }
     }
   }
@@ -2080,25 +2908,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.
  */
@@ -2125,6 +2934,7 @@ class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }
 
@@ -2139,15 +2949,56 @@ class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
    * @param {RTETextBlock} target - The current text block.
    */
   handleAction(action, target) {
-    const linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
-    if (linkGroupAnnotation) {
-      const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
-      linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+    let linkGroupAnnotation = target.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (action.type === 'update_link') {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        if (linkGroup) {
+          linkGroupAnnotation.linkGroups.set(action.groupKey, [linkGroup[0]]);
+        }
+      }
+    }
+    else {
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey) || [];
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      }
+      else {
+        linkGroupAnnotation = action.toAnnotation();
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...action.nodes]);
+      }
       target.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
     }
   }
 }
 
+/**
+ * Insert a new children after a existing children
+ *
+ * @example parent.apply(new InsertChildrenAfterAction(existingChildren, newChildren, ...))
+ */
+class InsertChildrenAfterAction extends ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_CHILDREN_AFTER;
+    this.referChildren = referBlock;
+    this.childrenToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
+ */
+class ReplaceChildNodesAction extends ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
 /**
  * Split the current node with a special position strategy.
  */
@@ -2182,7 +3033,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;
       }
     }
@@ -2190,52 +3041,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 = 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(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));
+    }
   }
 }
 
@@ -2328,7 +3181,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;
@@ -2350,112 +3203,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 = ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
-    this.blockNeedToBeMerged = blockNeedToBeMerged;
+    this.type = 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 = ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
   }
 }
 
@@ -2473,82 +3245,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(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      if (linkGroupAnnotation.linkGroups.size > 1) {
+        linkGroupAnnotation.linkGroups.delete(action.groupKey);
+      }
+      else {
+        target.annotationMap.delete(InternalAnnotationTypeEnum.LINK_GROUP);
+      }
+    }
   }
 }
 
@@ -2556,34 +3377,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(isNonNullable);
     if (annotations) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (isNonNullable(item)) {
-          textBlock.annotationMap.set(...item);
-        }
-      });
+      super.convertAnnotationsToMap(textBlock.annotationMap, annotations);
     }
     return textBlock;
   }
@@ -2596,7 +3425,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) {
@@ -2653,16 +3482,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(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(generateUUID(), this.type);
-    block.children = [];
-    block.apply(new AppendChildNodesAction(nodes));
+    block.annotationMap = super.cloneAnnotations();
+    block.apply(new AppendChildrenAction(nodes));
     return block;
   }
   /**
@@ -2692,12 +3536,31 @@ class RTETextBlock extends RTEBlock {
     return this.children[this.children.length - 1];
   }
   /**
-   * Create new empty paragraph.
-   *
-   * @returns {RTETextBlock} Paragraph.
-   */
-  createNewParagraph() {
-    return new RTETextBlock(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
@@ -2708,24 +3571,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(NodeAnnotationTypeEnum.LINK);
+      const nextLinkAnnotation = this.children[i + 1]
+        ? this.children[i + 1].getAnnotationByType(NodeAnnotationTypeEnum.LINK)
+        : null;
+      if (currentLinkAnnotation) {
+        linkGroupNodes.push(this.children[i]);
+        if (!nextLinkAnnotation ||
+          currentLinkAnnotation.link.groupKey !== nextLinkAnnotation.link.groupKey) {
+          const linkAttributes = linkGroupAnnotation.toString(currentLinkAnnotation, {
+            standalone: true,
+            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(ModifyContentActionType.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UNLINK_LINK_GROUP, RTETextBlock.name, new BlockUnlinkLinkGroupStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTETextBlock.name, new BlockSplitWithTextNodeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTETextBlock.name, new BlockReplaceNodesStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTETextBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertNewParagraphStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertLineBreakStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTETextBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTETextBlock.name, new BlockDeleteTextContentStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTETextBlock.name, new BlockInsertNodesBeforeNodeStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTETextBlock.name, new BlockTransformToListStrategy());
 })();
 
+/**
+ * The delete node content contains some common functions that used for image block delete the image node or text block delete text node.
+ */
+class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
+  /**
+   * Returns the previous node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the previous block last node
+   */
+  getPreviousNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    if (currentIndex > 0) {
+      return currentBlock.children[currentIndex - 1];
+    }
+    else if (currentBlock.parent) {
+      const previousBlock = this.getPreviousBlock(currentBlock);
+      if (previousBlock) {
+        return this.getBlockLastNode(previousBlock);
+      }
+    }
+  }
+  /**
+   * Returns the next node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the next block first node
+   */
+  getNextNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    if (currentBlock.children[currentIndex + 1]) {
+      return currentBlock.children[currentIndex + 1];
+    }
+    else if (currentBlock.parent) {
+      const nextBlock = this.getNextBlock(currentBlock);
+      if (nextBlock) {
+        return this.getBlockFirstNode(nextBlock);
+      }
+    }
+  }
+  /**
+   * Determines if a given node is the first node within the current state.
+   *
+   * @param {RTENode} currentNode - An object representing a node in a rich text editor (RTE).
+   * @returns {boolean} True or false;
+   */
+  isContentFirstNode(currentNode) {
+    const currentBlock = currentNode.parent;
+    const currentIndex = currentBlock.children.indexOf(currentNode);
+    const parent = currentBlock.parent;
+    if (currentBlock.isListItemBlock()) {
+      const listParent = parent.parent;
+      return (currentIndex === 0 &&
+        Array.isArray(parent.children) &&
+        parent.children[0] === currentBlock &&
+        listParent['type'] !== 'list-item' &&
+        Array.isArray(listParent.children) &&
+        listParent.children[0] === parent);
+    }
+    else {
+      return (currentIndex === 0 && Array.isArray(parent.children) && parent.children[0] === currentBlock);
+    }
+  }
+  /**
+   * TODO: The getPreviousBlock add nest list support
+   * This function retrieves the previous block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the previous block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The previous block if existing
+   */
+  getPreviousBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.children) {
+      const currentBlockIndex = currentBlock.parent.children.indexOf(currentBlock);
+      if (currentBlockIndex > 0) {
+        return currentBlock.parent.children[currentBlockIndex - 1];
+      }
+      else if ((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.
  */
@@ -2743,7 +3775,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;
@@ -2753,7 +3785,7 @@ class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
           type: 'paragraph',
           nodes: [{ id: generateUUID(), type: 'text', text: '' }],
         });
-        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        target.parent.apply(new AppendChildrenAction([defaultParagraph]));
         focusNode = defaultParagraph.children[0];
         offset = 0;
       }
@@ -2828,7 +3860,7 @@ class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
       type: 'paragraph',
       nodes: [{ id: 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) {
@@ -2885,10 +3917,66 @@ 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 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;
@@ -2906,6 +3994,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
    */
@@ -2942,7 +4036,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));
+  }
+}
+
+var CodeLanguage;
+(function (CodeLanguage) {
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["JavaScript"] = "js";
+  CodeLanguage["JSX"] = "jsx";
+  CodeLanguage["Plain Text"] = "plainText";
+  CodeLanguage["TypeScript"] = "ts";
+  CodeLanguage["TSX"] = "tsx";
+})(CodeLanguage || (CodeLanguage = {}));
+
+/**
+ * Remove the node from the text block or image block strategy.
+ */
+class RemoveChildrenStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the node or block from the parent.
+   * Remove the block if the block children is empty after delete the current element.
+   *
+   * @param {RemoveChildrenAction} action - The remove child action instance.
+   * @param {RTEBlock | VegaRTEContent} target - The parent block of the node that will be removed.
+   */
+  handleAction(action, target) {
+    const arrayFixed = target.children;
+    target.children = arrayFixed.filter((node) => node !== action.entityToBeRemoved);
+    if (target.children.length === 0 && 'parent' in target && target.parent) {
+      if (!target.isListItemBlock()) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+      else if (!target.nestList || !target.nestList.length) {
+        target.parent.apply(new RemoveChildrenAction(target));
+      }
+    }
   }
 }
 
@@ -2976,6 +4106,13 @@ class RTECodeBlock extends RTEBlock {
       language,
     };
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const { language = CodeLanguage['Plain Text'] } = this.children[0];
+    return `<pre data-language="${language}" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px">${this.children.map((node) => node.toHtml())}</pre>`;
+  }
   /**
    * @inheritDoc
    */
@@ -3026,10 +4163,10 @@ class RTECodeBlock extends RTEBlock {
 }
 (() => {
   ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILDREN, RTECodeBlock.name, new RemoveChildrenStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
   ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
 })();
 RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
 
-export { IndentAnnotation as $, ActionHandleStrategy as A, BlockDeleteNodeContentStrategy as B, ImageAnnotation as C, SelectionChangeAction as D, TextColorAnnotation as E, RTE_TEXT_COLORS as F, RTECodeBlockNode as G, AnnotationAction as H, InsertBlocksAfterAction as I, BoldAnnotationAction as J, ItalicAnnotation as K, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotationTypeEnum as N, UnderlineAnnotation as O, TextStyleAnnotationAction as P, TextStyleAnnotation as Q, RemoveChildAction as R, SplitBlockWithNodeAction as S, TextSplittableAction as T, UpdateCodeBlockAction as U, BoldAnnotation as V, BlockAnnotationTypeEnum as W, ClearFormattingAnnotationAction as X, CodeAnnotationAction as Y, ZERO_WIDTH_SPACE as Z, StrikethroughAnnotation as _, RTEImageNode as a, HorizontalAlignmentAnnotation as a0, UpdateTextAction as a1, MergeTwoBlocksNodesAction as a2, ReplaceChildNodesAction as b, AppendChildNodesAction as c, RTETextBlock as d, InsertBlocksBeforeAction as e, ModifyContentActionType as f, RTETextNode as g, BlockReplaceNodeWithNodesStrategy as h, RTEBlock as i, ActionHandleStrategyRegistry as j, BlockMergeNodesStrategy as k, BlockRemoveNodeStrategy as l, BlockAppendNodesStrategy as m, BlockReplaceNodesStrategy as n, BlockInsertNodesBeforeNodeStrategy as o, BlockDeleteTextContentStrategy as p, BlockInsertLineBreakStrategy as q, BlockInsertLineBreakWithBlocksStrategy as r, BlockSplitWithTextNodeStrategy as s, SyncUpSelectionAction as t, RTECodeBlock as u, RTENode as v, stateEntityRenderingRegistry as w, BlockAnnotation as x, NodeAnnotation as y, InternalAnnotationTypeEnum as z };
+export { UnderlineAnnotationAction as $, ActionHandleStrategy as A, BlockInsertLineBreakStrategy as B, CustomStyleAnnotation as C, BlockDeleteNodeContentStrategy as D, RemoveChildrenStrategy as E, RTE_TEXT_COLORS as F, RTE_DEFAULT_TEXT_COLOR as G, HorizontalAlignmentAnnotationAction as H, InsertChildrenAfterAction as I, RTENode as J, CodeLanguage as K, LinkAnnotationAction as L, ModifyContentActionType as M, NodeAnnotation as N, InternalAnnotationTypeEnum as O, CommonAnnotationTypeEnum as P, UpdateCodeBlockAction as Q, RTETextBlock as R, SyncUpSelectionAction as S, SelectionChangeAction as T, UpdateTextAction as U, TextSplittableAction as V, TextColorAnnotation as W, RTECodeBlockNode as X, BoldAnnotationAction as Y, ZERO_WIDTH_SPACE as Z, ItalicAnnotationAction as _, RTETextNode as a, TextStyleAnnotationAction as a0, TextStyleAnnotation as a1, BoldAnnotation as a2, ClearFormattingAnnotationAction as a3, CodeAnnotationAction as a4, StrikethroughAnnotationAction as a5, IndentAnnotationAction as a6, AppendChildrenAction as b, ActionHandleStrategyRegistry as c, BlockInsertLineBreakWithBlocksStrategy as d, BlockSplitWithTextNodeStrategy as e, BlockReplaceNodesStrategy as f, BlockMergeNodesStrategy as g, RemoveChildrenAction as h, InsertChildrenBeforeAction as i, BlockAnnotation as j, BlockAnnotationTypeEnum as k, RTEBlock as l, CustomClassAnnotation as m, CustomAttributeAnnotation as n, RTECodeBlock as o, NodeAnnotationTypeEnum as p, RTEDecoratorNode as q, NodeTypeEnum as r, stateEntityRenderingRegistry as s, CommonAnnotation as t, AnnotationAction as u, ReplaceChildNodesAction as v, ModifyContentAction as w, SplitBlockWithNodeAction as x, BlockUpdateHorizontalAlignmentStrategy as y, RTEDTOClassManager$1 as z };