@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

package/dist/cjs/{content-state-6a48bcb5.js → code-block-4cd8bccd.js}

@@ -1,10 +1,11 @@
 'use strict';
 
+const typeGuard = require('./type-guard-4ba85fdc.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bfea9b93.js');
+const vegaInternalEventId = require('./vega-internal-event-id-62371952.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const typeGuard = require('./type-guard-4ba85fdc.js');
+const string = require('./string-39438062.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
 const darkModeStyleController = require('./dark-mode-style-controller-4adb7fb2.js');
 
@@ -25,6 +26,7 @@ exports.BlockAnnotationTypeEnum = void 0;
   BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
   BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
   BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+  BlockAnnotationTypeEnum["LIST"] = "LIST";
 })(exports.BlockAnnotationTypeEnum || (exports.BlockAnnotationTypeEnum = {}));
 /**
  * BlockAnnotation is an abstract class that represents a block annotation.
@@ -103,6 +105,10 @@ exports.ModifyContentActionType = void 0;
   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";
 })(exports.ModifyContentActionType || (exports.ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -142,12 +148,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
@@ -156,12 +170,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' };
+    }
   }
 }
 
@@ -197,13 +219,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;
   }
 }
 
@@ -262,6 +290,193 @@ class ActionHandleStrategyRegistry {
 }
 ActionHandleStrategyRegistry.registry = new Map();
 
+exports.CommonAnnotationTypeEnum = void 0;
+(function (CommonAnnotationTypeEnum) {
+  CommonAnnotationTypeEnum["CUSTOM_ATTRIBUTE"] = "CUSTOM_ATTRIBUTE";
+  CommonAnnotationTypeEnum["CUSTOM_CLASS"] = "CUSTOM_CLASS";
+  CommonAnnotationTypeEnum["CUSTOM_STYLE"] = "CUSTOM_STYLE";
+})(exports.CommonAnnotationTypeEnum || (exports.CommonAnnotationTypeEnum = {}));
+/**
+ * CommonAnnotation is an abstract class that represents common annotation for block and node.
+ */
+class CommonAnnotation extends Annotation {
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomAttributeAnnotation extends CommonAnnotation {
+  constructor(customAttribute) {
+    super();
+    this.type = exports.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE;
+    this.customAttribute = customAttribute;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Record<string, string>} customizeAttribute - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, CustomAttributeAnnotation]} Map item for the annotation
+   */
+  static from(customizeAttribute) {
+    return [exports.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE, new CustomAttributeAnnotation(customizeAttribute)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customAttribute: this.customAttribute,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomAttributeAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomAttributeAnnotation(this.customAttribute);
+  }
+  /**
+   * Generate the custom attribute of current element, excluding 'style' and 'class'
+   *
+   * @param {string[]} filterAttr - should filter these existed attrs
+   * @returns {string[]} - Custom attributes
+   */
+  toString(filterAttr = []) {
+    const filterAttrKeys = filterAttr.map((attr) => attr.split('=')[0]);
+    return Object.keys(this.customAttribute)
+      .map((key) => {
+      return !filterAttrKeys.includes(key) ? `${key}="${this.customAttribute[key]}"` : null;
+    })
+      .filter(typeGuard.isNonNullable);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @param {RTERenderCustomAttributes} options - should filter these certain attrs
+   * @returns {Record<string, string>} custom attribute
+   */
+  render(options = {}) {
+    var _a;
+    const customAttribute = Object.assign({}, this.customAttribute);
+    (_a = options.filterAttributes) === null || _a === void 0 ? void 0 : _a.forEach((attr) => delete customAttribute[attr]);
+    return customAttribute;
+  }
+}
+
+/**
+ * Annotation to add custom class of element
+ */
+class CustomClassAnnotation extends CommonAnnotation {
+  constructor(customClass) {
+    super();
+    this.type = exports.CommonAnnotationTypeEnum.CUSTOM_CLASS;
+    this.customClass = customClass;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string[]} customClass - custom class annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_CLASS, CustomClassAnnotation]} Map item for the annotation
+   */
+  static from(customClass) {
+    return [exports.CommonAnnotationTypeEnum.CUSTOM_CLASS, new CustomClassAnnotation(customClass)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customClass: this.customClass,
+    };
+  }
+  /**
+   * Create a new custom class annotation
+   *
+   * @returns {CustomClassAnnotation} - Custom class annotation
+   */
+  clone() {
+    return new CustomClassAnnotation(this.customClass);
+  }
+  /**
+   * Generate the custom class of current element
+   *
+   * @returns {string} - Custom class
+   */
+  toString() {
+    return `class="${this.customClass.join(' ')}"`;
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {string[]} custom classes
+   */
+  renderClass() {
+    return this.customClass;
+  }
+}
+
+/**
+ * Annotation to add custom attributes of element
+ */
+class CustomStyleAnnotation extends CommonAnnotation {
+  constructor(customStyle) {
+    super();
+    this.type = exports.CommonAnnotationTypeEnum.CUSTOM_STYLE;
+    this.customStyle = customStyle;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {AnnotationStyle} customStyle - custom attribute annotation
+   * @returns {[CommonAnnotationTypeEnum.CUSTOM_STYLE, CustomStyleAnnotation]} Map item for the annotation
+   */
+  static from(customStyle) {
+    return [exports.CommonAnnotationTypeEnum.CUSTOM_STYLE, new CustomStyleAnnotation(customStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      customStyle: this.customStyle,
+    };
+  }
+  /**
+   * Create a new custom attribute annotation
+   *
+   * @returns {CustomStyleAnnotation} - Custom attribute annotation
+   */
+  clone() {
+    return new CustomStyleAnnotation(this.customStyle);
+  }
+  /**
+   * Generate the custom attribute for the annotation
+   *
+   * @returns {AnnotationStyle} custom attribute
+   */
+  renderStyle() {
+    return this.customStyle;
+  }
+  /**
+   * Remove the style
+   *
+   * @param {string[]} styleKeys - custom attribute annotation
+   * @returns {AnnotationStyle} Map item for the annotation
+   */
+  removeStyles(styleKeys) {
+    const customStyle = Object.assign({}, this.customStyle);
+    styleKeys.forEach((item) => delete customStyle[item]);
+    return customStyle;
+  }
+}
+
 /**
  * Abstract class for block
  */
@@ -279,7 +494,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) {
@@ -288,6 +503,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);
     }
   }
   /**
@@ -297,7 +518,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());
     }, {});
@@ -330,6 +551,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(typeGuard.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(typeGuard.isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {Nullable<CustomAttributeAnnotation>} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(exports.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join('');
+    const customClassAnnotation = this.annotationMap.get(exports.CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(typeGuard.isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
   /**
    * Apply action to block
    *
@@ -363,10 +639,29 @@ class RTEBlock {
   }
 }
 
+exports.NodeAnnotationTypeEnum = void 0;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+})(exports.NodeAnnotationTypeEnum || (exports.NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
 var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
 })(NodeTypeEnum || (NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes
@@ -379,6 +674,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
    *
@@ -411,6 +724,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(typeGuard.isNonNullable)
+      .reduce((pre, cur) => [pre, cur].join(' ').trim(), '');
+  }
+  /**
+   * Get custom attribute annotation, excluding "class" and "style"
+   *
+   * @returns {CustomAttributeAnnotation} - custom attribute annotation
+   */
+  getCustomAttributesAnnotation() {
+    return this.annotationMap.get(exports.CommonAnnotationTypeEnum.CUSTOM_ATTRIBUTE);
+  }
+  /**
+   * Generate attributes as string
+   *
+   * @param {...string} attrs - Additional attributes to include
+   * @returns {string} - Attributes as string
+   */
+  generateAttributeString(...attrs) {
+    var _a;
+    const styles = Object.entries(Object.assign({}, this.getStyles({ standalone: true })))
+      .map(([key, value]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join('');
+    const customClassAnnotation = this.annotationMap.get(exports.CommonAnnotationTypeEnum.CUSTOM_CLASS);
+    const customAttributeString = ((_a = this.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.toString(attrs)) || [];
+    const attributes = [
+      ...customAttributeString,
+      customClassAnnotation === null || customClassAnnotation === void 0 ? void 0 : customClassAnnotation.toString(),
+      styles ? `style="${styles}"` : null,
+      ...attrs,
+    ].filter(typeGuard.isNonNullable);
+    return attributes.length ? ` ${attributes.join(' ')}` : '';
+  }
   /**
    * apply annotation action or modify content action
    *
@@ -446,24 +814,6 @@ class RTENode {
   }
 }
 
-exports.NodeAnnotationTypeEnum = void 0;
-(function (NodeAnnotationTypeEnum) {
-  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
-  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
-  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
-  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
-  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
-  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
-  NodeAnnotationTypeEnum["CODE"] = "CODE";
-  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
-  NodeAnnotationTypeEnum["LINK"] = "LINK";
-})(exports.NodeAnnotationTypeEnum || (exports.NodeAnnotationTypeEnum = {}));
-/**
- * Abstract class for all annotations
- */
-class NodeAnnotation extends Annotation {
-}
-
 /**
  * Annotation for image
  */
@@ -506,20 +856,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%' });
       }
     }
   }
@@ -587,6 +946,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(exports.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));
+  }
 }
 
 /**
@@ -647,7 +1028,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(typeGuard.isNonNullable));
     return imageNode;
   }
@@ -655,14 +1041,13 @@ class RTEImageNode extends RTENode {
    * @inheritDoc
    */
   toJSON() {
-    const imageAnnotation = this.annotationMap.get(exports.NodeAnnotationTypeEnum.IMAGE);
-    const annotations = {};
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
-      annotations.size = imageAnnotation.size;
-    }
-    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
-      annotations.alt = imageAnnotation.alt;
-    }
+    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 });
   }
   /**
@@ -671,6 +1056,18 @@ class RTEImageNode extends RTENode {
   clone() {
     return new RTEImageNode(this.id, this.url, this.parentBlock, super.cloneAnnotations());
   }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const imageAnnotation = this.getAnnotationByType(exports.NodeAnnotationTypeEnum.IMAGE);
+    const attrStr = super.generateAttributeString(...[
+      imageAnnotation && imageAnnotation.alt ? `alt="${imageAnnotation.alt}"` : null,
+      `src="${this.url}"`,
+      `data-size="${imageAnnotation.size}"`,
+    ].filter(typeGuard.isNonNullable));
+    return `<img${attrStr}>`;
+  }
   /**
    * @inheritDoc
    */
@@ -858,76 +1255,24 @@ class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
   }
 }
 
+/** Append blocks or nodes to a block */
+class AppendChildNodesAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = exports.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 = exports.ModifyContentActionType.APPEND_CHILD_NODES;
-    this.entityToBeAppended = childNodes;
-  }
-}
-
-/**
- * Append the second block child nodes to the first block child nodes and remove the second block strategy.
- */
-class BlockMergeNodesStrategy extends ActionHandleStrategy {
-  /**
-   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
-   *
-   * @param {MergeTwoBlocksNodesAction} action - The merge block nodes action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The first text block or image block.
+   * @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;
@@ -951,7 +1296,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;
@@ -1026,51 +1371,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
  *
@@ -1167,20 +1467,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;
   }
 }
 
@@ -1219,20 +1519,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;
   }
 }
 
@@ -1271,12 +1571,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;
   }
 }
 
@@ -1315,12 +1623,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;
   }
 }
 
@@ -1359,20 +1675,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;
   }
 }
 
@@ -1445,19 +1766,15 @@ class TextColorAnnotation extends NodeAnnotation {
     return new TextColorAnnotation(this.textColor.key);
   }
   /**
-   * Generate the class for the annotation
-   *
-   * @returns {Nullable<string>} - Annotation class
+   * @inheritDoc
    */
   renderClass() {
     return null;
   }
   /**
-   * Generate the style for the annotation
-   *
-   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   * @inheritDoc
    */
-  render() {
+  renderStyle() {
     return {
       color: darkModeStyleController.VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
     };
@@ -1489,10 +1806,7 @@ class LinkAnnotation extends NodeAnnotation {
    * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
    */
   static from(link) {
-    return [
-      exports.NodeAnnotationTypeEnum.LINK,
-      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
-    ];
+    return [exports.NodeAnnotationTypeEnum.LINK, new LinkAnnotation(link)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -1500,7 +1814,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
@@ -1518,11 +1834,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;
   }
 }
@@ -1544,6 +1864,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 `${string.camelToDashCase(key)}="${valueString}"`;
+    })
+      .join(' ');
+  }
+  /**
+   * Convert the custom style, class and attribute to JSX attributes
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {Record<string, string | AnnotationStyle>} JSX used attributes.
+   */
+  toJsx(linkAnnotation, options) {
+    const linkStyle = this.getStyle(linkAnnotation, options);
+    const linkClass = this.getClass(linkAnnotation, options);
+    const attributes = this.getAttribute(linkAnnotation);
+    if (linkClass.length > 0) {
+      attributes.class = linkClass.join(' ');
+    }
+    if (linkStyle && Object.keys(linkStyle).length > 0) {
+      attributes.style = linkStyle;
+    }
+    return attributes;
+  }
+  /**
+   * Get the custom class for the annotation
+   *
+   * @param {linkAnnotation} linkAnnotation current link annotation which saved custom style, class and attribute.
+   * @param {RTERenderContext} options - options.
+   * @returns {string[]} Link class
+   */
+  getClass(linkAnnotation, options) {
+    const linkClass = [];
+    if (linkAnnotation.link.customClass)
+      linkClass.push(...linkAnnotation.link.customClass);
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      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]) => `${string.camelToDashCase(key)}: ${value};`)
+      .join(' ');
+  }
 }
 
 /**
@@ -1792,6 +2200,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
  */
@@ -1806,6 +2233,7 @@ class ClearFormattingAnnotation extends Annotation {
       exports.NodeAnnotationTypeEnum.STRIKETHROUGH,
       exports.NodeAnnotationTypeEnum.TEXT_COLOR,
       exports.NodeAnnotationTypeEnum.CODE,
+      exports.CommonAnnotationTypeEnum.CUSTOM_STYLE,
     ];
   }
 }
@@ -1866,6 +2294,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
  */
@@ -1890,6 +2337,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.
  */
@@ -1922,6 +2407,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;
     }
@@ -1985,18 +2480,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(exports.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.
    *
@@ -2122,44 +2629,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',
+        };
       }
     }
   }
@@ -2185,25 +2754,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.
  */
@@ -2230,6 +2780,7 @@ class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
         node.apply(new DeleteNodeAnnotationAction(exports.NodeAnnotationTypeEnum.BOLD));
       });
     }
+    this.updateCustomStyleAnnotation(target, ['fontFamily', 'lineHeight', 'fontWeight', 'fontSize']);
   }
 }
 
@@ -2516,7 +3067,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()) {
@@ -2656,22 +3209,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
@@ -2699,7 +3320,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) {
@@ -2756,6 +3377,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(exports.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(exports.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
    *
@@ -2802,6 +3453,33 @@ class RTETextBlock extends RTEBlock {
   createNewParagraph() {
     return new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
   }
+  /**
+   * Get the HTML tag for the block based on its type.
+   *
+   * @returns {RTETextBlockTagType} The HTML tag for the block.
+   */
+  getBlockTag() {
+    switch (this.type) {
+      case 'title':
+      case 'subtitle':
+        return `div`;
+      case 'heading-1':
+        return `h1`;
+      case 'heading-2':
+        return `h2`;
+      case 'heading-3':
+        return `h3`;
+      case 'heading-4':
+        return `h4`;
+      case 'heading-5':
+        return `h5`;
+      case 'heading-6':
+        return `h6`;
+      case 'paragraph':
+      default:
+        return 'p';
+    }
+  }
   /**
    * @inheritDoc
    */
@@ -2814,6 +3492,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(exports.ModifyContentActionType.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
   ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());
@@ -2830,1034 +3510,389 @@ 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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.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 = exports.ModifyContentActionType.BREAK_SINGLE_BLOCK;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
+    this.isFlushable = true;
+    this.type = exports.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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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(createPublicApiRuntimeMetricsSlimmer.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(exports.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 (typeGuard.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(createPublicApiRuntimeMetricsSlimmer.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(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEImageBlock.name, new BlockDeleteImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEImageBlock.name, new BlockRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEImageBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.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));
   }
 }
 
+exports.CodeLanguage = void 0;
+(function (CodeLanguage) {
+  CodeLanguage["CSS"] = "css";
+  CodeLanguage["HTML"] = "html";
+  CodeLanguage["JavaScript"] = "js";
+  CodeLanguage["JSX"] = "jsx";
+  CodeLanguage["Plain Text"] = "plainText";
+  CodeLanguage["TypeScript"] = "ts";
+  CodeLanguage["TSX"] = "tsx";
+})(exports.CodeLanguage || (exports.CodeLanguage = {}));
+
 /**
- * Remove 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 = exports.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.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.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: createPublicApiRuntimeMetricsSlimmer.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(exports.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 (typeGuard.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(createPublicApiRuntimeMetricsSlimmer.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(createPublicApiRuntimeMetricsSlimmer.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(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEListItemBlock.name, new ListItemRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListItemBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new ListItemInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.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 = exports.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(createPublicApiRuntimeMetricsSlimmer.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(exports.ModifyContentActionType.DELETE_CHILD, RTEListBlock.name, new ListRemoveListItemStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, RTEListBlock.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, RTEListBlock.name, new BlockInsertBlocksAfterStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListBlock.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-        type: 'paragraph',
-        nodes: [
-          {
-            id: createPublicApiRuntimeMetricsSlimmer.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(createPublicApiRuntimeMetricsSlimmer.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(createPublicApiRuntimeMetricsSlimmer.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(exports.InternalAnnotationTypeEnum.SELECTION_RANGE);
   }
 }
 (() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
 })();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
 
+exports.ActionHandleStrategy = ActionHandleStrategy;
+exports.ActionHandleStrategyRegistry = ActionHandleStrategyRegistry;
 exports.AnnotationAction = AnnotationAction;
 exports.AppendChildNodesAction = AppendChildNodesAction;
 exports.BlockAnnotation = BlockAnnotation;
+exports.BlockAppendNodesStrategy = BlockAppendNodesStrategy;
+exports.BlockDeleteNodeContentStrategy = BlockDeleteNodeContentStrategy;
+exports.BlockDeleteTextContentStrategy = BlockDeleteTextContentStrategy;
+exports.BlockInsertLineBreakStrategy = BlockInsertLineBreakStrategy;
+exports.BlockInsertLineBreakWithBlocksStrategy = BlockInsertLineBreakWithBlocksStrategy;
+exports.BlockInsertNodesBeforeNodeStrategy = BlockInsertNodesBeforeNodeStrategy;
+exports.BlockMergeNodesStrategy = BlockMergeNodesStrategy;
+exports.BlockRemoveNodeStrategy = BlockRemoveNodeStrategy;
+exports.BlockReplaceNodeWithNodesStrategy = BlockReplaceNodeWithNodesStrategy;
+exports.BlockReplaceNodesStrategy = BlockReplaceNodesStrategy;
+exports.BlockSplitWithTextNodeStrategy = BlockSplitWithTextNodeStrategy;
+exports.BlockUpdateHorizontalAlignmentStrategy = BlockUpdateHorizontalAlignmentStrategy;
 exports.BoldAnnotation = BoldAnnotation;
 exports.BoldAnnotationAction = BoldAnnotationAction;
-exports.BreakSingleBlockAction = BreakSingleBlockAction;
 exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
 exports.CodeAnnotationAction = CodeAnnotationAction;
-exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
+exports.CustomAttributeAnnotation = CustomAttributeAnnotation;
+exports.CustomClassAnnotation = CustomClassAnnotation;
+exports.CustomStyleAnnotation = CustomStyleAnnotation;
+exports.HorizontalAlignmentAnnotationAction = HorizontalAlignmentAnnotationAction;
 exports.ImageAnnotation = ImageAnnotation;
-exports.IndentAnnotation = IndentAnnotation;
+exports.IndentAnnotationAction = IndentAnnotationAction;
 exports.InsertBlocksAfterAction = InsertBlocksAfterAction;
 exports.InsertBlocksBeforeAction = InsertBlocksBeforeAction;
-exports.ItalicAnnotation = ItalicAnnotation;
+exports.ItalicAnnotationAction = ItalicAnnotationAction;
 exports.LinkAnnotationAction = LinkAnnotationAction;
 exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
 exports.ModifyContentAction = ModifyContentAction;
 exports.NodeAnnotation = NodeAnnotation;
 exports.RTEBlock = RTEBlock;
-exports.RTEImageBlock = RTEImageBlock;
+exports.RTECodeBlock = RTECodeBlock;
+exports.RTECodeBlockNode = RTECodeBlockNode;
 exports.RTEImageNode = RTEImageNode;
-exports.RTEListBlock = RTEListBlock;
-exports.RTEListItemBlock = RTEListItemBlock;
 exports.RTENode = RTENode;
 exports.RTETextBlock = RTETextBlock;
 exports.RTETextNode = RTETextNode;
 exports.RTE_TEXT_COLORS = RTE_TEXT_COLORS;
 exports.RemoveChildAction = RemoveChildAction;
 exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
-exports.SelectionRangeAnnotation = SelectionRangeAnnotation;
+exports.SelectionChangeAction = SelectionChangeAction;
 exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
-exports.StrikethroughAnnotation = StrikethroughAnnotation;
+exports.StrikethroughAnnotationAction = StrikethroughAnnotationAction;
+exports.SyncUpSelectionAction = SyncUpSelectionAction;
 exports.TextColorAnnotation = TextColorAnnotation;
 exports.TextSplittableAction = TextSplittableAction;
 exports.TextStyleAnnotation = TextStyleAnnotation;
 exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
-exports.UnderlineAnnotation = UnderlineAnnotation;
+exports.UnderlineAnnotationAction = UnderlineAnnotationAction;
+exports.UpdateCodeBlockAction = UpdateCodeBlockAction;
 exports.UpdateTextAction = UpdateTextAction;
-exports.VegaRTEContent = VegaRTEContent;
 exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
 exports.stateEntityRenderingRegistry = stateEntityRenderingRegistry;