@heartlandone/vega 2.34.0 → 2.35.0-RTE-preview

package/dist/esm/{content-state-acf55eb0.js → list-block-ba82c846.js}

@@ -1,12 +1,43 @@
-import { h } from './global-slimmer-registry-6887a59f.js';
-import { B as BlockAnnotation, e as BlockAnnotationTypeEnum } from './block-annotation.abstract-b0554e2b.js';
-import { C as ChangeManager } from './change-manager-8f5b72c2.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, V as VegaChange } from './dom-node-subject-observer-factory-80358591.js';
-import { M as ModifyContentAction, b as ModifyContentActionType, s as stateEntityRenderingRegistry, N as NodeAnnotation, a as NodeAnnotationTypeEnum, R as RTENode, c as NodeTypeEnum, I as InternalAnnotationTypeEnum } from './node.abstract-93746055.js';
-import { V as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-4af5c6e9.js';
+import { W as WaitForVega, B as BlockAnnotation, a as BlockAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, s as stateEntityRenderingRegistry, N as NodeAnnotation, c as NodeAnnotationTypeEnum, R as RTENode, d as NodeTypeEnum, A as Annotation, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node-annotation.abstract-d7d52bce.js';
+import { O as Observer, d as domNodeSubjectFactory } from './dom-node-subject-factory-5831cdd4.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { a as VegaInternalComponentDidRender, V as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-4af5c6e9.js';
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { Z as ZERO_WIDTH_SPACE, A as AnnotationAction, T as TextSplittableAction, B as BoldAnnotation, R as RTETextNode, L as LinkAnnotationAction, D as DeleteNodeAnnotationAction, a as LinkGroupAnnotationAction, U as UpdateTextAction, S as SyncUpSelectionAction } from './text-node-6f7d736c.js';
-import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-14cb4599.js';
+import './global-slimmer-registry-17c4efd4.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.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 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 Observer(isAcceptableComponentDidRender.bind(null), () => {
+      ChangeManager.unregister(domNodeSubjectFactory.getSubject(componentRef, VegaInternalComponentDidRender), observer);
+      resolve(null);
+    });
+    ChangeManager.register(domNodeSubjectFactory.getSubject(componentRef, 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
@@ -26,50 +57,6 @@ class HorizontalAlignmentAnnotation extends BlockAnnotation {
   static from(textAlign) {
     return [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;
-    }
-  }
   /**
    * Generate the JSON item of the annotation
    *
@@ -116,48 +103,6 @@ class IndentAnnotation extends BlockAnnotation {
   static from(indent) {
     return [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', ''));
-  }
   /**
    * Generate the JSON item of the annotation
    *
@@ -247,108 +192,39 @@ class RemoveChildAction extends ModifyContentAction {
   }
 }
 
-/**
- * Text style annotation
- */
-class TextStyleAnnotation extends BlockAnnotation {
-  constructor(textStyle) {
-    super();
-    this.type = 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 [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
@@ -379,23 +255,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
    *
@@ -458,29 +317,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)
-      .map((annotation) => annotation.render())
-      .filter(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(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.
    *
@@ -711,16 +547,6 @@ class ImageAnnotation extends NodeAnnotation {
   static from(size, alt) {
     return [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);
-  }
   /**
    * Generate the JSON representation of the annotation
    *
@@ -757,25 +583,8 @@ class ImageAnnotation extends NodeAnnotation {
 }
 
 /**
- * Action to add an image annotation to the editor
+ * Image node
  */
-class ImageAnnotationAction extends 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 RTENode {
   constructor(id, url, parentBlock, annotationMap) {
     super(id, annotationMap);
@@ -783,29 +592,30 @@ class RTEImageNode extends RTENode {
     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(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(generateUUID(), src, parentBlock);
-    imageNode.annotationMap = new Map([ImageAnnotation.fromHTML(size, node.alt)]);
-    return imageNode;
-  }
+  /**
+   * @inheritDoc
+   */
   toJSON() {
     const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
     const annotations = {};
@@ -817,55 +627,20 @@ class RTEImageNode extends 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(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(() => {
-            stateEntityRenderingRegistry.getDOMByEntity(this).dispatchEvent(event);
-          }, 50);
-          break;
-        }
-      }
-    };
-    return editable ? (h("vega-rich-text-image-editor", { style: this.getStyles(), size: size, alt: alt, ref: (ref) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, 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) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderImage(editable, alt) {
-    return (h("img", { style: editable ? { width: '100%' } : this.getStyles(), alt: alt, src: this.url, ref: this.registerRef.bind(this) }));
-  }
 }
 
 /**
@@ -910,6 +685,892 @@ class SplitBlockWithNodeAction extends ModifyContentAction {
   }
 }
 
+/**
+ * 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 Annotation {
+  constructor(range) {
+    super();
+    this.type = InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+}
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = 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 [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 {
+  constructor(underline) {
+    super();
+    this.type = 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 [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 {
+  constructor(italic) {
+    super();
+    this.type = 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 [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 {
+  constructor(bold) {
+    super();
+    this.type = 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 [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 Annotation {
+  constructor() {
+    super(...arguments);
+    this.type = InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      NodeAnnotationTypeEnum.BOLD,
+      NodeAnnotationTypeEnum.ITALIC,
+      NodeAnnotationTypeEnum.UNDERLINE,
+      NodeAnnotationTypeEnum.STRIKETHROUGH,
+      NodeAnnotationTypeEnum.TEXT_COLOR,
+      NodeAnnotationTypeEnum.CODE,
+    ];
+  }
+}
+
+/**
+ * Annotation to make text code
+ */
+class CodeAnnotation extends NodeAnnotation {
+  constructor(code) {
+    super();
+    this.type = 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 [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 {
+  constructor(textColor) {
+    super();
+    this.type = 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 [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: 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 {
+  constructor(link) {
+    super();
+    this.type = 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 [
+      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 (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 ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+}
+
+/**
+ * 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 RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = 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(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)
+      .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(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(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 ModifyContentActionType.UPDATE_TEXT:
+        this.updateText(action.newTextContent);
+        break;
+      case 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 && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && 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 || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (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 && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+      const endItemDto = endNode && 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(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 = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        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 BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = 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 [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
  */
@@ -985,12 +1646,18 @@ 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;
@@ -1005,17 +1672,6 @@ class RTETextBlock extends RTEBlock {
     }
     return textBlock;
   }
-  static fromHTML(node, blockType) {
-    const textBlock = new RTETextBlock(generateUUID(), blockType);
-    textBlock.nodes = Array.from(node.childNodes).map((item) => RTETextNode.fromHTML(item, textBlock));
-    Object.keys(BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (isNonNullable(item)) {
-        textBlock.annotationMap.set(...item);
-      }
-    });
-    return textBlock;
-  }
   /**
    * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
    * and value.
@@ -1036,9 +1692,20 @@ 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);
@@ -1055,38 +1722,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(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 (h(BlockTag, { ref: this.registerRef.bind(this), style: this.getStyles(), class: super.getClasses() },
-      this.renderNodes(renderContext),
-      children));
-  }
-  registerRef(ref) {
-    if (ref) {
-      stateEntityRenderingRegistry.register(ref, this);
-    }
-  }
-  renderNodes(renderConfig = {}) {
-    const linkGroupAnnotation = this.getAnnotationByType(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') {
@@ -1168,6 +1836,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);
@@ -1189,13 +1864,34 @@ 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 RTETextNode(generateUUID(), '\n', this);
@@ -1216,6 +1912,12 @@ class RTETextBlock extends RTEBlock {
       return lineBreakNode;
     }
   }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
   lineBreakMultipleBlocks(selectedBlocks) {
     const beforeNodes = this['nodes'];
     const lineBreakNode = new RTETextNode(generateUUID(), '\n', this);
@@ -1223,6 +1925,11 @@ class RTETextBlock extends RTEBlock {
     this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
     return lineBreakNode;
   }
+  /**
+   * deleteNodeContent
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   */
   deleteNodeContent(action) {
     const startContainerNode = action.startContainerNode;
     const startOffset = action.startOffset;
@@ -1264,6 +1971,7 @@ class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the first line
          * \n
          * test
@@ -1273,6 +1981,7 @@ class RTETextBlock extends RTEBlock {
         }
         /**
          * Remove line break
+         *
          * @example caret at the begin of second line
          * \n
          * test
@@ -1298,35 +2007,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 RTETextNode(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)) {
@@ -1342,6 +2053,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));
@@ -1351,6 +2067,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;
@@ -1367,6 +2088,12 @@ 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
@@ -1386,6 +2113,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;
@@ -1400,34 +2133,26 @@ class RTEImageBlock extends RTEBlock {
     }
     return imageBlock;
   }
-  static fromHTML(node) {
-    const nodes = node.nodeName === 'IMG' ? [node] : Array.from(node.children);
-    const imageBlock = new RTEImageBlock(generateUUID());
-    imageBlock.nodes = nodes.map((item) => RTEImageNode.fromHTML(item, imageBlock));
-    Object.keys(BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (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 (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
    */
@@ -1481,11 +2206,11 @@ class RTEImageBlock extends RTEBlock {
         break;
     }
   }
-  registerRef(ref) {
-    if (ref) {
-      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) {
@@ -1498,6 +2223,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);
@@ -1510,12 +2236,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(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: generateUUID(),
@@ -1535,19 +2274,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: generateUUID(),
@@ -1562,6 +2328,11 @@ class RTEImageBlock extends RTEBlock {
     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;
@@ -1622,12 +2393,21 @@ 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) => RTETextNode.from(richText, listItemBlock));
@@ -1649,42 +2429,25 @@ class RTEListItemBlock extends RTETextBlock {
     }
     return listItemBlock;
   }
-  static fromHTML(node) {
-    const listItem = new RTEListItemBlock(generateUUID());
-    listItem.nodes = Array.from(node.childNodes)
-      .map((item) => {
-      if (!['UL', 'OL'].includes(item.nodeName)) {
-        return 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(BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (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(generateUUID());
     block.nodes = [];
     block.apply(new AppendChildNodesAction(nodes));
     return block;
   }
+  /**
+   * @inheritDoc
+   */
   isNotEmpty() {
     if (this.children) {
       return super.isNotEmpty() || this.children.some((block) => block.isNotEmpty());
@@ -1693,6 +2456,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];
@@ -1700,9 +2466,6 @@ class RTEListItemBlock extends RTETextBlock {
     }
     return super.getLastNode();
   }
-  render(renderContext) {
-    return super.render(renderContext, this.renderChildren(renderContext));
-  }
   /**
    * Apply a modify action to block
    *
@@ -1758,16 +2521,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) {
@@ -1778,15 +2547,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(generateUUID());
     const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
@@ -1804,6 +2592,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();
@@ -1830,6 +2624,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;
@@ -1838,9 +2637,15 @@ 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
+    // The link annotation doesn't need to inherit
     textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
     return textNode;
   }
@@ -1859,6 +2664,9 @@ class RemoveNestListAction extends ModifyContentAction {
   }
 }
 
+/**
+ * List block
+ */
 class RTEListBlock extends RTEBlock {
   constructor(id, type) {
     super(id);
@@ -1866,6 +2674,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) => {
@@ -1875,37 +2689,25 @@ class RTEListBlock extends RTEBlock {
     });
     return listBlock;
   }
-  static fromHTML(node) {
-    const listBlock = new RTEListBlock(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(BlockAnnotationTypeEnum).forEach((type) => {
-      const item = this.createAnnotationEntityFromHTML(type, node);
-      if (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 (h(BlockTag, { ref: this.registerRef.bind(this) }, this.blocks.map((block) => block.render(renderContext))));
-  }
   /**
    * Apply a modify action to block
    *
@@ -1942,17 +2744,23 @@ class RTEListBlock extends RTEBlock {
         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(generateUUID(), 'paragraph');
     textBlock.apply(new AppendChildNodesAction(block['nodes']));
     textBlock['annotationMap'] = block['annotationMap'];
     return textBlock;
   }
-  registerRef(ref) {
-    if (ref) {
-      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);
@@ -1976,6 +2784,11 @@ class RTEListBlock extends RTEBlock {
       }
     }
   }
+  /**
+   * Covert block to paragraph
+   *
+   * @param {TransformListAction} action - Modify action
+   */
   convertToParagraph(action) {
     let isSelectedFirstBlock = false;
     let isSelectedLastBlock = false;
@@ -2011,6 +2824,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') {
@@ -2020,10 +2838,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));
       }
@@ -2034,131 +2857,4 @@ 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: generateUUID(),
-        type: 'paragraph',
-        nodes: [
-          {
-            id: 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 ModifyContentActionType.DELETE_CHILD:
-        this.removeChildBlock(action.entityToBeRemoved);
-        break;
-      case ModifyContentActionType.APPEND_CHILD_NODES:
-        this.appendChildBlocks(action.entityToBeAppended);
-        break;
-      case ModifyContentActionType.INSERT_BLOCKS_AFTER:
-        this.replaceBlockWithBlocks(action.referBlock, [
-          action.referBlock,
-          ...action.blocksToBeInserted,
-        ]);
-        break;
-      case 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 SyncUpSelectionAction()));
-    const listItemBlock = new RTEListItemBlock(generateUUID());
-    listItemBlock.apply(new AppendChildNodesAction(block['nodes']));
-    listItemBlock['annotationMap'] = block['annotationMap'];
-    return listItemBlock;
-  }
-  /**
-   * create list.
-   *
-   * @param {ListType} type - type
-   * @returns {RTEListBlock} list block dto.
-   */
-  createList(type) {
-    return new RTEListBlock(generateUUID(), type);
-  }
-}
-
-export { AppendChildNodesAction as A, BoldAnnotationAction as B, HorizontalAlignmentAnnotation as H, IndentAnnotation as I, MergeTwoBlocksNodesAction as M, RTETextBlock as R, SplitBlockWithNodeAction as S, TextStyleAnnotationAction as T, VegaRTEContent as V, TextStyleAnnotation as a, RTEImageNode as b, RTEListItemBlock as c, RemoveChildAction as d, InsertBlocksBeforeAction as e, ReplaceChildNodesAction as f, RTEImageBlock as g, RTEListBlock as h, InsertBlocksAfterAction as i, ImageAnnotationAction as j };
+export { AppendChildNodesAction as A, BlockBaseOperator as B, ClearFormattingAnnotationAction as C, HorizontalAlignmentAnnotation as H, ImageAnnotation as I, LinkAnnotationAction as L, MergeTwoBlocksNodesAction as M, RTEListBlock as R, SyncUpSelectionAction as S, TextSplittableAction as T, UnderlineAnnotation as U, ZERO_WIDTH_SPACE as Z, RTEImageBlock as a, RTETextBlock as b, RTEListItemBlock as c, waitForComponentDidRender as d, TextColorAnnotation as e, RTE_TEXT_COLORS as f, RTETextNode as g, AnnotationAction as h, BoldAnnotationAction as i, ItalicAnnotation as j, TextStyleAnnotationAction as k, TextStyleAnnotation as l, BoldAnnotation as m, CodeAnnotationAction as n, StrikethroughAnnotation as o, SelectionRangeAnnotation as p, IndentAnnotation as q, RTEImageNode as r, UpdateTextAction as s, RemoveChildAction as t, InsertBlocksBeforeAction as u, SplitBlockWithNodeAction as v, waitForVega as w, ReplaceChildNodesAction as x, InsertBlocksAfterAction as y };