@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/esm/{content-state-dbc9f635.js → code-block-8b5bd928.js}

@@ -1,8 +1,9 @@
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory } from './dom-node-subject-factory-f77cf9cc.js';
-import { a as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-85ad403f.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-eb6bba5d.js';
+import { a as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-820393ad.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { c as camelToDashCase } from './string-a953eafc.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
 
@@ -23,6 +24,7 @@ var BlockAnnotationTypeEnum;
   BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
   BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
   BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
 })(BlockAnnotationTypeEnum || (BlockAnnotationTypeEnum = {}));
 /**
  * BlockAnnotation is an abstract class that represents a block annotation.
@@ -101,6 +103,10 @@ var ModifyContentActionType;
   ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
   ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
   ModifyContentActionType["UPDATE_IMAGE_NODE_URL"] = "UPDATE_IMAGE_NODE_URL";
+  ModifyContentActionType["TRANSFORM_TO_CODE_BLOCK"] = "TRANSFORM_TO_CODE_BLOCK";
+  ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
+  ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
+  ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
 })(ModifyContentActionType || (ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -140,12 +146,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
@@ -154,12 +168,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' };
+    }
   }
 }
 
@@ -195,13 +217,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;
   }
 }
 
@@ -260,6 +288,193 @@ 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.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]);
+    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;
+  }
+}
+
 /**
  * Abstract class for block
  */
@@ -277,7 +492,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) {
@@ -286,6 +501,12 @@ 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);
     }
   }
   /**
@@ -295,7 +516,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());
     }, {});
@@ -328,6 +549,61 @@ class RTEBlock {
       }
     }
   }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
+   */
+  getStyles(options = { standalone: false }) {
+    return 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)), {});
+  }
+  /**
+   * 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
    *
@@ -361,10 +637,29 @@ class RTEBlock {
   }
 }
 
+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 {
+}
+
 var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
 })(NodeTypeEnum || (NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes
@@ -377,6 +672,24 @@ class RTENode {
       this.annotationMap = annotationMap;
     }
   }
+  /**
+   * 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
    *
@@ -409,6 +722,61 @@ class RTENode {
     }
     return this;
   }
+  /**
+   * Get styles from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {AnnotationStyle} - Annotation styles
+   */
+  getStyles(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomStyleAnnotation)
+      .map((annotation) => annotation.renderStyle(options))
+      .filter(Boolean)
+      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  }
+  /**
+   * Get classes from annotations
+   *
+   * @param {RTERenderContext} [options={ standalone: false }] - Options to control style mode
+   * @returns {string} - Annotation style
+   */
+  getClasses(options = { standalone: false }) {
+    return Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation || annotation instanceof CustomClassAnnotation)
+      .map((annotation) => annotation.renderClass(options))
+      .filter(isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {CustomAttributeAnnotation} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * 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 annotation action or modify content action
    *
@@ -444,24 +812,6 @@ class RTENode {
   }
 }
 
-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
  */
@@ -504,20 +854,29 @@ class ImageAnnotation extends NodeAnnotation {
     return new ImageAnnotation(this.size, this.alt);
   }
   /**
-   * Generate the style for the image
-   *
-   * @returns {Nullable<AnnotationStyle>} image style
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return `v-rte--image-size-${this.size}`;
+  }
+  /**
+   * @inheritDoc
    */
-  render() {
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    const baseStyle = { verticalAlign: 'bottom' };
     switch (this.size) {
       case 'sm': {
-        return { width: '25%' };
+        return Object.assign(Object.assign({}, baseStyle), { width: '25%' });
       }
       case 'md': {
-        return { width: '50%' };
+        return Object.assign(Object.assign({}, baseStyle), { width: '50%' });
       }
       case 'lg': {
-        return { width: '100%' };
+        return Object.assign(Object.assign({}, baseStyle), { width: '100%' });
       }
     }
   }
@@ -585,6 +944,28 @@ class ActionHandleStrategy {
     const lastNode = target.nodes[target.nodes.length - 1];
     return node === lastNode && startOffset === 1;
   }
+  /**
+   * Update the custom style annotation of a block or node
+   *
+   * @param {RTEBlock | RTETextNode} item - block or node
+   * @param {string[]} styleKeys - custom style keys, for examples ['fontSize', 'fontWeight'].
+   */
+  updateCustomStyleAnnotation(item, styleKeys) {
+    const customStyleAnnotation = item.annotationMap.get(CommonAnnotationTypeEnum.CUSTOM_STYLE);
+    if (customStyleAnnotation && this.isCustomStyle(customStyleAnnotation, styleKeys)) {
+      item.annotationMap.set(customStyleAnnotation.type, new CustomStyleAnnotation(customStyleAnnotation.removeStyles(styleKeys)));
+    }
+  }
+  /**
+   * 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));
+  }
 }
 
 /**
@@ -645,7 +1026,12 @@ class RTEImageNode extends RTENode {
       annotations = node.annotations;
     }
     imageNode.annotationMap = new Map(Object.keys(annotations)
-      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
+      .map((type) => {
+      if (type === 'size' || type === 'alt') {
+        return ImageAnnotation.from(annotations.size, annotations.alt);
+      }
+      return this.createAnnotationEntity(type, annotations[type]);
+    })
       .filter(isNonNullable));
     return imageNode;
   }
@@ -653,14 +1039,13 @@ class RTEImageNode extends RTENode {
    * @inheritDoc
    */
   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;
-    }
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof ImageAnnotation || annotation instanceof CommonAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    if (annotations.alt == '')
+      delete annotations.alt;
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
   /**
@@ -669,6 +1054,18 @@ class RTEImageNode extends RTENode {
   clone() {
     return new RTEImageNode(this.id, this.url, this.parentBlock, super.cloneAnnotations());
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const imageAnnotation = this.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    const attrStr = super.generateAttributeString(...[
+      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
+      `src="${this.url}"`,
+      `data-size="${imageAnnotation.size}"`,
+    ].filter(isNonNullable));
+    return `<img${attrStr}>`;
+  }
   /**
    * @inheritDoc
    */
@@ -856,76 +1253,24 @@ class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
   }
 }
 
+/** Append blocks or nodes to a block */
+class AppendChildNodesAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = ModifyContentActionType.APPEND_CHILD_NODES;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
 /**
- * The image block delete the image node strategy.
+ * Append the second block child nodes to the first block child nodes and remove the second block strategy.
  */
-class BlockDeleteImageStrategy extends BlockDeleteNodeContentStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.deleteNodeContent(action, target);
-  }
+class BlockMergeNodesStrategy extends ActionHandleStrategy {
   /**
-   * Deletes content from a block node based on specific conditions.
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
    *
-   * @param {DeleteBlockContentAction} action - Delete block content action
-   * @param {RTEImageBlock} target - The image block.
-   */
-  deleteNodeContent(action, target) {
-    const startContainerNode = action
-      .startContainerNode, startOffset = action.startOffset;
-    let previousNode = this.getPreviousNode(startContainerNode);
-    let nextNode = null;
-    if (startOffset === 1) {
-      const parentBlock = target;
-      if (this.isContentFirstNode(startContainerNode)) {
-        nextNode = this.getNextNode(startContainerNode);
-      }
-      if (parentBlock.nodes.length === 1) {
-        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
-      }
-      else {
-        parentBlock.apply(new RemoveChildAction(startContainerNode));
-      }
-    }
-    else {
-      const shouldRemoveNode = previousNode;
-      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
-        previousNode = this.getPreviousNode(shouldRemoveNode);
-        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
-        if (!previousNode) {
-          action.nextNode = startContainerNode;
-        }
-      }
-    }
-    if (previousNode) {
-      action.previousNode = previousNode;
-    }
-    else if (nextNode) {
-      action.nextNode = nextNode;
-    }
-  }
-}
-
-/** 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.
+   * @param {MergeTwoBlocksNodesAction} action - The merge block nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The first text block or image block.
    */
   handleAction(action, target) {
     const anotherBlock = action.blockNeedToBeMerged;
@@ -949,7 +1294,7 @@ class BlockRemoveNodeStrategy extends ActionHandleStrategy {
    * Remove the block if the block nodes is empty after delete the current node.
    *
    * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   * @param {RTEBlockWithNodes} target - The parent block of the node that will be removed.
    */
   handleAction(action, target) {
     const arrayFixed = target.nodes;
@@ -1024,51 +1369,6 @@ class ReplaceChildNodesAction extends ModifyContentAction {
   }
 }
 
-/**
- * Split the current image block with a special position strategy.
- */
-class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
-  }
-  /**
-   * The image offset should be 0 or 1
-   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
-   *
-   * @param {RTEImageNode} imageNode The split point image node.
-   * @param {number} imageOffset The cursor point 0 | 1.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {Nullable<RTEBlock>} The new block after split
-   */
-  splitImageNodes(imageNode, imageOffset, target) {
-    const nodesSplitIndex = target.nodes.indexOf(imageNode);
-    if (nodesSplitIndex > -1) {
-      const beforeNodes = target.nodes.slice(0, nodesSplitIndex + imageOffset);
-      const afterNodes = target.nodes.slice(nodesSplitIndex + imageOffset);
-      target.apply(new ReplaceChildNodesAction(beforeNodes));
-      const newBlock = this.cloneWithNodes(afterNodes, target);
-      target.parent.apply(new InsertBlocksAfterAction(target, newBlock));
-      return newBlock;
-    }
-  }
-  /**
-   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
-   *
-   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
-   */
-  cloneWithNodes(nodes, target) {
-    const block = target.createNewImageBlock();
-    block.nodes = [];
-    block.apply(new AppendChildNodesAction(nodes));
-    return block;
-  }
-}
-
 /**
  * Insert a new block before a existing block
  *
@@ -1165,20 +1465,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;
   }
 }
 
@@ -1217,20 +1517,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;
   }
 }
 
@@ -1269,12 +1569,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;
   }
 }
 
@@ -1313,12 +1621,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;
   }
 }
 
@@ -1357,20 +1673,25 @@ class CodeAnnotation extends NodeAnnotation {
     return new CodeAnnotation(this.code);
   }
   /**
-   * 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.code ? '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
+      ? {
+        fontFamily: 'Roboto Mono',
+        whiteSpace: 'pre-wrap',
+      }
+      : null;
   }
 }
 
@@ -1443,19 +1764,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,
     };
@@ -1487,10 +1804,7 @@ class LinkAnnotation extends NodeAnnotation {
    * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
    */
   static from(link) {
-    return [
-      NodeAnnotationTypeEnum.LINK,
-      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
-    ];
+    return [NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1498,7 +1812,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
@@ -1516,11 +1832,15 @@ 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;
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle() {
     return null;
   }
 }
@@ -1542,6 +1862,94 @@ class LinkGroupAnnotation extends Annotation {
     });
     return clonedAnnotation;
   }
+  /**
+   * Convert the custom style, class and attribute to string which html can used
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {string} - string.
+   */
+  toString(linkAnnotation, options) {
+    const attributes = this.toJsx(linkAnnotation, options);
+    return Object.entries(attributes)
+      .map(([key, value]) => {
+      const valueString = typeof value === 'string' ? value : this.formatStyleToString(value);
+      return `${camelToDashCase(key)}="${valueString}"`;
+    })
+      .join(' ');
+  }
+  /**
+   * Convert the custom style, class and attribute to JSX attributes
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {Record<string, string | AnnotationStyle>} JSX used attributes.
+   */
+  toJsx(linkAnnotation, options) {
+    const linkStyle = this.getStyle(linkAnnotation, options);
+    const linkClass = this.getClass(linkAnnotation, options);
+    const attributes = this.getAttribute(linkAnnotation);
+    if (linkClass.length > 0) {
+      attributes.class = linkClass.join(' ');
+    }
+    if (linkStyle && Object.keys(linkStyle).length > 0) {
+      attributes.style = linkStyle;
+    }
+    return attributes;
+  }
+  /**
+   * Get the custom class for the annotation
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {string[]} Link class
+   */
+  getClass(linkAnnotation, options) {
+    const linkClass = [];
+    if (linkAnnotation.link.customClass)
+      linkClass.push(...linkAnnotation.link.customClass);
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      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)
+      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.
+   * @returns {Record<string, string>} Link attributes
+   */
+  getAttribute(linkAnnotation) {
+    const { href, customAttribute = {} } = linkAnnotation.link;
+    customAttribute.href = href;
+    customAttribute.target = customAttribute.target || '_blank';
+    return customAttribute;
+  }
+  /**
+   * 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(' ');
+  }
 }
 
 /**
@@ -1790,6 +2198,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
  */
@@ -1804,6 +2231,7 @@ class ClearFormattingAnnotation extends Annotation {
       NodeAnnotationTypeEnum.STRIKETHROUGH,
       NodeAnnotationTypeEnum.TEXT_COLOR,
       NodeAnnotationTypeEnum.CODE,
+      CommonAnnotationTypeEnum.CUSTOM_STYLE,
     ];
   }
 }
@@ -1864,6 +2292,25 @@ 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
  */
@@ -1888,6 +2335,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.
  */
@@ -1920,6 +2405,16 @@ class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
       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;
     }
@@ -1983,18 +2478,30 @@ class RTETextNode extends RTENode {
       case 'link':
         return LinkAnnotation.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)
       .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() {
+    var _a;
+    const NodeTag = ((_a = this.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code)
+      ? 'code'
+      : 'span';
+    const attrStr = super.generateAttributeString();
+    return `<${NodeTag}${attrStr}>${this.text}</${NodeTag}>`;
+  }
   /**
    * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
    *
@@ -2120,44 +2627,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 `v-rte--text-style-${this.textStyle}`;
+  }
+  /**
+   * @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',
+        };
       }
     }
   }
@@ -2183,25 +2752,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.
  */
@@ -2228,6 +2778,7 @@ class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }
 
@@ -2514,7 +3065,9 @@ class BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrategy {
         if (startContainerNode.isEmpty()) {
           target.apply(new RemoveChildAction(startContainerNode));
         }
-        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        if (target.type === previousNode.parentBlock.type) {
+          previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        }
       }
       else {
         if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
@@ -2654,22 +3207,90 @@ class BlockTransformToListStrategy extends ActionHandleStrategy {
 }
 
 /**
- * Text block
+ * Action to toggle block horizontal alignment annotation
  */
-class RTETextBlock extends RTEBlock {
-  constructor(id, type) {
-    super(id);
-    this.nodes = [];
-    this.type = type;
-    if (RTETextBlock.isAcceptableTextStyle(type)) {
-      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
-    }
-    else {
-      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
-    }
+class HorizontalAlignmentAnnotationAction extends AnnotationAction {
+  constructor(textAlign) {
+    super();
+    this.isFlushable = true;
+    this.textAlign = textAlign;
   }
   /**
-   * Converts a VegaRTETextBlock into an RTETextBlock.
+   * Converts the action to an annotation
+   *
+   * @returns {HorizontalAlignmentAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new HorizontalAlignmentAnnotation(this.textAlign);
+  }
+}
+
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+class BlockUpdateHorizontalAlignmentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the horizontal alignment of a block requires cascading updates to the custom style.
+   *
+   * @param {HorizontalAlignmentAnnotationAction} _action - The horizontal alignment annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['textAlign']);
+  }
+}
+
+/**
+ * Update the text block and image block horizontal alignment strategy.
+ */
+class BlockUpdateIndentStrategy extends ActionHandleStrategy {
+  /**
+   * Updating the indent of a block requires cascading updates to the custom style.
+   *
+   * @param {IndentAnnotationAction} _action - The indent annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(_action, target) {
+    this.updateCustomStyleAnnotation(target, ['marginLeft']);
+  }
+}
+
+/**
+ * Action to toggle block indent annotation
+ */
+class IndentAnnotationAction extends AnnotationAction {
+  constructor(indent) {
+    super();
+    this.isFlushable = true;
+    this.indent = indent;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
+   */
+  toAnnotation() {
+    return new IndentAnnotation(this.indent);
+  }
+}
+
+/**
+ * Text block
+ */
+class RTETextBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.nodes = [];
+    this.type = type;
+    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
    * @returns {RTETextBlock} A RTETextBlock class
@@ -2697,7 +3318,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) {
@@ -2754,6 +3375,36 @@ class RTETextBlock extends RTEBlock {
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const BlockTag = this.getBlockTag();
+    const attrStr = super.generateAttributeString();
+    const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+    let nodesHtml = this.nodes.map((node) => node.toHtml()).join('');
+    if (linkGroupAnnotation && this.nodes.length > 0) {
+      //TODO: should revert to above code while https://gethired.atlassian.net/browse/VD-6513 have be fixed.
+      //  const linkAnnotation: Nullable<LinkAnnotation> =
+      // 	   this.nodes[0].getAnnotationByType<LinkAnnotation>(NodeAnnotationTypeEnum.LINK);
+      let linkAnnotation;
+      this.nodes.find((node) => {
+        const link = node.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        if (link) {
+          linkAnnotation = link;
+          return true;
+        }
+      });
+      if (linkAnnotation) {
+        nodesHtml = [
+          `<a ${linkGroupAnnotation.toString(linkAnnotation, { standalone: true })}>`,
+          nodesHtml,
+          `</a>`,
+        ].join('');
+      }
+    }
+    return [`<${BlockTag}${attrStr}>`, nodesHtml, `</${BlockTag}>`].join('');
+  }
   /**
    * Clone the nodes to a new block
    *
@@ -2800,6 +3451,33 @@ class RTETextBlock extends RTEBlock {
   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
    */
@@ -2812,6 +3490,8 @@ class RTETextBlock extends RTEBlock {
 }
 (() => {
   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());
@@ -2828,994 +3508,333 @@ class RTETextBlock extends RTEBlock {
 })();
 
 /**
- * Insert a new paragraph at the image block special position strategy.
+ * Remove the code block from the value, call this action if want to flush value after action.
  */
-class ImageInsertNewParagraphStrategy extends ActionHandleStrategy {
+class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset, target);
+  handleAction(_action, target) {
+    const node = target.nodes[0];
+    const parent = target.parent;
+    if (parent) {
+      let focusNode = this.getPreviousNode(node);
+      let offset = this.getRTENodeEndOffset(focusNode);
+      if (!focusNode) {
+        focusNode = this.getNextNode(node);
+        offset = 0;
+      }
+      parent.apply(new RemoveChildAction(target));
+      const focusElement = focusNode
+        ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
+        : null;
+      if (parent.blocks.length === 0) {
+        const defaultParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        focusNode = defaultParagraph.nodes[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
   }
   /**
-   * Used to split a block of text at a specific position and insert a new paragraph block.
+   * Update the rich text next selection range.
    *
-   * @param {RTEImageNode} splitNode - The node that needs to be split into separate blocks.
-   * @param {number} startOffsetOfNode - The index or position within the `splitNode` where the block should be broken or split.
-   * @param {RTEImageBlock} target - The image block.
-   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   * @param {RTENode} focusNode - The next focus node dto.
+   * @param {Nullable<HTMLElement>} focusElement - The next focus element. The update selection task could run directly when the element is exist.
+   * @param {number} offset - The next focus text offset.
+   * @param {RTECodeBlock} target - The code block dto.
    */
-  breakSingleBlock(splitNode, startOffsetOfNode, target) {
-    const newParagraph = RTETextBlock.from({
-      id: generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: generateUUID(), type: 'text', text: '' }],
-    });
-    if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
-    }
-    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
     }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
+  }
+  /**
+   * Get the node content end offset.
+   *
+   * @param {Nullable<RTENode>} node - The RTENode.
+   * @returns {number} - The number value.
+   */
+  getRTENodeEndOffset(node) {
+    if (node && node.type !== 'CODE_BLOCK_NODE') {
+      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
     }
-    return newParagraph;
+    return 0;
   }
 }
 
 /**
- * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
- * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
- * The property `newBlock` use to store the new create block if need.
+ * Update the code block content or language action.
  *
- * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
  */
-class BreakSingleBlockAction extends ModifyContentAction {
-  constructor(startContainerNode, startOffset) {
+class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
     super();
-    this.type = ModifyContentActionType.BREAK_SINGLE_BLOCK;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
   }
 }
 
 /**
- * The image block insert line break strategy.
+ * Remove the line break and insert new paragraph after code block.
  */
-class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
   /**
-   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
-   *
-   * @param {LineBreakSingleBlockAction} action - The action instance.
-   * @param {RTEImageBlock} target - The image block.
+   * @inheritDoc
    */
   handleAction(action, target) {
-    const insertNewParagraphAction = new BreakSingleBlockAction(action.startContainerNode, action.startOffset);
-    target.apply(insertNewParagraphAction);
-    const newBlock = insertNewParagraphAction.newBlock;
-    if (newBlock) {
-      action.lineBreakNode = newBlock.nodes[0];
+    const { content, language } = action;
+    const textArray = content.split('\n');
+    const updateAction = new UpdateCodeBlockAction(textArray.slice(0, textArray.length - 2).join('\n'), language);
+    updateAction.isFlushable = false;
+    target.nodes[0].apply(updateAction);
+    const textBlock = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), text: '', type: 'text' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, textBlock));
+    // Focus the next text node after value update.
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: textBlock.nodes[0] });
+      }
     }
   }
 }
 
 /**
- * Insert a line break node into multiple blocks selection at special position strategy.
+ * Update the language or content of code block strategy.
  */
-class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+class UpdateCodeBlockStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
-  }
-  /**
-   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
-   *
-   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
-   * @param {RTEImageBlock} target - The image block.
-   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
-   */
-  lineBreakMultipleBlocks(selectedBlocks, target) {
-    const newParagraph = RTETextBlock.from({
-      id: generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: generateUUID(), type: 'text', text: '\n' }],
-    });
-    target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
-    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
-    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
-      afterNodes.push(new RTETextNode(generateUUID(), '\n', newParagraph));
-    }
-    newParagraph.apply(new AppendChildNodesAction(afterNodes));
-    return newParagraph['nodes'][0];
-  }
-  /**
-   * Concat the child nodes of multiple RTEBlocks if both are not images.
-   *
-   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
-   * @returns {RTENode[]} Array of connected block nodes
-   */
-  concatBlocksNodes(blocks) {
-    const nodes = [];
-    blocks.map((block) => {
-      if (block.type !== 'image') {
-        nodes.push(...block['nodes']);
-        block.parent.apply(new RemoveChildAction(block));
-      }
-    });
-    return nodes;
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
   }
 }
 
 /**
- * Insert a image node at the special position of image block.
+ * Action to change the selection range
  */
-class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
+class SelectionChangeAction extends AnnotationAction {
+  constructor(range) {
+    super();
+    this.isFlushable = false;
+    this.range = range;
+  }
   /**
-   * @inheritDoc
+   * Converts the action to an annotation
+   *
+   * @returns {SelectionRangeAnnotation} The annotation
    */
-  handleAction(action, target) {
-    const splitNode = action.splitPointNode;
-    const startOffsetOfNode = action.startOffsetOfNode;
-    const newImageBlock = action.imageBlockToBeInserted;
-    const newImageNodes = newImageBlock.nodes;
-    if (target.nodes.length < 1) {
-      target.apply(new AppendChildNodesAction(newImageNodes));
-    }
-    else if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
-    }
-    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newImageBlock));
-    }
-    else {
-      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
-      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
-    }
+  toAnnotation() {
+    return new SelectionRangeAnnotation(this.range);
   }
 }
 
 /**
- * Insert some text nodes at the behind of the node strategy.
+ * Update the code block node annotation map strategy.
  */
-class BlockInsertNodesAfterNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    const referNode = action.referNode;
-    const nodes = [referNode, ...action.nodesToBeInserted];
-    this.replaceNodeWithNodes(target, referNode, nodes);
+    target.annotationMap.set(InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
   }
 }
 
 /**
- * Image block
+ * RTE code node DTO class.
  */
-class RTEImageBlock extends RTEBlock {
-  constructor(id) {
+class RTECodeBlockNode extends RTENode {
+  constructor(id, content, language, parentBlock) {
     super(id);
-    this.type = 'image';
-    this.nodes = [];
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parentBlock = parentBlock;
+    this.language = language;
   }
   /**
-   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   * The code node toJSON method will called internal.
    *
-   * @param {VegaRTEImageBlock} block - The block object to be converted.
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
-   */
-  static from(block) {
-    const imageBlock = new RTEImageBlock(block.id);
-    const { annotations } = block;
-    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
-    if (annotations) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (isNonNullable(item)) {
-          imageBlock.annotationMap.set(...item);
-        }
-      });
-    }
-    return imageBlock;
-  }
-  /**
-   * @inheritDoc
+   * @returns {VegaRTECodeNode} - An object contains content property.
    */
   toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
   }
   /**
    * @inheritDoc
    */
-  isNotEmpty() {
-    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  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
    */
-  getLastNode() {
-    return this.nodes[this.nodes.length - 1];
+  clone() {
+    return new RTECodeBlockNode(this.id, this.text, this.language, this.parentBlock);
   }
   /**
-   * Create a new image block.
-   *
-   * @returns {RTEImageBlock} - The empty image block.
+   * @inheritDoc
    */
-  createNewImageBlock() {
-    return new RTEImageBlock(generateUUID());
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
   /**
    * @inheritDoc
    */
-  clone() {
-    const clonedBlock = new RTEImageBlock(this.id);
-    clonedBlock.nodes = this.nodes.map((node) => {
-      const clonedNode = node.clone();
-      clonedNode.parentBlock = clonedBlock;
-      return clonedNode;
-    });
-    clonedBlock.annotationMap = super.cloneAnnotations();
-    clonedBlock.parent = this.parent;
-    return clonedBlock;
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
 }
 (() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEImageBlock.name, new BlockDeleteImageStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEImageBlock.name, new BlockRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEImageBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
 })();
 
 /**
- * The list item block block delete text content strategy.
+ * Insert image behind after code block strategy.
  */
-class ListItemDeleteTextContentStrategy extends BlockDeleteTextContentStrategy {
+class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
   /**
-   * Delete the list item content and delete the parent list after delete the last item.
+   * Insert image block at behind of the RTE code block.
    *
-   * @param {DeleteBlockContentAction} action - The delete block content action instance.
-   * @param {RTEListItemBlock} target - The list item block.
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
    */
   handleAction(action, target) {
-    const listBlock = target.parent;
-    this.deleteNodeContent(action, target);
-    if (listBlock.blocks.length === 0) {
-      listBlock.parent.apply(new RemoveChildAction(listBlock));
-    }
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertBlocksAfterAction(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 list item child node strategy.
+ * The code block DTO class.
  */
-class ListItemRemoveNodeStrategy extends ActionHandleStrategy {
+class RTECodeBlock extends RTEBlock {
+  constructor(id, content, language) {
+    super(id);
+    this.type = 'code-block';
+    this.nodes = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
+  }
   /**
-   * Remove child node from the list item, remove the list item if the list item is empty.
+   * Converts a VegaRTECodeBlock into an RTECodeBlock.
    *
-   * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTEListItemBlock} target - The list item block.
+   * @param {VegaRTECodeBlock} block - The block object
+   * @returns {RTECodeBlock} A RTECodeBlock class
    */
-  handleAction(action, target) {
-    target.nodes = target.nodes.filter((node) => node !== action.entityToBeRemoved);
-    if (target.nodes.length === 0 && (!target.children || !target.children.length)) {
-      target.parent.apply(new RemoveChildAction(target));
-    }
+  static from(block) {
+    return new RTECodeBlock(block.id, block.content, block.language);
   }
-}
-
-/**
- * Remove list item nest list block strategy.
- */
-class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
   /**
-   * Remove the nest list block from the list item, clear the property children when the children is empty.
-   *
-   * @param {RemoveNestListAction} action - The action instance.
-   * @param {RTEListItemBlock} target - The list item block.
+   * @inheritDoc
    */
-  handleAction(action, target) {
-    if (target.children) {
-      if (target.children.length > 1) {
-        target.children = target.children.filter((child) => child !== action.nestListBlockToBeRemoved);
-      }
-      else {
-        target.children = undefined;
-      }
-    }
+  toJSON() {
+    const { language, text } = this.nodes[0];
+    return {
+      id: this.id,
+      type: 'code-block',
+      content: text,
+      language,
+    };
   }
-}
-
-/**
- * Replace list item nest list strategy.
- */
-class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newList.forEach((listBlock) => {
-      listBlock.parent = target;
-    });
-    target.children = action.newList;
+  toHtml() {
+    const { language = CodeLanguage['Plain Text'] } = this.nodes[0];
+    return `<pre data-language="${language}" style="background-color: rgba(var(--v-bg-secondary, 245, 247, 247, 1)); padding: 12px">${this.nodes.map((node) => node.toHtml())}</pre>`;
   }
-}
-
-/**
- * Insert new paragraph into current list item block at special position.
- */
-class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  clone() {
+    const cloneCodeBlock = RTECodeBlock.from(this.toJSON());
+    cloneCodeBlock.parent = this.parent;
+    return cloneCodeBlock;
   }
   /**
-   * Breaks a single list item block at a specific position.
+   * Apply action to block
    *
-   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
-   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
-   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
-   * caret position if it is neither at the start nor at the end.
+   * @param {ModifyContentAction} action - modify content action.
    */
-  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
-    const newListItem = target.createNewListItem();
-    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
-    newListItem.apply(new AppendChildNodesAction([newBreakNode]));
-    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
-      return this.breakListItemAtEnd(newListItem, target);
+  apply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
     }
-    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newListItem));
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
     }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
-    }
-    return newListItem;
-  }
-  /**
-   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
-   *
-   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {RTEBlock} Returns a `RTEBlock`.
-   */
-  breakListItemAtEnd(newListItem, target) {
-    const lastItem = target.parent.blocks[target.parent.blocks.length - 1];
-    const currentItemIsEmpty = target.nodes.length === 1 && target.nodes[0].isEmpty();
-    if (target === lastItem && currentItemIsEmpty) {
-      const parentParent = target.parent.parent;
-      if (parentParent['type'] !== 'list-item') {
-        const newParagraph = RTETextBlock.from({
-          id: generateUUID(),
-          type: 'paragraph',
-          nodes: [],
-        });
-        newParagraph.apply(new AppendChildNodesAction(newListItem.nodes));
-        parentParent.apply(new InsertBlocksAfterAction(target.parent, newParagraph));
-        target.parent.apply(new RemoveChildAction(target));
-        return newParagraph;
-      }
-      else {
-        parentParent.parent.apply(new InsertBlocksAfterAction(parentParent, newListItem));
-        target.parent.apply(new RemoveChildAction(target));
-      }
-    }
-    else {
-      target.parent.apply(new InsertBlocksAfterAction(target, newListItem));
-    }
-    return newListItem;
-  }
-  /**
-   * Copy the inline style to new node
-   *
-   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
-   * @returns {RTETextNode} Returns a `RTETextNode`.
-   */
-  copyInlineStyleToNewNode(needCopedNode) {
-    const textNode = needCopedNode.cloneWithText('');
-    // The link annotation doesn't need to inherit
-    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
-    return textNode;
-  }
-}
-
-/**
- * Insert image node to list item block strategy.
- */
-class ListItemInsertImageStrategy extends ActionHandleStrategy {
-  /**
-   * The image node can not insert into list item block, so insert image after parent list block.
-   *
-   * @param {InsertImageToBlockAction} action - The action instance.
-   * @param {RTEListItemBlock} target - The list item block.
-   */
-  handleAction(action, target) {
-    target.parent.apply(action);
-  }
-}
-
-/**
- * List item block
- */
-class RTEListItemBlock extends RTETextBlock {
-  constructor(id, children) {
-    super(id, 'list-item');
-    this.children = [];
-    this.children = children;
-  }
-  /**
-   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
-   *
-   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
-   */
-  static from(block) {
-    const listItemBlock = new RTEListItemBlock(block.id);
-    listItemBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock));
-    if (block.children) {
-      listItemBlock.children = block.children.map((child) => {
-        const listBlock = RTEListBlock.from(child);
-        listBlock.parent = listItemBlock;
-        return listBlock;
-      });
-    }
-    const { annotations } = block;
-    if (annotations) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (isNonNullable(item)) {
-          listItemBlock.annotationMap.set(...item);
-        }
-      });
-    }
-    return listItemBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    var _a;
-    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
-  }
-  /**
-   * @inheritDoc
-   */
-  cloneWithNodes(nodes) {
-    const block = new RTEListItemBlock(generateUUID());
-    block.nodes = [];
-    block.apply(new AppendChildNodesAction(nodes));
-    return block;
-  }
-  /**
-   * @inheritDoc
-   */
-  getLastNode() {
-    if (this.children && this.children.length > 0) {
-      const childListBlock = this.children[this.children.length - 1];
-      return childListBlock.getLastNode();
-    }
-    return super.getLastNode();
-  }
-  /**
-   * Create a new list item block.
-   *
-   * @returns {RTEListItemBlock} - A list item block.
-   */
-  createNewListItem() {
-    return new RTEListItemBlock(generateUUID());
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    var _a;
-    const block = new RTEListItemBlock(this.id);
-    block.nodes = this.nodes.map((node) => {
-      const clonedNode = node.clone();
-      clonedNode.parentBlock = block;
-      return clonedNode;
-    });
-    block.annotationMap = super.cloneAnnotations();
-    block.children = (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((child) => {
-      const clonedChild = child.clone();
-      clonedChild.parent = block;
-      return clonedChild;
-    });
-    block.parent = this.parent;
-    return block;
-  }
-}
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEListItemBlock.name, new ListItemRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEListItemBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new ListItemInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTEListItemBlock.name, new BlockInsertNodesBeforeNodeStrategy());
-})();
-
-/**
- * Insert block array at the front of the block strategy.
- */
-class BlockInsertBlocksBeforeStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.replaceBlockWithBlocks(target, action.referBlock, [
-      ...action.blocksToBeInserted,
-      action.referBlock,
-    ]);
-  }
-  /**
-   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
-   *
-   * @param {RTEListBlock|VegaRTEContent} target - The list block or the VegaRTEContent instance.
-   * @param {RTEBlock} referBlock - Used as a reference block to identify the block that needs to be replaced in the `blocks` array.
-   * @param {RTEBlock[]} blocks - An array of RTEBlock objects that you want to replace the `referBlock` with in the `blocks` array.
-   */
-  replaceBlockWithBlocks(target, referBlock, blocks) {
-    if (target.blocks) {
-      blocks.forEach((block) => {
-        block.parent = target;
-      });
-      const arrayFixed = target.blocks;
-      target.blocks = arrayFixed.flatMap((block) => {
-        if (block === referBlock) {
-          return blocks;
-        }
-        else {
-          return block;
-        }
-      });
-    }
-  }
-}
-
-/**
- * Insert block array at the behind of the block strategy.
- */
-class BlockInsertBlocksAfterStrategy extends BlockInsertBlocksBeforeStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.replaceBlockWithBlocks(target, action.referBlock, [
-      action.referBlock,
-      ...action.blocksToBeInserted,
-    ]);
-  }
-}
-
-/**
- * Append new block array to list block or VegaRTEContent instance strategy.
- */
-class BlockAppendBlocksStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const newBlocks = action.entityToBeAppended;
-    if (target.blocks) {
-      newBlocks.forEach((block) => {
-        block.parent = target;
-      });
-      const arrayFixed = target.blocks;
-      target.blocks = arrayFixed.concat(newBlocks);
-    }
-  }
-}
-
-/**
- * Delete the nest list block action
- *
- * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
- */
-class RemoveNestListAction extends ModifyContentAction {
-  constructor(childList) {
-    super();
-    this.type = ModifyContentActionType.DELETE_NEST_LIST;
-    this.nestListBlockToBeRemoved = childList;
-  }
-}
-
-/**
- * List block or VegaRTEContent remove child block strategy.
- */
-class BlockRemoveChildBlockStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const blockToBeRemoved = action.entityToBeRemoved;
-    if (target.blocks) {
-      target.blocks = target.blocks.filter((block) => block !== blockToBeRemoved);
-    }
-  }
-}
-
-/**
- * List remove list item strategy.
- */
-class ListRemoveListItemStrategy extends BlockRemoveChildBlockStrategy {
-  /**
-   * Remove the list item, check the list item and remove self if the list item is empty.
-   *
-   * @param {RemoveChildAction} action - The remove action instance.
-   * @param {RTEListBlock} target - The list block.
-   */
-  handleAction(action, target) {
-    super.handleAction(action, target);
-    const parent = target.parent;
-    if (target.blocks.length === 0 && parent) {
-      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
-      if (parent['type'] === 'list-item') {
-        parent.apply(new RemoveNestListAction(target));
-      }
-      else {
-        parent.apply(new RemoveChildAction(target));
-      }
-    }
-  }
-}
-
-/**
- * Convert the selected blocks to list strategy.
- */
-class ListTransformToListStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const selectedBlocks = action.selectedBlocks;
-    const bulletList = target.parent.createList(action.listType);
-    const isSameList = selectedBlocks.every((block) => block.parent === target);
-    if (isSameList) {
-      // Select one or more list items belonging to the same list, and all items in this list should be updated
-      bulletList.apply(new AppendChildNodesAction(target.blocks));
-      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
-      target.parent.apply(new RemoveChildAction(target));
-      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new SyncUpSelectionAction())));
-    }
-    else {
-      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
-      bulletList.apply(new AppendChildNodesAction(listItems));
-      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
-      action.selectedBlocks.forEach((block) => {
-        block.parent.apply(new RemoveChildAction(block));
-      });
-      if (target.blocks.length === 0) {
-        target.parent.apply(new RemoveChildAction(target));
-      }
-    }
-  }
-}
-
-/**
- * Convert the selected list block to paragraph strategy.
- */
-class ListTransformToParagraphStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    let isSelectedFirstBlock = false;
-    let isSelectedLastBlock = false;
-    const selectedBlocks = action.selectedBlocks;
-    const currentParagraph = selectedBlocks.map((block) => {
-      block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
-      if (block === target.blocks[0])
-        isSelectedFirstBlock = true;
-      if (block === target.blocks[target.blocks.length - 1])
-        isSelectedLastBlock = true;
-      return this.toParagraph(block);
-    });
-    if (isSelectedFirstBlock) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, ...currentParagraph));
-    }
-    else if (isSelectedLastBlock) {
-      target.parent.apply(new InsertBlocksAfterAction(target, ...currentParagraph));
-    }
-    else {
-      const startIndex = target.blocks.indexOf(selectedBlocks[0]);
-      const lastIndex = target.blocks.indexOf(selectedBlocks[selectedBlocks.length - 1]);
-      const firstBulletList = target.parent.createList(target.type);
-      firstBulletList.apply(new AppendChildNodesAction(target.blocks.slice(0, startIndex)));
-      const lastBulletList = target.parent.createList(target.type);
-      lastBulletList.apply(new AppendChildNodesAction(target.blocks.slice(lastIndex + 1)));
-      target.parent.apply(new InsertBlocksBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
-      target.parent.apply(new RemoveChildAction(target));
-    }
-    selectedBlocks.map((block) => {
-      target.apply(new RemoveChildAction(block));
-    });
-    if (target.blocks.length === 0) {
-      target.parent.apply(new RemoveChildAction(target));
-    }
-  }
-  /**
-   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
-   *
-   * @param {RTEListItemBlock} block - The block that will be covered
-   * @returns {RTETextBlock} Returns a `RTETextBlock`.
-   */
-  toParagraph(block) {
-    const textBlock = new RTETextBlock(generateUUID(), 'paragraph');
-    textBlock.apply(new AppendChildNodesAction(block['nodes']));
-    textBlock['annotationMap'] = block['annotationMap'];
-    return textBlock;
-  }
-}
-
-/**
- * Insert image to list block strategy.
- */
-class ListInsertImageStrategy extends ActionHandleStrategy {
-  /**
-   * Insert image block at behind of the list item block.
-   *
-   * @param {InsertImageToBlockAction} action - The insert image action instance.
-   * @param {RTEListBlock} target - The list block.
-   */
-  handleAction(action, target) {
-    const imageBlock = action.imageBlockToBeInserted;
-    if (target.parent['type'] !== 'list-item') {
-      target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
-    }
-    else {
-      target.parent.apply(action);
-    }
-  }
-}
-
-/**
- * List block
- */
-class RTEListBlock extends RTEBlock {
-  constructor(id, type) {
-    super(id);
-    this.type = 'bullet-list';
-    this.blocks = [];
-    this.type = type;
-  }
-  /**
-   * Converts a VegaRTEListBlock object to an RTEListBlock
-   *
-   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
-   */
-  static from(block) {
-    const listBlock = new RTEListBlock(block.id, block.type);
-    listBlock.blocks = block.blocks.map((item) => {
-      const listItemBlock = RTEListItemBlock.from(item);
-      listItemBlock.parent = listBlock;
-      return listItemBlock;
-    });
-    return listBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
   }
   /**
    * @inheritDoc
    */
   isNotEmpty() {
-    return this.blocks.length > 0;
+    return !!this.nodes.length;
   }
   /**
    * @inheritDoc
    */
   getLastNode() {
-    return this.blocks[this.blocks.length - 1].getLastNode();
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    const clonedListBlock = new RTEListBlock(this.id, this.type);
-    clonedListBlock.blocks = this.blocks.map((item) => {
-      const clonedListItemBlock = item.clone();
-      clonedListItemBlock.parent = clonedListBlock;
-      return clonedListItemBlock;
-    });
-    clonedListBlock.annotationMap = super.cloneAnnotations();
-    clonedListBlock.parent = this.parent;
-    return clonedListBlock;
-  }
-}
-(() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTEListBlock.name, new ListRemoveListItemStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, RTEListBlock.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, RTEListBlock.name, new BlockInsertBlocksAfterStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTEListBlock.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
-})();
-
-/**
- * Class representing the content state of the rich text editor.
- */
-class VegaRTEContent {
-  constructor(blocks) {
-    blocks.forEach((block) => {
-      block.parent = this;
-    });
-    this.blocks = blocks;
-  }
-  /**
-   * Converts a JSON array of blocks to a class array of RTEContentBlock.
-   *
-   * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
-   */
-  static fromJSON(value) {
-    const blocks = value.map((block) => {
-      switch (block.type) {
-        case 'paragraph':
-        case 'title':
-        case 'subtitle':
-        case 'heading-1':
-        case 'heading-2':
-        case 'heading-3': {
-          return RTETextBlock.from(block);
-        }
-        case 'image':
-          return RTEImageBlock.from(block);
-        case 'bullet-list':
-        case 'number-list':
-          return RTEListBlock.from(block);
-        default: {
-          throw new Error(`[Vega] Unknown block type: ${block.type}`);
-        }
-      }
-    });
-    return new VegaRTEContent(blocks);
-  }
-  /**
-   * Create an empty content state
-   *
-   * @returns {VegaRTEContent} An empty content state
-   */
-  static createEmptyContent() {
-    return VegaRTEContent.fromJSON([
-      {
-        id: generateUUID(),
-        type: 'paragraph',
-        nodes: [
-          {
-            id: generateUUID(),
-            type: 'text',
-            text: '',
-          },
-        ],
-      },
-    ]);
+    return this.nodes[0];
   }
   /**
-   * Clones the content state.
+   * The code block is selected or not.
    *
-   * @param {boolean} deep - If true, performs a deep clone of the content state.
-   * @returns {VegaRTEContent} The cloned content state.
+   * @returns {boolean} - The boolean result.
    */
-  clone(deep = false) {
-    return deep
-      ? new VegaRTEContent(this.blocks.map((block) => block.clone()))
-      : new VegaRTEContent([...this.blocks]);
-  }
-  /**
-   * Converts the content state to a JSON array of blocks.
-   *
-   * @returns {VegaRTEContentBlock[]} The JSON array of blocks.
-   */
-  toJSON() {
-    return this.blocks.map((block) => block.toJSON());
-  }
-  /**
-   * Internal method to add the block item, remove the block item
-   *
-   * @param {ModifyContentAction} action - Modify content action
-   */
-  apply(action) {
-    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
-  }
-  /**
-   * Convert text to list.
-   *
-   * @param {RTETextBlock} block - block
-   * @returns {RTEListItemBlock} list item block dto.
-   */
-  toListItem(block) {
-    block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
-    const listItemBlock = new RTEListItemBlock(generateUUID());
-    listItemBlock.apply(new AppendChildNodesAction(block['nodes']));
-    listItemBlock['annotationMap'] = block['annotationMap'];
-    return listItemBlock;
-  }
-  /**
-   * create list.
-   *
-   * @param {ListType} type - type
-   * @returns {RTEListBlock} list block dto.
-   */
-  createList(type) {
-    return new RTEListBlock(generateUUID(), type);
-  }
-  /**
-   * Finds a node by its ID in the content.
-   *
-   * @param {string} id - The ID of the node to find.
-   * @returns {Nullable<RTENode>} The found node or null if not found.
-   */
-  findNodeById(id) {
-    return this.findNodeInBlocksById(id, this.blocks);
-  }
-  /**
-   * Recursively searches for a node by its ID in the given blocks.
-   *
-   * @param {string} id - The ID of the node to find.
-   * @param {RTEContentBlock[]} blocks - The blocks to search within.
-   * @returns {Nullable<RTENode>} The found node or null if not found.
-   */
-  findNodeInBlocksById(id, blocks) {
-    for (const block of blocks) {
-      if ('nodes' in block) {
-        for (const node of block.nodes) {
-          if (node.id === id) {
-            return node;
-          }
-        }
-      }
-      if (block instanceof RTEListItemBlock && block.children) {
-        for (const cBlock of block.children) {
-          const foundNode = this.findNodeInBlocksById(id, cBlock.blocks);
-          if (foundNode) {
-            return foundNode;
-          }
-        }
-      }
-      if (block instanceof RTEListBlock && block.blocks) {
-        const foundNode = this.findNodeInBlocksById(id, block.blocks);
-        if (foundNode) {
-          return foundNode;
-        }
-      }
-    }
-    return null;
+  isSelected() {
+    return this.nodes[0].annotationMap.has(InternalAnnotationTypeEnum.SELECTION_RANGE);
   }
 }
 (() => {
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  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 { AnnotationAction as A, BlockAnnotation as B, ClearFormattingAnnotationAction as C, BreakSingleBlockAction as D, RemoveChildAction as E, ReplaceChildNodesAction as F, InsertBlocksBeforeAction as G, HorizontalAlignmentAnnotation as H, InternalAnnotationTypeEnum as I, InsertBlocksAfterAction as J, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotation as N, RTETextBlock as R, StrikethroughAnnotation as S, TextSplittableAction as T, UnderlineAnnotation as U, VegaRTEContent as V, ZERO_WIDTH_SPACE as Z, RTEImageBlock as a, RTEListItemBlock as b, RTEListBlock as c, RTEBlock as d, RTEImageNode as e, RTETextNode as f, RTENode as g, NodeAnnotationTypeEnum as h, ImageAnnotation as i, TextColorAnnotation as j, RTE_TEXT_COLORS as k, BoldAnnotationAction as l, ItalicAnnotation as m, TextStyleAnnotationAction as n, TextStyleAnnotation as o, BoldAnnotation as p, BlockAnnotationTypeEnum as q, CodeAnnotationAction as r, stateEntityRenderingRegistry as s, SelectionRangeAnnotation as t, IndentAnnotation as u, ModifyContentActionType as v, AppendChildNodesAction as w, UpdateTextAction as x, MergeTwoBlocksNodesAction as y, SplitBlockWithNodeAction as z };
+export { UnderlineAnnotationAction as $, ActionHandleStrategy as A, BlockDeleteNodeContentStrategy as B, CustomStyleAnnotation as C, RTE_TEXT_COLORS as D, RTENode as E, stateEntityRenderingRegistry as F, InternalAnnotationTypeEnum as G, HorizontalAlignmentAnnotationAction as H, InsertBlocksAfterAction as I, ImageAnnotation as J, CommonAnnotationTypeEnum as K, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotationTypeEnum as N, NodeAnnotation as O, SelectionChangeAction as P, TextColorAnnotation as Q, RemoveChildAction as R, SplitBlockWithNodeAction as S, TextSplittableAction as T, UpdateCodeBlockAction as U, RTECodeBlockNode as V, AnnotationAction as W, CodeLanguage as X, BoldAnnotationAction as Y, ZERO_WIDTH_SPACE as Z, ItalicAnnotationAction as _, RTEImageNode as a, TextStyleAnnotationAction as a0, TextStyleAnnotation as a1, BoldAnnotation as a2, ClearFormattingAnnotationAction as a3, CodeAnnotationAction as a4, StrikethroughAnnotationAction as a5, IndentAnnotationAction as a6, UpdateTextAction as a7, MergeTwoBlocksNodesAction as a8, 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, BlockUpdateHorizontalAlignmentStrategy as p, BlockDeleteTextContentStrategy as q, BlockInsertLineBreakStrategy as r, BlockInsertLineBreakWithBlocksStrategy as s, BlockSplitWithTextNodeStrategy as t, SyncUpSelectionAction as u, BlockAnnotation as v, BlockAnnotationTypeEnum as w, CustomClassAnnotation as x, CustomAttributeAnnotation as y, RTECodeBlock as z };