@heartlandone/vega-sandbox-pr-1733-a510723b8e32e279525a116f82f2f0bfc62031c7 2.32.0

package/dist/cjs/content-state-484c3f34.js

@@ -0,0 +1,2070 @@
+'use strict';
+
+const globalSlimmerRegistry = require('./global-slimmer-registry-dd2691b8.js');
+const blockAnnotation_abstract = require('./block-annotation.abstract-0211d1f6.js');
+const changeManager = require('./change-manager-bda1d107.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-b098e97b.js');
+const node_abstract = require('./node.abstract-140b0611.js');
+const vegaInternalEventId = require('./vega-internal-event-id-37909065.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const textNode = require('./text-node-7133b52e.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-87fc7906.js');
+
+/**
+ * Annotation to make block with horizontal alignment
+ */
+class HorizontalAlignmentAnnotation extends blockAnnotation_abstract.BlockAnnotation {
+  constructor(textAlign) {
+    super();
+    this.type = blockAnnotation_abstract.BlockAnnotationTypeEnum.ALIGNMENT;
+    this.textAlign = textAlign;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTEBlockAlignment} textAlign - Text alignment
+   * @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;
+    }
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textAlign: this.textAlign,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {string} - Annotation class
+   */
+  renderClass() {
+    return `v-rte--horizontal-alignment-${this.textAlign}`;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation for block indentation
+ */
+class IndentAnnotation extends blockAnnotation_abstract.BlockAnnotation {
+  constructor(indent) {
+    super();
+    this.type = blockAnnotation_abstract.BlockAnnotationTypeEnum.INDENT;
+    this.indent = Math.max(0, indent);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {number} indent - Text alignment
+   * @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', ''));
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return this.indent > 0 ? { indent: this.indent } : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return this.indent > 0 ? { 'margin-left': `${this.indent * 16}px` } : null;
+  }
+}
+
+/** The class contains some common method to modify the blocks property */
+class BlockBaseOperator {
+  /**
+   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
+   *
+   * @param {RTEBlock} referBlock - Used as a reference block to identify the block that needs to be replaced in the `blocks` array.
+   * @param {RTEBlock[]} blocks - An array of RTEBlock objects that you want to replace the `referBlock` with in the `blocks` array.
+   */
+  replaceBlockWithBlocks(referBlock, blocks) {
+    if (this.blocks) {
+      blocks.forEach((block) => {
+        block.parent = this;
+      });
+      this.blocks = this.blocks.flatMap((block) => {
+        if (block === referBlock) {
+          return blocks;
+        }
+        else {
+          return block;
+        }
+      });
+    }
+  }
+  /**
+   * Appends new blocks to an array and sets their parent property to a specific type.
+   *
+   * @param {RTEBlock[]} newBlocks - An array of `RTEBlock` objects that are being passed to the `appendChildBlocks` method.
+   */
+  appendChildBlocks(newBlocks) {
+    if (this.blocks) {
+      newBlocks.forEach((block) => {
+        block.parent = this;
+      });
+      this.blocks = this.blocks.concat(newBlocks);
+    }
+  }
+  /**
+   * Removes a specified RTEBlock from an array of blocks.
+   *
+   * @param {RTEBlock} blockToBeRemoved - The block that needs to be removed from the `blocks` array.
+   */
+  removeChildBlock(blockToBeRemoved) {
+    if (this.blocks) {
+      this.blocks = this.blocks.filter((block) => block !== blockToBeRemoved);
+    }
+  }
+}
+
+/** Append blocks or nodes to a block */
+class AppendChildNodesAction extends node_abstract.ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.APPEND_CHILD_NODES;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
+/**
+ * Delete child node or child block from the current list action
+ *
+ * @example needRemovedNode.parentBlock.apply(new RemoveChildAction(needRemovedNode))
+ * @example needRemovedBlock.parent.apply(new RemoveChildAction(needRemovedBlock))
+ */
+class RemoveChildAction extends node_abstract.ModifyContentAction {
+  constructor(childNode) {
+    super();
+    this.type = node_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' };
+      }
+    }
+  }
+}
+
+/**
+ * Abstract class for block
+ */
+class RTEBlock extends BlockBaseOperator {
+  constructor(id) {
+    super();
+    this.annotationMap = new Map();
+    this.id = id;
+  }
+  /**
+   * The function `createAnnotationEntity` creates a block annotation entity based on the provided type
+   * and value.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'textAlign':
+        return HorizontalAlignmentAnnotation.from(value);
+      case 'indent':
+        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
+   *
+   * @returns {VegaRTEBlockBase} - JSON object
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof blockAnnotation_abstract.BlockAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {}));
+  }
+  /**
+   * Get annotation by type
+   *
+   * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
+   * @returns {Nullable<BlockAnnotation> | Nullable<LinkGroupAnnotation>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      const domNode = node_abstract.stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction|ModifyContentAction} action - Annotation action
+   */
+  doApply(action) {
+    if (action instanceof node_abstract.ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.applyAnnotationAction(action);
+    }
+  }
+  /**
+   * Apply annotation action to block
+   *
+   * @param {AnnotationAction} action - Annotation action
+   */
+  applyAnnotationAction(action) {
+    const annotation = action.toAnnotation();
+    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.
+   *
+   * @param {RTENode[]} nodesToBeAppended - An array of `RTENode` objects that you want to append to the current block.
+   */
+  appendChildNodes(nodesToBeAppended) {
+    nodesToBeAppended.forEach((node) => {
+      node.parentBlock = this;
+    });
+    this['nodes'] = this['nodes'].concat(nodesToBeAppended);
+  }
+  /**
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
+   *
+   * @param {RTEBlock} secondBlock - A block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   */
+  mergeTwoBlocksNodes(secondBlock) {
+    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);
+      }
+      this.apply(new AppendChildNodesAction(shouldMergeNodes));
+      secondBlock.parent.apply(new RemoveChildAction(secondBlock));
+    }
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
+   */
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block['nodes']);
+        block.parent.apply(new RemoveChildAction(block));
+      }
+    });
+    return nodes;
+  }
+  /**
+   * Returns the previous node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the previous block last node
+   */
+  getPreviousNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    if (currentIndex > 0) {
+      return currentBlock['nodes'][currentIndex - 1];
+    }
+    else if (currentBlock.parent) {
+      const previousBlock = this.getPreviousBlock(currentBlock);
+      if (previousBlock) {
+        return this.getBlockLastNode(previousBlock);
+      }
+    }
+  }
+  /**
+   * Returns the last node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the last node within that block.
+   * @returns {Nullable<RTENode>} Returns the last node of the given `currentBlock` object.
+   */
+  getBlockLastNode(currentBlock) {
+    if (currentBlock.type === 'list-item') {
+      if (currentBlock['children'] && currentBlock['children'].length > 0) {
+        return this.getBlockLastNode(currentBlock['children'][currentBlock['children'].length - 1]);
+      }
+      else {
+        return currentBlock['nodes'][currentBlock['nodes'].length - 1];
+      }
+    }
+    else if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
+      if (currentBlock.blocks) {
+        const lastListItem = currentBlock.blocks[currentBlock.blocks.length - 1];
+        return this.getBlockLastNode(lastListItem);
+      }
+    }
+    else {
+      if (currentBlock['nodes']) {
+        return currentBlock['nodes'][currentBlock['nodes'].length - 1];
+      }
+    }
+  }
+  /**
+   * TODO: The getPreviousBlock add nest list support
+   * This function retrieves the previous block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the previous block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The previous block if existing
+   */
+  getPreviousBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.blocks) {
+      const currentBlockIndex = currentBlock.parent.blocks.indexOf(currentBlock);
+      if (currentBlockIndex > 0) {
+        return currentBlock.parent.blocks[currentBlockIndex - 1];
+      }
+      else if ((currentBlock.parent['type'] === 'number-list' ||
+        currentBlock.parent['type'] === 'bullet-list') &&
+        currentBlockIndex === 0) {
+        return this.getPreviousBlock(currentBlock.parent);
+      }
+    }
+  }
+  /**
+   * Replaces a specific node with an array of nodes within a RTENode array.
+   *
+   * @param {RTENode} referNode - Used as a reference node to identify the node that needs to be replaced in the `nodes` array.
+   * @param {RTENode[]} nodes - An array of RTENode objects that you want to replace the `referNode` with in the `nodes` array.
+   */
+  replaceNodeWithNodes(referNode, nodes) {
+    if (this['nodes']) {
+      nodes.forEach((node) => {
+        node.parentBlock = this;
+      });
+      this['nodes'] = this['nodes'].flatMap((node) => {
+        if (node === referNode) {
+          return nodes;
+        }
+        else {
+          return node;
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Annotation for image
+ */
+class ImageAnnotation extends node_abstract.NodeAnnotation {
+  constructor(size = 'md', alt) {
+    super();
+    this.type = node_abstract.NodeAnnotationTypeEnum.IMAGE;
+    this.size = size;
+    this.alt = alt;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} size - Image size
+   * @param {string} alt - Image alt
+   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
+   */
+  static from(size, alt) {
+    return [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);
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return typeGuard.isNonNullable(this.alt)
+      ? {
+        size: this.size,
+        alt: this.alt,
+      }
+      : {
+        size: this.size,
+      };
+  }
+  /**
+   * Generate the style for the image
+   *
+   * @returns {Nullable<AnnotationStyle>} image style
+   */
+  render() {
+    switch (this.size) {
+      case 'sm': {
+        return { width: '25%' };
+      }
+      case 'md': {
+        return { width: '50%' };
+      }
+      case 'lg': {
+        return { width: '100%' };
+      }
+    }
+  }
+}
+
+/**
+ * Action to add an image annotation to the editor
+ */
+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 {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = node_abstract.NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parentBlock = parentBlock;
+  }
+  static from(image, parentBlock) {
+    const imageNode = new RTEImageNode(image.id, image.url, parentBlock);
+    let annotations;
+    if (!image.annotations || Object.keys(image.annotations).length === 0) {
+      annotations = { size: 'md' };
+    }
+    else {
+      annotations = image.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;
+  }
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(node_abstract.NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  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;
+        }
+        case 'delete': {
+          const removeImageNodeAction = new RemoveChildAction(this);
+          removeImageNodeAction.isFlushable = true;
+          this.parentBlock.apply(removeImageNodeAction);
+          if (this.parentBlock.nodes.length === 0) {
+            const removeImageBlockAction = new RemoveChildAction(this.parentBlock);
+            removeImageBlockAction.isFlushable = true;
+            this.parentBlock.parent.apply(removeImageBlockAction);
+          }
+          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));
+  }
+  doAnnotationActionApply(action) {
+    const annotation = action.toAnnotation();
+    this.annotationMap.set(annotation.type, annotation);
+  }
+  // placeholder method
+  /* istanbul ignore next */
+  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) }));
+  }
+}
+
+/**
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
+ */
+class ReplaceChildNodesAction extends node_abstract.ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
+/**
+ * Insert a new block after a existing block
+ *
+ * @example currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, newBlock, ...))
+ */
+class InsertBlocksAfterAction extends node_abstract.ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.INSERT_BLOCKS_AFTER;
+    this.referBlock = referBlock;
+    this.blocksToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Split the block with a split point node.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class SplitBlockWithNodeAction extends node_abstract.ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Action to change the text style of a block
+ */
+class TextStyleAnnotationAction extends textNode.AnnotationAction {
+  constructor(textStyle, bold) {
+    super();
+    this.isFlushable = true;
+    this.textStyle = textStyle;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to a block annotation
+   *
+   * @returns {BlockAnnotation} the block annotation
+   */
+  toAnnotation() {
+    return new TextStyleAnnotation(this.textStyle);
+  }
+}
+
+/**
+ * Action to toggle bold annotation
+ */
+class BoldAnnotationAction extends textNode.TextSplittableAction {
+  constructor(bold) {
+    super();
+    this.isFlushable = true;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {BoldAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new textNode.BoldAnnotation(this.bold);
+  }
+}
+
+/**
+ * Merge the two blocks node into first block if the two blocks nodes type is same(text node or image node)
+ *
+ * @example firstBlock.apply(new MergeTwoBlocksNodesAction(secondBlock))
+ */
+class MergeTwoBlocksNodesAction extends node_abstract.ModifyContentAction {
+  constructor(blockNeedToBeMerged) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.blockNeedToBeMerged = blockNeedToBeMerged;
+  }
+}
+
+/**
+ * Insert a new block before a existing block
+ *
+ * @example currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, newBlock, ...))
+ */
+class InsertBlocksBeforeAction extends node_abstract.ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.INSERT_BLOCKS_BEFORE;
+    this.referBlock = referBlock;
+    this.blocksToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Text block
+ */
+class RTETextBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.nodes = [];
+    this.type = type;
+    if (RTETextBlock.isAcceptableTextStyle(type)) {
+      super.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+    }
+    else {
+      super.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+    }
+  }
+  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));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (typeGuard.isNonNullable(item)) {
+          textBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    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.
+   *
+   * @param {keyof VegaRTEBlockAnnotations} type - The `type` parameter is a key of the `VegaRTEBlockAnnotations` enum, which specifies
+   * the type of annotation entity to create.
+   * @param {unknown} value - The `value` parameter in the `createAnnotationEntity` function is the value
+   * that will be used to create the annotation entity. It can be of any type depending on the specific
+   * annotation being created.
+   * @returns {Nullable<[BlockAnnotationTypeEnum, BlockAnnotation]>} The `createAnnotationEntity` function returns a nullable tuple containing a
+   * `BlockAnnotationTypeEnum` and a `BlockAnnotation` object.
+   */
+  static createAnnotationEntity(type, value) {
+    if (type === 'textStyle') {
+      return TextStyleAnnotation.from(value);
+    }
+    else {
+      return super.createAnnotationEntity(type, value);
+    }
+  }
+  static isAcceptableTextStyle(type) {
+    return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
+  }
+  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 (lastNodeLinkAnnotation &&
+          curNodeLinkAnnotation &&
+          lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
+          return prev;
+        }
+      }
+      // TODO: handle other cases like merge bold nodes
+      return [...prev, cur];
+    }, []);
+  }
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  cloneWithNodes(nodes) {
+    const block = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), this.type);
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
+  }
+  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());
+  }
+  doAnnotationActionApply(action) {
+    if (action instanceof TextStyleAnnotationAction) {
+      if (this.type !== 'list-item') {
+        this.type = action.textStyle;
+      }
+      if (action.bold) {
+        this.nodes.forEach((node) => {
+          const boldAnnotationAction = new BoldAnnotationAction(true);
+          boldAnnotationAction.doSplit = false;
+          node.apply(boldAnnotationAction);
+        });
+      }
+      else {
+        this.nodes.forEach((node) => {
+          node.apply(new textNode.DeleteNodeAnnotationAction(node_abstract.NodeAnnotationTypeEnum.BOLD));
+        });
+      }
+      return;
+    }
+    if (action instanceof textNode.LinkGroupAnnotationAction) {
+      const linkGroupAnnotation = this.getAnnotationByType(node_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);
+      }
+      return;
+    }
+  }
+  /**
+   * Apply a modify action to block
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case node_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+        this.convertParagraphToList(action);
+        break;
+      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        action.previousNode = this.deleteNodeContent(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  splitTextNodeBlock(splitNode, startOffsetOfNode) {
+    if (splitNode) {
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = this.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = this.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = this.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.apply(new ReplaceChildNodesAction(beforeNodes));
+        const newBlock = this.cloneWithNodes(afterNodes);
+        this.parent.apply(new InsertBlocksAfterAction(this, newBlock));
+        return newBlock;
+      }
+    }
+  }
+  isCaretPositionAtStart(node, startOffset) {
+    return node === this.nodes[0] && startOffset === 0;
+  }
+  isCaretPositionAtEnd(node, startOffset) {
+    const lastNode = this.nodes[this.nodes.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  }
+  lineBreakSingleBlock(splitNode, startOffsetOfNode) {
+    if (splitNode) {
+      const lineBreakNode = new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = this.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = this.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = this.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
+      }
+      return lineBreakNode;
+    }
+  }
+  lineBreakMultipleBlocks(selectedBlocks) {
+    const beforeNodes = this['nodes'];
+    const lineBreakNode = new textNode.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', this);
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
+    return lineBreakNode;
+  }
+  deleteNodeContent(startContainerNode, startOffset) {
+    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
+      const newText = startContainerNode.text.slice(0, startOffset - 1) +
+        startContainerNode.text.slice(startOffset);
+      startContainerNode.apply(new textNode.UpdateTextAction(newText));
+      if (newText) {
+        return startContainerNode;
+      }
+      else {
+        const previousNode = this.getPreviousNode(startContainerNode);
+        // Remove the last character will not delete paragraph, the paragraph will removed after press delete again
+        if ((previousNode && previousNode.parentBlock === this && previousNode['text'] === '\n') ||
+          this.nodes.length === 1) {
+          return startContainerNode;
+        }
+        else {
+          this.apply(new RemoveChildAction(startContainerNode));
+          return previousNode;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      if (this.nodes.length && previousNode && previousNode.parentBlock !== this) {
+        if (startContainerNode.isEmpty()) {
+          this.apply(new RemoveChildAction(startContainerNode));
+        }
+        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(this));
+      }
+      else {
+        /**
+         * Remove line break
+         * @example caret at the first line
+         * \n
+         * test
+         */
+        if (startContainerNode.isEmpty()) {
+          this.apply(new RemoveChildAction(startContainerNode));
+        }
+        /**
+         * Remove line break
+         * @example caret at the begin of second line
+         * \n
+         * test
+         */
+        if (previousNode instanceof textNode.RTETextNode && previousNode.isEmpty()) {
+          const shouldRemoveNode = previousNode;
+          previousNode = this.getPreviousNode(previousNode);
+          shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+        }
+      }
+      //Remove the paragraph block if the content is empty
+      if (this.nodes.length === 0) {
+        this.parent.apply(new RemoveChildAction(this));
+      }
+      return previousNode;
+    }
+  }
+  removeChildNode(action) {
+    this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (this.nodes.length === 0) {
+      this.parent.apply(new RemoveChildAction(this));
+    }
+  }
+  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));
+    }
+    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(splitNode, startOffsetOfNode) {
+    const newParagraph = this.copyInlineStyleToNewParagraph(splitNode);
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+  convertParagraphToList(action) {
+    const bulletList = this.parent.createList(action.listType);
+    const listItems = action.selectedBlocks.map((node) => this.parent.toListItem(node));
+    bulletList.apply(new AppendChildNodesAction(listItems));
+    this.parent.apply(new InsertBlocksAfterAction(action.selectedBlocks[0], bulletList));
+    action.selectedBlocks.forEach((node) => {
+      node.parent.apply(new RemoveChildAction(node));
+    });
+  }
+  insertImage(action) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newImageBlock));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+  }
+  copyInlineStyleToNewParagraph(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation don't need inherited
+    textNode.annotationMap.delete(node_abstract.NodeAnnotationTypeEnum.LINK);
+    const newParagraph = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    newParagraph.apply(new AppendChildNodesAction([textNode]));
+    return newParagraph;
+  }
+}
+
+/**
+ * Image block
+ */
+class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.nodes = [];
+  }
+  static from(block) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (typeGuard.isNonNullable(item)) {
+          imageBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return imageBlock;
+  }
+  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;
+  }
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  }
+  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
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        action.previousNode = this.deleteNodeContent(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_NODES_AFTER:
+        this.replaceNodeWithNodes(action.referNode, [
+          action.referNode,
+          ...action.nodesToBeInserted,
+        ]);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  registerRef(ref) {
+    if (ref) {
+      node_abstract.stateEntityRenderingRegistry.register(ref, this);
+    }
+  }
+  removeChildNode(action) {
+    this.nodes = this.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (this.nodes.length === 0) {
+      this.parent.apply(new RemoveChildAction(this));
+    }
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @param {RTEImageNode} imageNode The split point image node
+   * @param {number} imageOffset The cursor point 0 | 1
+   */
+  splitImageNodes(imageNode, imageOffset) {
+    const nodesSplitIndex = this.nodes.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = this.nodes.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = this.nodes.slice(nodesSplitIndex + imageOffset);
+      this.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes);
+      this.parent.apply(new InsertBlocksAfterAction(this, newBlock));
+      return newBlock;
+    }
+  }
+  cloneWithNodes(nodes) {
+    const block = new RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  breakSingleBlock(splitNode, startOffsetOfNode) {
+    const newParagraph = RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
+    });
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newParagraph));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+  lineBreakSingleBlock(splitNode, startOffset) {
+    const newParagraph = this.breakSingleBlock(splitNode, startOffset);
+    if (newParagraph) {
+      return newParagraph['nodes'][0];
+    }
+  }
+  isCaretPositionAtStart(node, startOffset) {
+    return node === this.nodes[0] && startOffset === 0;
+  }
+  isCaretPositionAtEnd(node, startOffset) {
+    const lastNode = this.nodes[this.nodes.length - 1];
+    return node === lastNode && startOffset === 1;
+  }
+  lineBreakMultipleBlocks(selectedBlocks) {
+    const newParagraph = RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '\n' }],
+    });
+    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));
+    }
+    newParagraph.apply(new AppendChildNodesAction(afterNodes));
+    return newParagraph['nodes'][0];
+  }
+  deleteNodeContent(startContainerNode, startOffset) {
+    let previousNode = this.getPreviousNode(startContainerNode);
+    if (startOffset === 1) {
+      const parentBlock = startContainerNode.parentBlock;
+      if (parentBlock.nodes.length === 1) {
+        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
+      }
+      else {
+        startContainerNode.parentBlock.apply(new RemoveChildAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+      }
+    }
+    return previousNode;
+  }
+  /**
+   * Image will always create new image block
+   *
+   * @param {InsertImageToBlockAction} action insert image to current block
+   */
+  insertImage(action) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageNodes = action.imageBlockToBeInserted.nodes;
+    const newImageBlock = action.imageBlockToBeInserted;
+    if (this.nodes.length < 1) {
+      this.apply(new AppendChildNodesAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newImageBlock));
+    }
+    else {
+      this.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      this.parent.apply(new InsertBlocksAfterAction(this, newImageBlock));
+    }
+  }
+}
+
+class RTEListItemBlock extends RTETextBlock {
+  constructor(id, children) {
+    super(id, 'list-item');
+    this.children = [];
+    this.children = children;
+  }
+  static from(block) {
+    const listItemBlock = new RTEListItemBlock(block.id);
+    listItemBlock.nodes = block.nodes.map((richText) => textNode.RTETextNode.from(richText, listItemBlock));
+    if (block.children) {
+      listItemBlock.children = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (typeGuard.isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  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;
+  }
+  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()) });
+  }
+  cloneWithNodes(nodes) {
+    const block = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  isNotEmpty() {
+    if (this.children) {
+      return super.isNotEmpty() || this.children.some((block) => block.isNotEmpty());
+    }
+    else {
+      return super.isNotEmpty();
+    }
+  }
+  getLastNode() {
+    if (this.children && this.children.length > 0) {
+      const childListBlock = this.children[this.children.length - 1];
+      return childListBlock.getLastNode();
+    }
+    return super.getLastNode();
+  }
+  render(renderContext) {
+    return super.render(renderContext, this.renderChildren(renderContext));
+  }
+  /**
+   * Apply a modify action to block
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+        this.removeListChildNode(action);
+        break;
+      case node_abstract.ModifyContentActionType.DELETE_NEST_LIST:
+        this.removeNestList(action);
+        break;
+      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case node_abstract.ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case node_abstract.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        this.splitListItemBlock(action);
+        break;
+      case node_abstract.ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case node_abstract.ModifyContentActionType.REPLACE_NEST_LIST:
+        this.replaceNestList(action.newList);
+        break;
+      case node_abstract.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case node_abstract.ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case node_abstract.ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        action.previousNode = this.deleteListNodeContent(action.startContainerNode, action.startOffset);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.parent.apply(action);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  renderChildren(renderContext) {
+    var _a;
+    return (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.render(renderContext));
+  }
+  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));
+    }
+  }
+  removeNestList(action) {
+    if (this.children) {
+      if (this.children.length > 1) {
+        this.children = this.children.filter((child) => child !== action.nestListBlockToBeRemoved);
+      }
+      else {
+        this.children = undefined;
+      }
+    }
+  }
+  replaceNestList(newList) {
+    newList.forEach((listBlock) => {
+      listBlock.parent = this;
+    });
+    this.children = newList;
+  }
+  splitListItemBlock(action) {
+    action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
+  }
+  breakSingleListItemBlock(splitNode, startOffsetOfNode) {
+    const newListItem = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
+    newListItem.apply(new AppendChildNodesAction([newBreakNode]));
+    if (this.isCaretPositionAtEnd(splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem);
+    }
+    else if (this.isCaretPositionAtStart(splitNode, startOffsetOfNode)) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, newListItem));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      this.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newListItem;
+  }
+  breakListItemAtEnd(newListItem) {
+    const lastItem = this.parent.blocks[this.parent.blocks.length - 1];
+    const currentItemIsEmpty = this.nodes.length === 1 && this.nodes[0].isEmpty();
+    if (this === lastItem && currentItemIsEmpty) {
+      const parentParent = this.parent.parent;
+      if (parentParent['type'] !== 'list-item') {
+        const newParagraph = RTETextBlock.from({
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new AppendChildNodesAction(newListItem.nodes));
+        parentParent.apply(new InsertBlocksAfterAction(this.parent, newParagraph));
+        this.parent.apply(new RemoveChildAction(this));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new InsertBlocksAfterAction(parentParent, newListItem));
+        this.parent.apply(new RemoveChildAction(this));
+      }
+    }
+    else {
+      this.parent.apply(new InsertBlocksAfterAction(this, newListItem));
+    }
+    return newListItem;
+  }
+  deleteListNodeContent(startContainerNode, startOffset) {
+    const listBlock = startContainerNode.parentBlock.parent;
+    const previousNode = this.deleteNodeContent(startContainerNode, startOffset);
+    if (listBlock.blocks.length === 0) {
+      listBlock.parent.apply(new RemoveChildAction(listBlock));
+    }
+    return previousNode;
+  }
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation don't need inherited
+    textNode.annotationMap.delete(node_abstract.NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends node_abstract.ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = node_abstract.ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+class RTEListBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.type = 'bullet-list';
+    this.blocks = [];
+    this.type = type;
+  }
+  static from(block) {
+    const listBlock = new RTEListBlock(block.id, block.type);
+    listBlock.blocks = block.blocks.map((item) => {
+      const listItemBlock = RTEListItemBlock.from(item);
+      listItemBlock.parent = listBlock;
+      return listItemBlock;
+    });
+    return listBlock;
+  }
+  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;
+  }
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
+  }
+  isNotEmpty() {
+    return (this.blocks.length > 0 &&
+      this.blocks.some((listItemBlock) => listItemBlock.isNotEmpty()));
+  }
+  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
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case node_abstract.ModifyContentActionType.DELETE_CHILD:
+        this.removeListItemBlock(action.entityToBeRemoved);
+        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;
+      case node_abstract.ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildBlocks(action.entityToBeAppended);
+        break;
+      case node_abstract.ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+        this.convertToList(action);
+        break;
+      case node_abstract.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK:
+        this.convertToParagraph(action);
+        break;
+      case node_abstract.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+    }
+  }
+  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);
+    }
+  }
+  convertToList(action) {
+    const selectedBlocks = action.selectedBlocks;
+    const bulletList = this.parent.createList(action.listType);
+    const isSameList = selectedBlocks.every((block) => block.parent === this);
+    if (isSameList) {
+      // Select one or more list items belonging to the same list, and all items in this list should be updated
+      bulletList.apply(new AppendChildNodesAction(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())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => this.parent.toListItem(block));
+      bulletList.apply(new AppendChildNodesAction(listItems));
+      this.parent.apply(new InsertBlocksAfterAction(this, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new RemoveChildAction(block));
+      });
+      if (this.blocks.length === 0) {
+        this.parent.apply(new RemoveChildAction(this));
+      }
+    }
+  }
+  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()));
+      if (block === this.blocks[0])
+        isSelectedFirstBlock = true;
+      if (block === this.blocks[this.blocks.length - 1])
+        isSelectedLastBlock = true;
+      return this.toParagraph(block);
+    });
+    if (isSelectedFirstBlock) {
+      this.parent.apply(new InsertBlocksBeforeAction(this, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      this.parent.apply(new InsertBlocksAfterAction(this, ...currentParagraph));
+    }
+    else {
+      const startIndex = this.blocks.indexOf(selectedBlocks[0]);
+      const lastIndex = this.blocks.indexOf(selectedBlocks[selectedBlocks.length - 1]);
+      const firstBulletList = this.parent.createList(this.type);
+      firstBulletList.apply(new AppendChildNodesAction(this.blocks.slice(0, startIndex)));
+      const lastBulletList = this.parent.createList(this.type);
+      lastBulletList.apply(new AppendChildNodesAction(this.blocks.slice(lastIndex + 1)));
+      this.parent.apply(new InsertBlocksBeforeAction(this, firstBulletList, ...currentParagraph, lastBulletList));
+      this.parent.apply(new RemoveChildAction(this));
+    }
+    selectedBlocks.map((block) => {
+      this.apply(new RemoveChildAction(block));
+    });
+    if (this.blocks.length === 0) {
+      this.parent.apply(new RemoveChildAction(this));
+    }
+  }
+  insertImage(action) {
+    const imageBlock = action.imageBlockToBeInserted;
+    if (this.parent['type'] !== 'list-item') {
+      this.parent.apply(new InsertBlocksAfterAction(this, imageBlock));
+    }
+    else {
+      this.parent.apply(action);
+    }
+  }
+  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
+      if (this.parent instanceof RTEListItemBlock) {
+        this.parent.apply(new RemoveNestListAction(this));
+      }
+      else {
+        this.parent.apply(new RemoveChildAction(this));
+      }
+    }
+  }
+}
+
+/**
+ * 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.AppendChildNodesAction = AppendChildNodesAction;
+exports.BoldAnnotationAction = BoldAnnotationAction;
+exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
+exports.ImageAnnotationAction = ImageAnnotationAction;
+exports.IndentAnnotation = IndentAnnotation;
+exports.InsertBlocksAfterAction = InsertBlocksAfterAction;
+exports.InsertBlocksBeforeAction = InsertBlocksBeforeAction;
+exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
+exports.RTEImageBlock = RTEImageBlock;
+exports.RTEImageNode = RTEImageNode;
+exports.RTEListBlock = RTEListBlock;
+exports.RTEListItemBlock = RTEListItemBlock;
+exports.RTETextBlock = RTETextBlock;
+exports.RemoveChildAction = RemoveChildAction;
+exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
+exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
+exports.TextStyleAnnotation = TextStyleAnnotation;
+exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
+exports.VegaRTEContent = VegaRTEContent;