@heartlandone/vega 2.34.0 → 2.35.0-RTE-preview

package/dist/cjs/{content-state-3a2724f6.js → list-block-91116257.js}

@@ -1,22 +1,53 @@
 'use strict';
 
-const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
-const blockAnnotation_abstract = require('./block-annotation.abstract-4d88b939.js');
-const changeManager = require('./change-manager-bda1d107.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-093462f1.js');
-const node_abstract = require('./node.abstract-f8075f84.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-e5d3a859.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-3ec114b8.js');
+const changeManager = require('./change-manager-a297e4d2.js');
 const vegaInternalEventId = require('./vega-internal-event-id-85b68849.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const textNode = require('./text-node-0d12da5a.js');
-const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-8c6a8fb7.js');
+require('./global-slimmer-registry-b3bce7e0.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
+
+/* istanbul ignore next */
+/**
+ * Wait for all vega elements to be ready.
+ *
+ * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+ */
+const waitForVega = async () => {
+  return nodeAnnotation_abstract.WaitForVega.handle();
+};
+/**
+ * Wait for the component has been rendered.
+ *
+ * @param {HTMLStencilElement} componentRef - The reference to the component that needs to be rendered.
+ * @returns {Promise<unknown>} A promise that resolves when the component has been rendered.
+ */
+const waitForComponentDidRender = async (componentRef) => {
+  return new Promise((resolve) => {
+    const observer = new domNodeSubjectFactory.Observer(isAcceptableComponentDidRender.bind(null), () => {
+      changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(componentRef, vegaInternalEventId.VegaInternalComponentDidRender), observer);
+      resolve(null);
+    });
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(componentRef, vegaInternalEventId.VegaInternalComponentDidRender), observer);
+  });
+};
+/**
+ * Determines whether the observer should accept changes.
+ *
+ * @returns {boolean} Always returns true in the current implementation.
+ */
+const isAcceptableComponentDidRender = () => {
+  return true;
+};
 
 /**
  * Annotation to make block with horizontal alignment
  */
-class HorizontalAlignmentAnnotation extends blockAnnotation_abstract.BlockAnnotation {
+class HorizontalAlignmentAnnotation extends nodeAnnotation_abstract.BlockAnnotation {
   constructor(textAlign) {
     super();
-    this.type = blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT;
+    this.type = nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT;
     this.textAlign = textAlign;
   }
   /**
@@ -26,51 +57,7 @@ class HorizontalAlignmentAnnotation extends blockAnnotation_abstract.BlockAnnota
    * @returns {[BlockAnnotationTypeEnum.ALIGNMENT, HorizontalAlignmentAnnotation]} Map item for the annotation
    */
   static from(textAlign) {
-    return [blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT, new HorizontalAlignmentAnnotation(textAlign)];
-  }
-  /**
-   * Generate the map item for the annotation by html element
-   *
-   * @param {HTMLElement} node - An html element.
-   * @returns {[BlockAnnotationTypeEnum.ALIGNMENT, HorizontalAlignmentAnnotation]} Map item for the annotation
-   */
-  static fromHTML(node) {
-    const alignment = this.getTextAlign(node);
-    return alignment ? this.from(alignment) : null;
-  }
-  /**
-   * Get the text alignment of an HTML element.
-   *
-   * @param {HTMLElement} node - An HTMLElement.
-   * @returns {Nullable<VegaRTEBlockAlignment>} text alignment.
-   */
-  static getTextAlign(node) {
-    const classList = node.classList;
-    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
-      return 'left';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
-      return 'center';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
-      return 'right';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
-      return 'justify';
-    }
-    const style = node.style;
-    switch (style.textAlign) {
-      case 'center':
-        return 'center';
-      case 'right':
-        return 'right';
-      case 'justify':
-        return 'justify';
-      case 'left':
-        return 'left';
-      default:
-        return null;
-    }
+    return [nodeAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT, new HorizontalAlignmentAnnotation(textAlign)];
   }
   /**
    * Generate the JSON item of the annotation
@@ -103,10 +90,10 @@ class HorizontalAlignmentAnnotation extends blockAnnotation_abstract.BlockAnnota
 /**
  * Annotation for block indentation
  */
-class IndentAnnotation extends blockAnnotation_abstract.BlockAnnotation {
+class IndentAnnotation extends nodeAnnotation_abstract.BlockAnnotation {
   constructor(indent) {
     super();
-    this.type = blockAnnotation_abstract.BlockAnnotationTypeEnum.INDENT;
+    this.type = nodeAnnotation_abstract.BlockAnnotationTypeEnum.INDENT;
     this.indent = Math.max(0, indent);
   }
   /**
@@ -116,49 +103,7 @@ class IndentAnnotation extends blockAnnotation_abstract.BlockAnnotation {
    * @returns {[BlockAnnotationTypeEnum.INDENT, IndentAnnotation]} Map item for the annotation
    */
   static from(indent) {
-    return [blockAnnotation_abstract.BlockAnnotationTypeEnum.INDENT, new IndentAnnotation(indent)];
-  }
-  /**
-   * Generate the map item for the annotation by html element
-   *
-   * @param {HTMLElement} node - An html element.
-   * @returns {[BlockAnnotationTypeEnum.INDENT, IndentAnnotation]} Map item for the annotation
-   */
-  static fromHTML(node) {
-    const marginLeft = this.getMarginLeft(node);
-    return marginLeft && marginLeft >= 0 ? this.from(Math.floor(marginLeft / 16)) : null;
-  }
-  /**
-   * Retrieves the left margin value of an HTML element.
-   *
-   * @param {HTMLElement} node - An html element.
-   * @returns {number} margin left.
-   */
-  static getMarginLeft(node) {
-    const style = node.style;
-    let marginLeft;
-    if (style.marginLeft) {
-      marginLeft = style.marginLeft;
-    }
-    else if (style.margin) {
-      const margins = style.margin.split(' ');
-      switch (margins.length) {
-        case 4:
-          marginLeft = margins[3];
-          break;
-        case 2:
-        case 3:
-          marginLeft = margins[1];
-          break;
-        default:
-          marginLeft = margins[0];
-          break;
-      }
-    }
-    else {
-      return null;
-    }
-    return Number(marginLeft.replace('px', ''));
+    return [nodeAnnotation_abstract.BlockAnnotationTypeEnum.INDENT, new IndentAnnotation(indent)];
   }
   /**
    * Generate the JSON item of the annotation
@@ -227,10 +172,10 @@ class BlockBaseOperator {
 }
 
 /** Append blocks or nodes to a block */
-class AppendChildNodesAction extends node_abstract.ModifyContentAction {
+class AppendChildNodesAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(childNodes) {
     super();
-    this.type = node_abstract.ModifyContentActionType.APPEND_CHILD_NODES;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.APPEND_CHILD_NODES;
     this.entityToBeAppended = childNodes;
   }
 }
@@ -241,116 +186,47 @@ class AppendChildNodesAction extends node_abstract.ModifyContentAction {
  * @example needRemovedNode.parentBlock.apply(new RemoveChildAction(needRemovedNode))
  * @example needRemovedBlock.parent.apply(new RemoveChildAction(needRemovedBlock))
  */
-class RemoveChildAction extends node_abstract.ModifyContentAction {
+class RemoveChildAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(childNode) {
     super();
-    this.type = node_abstract.ModifyContentActionType.DELETE_CHILD;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.DELETE_CHILD;
     this.entityToBeRemoved = childNode;
   }
 }
 
-/**
- * Text style annotation
- */
-class TextStyleAnnotation extends blockAnnotation_abstract.BlockAnnotation {
-  constructor(textStyle) {
-    super();
-    this.type = blockAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE;
-    this.textStyle = textStyle;
-  }
-  /**
-   * Generate the map item for the annotations
-   *
-   * @param {VegaRTETextStyleType} textStyle - the text style type
-   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
-   */
-  static from(textStyle) {
-    return [blockAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
-  }
-  /**
-   * Generate the map item for the annotation by html element
-   *
-   * @param {HTMLElement} node - An html element.
-   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
-   */
-  static fromHTML(node) {
-    return this.from(this.getTextStyle(node));
-  }
-  /**
-   * Get the type of block.
-   *
-   * @param {HTMLElement} node - An HTMLElement.
-   * @returns {VegaRTETextStyleType} text style type.
-   */
-  static getTextStyle(node) {
-    if (node.nodeType !== Node.TEXT_NODE && node.hasAttribute('data-type')) {
-      return node.getAttribute('data-type');
-    }
-    switch (node.style.fontSize) {
-      case '36px':
-        return 'title';
-      case '28px':
-        return 'subtitle';
-      case '22px':
-        return 'heading-1';
-      case '20px':
-        return 'heading-2';
-      case '18px':
-        return 'heading-3';
-    }
-    switch (node.nodeName) {
-      case 'H1':
-        return 'heading-1';
-      case 'H2':
-        return 'heading-2';
-      case 'H3':
-        return 'heading-3';
-      default:
-        return 'paragraph';
-    }
-  }
-  /**
-   * Generate the JSON representation of the annotation
-   *
-   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
-   */
-  toJSON() {
-    return { textStyle: this.textStyle };
-  }
-  /**
-   * Render the styles by block type
-   *
-   * @returns {AnnotationStyle} the styles to apply
-   */
-  render() {
-    const paragraphStyle = {
-      fontFamily: 'Inter',
-      fontSize: '16px',
-      lineHeight: '22px',
-      fontWeight: '500',
-    };
-    switch (this.textStyle) {
-      case 'paragraph': {
-        return paragraphStyle;
-      }
-      case 'title': {
-        return { fontFamily: 'Inter', fontSize: '36px', lineHeight: '40px', fontWeight: '500' };
-      }
-      case 'subtitle': {
-        return { fontFamily: 'Inter', fontSize: '28px', lineHeight: '32px', fontWeight: '500' };
-      }
-      case 'heading-1': {
-        return { fontFamily: 'Inter', fontSize: '22px', lineHeight: '24px', fontWeight: '500' };
-      }
-      case 'heading-2': {
-        return { fontFamily: 'Inter', fontSize: '20px', lineHeight: '24px', fontWeight: '500' };
-      }
-      case 'heading-3': {
-        return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
-      }
-    }
-  }
-}
+const RTE_TEXT_COLORS = [
+  {
+    key: 'black',
+    light: '#111128',
+    dark: '#E3E3E8',
+  },
+  {
+    key: 'gray',
+    light: '#5E5E6D',
+    dark: '#B9B9C1',
+  },
+  {
+    key: 'green',
+    light: '#01801F',
+    dark: '#59D977',
+  },
+  {
+    key: 'red',
+    light: '#BD2947',
+    dark: '#FFB2B5',
+  },
+  {
+    key: 'purple',
+    light: '#563D82',
+    dark: '#BEB2FF',
+  },
+  {
+    key: 'teal',
+    light: '#17758F',
+    dark: '#4CD8FF',
+  },
+];
+const ZERO_WIDTH_SPACE = '\u200b';
 
 /**
  * Abstract class for block
@@ -381,23 +257,6 @@ class RTEBlock extends BlockBaseOperator {
         return IndentAnnotation.from(value);
     }
   }
-  /**
-   * Create annotations for block element.
-   *
-   * @param {string} type - Annotations type.
-   * @param {HTMLElement} node - current node.
-   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} - result.
-   */
-  static createAnnotationEntityFromHTML(type, node) {
-    switch (type) {
-      case 'ALIGNMENT':
-        return HorizontalAlignmentAnnotation.fromHTML(node);
-      case 'TEXT_STYLE':
-        return TextStyleAnnotation.fromHTML(node);
-      case 'INDENT':
-        return IndentAnnotation.fromHTML(node);
-    }
-  }
   /**
    * Class to JSON object
    *
@@ -405,7 +264,7 @@ class RTEBlock extends BlockBaseOperator {
    */
   toJSON() {
     const annotations = Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof blockAnnotation_abstract.BlockAnnotation)
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.BlockAnnotation)
       .reduce((record, annotation) => {
       return Object.assign(Object.assign({}, record), annotation.toJSON());
     }, {});
@@ -428,9 +287,9 @@ class RTEBlock extends BlockBaseOperator {
   apply(action) {
     this.doApply(action);
     if (action.isFlushable) {
-      const domNode = node_abstract.stateEntityRenderingRegistry.getDOMByEntity(this);
+      const domNode = nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(this);
       if (domNode) {
-        const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
         if (nodeSubject) {
           changeManager.ChangeManager.notify(nodeSubject, {});
         }
@@ -443,7 +302,7 @@ class RTEBlock extends BlockBaseOperator {
    * @param {AnnotationAction|ModifyContentAction} action - Annotation action
    */
   doApply(action) {
-    if (action instanceof node_abstract.ModifyContentAction) {
+    if (action instanceof nodeAnnotation_abstract.ModifyContentAction) {
       this.doModifyActionApply(action);
     }
     else {
@@ -460,29 +319,6 @@ class RTEBlock extends BlockBaseOperator {
     this.annotationMap.set(annotation.type, annotation);
     typeof this.doAnnotationActionApply === 'function' && this.doAnnotationActionApply(action);
   }
-  /**
-   * Get styles from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getStyles() {
-    return Array.from(this.annotationMap.values())
-      .filter((annotation) => annotation instanceof blockAnnotation_abstract.BlockAnnotation)
-      .map((annotation) => annotation.render())
-      .filter(typeGuard.isNonNullable)
-      .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
-  }
-  /**
-   * Get classes from annotations
-   *
-   * @returns {AnnotationStyle} - Annotation style
-   */
-  getClasses() {
-    return Array.from(this.annotationMap.values())
-      .map((annotation) => { var _a; return (_a = annotation.renderClass) === null || _a === void 0 ? void 0 : _a.call(annotation); })
-      .filter(typeGuard.isNonNullable)
-      .reduce((pre, cur) => [pre, cur].join(' '), '');
-  }
   /**
    * Appends a list of RTENode objects to the current node's child nodes and sets the parent block of each node to the current node.
    *
@@ -503,7 +339,7 @@ class RTEBlock extends BlockBaseOperator {
     if (this.type === secondBlock.type || (this.type !== 'image' && secondBlock.type !== 'image')) {
       let shouldMergeNodes = secondBlock['nodes'];
       if (this.type !== 'image') {
-        shouldMergeNodes = secondBlock['nodes'].filter((node) => node['text'] && node['text'] !== textNode.ZERO_WIDTH_SPACE);
+        shouldMergeNodes = secondBlock['nodes'].filter((node) => node['text'] && node['text'] !== ZERO_WIDTH_SPACE);
       }
       this.apply(new AppendChildNodesAction(shouldMergeNodes));
       secondBlock.parent.apply(new RemoveChildAction(secondBlock));
@@ -696,10 +532,10 @@ class RTEBlock extends BlockBaseOperator {
 /**
  * Annotation for image
  */
-class ImageAnnotation extends node_abstract.NodeAnnotation {
+class ImageAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
   constructor(size = 'md', alt) {
     super();
-    this.type = node_abstract.NodeAnnotationTypeEnum.IMAGE;
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE;
     this.size = size;
     this.alt = alt;
   }
@@ -711,17 +547,7 @@ class ImageAnnotation extends node_abstract.NodeAnnotation {
    * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
    */
   static from(size, alt) {
-    return [node_abstract.NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
-  }
-  /**
-   * Generate the map item for the annotation
-   *
-   * @param {VegaRichTextImageEditorSizeType} size - size.
-   * @param {string} alt - alt.
-   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
-   */
-  static fromHTML(size, alt) {
-    return this.from(size || 'md', alt);
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
   }
   /**
    * Generate the JSON representation of the annotation
@@ -759,57 +585,41 @@ class ImageAnnotation extends node_abstract.NodeAnnotation {
 }
 
 /**
- * Action to add an image annotation to the editor
+ * Image node
  */
-class ImageAnnotationAction extends textNode.AnnotationAction {
-  constructor(size, alt) {
-    super();
-    this.isFlushable = true;
-    this.size = size;
-    this.alt = alt;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {ImageAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new ImageAnnotation(this.size, this.alt);
-  }
-}
-
-class RTEImageNode extends node_abstract.RTENode {
+class RTEImageNode extends nodeAnnotation_abstract.RTENode {
   constructor(id, url, parentBlock, annotationMap) {
     super(id, annotationMap);
-    this.type = node_abstract.NodeTypeEnum.IMAGE;
+    this.type = nodeAnnotation_abstract.NodeTypeEnum.IMAGE;
     this.url = url;
     this.parentBlock = parentBlock;
   }
-  static from(image, parentBlock) {
-    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(node, parentBlock) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
     let annotations;
-    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+    if (!node.annotations || Object.keys(node.annotations).length === 0) {
       annotations = { size: 'md' };
     }
     else {
-      annotations = image.annotations;
+      annotations = node.annotations;
     }
     imageNode.annotationMap = new Map(Object.keys(annotations)
       .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
       .filter(typeGuard.isNonNullable));
     return imageNode;
   }
-  static fromHTML(node, parentBlock) {
-    const src = node.nodeName === 'IMG'
-      ? node.src
-      : node.querySelector('img').src;
-    const size = node.size;
-    const imageNode = new RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), src, parentBlock);
-    imageNode.annotationMap = new Map([ImageAnnotation.fromHTML(size, node.alt)]);
-    return imageNode;
-  }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
-    const imageAnnotation = this.annotationMap.get(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+    const imageAnnotation = this.annotationMap.get(nodeAnnotation_abstract.NodeAnnotationTypeEnum.IMAGE);
     const annotations = {};
     if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
       annotations.size = imageAnnotation.size;
@@ -819,55 +629,20 @@ class RTEImageNode extends node_abstract.RTENode {
     }
     return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
   }
-  render({ editable } = {}) {
-    const imageAnnotation = this.annotationMap.get(node_abstract.NodeAnnotationTypeEnum.IMAGE);
-    const size = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size;
-    const alt = imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt;
-    const handleChange = ({ detail, }) => {
-      switch (detail.action) {
-        case 'edit': {
-          const size = detail.payload.size;
-          const alt = detail.payload.alt;
-          this.apply(new ImageAnnotationAction(size, alt));
-          break;
-        }
-        /*
-         * The below method is e2e-test covered in
-         * @see{module:vega-rich-text-editor-image-click-delete-button}
-         */
-        /* istanbul ignore next */
-        case 'delete': {
-          const event = new InputEvent('beforeinput', {
-            inputType: 'deleteContentBackward',
-            bubbles: true,
-          });
-          setTimeout(() => {
-            node_abstract.stateEntityRenderingRegistry.getDOMByEntity(this).dispatchEvent(event);
-          }, 50);
-          break;
-        }
-      }
-    };
-    return editable ? (globalSlimmerRegistry.h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, handleChange);
-      } }, this.renderImage(editable, alt))) : (this.renderImage(editable, alt));
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     const annotation = action.toAnnotation();
     this.annotationMap.set(annotation.type, annotation);
   }
   // placeholder method
   /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
   doModifyActionApply(action) {
   }
-  registerRef(ref) {
-    if (ref) {
-      node_abstract.stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderImage(editable, alt) {
-    return (globalSlimmerRegistry.h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
-  }
 }
 
 /**
@@ -875,10 +650,10 @@ class RTEImageNode extends node_abstract.RTENode {
  *
  * @example block.apply(new ReplaceChildNodesAction(newNodes))
  */
-class ReplaceChildNodesAction extends node_abstract.ModifyContentAction {
+class ReplaceChildNodesAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(newChildNodes) {
     super();
-    this.type = node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.REPLACE_CHILD_NODES;
     this.newChildNodes = newChildNodes;
   }
 }
@@ -888,10 +663,10 @@ class ReplaceChildNodesAction extends node_abstract.ModifyContentAction {
  *
  * @example currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, newBlock, ...))
  */
-class InsertBlocksAfterAction extends node_abstract.ModifyContentAction {
+class InsertBlocksAfterAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(referBlock, ...blocksToBeInserted) {
     super();
-    this.type = node_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER;
     this.referBlock = referBlock;
     this.blocksToBeInserted = blocksToBeInserted;
   }
@@ -903,19 +678,905 @@ class InsertBlocksAfterAction extends node_abstract.ModifyContentAction {
  *
  * @example block.apply(new SplitBlockWithNodeAction(node, offset))
  */
-class SplitBlockWithNodeAction extends node_abstract.ModifyContentAction {
+class SplitBlockWithNodeAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(splitPointNode, startOffsetOfNode) {
     super();
-    this.type = node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
     this.splitPointNode = splitPointNode;
     this.startOffsetOfNode = startOffsetOfNode;
   }
 }
 
+/**
+ * Abstract class for annotation actions
+ */
+class AnnotationAction {
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Annotation to represent a selection range
+ */
+class SelectionRangeAnnotation extends nodeAnnotation_abstract.Annotation {
+  constructor(range) {
+    super();
+    this.type = nodeAnnotation_abstract.InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+}
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with underline
+ */
+class UnderlineAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text Italic
+ */
+class ItalicAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(italic) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.ITALIC;
+    this.italic = italic;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} italic - Italic annotation
+   * @returns {Nullable<[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]>} Map item for the annotation
+   */
+  static from(italic) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      italic: this.italic,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Italic style
+   */
+  render() {
+    return this.italic ? { 'font-style': 'italic' } : null;
+  }
+}
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return this.bold ? { 'font-weight': '700' } : null;
+  }
+}
+
+/**
+ * Annotation to host which annotations will be clear formatting
+ */
+class ClearFormattingAnnotation extends nodeAnnotation_abstract.Annotation {
+  constructor() {
+    super(...arguments);
+    this.type = nodeAnnotation_abstract.InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD,
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.ITALIC,
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.UNDERLINE,
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.STRIKETHROUGH,
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.TEXT_COLOR,
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE,
+    ];
+  }
+}
+
+/**
+ * Annotation to make text code
+ */
+class CodeAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(code) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE;
+    this.code = code;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} code - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static from(code) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      code: this.code,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.code ? 'v-rte--code' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with text color
+ */
+class TextColorAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(textColor) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [nodeAnnotation_abstract.NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return {
+      color: nodeAnnotation_abstract.VegaThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
+  }
+  /**
+   * format text color
+   *
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
+   */
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
+  }
+}
+
+/**
+ * Annotation to make text a link
+ */
+class LinkAnnotation extends nodeAnnotation_abstract.NodeAnnotation {
+  constructor(link) {
+    super();
+    this.type = nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link) {
+    return [
+      nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK,
+      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
+    ];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { link: { href: this.link.href, groupKey: this.link.groupKey } };
+  }
+  /**
+   * Verify whether two link annotation is same or not
+   *
+   * @param {LinkAnnotation} annotation - Compared annotation
+   * @returns {boolean} Whether two link annotation is same or not
+   */
+  toEqual(annotation) {
+    return this.link.groupKey === annotation.link.groupKey;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Link style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Action to toggle link annotation
+ */
+class LinkAnnotationAction extends TextSplittableAction {
+  constructor({ link, newText, needMergeNode, doSplit, }) {
+    super();
+    this.isFlushable = true;
+    this.link = link;
+    this.needMergeNode = needMergeNode;
+    this.newText = newText;
+    if (typeGuard.isNonNullable(doSplit)) {
+      this.doSplit = doSplit;
+    }
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new LinkAnnotation(this.link);
+  }
+}
+
+/**
+ * Action to toggle code annotation
+ */
+class CodeAnnotationAction extends TextSplittableAction {
+  constructor(code) {
+    super();
+    this.isFlushable = true;
+    this.code = code;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {CodeAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new CodeAnnotation(this.code);
+  }
+}
+
+/**
+ * Action to toggle clear formatting
+ */
+class ClearFormattingAnnotationAction extends TextSplittableAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {ClearFormattingAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new ClearFormattingAnnotation();
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends nodeAnnotation_abstract.ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends nodeAnnotation_abstract.Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = nodeAnnotation_abstract.InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+}
+
+/**
+ * Action to link a group of nodes
+ */
+class LinkGroupAnnotationAction extends AnnotationAction {
+  constructor(groupKey, nodes) {
+    super();
+    this.isFlushable = false;
+    this.groupKey = groupKey;
+    this.nodes = nodes;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkGroupAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new LinkGroupAnnotation(this.groupKey);
+  }
+}
+
+/**
+ * Sync up selection action
+ */
+class SyncUpSelectionAction extends AnnotationAction {
+  constructor() {
+    super();
+    this.isFlushable = false;
+  }
+  /**
+   * annotation null
+   *
+   * @returns {Nullable<Annotation>} null
+   */
+  toAnnotation() {
+    return null;
+  }
+}
+
+/**
+ * Delete the node annotation by type
+ */
+class DeleteNodeAnnotationAction extends AnnotationAction {
+  constructor(annotationType) {
+    super();
+    this.isFlushable = true;
+    this.annotationType = annotationType;
+  }
+  /**
+   * Don't need this for this action
+   *
+   * @returns {Nullable<Annotation>} undefined
+   */
+  toAnnotation() {
+    return undefined;
+  }
+}
+
+/**
+ * Text node
+ */
+class RTETextNode extends nodeAnnotation_abstract.RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = nodeAnnotation_abstract.NodeTypeEnum.TEXT;
+    this.parentBlock = parentBlock;
+    this.text = text;
+  }
+  /**
+   * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
+   *
+   * @param {VegaRTETextNode} richText - A rich text node
+   * @param {RTETextBlock} parentBlock - Parent block
+   * @returns {RTETextNode} an RTETextNode
+   */
+  static from(richText, parentBlock) {
+    const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
+    const { annotations } = richText;
+    if (annotations) {
+      textNode.annotationMap = new Map(Object.keys(annotations)
+        .map((type) => {
+        if (annotations.link) {
+          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode]));
+        }
+        return this.createAnnotationEntity(type, annotations[type]);
+      })
+        .filter(typeGuard.isNonNullable));
+    }
+    return textNode;
+  }
+  /**
+   * 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 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof nodeAnnotation_abstract.NodeAnnotation)
+      .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 });
+  }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
+  cloneWithText(text) {
+    return new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
+  }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(nodeAnnotation_abstract.InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const { startContainer, endContainer, startOffset, endOffset } = selectionRangeAnnotation.range;
+      const noTextRangeSelected = startContainer === endContainer && startOffset === endOffset;
+      this.parentBlock.nodes = this.parentBlock.nodes.flatMap((item) => {
+        if (item.id === this.id) {
+          if (noTextRangeSelected) {
+            return this.insertNewNode(startOffset, action);
+          }
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+            return this.splitTextNode(action, selectionRangeAnnotation.range);
+          }
+          else {
+            this.applyActionToNode(this, action);
+            return this;
+          }
+        }
+        return item;
+      });
+    }
+    else {
+      this.applyActionToNode(this, action);
+    }
+    this.parentBlock.mergeNodes(action);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case nodeAnnotation_abstract.ModifyContentActionType.UPDATE_TEXT:
+        this.updateText(action.newTextContent);
+        break;
+      case nodeAnnotation_abstract.ModifyContentActionType.REPLACE_SELECTED_TEXT:
+        this.replaceSelectedText(action.textToBeInsert, action.currentRange);
+        break;
+    }
+  }
+  /**
+   * Split text node with range
+   *
+   * @param {TextSplittableAction} action - Annotation action
+   * @param {Range} range - Selection range
+   * @returns {RTETextNode[] | this} RTETextNode array
+   */
+  splitTextNode(action, range) {
+    const { startContainer, endContainer, startOffset } = range;
+    const startNode = startContainer.parentElement;
+    const endNode = endContainer.parentElement;
+    /**
+     * Split the text from the start offset to the end offset
+     *
+     * @param {string} text - The text string
+     * @param {number} startOffset - The start offset position
+     * @param {number} endOffset - The end offset position
+     * @returns {RTETextNode[]} - The split text node array
+     */
+    const splitText = (text, startOffset, endOffset) => {
+      const beforeText = text.substring(0, startOffset);
+      const selectedText = text.substring(startOffset, endOffset);
+      const afterText = text.substring(endOffset);
+      return [
+        this.cloneWithText(beforeText),
+        this.cloneWithText(selectedText),
+        this.cloneWithText(afterText),
+      ];
+    };
+    const startItemDto = startNode && nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(endNode);
+    if (startItemDto && startItemDto.id === this.id) {
+      const endOffset = startContainer === endContainer ? range.endOffset : this.text.length;
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, startOffset, endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else if (endItemDto && endItemDto.id === this.id) {
+      const [beforeNode, selectedNode, afterNode] = splitText(this.text, 0, range.endOffset);
+      this.applyActionToNode(selectedNode, action);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else {
+      this.applyActionToNode(this, action);
+      return this;
+    }
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
+   */
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
+    }
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
+    }
+    if (action instanceof DeleteNodeAnnotationAction) {
+      this.annotationMap.delete(action.annotationType);
+      return;
+    }
+    if (annotation instanceof ClearFormattingAnnotation) {
+      annotation.items.forEach((item) => {
+        node.deleteAnnotationByType(item);
+      });
+      return;
+    }
+    if (annotation instanceof nodeAnnotation_abstract.NodeAnnotation || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (typeGuard.isNonNullable(action.newText)) {
+          node.text = action.newText;
+        }
+        this.parentBlock.apply(new LinkGroupAnnotationAction(action.link.groupKey, [node]));
+      }
+      if (action instanceof CodeAnnotationAction) {
+        this.applyActionToNode(node, new ClearFormattingAnnotationAction());
+      }
+      node.annotationMap.set(annotation.type, annotation);
+      return;
+    }
+  }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   */
+  replaceSelectedText(text, currentRange) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      const startNode = startContainer.parentElement;
+      const endNode = endContainer.parentElement;
+      const startItemDto = startNode && nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(startNode);
+      const endItemDto = endNode && nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(endNode);
+      let startIndex = 0, endIndex = this.text.length;
+      if (startItemDto && startItemDto === this) {
+        startIndex = startOffset;
+        endIndex = startContainer === endContainer ? endOffset : endIndex;
+      }
+      else if (endItemDto && endItemDto === this) {
+        endIndex = endOffset;
+      }
+      this.apply(new UpdateTextAction(this.text.slice(0, startIndex) + text + this.text.slice(endIndex)));
+    }
+  }
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {string} newText - The new text string
+   */
+  updateText(newText) {
+    this.text = newText;
+    // The link node should unlink when delete all text
+    if (!this.text && this.isLinkNode()) {
+      this.annotationMap.delete(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
+    }
+  }
+  /**
+   * Checks if a node has an annotation with the key 'LINK'.
+   *
+   * @returns {boolean} A boolean value indicating whether the `annotationMap` has a key 'LINK'.
+   */
+  isLinkNode() {
+    return this.annotationMap.has('LINK');
+  }
+  /**
+   * Whether a given range should be split based on various conditions within the range.
+   *
+   * @param {Range} range - Selection range
+   * @returns {boolean} Returns a boolean value indicating whether the
+   * selection range should be split.
+   */
+  shouldSplitSelection(range) {
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    const isCrossNode = startContainer !== endContainer;
+    const isPartialStart = startOffset > 0;
+    const isPartialEnd = endOffset < (endContainer.textContent ? endContainer.textContent.length : 0);
+    const isPartialSelection = isPartialStart || isPartialEnd;
+    return isCrossNode || isPartialSelection;
+  }
+  /**
+   * Sync up the selected node by change manager
+   *
+   * @param {RTETextNode} selectedNode - The selected node
+   */
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = nodeAnnotation_abstract.stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+  /**
+   * Insert the new node at the start offset
+   *
+   * @param {number} startOffset - The start position offset
+   * @param {AnnotationAction} action - AnnotationAction
+   * @returns {RTETextNode[]} - RTETextNode array
+   */
+  insertNewNode(startOffset, action) {
+    if (startOffset === 0) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [newNode, this];
+    }
+    if (startOffset === this.text.length) {
+      const newNode = this.cloneWithText('');
+      this.applyActionToNode(newNode, action);
+      return [this, newNode];
+    }
+    const beforeNode = this.cloneWithText(this.text.substring(0, startOffset));
+    const newNode = this.cloneWithText('');
+    const afterNode = this.cloneWithText(this.text.substring(startOffset));
+    this.applyActionToNode(newNode, action);
+    return [beforeNode, newNode, afterNode];
+  }
+}
+
+/**
+ * Text style annotation
+ */
+class TextStyleAnnotation extends nodeAnnotation_abstract.BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = nodeAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE;
+    this.textStyle = textStyle;
+  }
+  /**
+   * Generate the map item for the annotations
+   *
+   * @param {VegaRTETextStyleType} textStyle - the text style type
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static from(textStyle) {
+    return [nodeAnnotation_abstract.BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * Render the styles by block type
+   *
+   * @returns {AnnotationStyle} the styles to apply
+   */
+  render() {
+    const paragraphStyle = {
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      lineHeight: '22px',
+      fontWeight: '500',
+    };
+    switch (this.textStyle) {
+      case 'paragraph': {
+        return paragraphStyle;
+      }
+      case 'title': {
+        return { fontFamily: 'Inter', fontSize: '36px', lineHeight: '40px', fontWeight: '500' };
+      }
+      case 'subtitle': {
+        return { fontFamily: 'Inter', fontSize: '28px', lineHeight: '32px', fontWeight: '500' };
+      }
+      case 'heading-1': {
+        return { fontFamily: 'Inter', fontSize: '22px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-2': {
+        return { fontFamily: 'Inter', fontSize: '20px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-3': {
+        return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
+      }
+    }
+  }
+}
+
 /**
  * Action to change the text style of a block
  */
-class TextStyleAnnotationAction extends textNode.AnnotationAction {
+class TextStyleAnnotationAction extends AnnotationAction {
   constructor(textStyle, bold) {
     super();
     this.isFlushable = true;
@@ -935,7 +1596,7 @@ class TextStyleAnnotationAction extends textNode.AnnotationAction {
 /**
  * Action to toggle bold annotation
  */
-class BoldAnnotationAction extends textNode.TextSplittableAction {
+class BoldAnnotationAction extends TextSplittableAction {
   constructor(bold) {
     super();
     this.isFlushable = true;
@@ -947,7 +1608,7 @@ class BoldAnnotationAction extends textNode.TextSplittableAction {
    * @returns {BoldAnnotation} the annotation
    */
   toAnnotation() {
-    return new textNode.BoldAnnotation(this.bold);
+    return new BoldAnnotation(this.bold);
   }
 }
 
@@ -956,10 +1617,10 @@ class BoldAnnotationAction extends textNode.TextSplittableAction {
  *
  * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
  */
-class MergeTwoBlocksNodesAction extends node_abstract.ModifyContentAction {
+class MergeTwoBlocksNodesAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(blockNeedToBeMerged) {
     super();
-    this.type = node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
     this.blockNeedToBeMerged = blockNeedToBeMerged;
   }
 }
@@ -969,10 +1630,10 @@ class MergeTwoBlocksNodesAction extends node_abstract.ModifyContentAction {
  *
  * @example currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, newBlock, ...))
  */
-class InsertBlocksBeforeAction extends node_abstract.ModifyContentAction {
+class InsertBlocksBeforeAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(referBlock, ...blocksToBeInserted) {
     super();
-    this.type = node_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE;
     this.referBlock = referBlock;
     this.blocksToBeInserted = blocksToBeInserted;
   }
@@ -987,16 +1648,22 @@ class RTETextBlock extends RTEBlock {
     this.nodes = [];
     this.type = type;
     if (RTETextBlock.isAcceptableTextStyle(type)) {
-      super.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
     }
     else {
-      super.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
     }
   }
+  /**
+   * Converts a VegaRTETextBlock into an RTETextBlock.
+   *
+   * @param {VegaRTETextBlock} block - The block object
+   * @returns {RTETextBlock} A RTETextBlock class
+   */
   static from(block) {
     const textBlock = new RTETextBlock(block.id, block.type);
     const { annotations } = block;
-    textBlock.nodes = block.nodes.map((richText) => textNode.RTETextNode.from(richText, textBlock));
+    textBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, textBlock));
     if (annotations) {
       Object.entries(annotations).forEach(([type, value]) => {
         const item = this.createAnnotationEntity(type, value);
@@ -1007,17 +1674,6 @@ class RTETextBlock extends RTEBlock {
     }
     return textBlock;
   }
-  static fromHTML(node, blockType) {
-    const textBlock = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), blockType);
-    textBlock.nodes = Array.from(node.childNodes).map((item) => textNode.RTETextNode.fromHTML(item, textBlock));
-    Object.keys(blockAnnotation_abstract.BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (typeGuard.isNonNullable(item)) {
-        textBlock.annotationMap.set(...item);
-      }
-    });
-    return textBlock;
-  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -1038,15 +1694,26 @@ class RTETextBlock extends RTEBlock {
       return super.createAnnotationEntity(type, value);
     }
   }
+  /**
+   * Checks if a given text block type is one of the acceptable text styles.
+   *
+   * @param {VegaRTETextBlockType} type - The text block type
+   * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
+   */
   static isAcceptableTextStyle(type) {
     return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
   }
+  /**
+   * Merges RTETextNode nodes based on certain conditions.
+   *
+   * @param {AnnotationAction} action - AnnotationAction
+   */
   mergeNodes(action) {
     this.nodes = this.nodes.reduce((prev, cur) => {
       const lastNode = prev.at(-1);
-      if (action instanceof textNode.LinkAnnotationAction && action.needMergeNode) {
-        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.LINK);
-        const curNodeLinkAnnotation = cur.getAnnotationByType(node_abstract.NodeAnnotationTypeEnum.LINK);
+      if (action instanceof LinkAnnotationAction && action.needMergeNode) {
+        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
         if (lastNodeLinkAnnotation &&
           curNodeLinkAnnotation &&
           lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
@@ -1057,38 +1724,39 @@ class RTETextBlock extends RTEBlock {
       return [...prev, cur];
     }, []);
   }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTEBlock} New block
+   */
   cloneWithNodes(nodes) {
     const block = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), this.type);
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.nodes[this.nodes.length - 1];
   }
-  render(renderContext, children) {
-    const BlockTag = this.getBlockTagByType(this.type);
-    return (globalSlimmerRegistry.h(BlockTag, { ref: this.registerRef.bind(this), style: this.getStyles(), class: super.getClasses() },
-      this.renderNodes(renderContext),
-      children));
-  }
-  registerRef(ref) {
-    if (ref) {
-      node_abstract.stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderNodes(renderConfig = {}) {
-    const linkGroupAnnotation = this.getAnnotationByType(node_abstract.InternalAnnotationTypeEnum.LINK_GROUP);
-    return linkGroupAnnotation
-      ? linkGroupAnnotation.renderNodes(this.nodes, renderConfig)
-      : this.nodes.map((node) => node.render());
-  }
+  /**
+   * @inheritDoc
+   */
   doAnnotationActionApply(action) {
     if (action instanceof TextStyleAnnotationAction) {
       if (this.type !== 'list-item') {
@@ -1103,17 +1771,17 @@ class RTETextBlock extends RTEBlock {
       }
       else {
         this.nodes.forEach((node) => {
-          node.apply(new textNode.DeleteNodeAnnotationAction(node_abstract.NodeAnnotationTypeEnum.BOLD));
+          node.apply(new DeleteNodeAnnotationAction(nodeAnnotation_abstract.NodeAnnotationTypeEnum.BOLD));
         });
       }
       return;
     }
-    if (action instanceof textNode.LinkGroupAnnotationAction) {
-      const linkGroupAnnotation = this.getAnnotationByType(node_abstract.InternalAnnotationTypeEnum.LINK_GROUP);
+    if (action instanceof LinkGroupAnnotationAction) {
+      const linkGroupAnnotation = this.getAnnotationByType(nodeAnnotation_abstract.InternalAnnotationTypeEnum.LINK_GROUP);
       if (linkGroupAnnotation) {
         const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
         linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
-        this.annotationMap.set(node_abstract.InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+        this.annotationMap.set(nodeAnnotation_abstract.InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
       }
       return;
     }
@@ -1125,44 +1793,44 @@ class RTETextBlock extends RTEBlock {
    */
   doModifyActionApply(action) {
     switch (action.type) {
-      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_CHILD:
         this.removeChildNode(action);
         break;
-      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
         this.appendChildNodes(action.entityToBeAppended);
         break;
-      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
         this.nodes = [];
         break;
-      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+      case nodeAnnotation_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
         action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
         break;
-      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
         this.nodes = [];
         this.appendChildNodes(action.newChildNodes);
         break;
-      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
         this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
         break;
-      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
         action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
         action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
         action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
         break;
-      case node_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
         this.convertParagraphToList(action);
         break;
-      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
         this.deleteNodeContent(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
         this.insertImage(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
         this.replaceNodeWithNodes(action.referNode, [
           ...action.nodesToBeInserted,
           action.referNode,
@@ -1170,6 +1838,13 @@ class RTETextBlock extends RTEBlock {
         break;
     }
   }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
   splitTextNodeBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
       const beforeText = splitNode.text.slice(0, startOffsetOfNode);
@@ -1191,16 +1866,37 @@ class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Checks if the caret position is at the start of a specified RTETextNode.
+   *
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
   isCaretPositionAtStart(node, startOffset) {
     return node === this.nodes[0] && startOffset === 0;
   }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
   isCaretPositionAtEnd(node, startOffset) {
     const lastNode = this.nodes[this.nodes.length - 1];
     return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
   }
+  /**
+   * lineBreakSingleBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakSingleBlock(splitNode, startOffsetOfNode) {
     if (splitNode) {
-      const lineBreakNode = new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
+      const lineBreakNode = new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
       const beforeText = splitNode.text.slice(0, startOffsetOfNode);
       const afterText = splitNode.text.slice(startOffsetOfNode);
       const nodesSplitIndex = this.nodes.indexOf(splitNode);
@@ -1218,20 +1914,31 @@ class RTETextBlock extends RTEBlock {
       return lineBreakNode;
     }
   }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const beforeNodes = this['nodes'];
-    const lineBreakNode = new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
+    const lineBreakNode = new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
     const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
     this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
     return lineBreakNode;
   }
+  /**
+   * deleteNodeContent
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   */
   deleteNodeContent(action) {
     const startContainerNode = action.startContainerNode;
     const startOffset = action.startOffset;
     if (startOffset !== 0 && !startContainerNode.isEmpty()) {
       const newText = startContainerNode.text.slice(0, startOffset - 1) +
         startContainerNode.text.slice(startOffset);
-      startContainerNode.apply(new textNode.UpdateTextAction(newText));
+      startContainerNode.apply(new UpdateTextAction(newText));
       if (newText) {
         action.previousNode = startContainerNode;
         return;
@@ -1266,6 +1973,7 @@ class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the first line
          * \n
          * test
@@ -1275,11 +1983,12 @@ class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the begin of second line
          * \n
          * test
          */
-        if (previousNode instanceof textNode.RTETextNode && previousNode.isEmpty()) {
+        if (previousNode instanceof RTETextNode && previousNode.isEmpty()) {
           const shouldRemoveNode = previousNode;
           previousNode = this.getPreviousNode(previousNode);
           shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
@@ -1300,35 +2009,37 @@ class RTETextBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Remove the child node
+   *
+   * @param {RemoveChildAction} action - Modify action
+   */
   removeChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0) {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   */
   mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes) {
     if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
-      afterNodes.push(new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
     }
     this.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
   }
-  getBlockTagByType(type) {
-    switch (type) {
-      case 'title':
-      case 'subtitle':
-        return `div`;
-      case 'heading-1':
-        return `h1`;
-      case 'heading-2':
-        return `h2`;
-      case 'heading-3':
-        return `h3`;
-      case 'paragraph':
-        return 'p';
-      case 'list-item':
-        return 'li';
-    }
-  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
   breakSingleTextBlock(splitNode, startOffsetOfNode) {
     const newParagraph = this.copyInlineStyleToNewParagraph(splitNode);
     if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
@@ -1344,6 +2055,11 @@ class RTETextBlock extends RTEBlock {
     }
     return newParagraph;
   }
+  /**
+   * convertParagraphToList
+   *
+   * @param {TransformListAction} action - ModifyContentAction
+   */
   convertParagraphToList(action) {
     const bulletList = this.parent.createList(action.listType);
     const listItems = action.selectedBlocks.map((node) => this.parent.toListItem(node));
@@ -1353,6 +2069,11 @@ class RTETextBlock extends RTEBlock {
       node.parent.apply(new RemoveChildAction(node));
     });
   }
+  /**
+   * insertImage
+   *
+   * @param {InsertImageToBlockAction} action - ModifyContentAction
+   */
   insertImage(action) {
     const splitNode = action.splitPointNode;
     const startOffsetOfNode = action.startOffsetOfNode;
@@ -1369,10 +2090,16 @@ class RTETextBlock extends RTEBlock {
       this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
     }
   }
+  /**
+   * copyInlineStyleToNewParagraph
+   *
+   * @param {RTETextNode} needCopedNode -
+   * @returns {RTETextBlock} RTETextBlock
+   */
   copyInlineStyleToNewParagraph(needCopedNode) {
     const textNode = needCopedNode.cloneWithText('');
     // The link annotation don't need inherited
-    textNode.annotationMap.delete(node_abstract.NodeAnnotationTypeEnum.LINK);
+    textNode.annotationMap.delete(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
     const newParagraph = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
     newParagraph.apply(new AppendChildNodesAction([textNode]));
     return newParagraph;
@@ -1388,6 +2115,12 @@ class RTEImageBlock extends RTEBlock {
     this.type = 'image';
     this.nodes = [];
   }
+  /**
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   *
+   * @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;
@@ -1402,80 +2135,72 @@ class RTEImageBlock extends RTEBlock {
     }
     return imageBlock;
   }
-  static fromHTML(node) {
-    const nodes = node.nodeName === 'IMG' ? [node] : Array.from(node.children);
-    const imageBlock = new RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    imageBlock.nodes = nodes.map((item) => RTEImageNode.fromHTML(item, imageBlock));
-    Object.keys(blockAnnotation_abstract.BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (typeGuard.isNonNullable(item)) {
-        imageBlock.annotationMap.set(...item);
-      }
-    });
-    return imageBlock;
-  }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.nodes[this.nodes.length - 1];
   }
-  render(renderContext) {
-    return (globalSlimmerRegistry.h("div", { style: Object.assign({}, this.getStyles()), ref: this.registerRef.bind(this), class: super.getClasses() }, this.nodes.map((node) => {
-      return node.render(renderContext);
-    })));
-  }
   /**
-   * Apply modify action to block
+   * Apply a modify action to block
    *
    * @param {ModifyContentAction} action - Modify action
    */
   doModifyActionApply(action) {
     switch (action.type) {
-      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_CHILD:
         this.removeChildNode(action);
         break;
-      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
         this.nodes = [];
         break;
-      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
         this.appendChildNodes(action.entityToBeAppended);
         break;
-      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
         this.nodes = [];
         this.appendChildNodes(action.newChildNodes);
         break;
-      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+      case nodeAnnotation_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
         action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode);
         break;
-      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
         this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
         break;
-      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
         action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
         action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
         action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
         break;
-      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
         this.deleteNodeContent(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
         this.insertImage(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_NODES_AFTER:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_NODES_AFTER:
         this.replaceNodeWithNodes(action.referNode, [
           action.referNode,
           ...action.nodesToBeInserted,
         ]);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
         this.replaceNodeWithNodes(action.referNode, [
           ...action.nodesToBeInserted,
           action.referNode,
@@ -1483,11 +2208,11 @@ class RTEImageBlock extends RTEBlock {
         break;
     }
   }
-  registerRef(ref) {
-    if (ref) {
-      node_abstract.stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
+  /**
+   * Removes a specified child node from a list of nodes and triggers a parent action if the list becomes empty.
+   *
+   * @param {RemoveChildAction} action - Action to be performed when removing a child node from the list of nodes.
+   */
   removeChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0) {
@@ -1500,6 +2225,7 @@ class RTEImageBlock extends RTEBlock {
    *
    * @param {RTEImageNode} imageNode The split point image node
    * @param {number} imageOffset The cursor point 0 | 1
+   * @returns {Nullable<RTEBlock>} The new block after split
    */
   splitImageNodes(imageNode, imageOffset) {
     const nodesSplitIndex = this.nodes.indexOf(imageNode);
@@ -1512,12 +2238,25 @@ class RTEImageBlock extends RTEBlock {
       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.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   */
   cloneWithNodes(nodes) {
     const block = new RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * Used to split a block of text at a specific position and insert a new paragraph block.
+   *
+   * @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.
+   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   */
   breakSingleBlock(splitNode, startOffsetOfNode) {
     const newParagraph = RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
@@ -1537,19 +2276,46 @@ class RTEImageBlock extends RTEBlock {
     }
     return newParagraph;
   }
+  /**
+   * Breaks a single block of text at a specified offset and returns the first node of the new paragraph if created.
+   *
+   * @param {RTEImageNode} splitNode - It represents a node in a rich text editor that contains an image.
+   * @param {number} startOffset - The index at which the line break should occur within the `RTEImageNode` block.
+   * @returns {Nullable<RTETextNode>} Returning the first node of the `newParagraph` block if `newParagraph` is not null.
+   */
   lineBreakSingleBlock(splitNode, startOffset) {
     const newParagraph = this.breakSingleBlock(splitNode, startOffset);
     if (newParagraph) {
       return newParagraph['nodes'][0];
     }
   }
+  /**
+   * Checks if the caret position is at the start of a specified RTEImageNode.
+   *
+   * @param {RTEImageNode} node - `RTEImageNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTEImageNode.
+   */
   isCaretPositionAtStart(node, startOffset) {
     return node === this.nodes[0] && startOffset === 0;
   }
+  /**
+   * Checks if the caret position is at the end of a given RTEImageNode.
+   *
+   * @param {RTEImageNode} node - `node` is a RTEImageNode
+   * @param {number} startOffset - The position within the `RTEImageNode` where the caret is located.
+   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEImageNode`.
+   */
   isCaretPositionAtEnd(node, startOffset) {
     const lastNode = this.nodes[this.nodes.length - 1];
     return node === lastNode && startOffset === 1;
   }
+  /**
+   * 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.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const newParagraph = RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
@@ -1559,11 +2325,16 @@ class RTEImageBlock extends RTEBlock {
     this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
     const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
     if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
-      afterNodes.push(new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', newParagraph));
+      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', newParagraph));
     }
     newParagraph.apply(new AppendChildNodesAction(afterNodes));
     return newParagraph['nodes'][0];
   }
+  /**
+   * Deletes content from a block node based on specific conditions.
+   *
+   * @param {DeleteBlockContentAction} action - Delete block content action
+   */
   deleteNodeContent(action) {
     const startContainerNode = action
       .startContainerNode, startOffset = action.startOffset;
@@ -1624,15 +2395,24 @@ class RTEImageBlock extends RTEBlock {
   }
 }
 
+/**
+ * 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 {RTEListBlock} Return an instance of `RTEListItemBlock`
+   */
   static from(block) {
     const listItemBlock = new RTEListItemBlock(block.id);
-    listItemBlock.nodes = block.nodes.map((richText) => textNode.RTETextNode.from(richText, listItemBlock));
+    listItemBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock));
     if (block.children) {
       listItemBlock.children = block.children.map((child) => {
         const listBlock = RTEListBlock.from(child);
@@ -1651,42 +2431,25 @@ class RTEListItemBlock extends RTETextBlock {
     }
     return listItemBlock;
   }
-  static fromHTML(node) {
-    const listItem = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    listItem.nodes = Array.from(node.childNodes)
-      .map((item) => {
-      if (!['UL', 'OL'].includes(item.nodeName)) {
-        return textNode.RTETextNode.fromHTML(item, listItem);
-      }
-    })
-      .filter(Boolean);
-    listItem.children = Array.from(node.childNodes)
-      .map((item) => {
-      if (['UL', 'OL'].includes(item.nodeName)) {
-        const listBlock = RTEListBlock.fromHTML(item);
-        listBlock && (listBlock.parent = listItem);
-        return listBlock;
-      }
-    })
-      .filter(Boolean);
-    Object.keys(blockAnnotation_abstract.BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (typeGuard.isNonNullable(item)) {
-        listItem.annotationMap.set(...item);
-      }
-    });
-    return listItem;
-  }
+  /**
+   * @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
+   */
   isNotEmpty() {
     if (this.children) {
       return super.isNotEmpty() || this.children.some((block) => block.isNotEmpty());
@@ -1695,6 +2458,9 @@ class RTEListItemBlock extends RTETextBlock {
       return super.isNotEmpty();
     }
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     if (this.children && this.children.length > 0) {
       const childListBlock = this.children[this.children.length - 1];
@@ -1702,9 +2468,6 @@ class RTEListItemBlock extends RTETextBlock {
     }
     return super.getLastNode();
   }
-  render(renderContext) {
-    return super.render(renderContext, this.renderChildren(renderContext));
-  }
   /**
    * Apply a modify action to block
    *
@@ -1712,47 +2475,47 @@ class RTEListItemBlock extends RTETextBlock {
    */
   doModifyActionApply(action) {
     switch (action.type) {
-      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_CHILD:
         this.removeListChildNode(action);
         break;
-      case node_abstract.ModifyContentActionType.DELETE_NEST_LIST:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_NEST_LIST:
         this.removeNestList(action);
         break;
-      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
         this.appendChildNodes(action.entityToBeAppended);
         break;
-      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
         this.nodes = [];
         break;
-      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+      case nodeAnnotation_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
         this.splitListItemBlock(action);
         break;
-      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
         this.nodes = [];
         this.appendChildNodes(action.newChildNodes);
         break;
-      case node_abstract.ModifyContentActionType.REPLACE_NEST_LIST:
+      case nodeAnnotation_abstract.ModifyContentActionType.REPLACE_NEST_LIST:
         this.replaceNestList(action.newList);
         break;
-      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
         this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
         break;
-      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
         action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
         action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
         break;
-      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+      case nodeAnnotation_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
         action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
         break;
-      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
         this.deleteListNodeContent(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
         this.parent.apply(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
         this.replaceNodeWithNodes(action.referNode, [
           ...action.nodesToBeInserted,
           action.referNode,
@@ -1760,16 +2523,22 @@ class RTEListItemBlock extends RTETextBlock {
         break;
     }
   }
-  renderChildren(renderContext) {
-    var _a;
-    return (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.render(renderContext));
-  }
+  /**
+   * Remove the list child node
+   *
+   * @param {RemoveChildAction} action - Modify action
+   */
   removeListChildNode(action) {
     this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
     if (this.nodes.length === 0 && (!this.children || !this.children.length)) {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * Remove the nest list
+   *
+   * @param {RemoveNestListAction} action - Modify action
+   */
   removeNestList(action) {
     if (this.children) {
       if (this.children.length > 1) {
@@ -1780,15 +2549,34 @@ class RTEListItemBlock extends RTETextBlock {
       }
     }
   }
+  /**
+   * Iterates through a list of RTEListBlock and sets their parent property to the current object, then replaces the children property with the new list.
+   *
+   * @param {RTEListBlock[]} newList - new list that you want to replace the existing children of the current object with.
+   */
   replaceNestList(newList) {
     newList.forEach((listBlock) => {
       listBlock.parent = this;
     });
     this.children = newList;
   }
+  /**
+   * Split list item block
+   *
+   * @param {SplitBlockWithNodeAction} action - Modify action
+   */
   splitListItemBlock(action) {
     action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
   }
+  /**
+   * Breaks a single list item block at a specific position.
+   *
+   * @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.
+   * @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.
+   */
   breakSingleListItemBlock(splitNode, startOffsetOfNode) {
     const newListItem = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
     const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
@@ -1806,6 +2594,12 @@ class RTEListItemBlock extends RTETextBlock {
     }
     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.
+   * @returns {RTEBlock} Returns a `RTEBlock`.
+   */
   breakListItemAtEnd(newListItem) {
     const lastItem = this.parent.blocks[this.parent.blocks.length - 1];
     const currentItemIsEmpty = this.nodes.length === 1 && this.nodes[0].isEmpty();
@@ -1832,6 +2626,11 @@ class RTEListItemBlock extends RTETextBlock {
     }
     return newListItem;
   }
+  /**
+   * Delete list node content
+   *
+   * @param {DeleteBlockContentAction} action - Modify action
+   */
   deleteListNodeContent(action) {
     const startContainerNode = action.startContainerNode;
     const listBlock = startContainerNode.parentBlock.parent;
@@ -1840,10 +2639,16 @@ class RTEListItemBlock extends RTETextBlock {
       listBlock.parent.apply(new RemoveChildAction(listBlock));
     }
   }
+  /**
+   * 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 don't need inherited
-    textNode.annotationMap.delete(node_abstract.NodeAnnotationTypeEnum.LINK);
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(nodeAnnotation_abstract.NodeAnnotationTypeEnum.LINK);
     return textNode;
   }
 }
@@ -1853,14 +2658,17 @@ class RTEListItemBlock extends RTETextBlock {
  *
  * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
  */
-class RemoveNestListAction extends node_abstract.ModifyContentAction {
+class RemoveNestListAction extends nodeAnnotation_abstract.ModifyContentAction {
   constructor(childList) {
     super();
-    this.type = node_abstract.ModifyContentActionType.DELETE_NEST_LIST;
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.DELETE_NEST_LIST;
     this.nestListBlockToBeRemoved = childList;
   }
 }
 
+/**
+ * List block
+ */
 class RTEListBlock extends RTEBlock {
   constructor(id, type) {
     super(id);
@@ -1868,6 +2676,12 @@ class RTEListBlock extends RTEBlock {
     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) => {
@@ -1877,37 +2691,25 @@ class RTEListBlock extends RTEBlock {
     });
     return listBlock;
   }
-  static fromHTML(node) {
-    const listBlock = new RTEListBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), node.nodeName === 'UL' ? 'bullet-list' : 'number-list');
-    listBlock.blocks = Array.from(node.children)
-      .map((item) => {
-      const listItemBlock = RTEListItemBlock.fromHTML(item);
-      listItemBlock && (listItemBlock.parent = listBlock);
-      return listItemBlock;
-    })
-      .filter(Boolean);
-    Object.keys(blockAnnotation_abstract.BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (typeGuard.isNonNullable(item)) {
-        listBlock.annotationMap.set(...item);
-      }
-    });
-    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 &&
       this.blocks.some((listItemBlock) => listItemBlock.isNotEmpty()));
   }
+  /**
+   * @inheritDoc
+   */
   getLastNode() {
     return this.blocks[this.blocks.length - 1].getLastNode();
   }
-  render(renderContext) {
-    const BlockTag = this.type === 'number-list' ? 'ol' : 'ul';
-    return (globalSlimmerRegistry.h(BlockTag, { ref: this.registerRef.bind(this) }, this.blocks.map((block) => block.render(renderContext))));
-  }
   /**
    * Apply a modify action to block
    *
@@ -1915,46 +2717,52 @@ class RTEListBlock extends RTEBlock {
    */
   doModifyActionApply(action) {
     switch (action.type) {
-      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+      case nodeAnnotation_abstract.ModifyContentActionType.DELETE_CHILD:
         this.removeListItemBlock(action.entityToBeRemoved);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER:
         this.replaceBlockWithBlocks(action.referBlock, [
           action.referBlock,
           ...action.blocksToBeInserted,
         ]);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE:
         this.replaceBlockWithBlocks(action.referBlock, [
           ...action.blocksToBeInserted,
           action.referBlock,
         ]);
         break;
-      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+      case nodeAnnotation_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
         this.appendChildBlocks(action.entityToBeAppended);
         break;
-      case node_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
         this.convertToList(action);
         break;
-      case node_abstract.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK:
         this.convertToParagraph(action);
         break;
-      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+      case nodeAnnotation_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
         this.insertImage(action);
         break;
     }
   }
+  /**
+   * 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;
   }
-  registerRef(ref) {
-    if (ref) {
-      node_abstract.stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
+  /**
+   * Covert block to List
+   *
+   * @param {TransformListAction} action - Modify action
+   */
   convertToList(action) {
     const selectedBlocks = action.selectedBlocks;
     const bulletList = this.parent.createList(action.listType);
@@ -1964,7 +2772,7 @@ class RTEListBlock extends RTEBlock {
       bulletList.apply(new AppendChildNodesAction(this.blocks));
       this.parent.apply(new InsertBlocksAfterAction(this, bulletList));
       this.parent.apply(new RemoveChildAction(this));
-      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new textNode.SyncUpSelectionAction())));
+      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new SyncUpSelectionAction())));
     }
     else {
       const listItems = action.selectedBlocks.map((block) => this.parent.toListItem(block));
@@ -1978,12 +2786,17 @@ class RTEListBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Covert block to paragraph
+   *
+   * @param {TransformListAction} action - Modify action
+   */
   convertToParagraph(action) {
     let isSelectedFirstBlock = false;
     let isSelectedLastBlock = false;
     const selectedBlocks = action.selectedBlocks;
     const currentParagraph = selectedBlocks.map((block) => {
-      block.nodes.map((node) => node.apply(new textNode.SyncUpSelectionAction()));
+      block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
       if (block === this.blocks[0])
         isSelectedFirstBlock = true;
       if (block === this.blocks[this.blocks.length - 1])
@@ -2013,6 +2826,11 @@ class RTEListBlock extends RTEBlock {
       this.parent.apply(new RemoveChildAction(this));
     }
   }
+  /**
+   * Inserts an image block into a rich text editor block based on the parent block type.
+   *
+   * @param {InsertImageToBlockAction} action - Modify action
+   */
   insertImage(action) {
     const imageBlock = action.imageBlockToBeInserted;
     if (this.parent['type'] !== 'list-item') {
@@ -2022,10 +2840,15 @@ class RTEListBlock extends RTEBlock {
       this.parent.apply(action);
     }
   }
+  /**
+   * Removes a specified block and handles the removal of nested lists if necessary.
+   *
+   * @param {RTEBlock} blockToBeRemoved - block that will be removed
+   */
   removeListItemBlock(blockToBeRemoved) {
     super.removeChildBlock(blockToBeRemoved);
     if (this.blocks.length === 0 && this.parent) {
-      // The parent is a list item mean the current block is a nest list, so we need use RemoveNestListAction to remove the item
+      // 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 (this.parent instanceof RTEListItemBlock) {
         this.parent.apply(new RemoveNestListAction(this));
       }
@@ -2036,149 +2859,40 @@ class RTEListBlock extends RTEBlock {
   }
 }
 
-/**
- * Class representing the content state of the rich text editor.
- */
-class VegaRTEContent extends BlockBaseOperator {
-  constructor(blocks) {
-    super();
-    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 {RTEContentBlock[]} 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: '',
-          },
-        ],
-      },
-    ]);
-  }
-  /**
-   * Clones the content state.
-   *
-   * @returns {VegaRTEContent} The cloned content state.
-   */
-  clone() {
-    return 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) {
-    switch (action.type) {
-      case node_abstract.ModifyContentActionType.DELETE_CHILD:
-        this.removeChildBlock(action.entityToBeRemoved);
-        break;
-      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
-        this.appendChildBlocks(action.entityToBeAppended);
-        break;
-      case node_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER:
-        this.replaceBlockWithBlocks(action.referBlock, [
-          action.referBlock,
-          ...action.blocksToBeInserted,
-        ]);
-        break;
-      case node_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE:
-        this.replaceBlockWithBlocks(action.referBlock, [
-          ...action.blocksToBeInserted,
-          action.referBlock,
-        ]);
-        break;
-    }
-  }
-  /**
-   * Convert text to list.
-   *
-   * @param {RTETextBlock} block - block
-   * @returns {RTEListItemBlock} list item block dto.
-   */
-  toListItem(block) {
-    block.nodes.map((node) => node.apply(new textNode.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);
-  }
-}
-
+exports.AnnotationAction = AnnotationAction;
 exports.AppendChildNodesAction = AppendChildNodesAction;
+exports.BlockBaseOperator = BlockBaseOperator;
+exports.BoldAnnotation = BoldAnnotation;
 exports.BoldAnnotationAction = BoldAnnotationAction;
+exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
+exports.CodeAnnotationAction = CodeAnnotationAction;
 exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
-exports.ImageAnnotationAction = ImageAnnotationAction;
+exports.ImageAnnotation = ImageAnnotation;
 exports.IndentAnnotation = IndentAnnotation;
 exports.InsertBlocksAfterAction = InsertBlocksAfterAction;
 exports.InsertBlocksBeforeAction = InsertBlocksBeforeAction;
+exports.ItalicAnnotation = ItalicAnnotation;
+exports.LinkAnnotationAction = LinkAnnotationAction;
 exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
 exports.RTEImageBlock = RTEImageBlock;
 exports.RTEImageNode = RTEImageNode;
 exports.RTEListBlock = RTEListBlock;
 exports.RTEListItemBlock = RTEListItemBlock;
 exports.RTETextBlock = RTETextBlock;
+exports.RTETextNode = RTETextNode;
+exports.RTE_TEXT_COLORS = RTE_TEXT_COLORS;
 exports.RemoveChildAction = RemoveChildAction;
 exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
+exports.SelectionRangeAnnotation = SelectionRangeAnnotation;
 exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
+exports.StrikethroughAnnotation = StrikethroughAnnotation;
+exports.SyncUpSelectionAction = SyncUpSelectionAction;
+exports.TextColorAnnotation = TextColorAnnotation;
+exports.TextSplittableAction = TextSplittableAction;
 exports.TextStyleAnnotation = TextStyleAnnotation;
 exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
-exports.VegaRTEContent = VegaRTEContent;
+exports.UnderlineAnnotation = UnderlineAnnotation;
+exports.UpdateTextAction = UpdateTextAction;
+exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
+exports.waitForComponentDidRender = waitForComponentDidRender;
+exports.waitForVega = waitForVega;