@globalpayments/vega 2.32.0 → 2.34.0

package/dist/esm/content-state-acf55eb0.js

@@ -0,0 +1,2164 @@
+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 { 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';
+
+/**
+ * Annotation to make block with horizontal alignment
+ */
+class HorizontalAlignmentAnnotation extends BlockAnnotation {
+  constructor(textAlign) {
+    super();
+    this.type = 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 [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 {
+  constructor(indent) {
+    super();
+    this.type = 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 [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 ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = 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 ModifyContentAction {
+  constructor(childNode) {
+    super();
+    this.type = ModifyContentActionType.DELETE_CHILD;
+    this.entityToBeRemoved = childNode;
+  }
+}
+
+/**
+ * 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' };
+      }
+    }
+  }
+}
+
+/**
+ * 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)
+      .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 = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {AnnotationAction|ModifyContentAction} action - Annotation action
+   */
+  doApply(action) {
+    if (action instanceof 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)
+      .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.
+   *
+   * @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'] !== 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 next node relative to the current node in a rich text editor structure.
+   *
+   * @param {RTENode} currentNode - An object of type `RTENode`.
+   * @returns {Nullable<RTENode>} the next block first node
+   */
+  getNextNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    if (currentBlock['nodes'][currentIndex + 1]) {
+      return currentBlock['nodes'][currentIndex + 1];
+    }
+    else if (currentBlock.parent) {
+      const nextBlock = this.getNextBlock(currentBlock);
+      if (nextBlock) {
+        return this.getBlockFirstNode(nextBlock);
+      }
+    }
+  }
+  /**
+   * Determines if a given node is the first node within the current state.
+   *
+   * @param {RTENode} currentNode - An object representing a node in a rich text editor (RTE).
+   * @returns {boolean} True or false;
+   */
+  isContentFirstNode(currentNode) {
+    const currentBlock = currentNode.parentBlock;
+    const currentIndex = currentBlock['nodes'].indexOf(currentNode);
+    const parent = currentBlock.parent;
+    if (currentBlock.type === 'list-item') {
+      const listParent = parent.parent;
+      return (currentIndex === 0 &&
+        Array.isArray(parent.blocks) &&
+        parent.blocks[0] === currentBlock &&
+        listParent['type'] !== 'list-item' &&
+        Array.isArray(listParent.blocks) &&
+        listParent.blocks[0] === parent);
+    }
+    else {
+      return currentIndex === 0 && Array.isArray(parent.blocks) && parent.blocks[0] === currentBlock;
+    }
+  }
+  /**
+   * 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];
+      }
+    }
+  }
+  /**
+   * Returns the first node within a given RTE block, handling different block types accordingly.
+   *
+   * @param {RTEBlock} currentBlock - Returns the first node within that block.
+   * @returns {Nullable<RTENode>} Returns the first node of the given `currentBlock` object.
+   */
+  getBlockFirstNode(currentBlock) {
+    if (currentBlock.type === 'number-list' || currentBlock.type === 'bullet-list') {
+      if (currentBlock.blocks) {
+        const firstListItem = currentBlock.blocks[0];
+        return this.getBlockFirstNode(firstListItem);
+      }
+    }
+    else {
+      if (currentBlock['nodes']) {
+        return currentBlock['nodes'][0];
+      }
+    }
+  }
+  /**
+   * 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);
+      }
+    }
+  }
+  /**
+   * This function retrieves the next block in a rich text editor, considering different scenarios such as being in a bullet list.
+   *
+   * @param {RTEBlock} currentBlock - Used to retrieve the next block relative to the given `currentBlock` within a rich text editor context.
+   * @returns {Nullable<RTEBlock>} The next block if existing
+   */
+  getNextBlock(currentBlock) {
+    if (currentBlock && currentBlock.parent && currentBlock.parent.blocks) {
+      const currentBlockIndex = currentBlock.parent.blocks.indexOf(currentBlock);
+      if (currentBlock.parent.blocks[currentBlockIndex + 1]) {
+        return currentBlock.parent.blocks[currentBlockIndex + 1];
+      }
+      else if (currentBlock.type === 'list-item' &&
+        currentBlock.parent.blocks.length === currentBlockIndex + 1) {
+        return this.getNextBlock(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 NodeAnnotation {
+  constructor(size = 'md', alt) {
+    super();
+    this.type = 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 [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 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 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);
+    this.type = 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(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;
+  }
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    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));
+  }
+  doAnnotationActionApply(action) {
+    const annotation = action.toAnnotation();
+    this.annotationMap.set(annotation.type, annotation);
+  }
+  // placeholder method
+  /* istanbul ignore next */
+  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) }));
+  }
+}
+
+/**
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
+ */
+class ReplaceChildNodesAction extends ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = 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 ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = 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 ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode) {
+    super();
+    this.type = ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Action to change the text style of a block
+ */
+class TextStyleAnnotationAction extends 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 TextSplittableAction {
+  constructor(bold) {
+    super();
+    this.isFlushable = true;
+    this.bold = bold;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {BoldAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new BoldAnnotation(this.bold);
+  }
+}
+
+/**
+ * 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 ModifyContentAction {
+  constructor(blockNeedToBeMerged) {
+    super();
+    this.type = 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 ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = 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) => RTETextNode.from(richText, textBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          textBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    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.
+   *
+   * @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 LinkAnnotationAction && action.needMergeNode) {
+        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(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(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 (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());
+  }
+  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 DeleteNodeAnnotationAction(NodeAnnotationTypeEnum.BOLD));
+        });
+      }
+      return;
+    }
+    if (action instanceof LinkGroupAnnotationAction) {
+      const linkGroupAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.LINK_GROUP);
+      if (linkGroupAnnotation) {
+        const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+        linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+        this.annotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+      }
+      return;
+    }
+  }
+  /**
+   * Apply a modify action to block
+   *
+   * @param {ModifyContentAction} action - Modify action
+   */
+  doModifyActionApply(action) {
+    switch (action.type) {
+      case ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+        this.convertParagraphToList(action);
+        break;
+      case ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        this.deleteNodeContent(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case 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 RTETextNode(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 RTETextNode(generateUUID(), '\n', this);
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes);
+    return lineBreakNode;
+  }
+  deleteNodeContent(action) {
+    const startContainerNode = action.startContainerNode;
+    const startOffset = action.startOffset;
+    if (startOffset !== 0 && !startContainerNode.isEmpty()) {
+      const newText = startContainerNode.text.slice(0, startOffset - 1) +
+        startContainerNode.text.slice(startOffset);
+      startContainerNode.apply(new UpdateTextAction(newText));
+      if (newText) {
+        action.previousNode = startContainerNode;
+        return;
+      }
+      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) {
+          action.previousNode = startContainerNode;
+          return;
+        }
+        else {
+          this.apply(new RemoveChildAction(startContainerNode));
+          action.previousNode = previousNode;
+          return;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      let nextNode = null;
+      if (this.nodes.length && previousNode && previousNode.parentBlock !== this) {
+        if (startContainerNode.isEmpty()) {
+          this.apply(new RemoveChildAction(startContainerNode));
+        }
+        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(this));
+      }
+      else {
+        if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
+          nextNode = this.getNextNode(startContainerNode);
+        }
+        /**
+         * 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 RTETextNode && previousNode.isEmpty()) {
+          const shouldRemoveNode = previousNode;
+          previousNode = this.getPreviousNode(previousNode);
+          shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+          if (!previousNode) {
+            nextNode = startContainerNode;
+          }
+        }
+      }
+      //Remove the paragraph block if the content is empty
+      if (this.nodes.length === 0) {
+        this.parent.apply(new RemoveChildAction(this));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
+  }
+  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 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(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(NodeAnnotationTypeEnum.LINK);
+    const newParagraph = new RTETextBlock(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 (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(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;
+  }
+  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 (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 ModifyContentActionType.DELETE_CHILD:
+        this.removeChildNode(action);
+        break;
+      case ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode);
+        break;
+      case ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        this.deleteNodeContent(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+      case ModifyContentActionType.INSERT_NODES_AFTER:
+        this.replaceNodeWithNodes(action.referNode, [
+          action.referNode,
+          ...action.nodesToBeInserted,
+        ]);
+        break;
+      case ModifyContentActionType.INSERT_NODES_BEFORE:
+        this.replaceNodeWithNodes(action.referNode, [
+          ...action.nodesToBeInserted,
+          action.referNode,
+        ]);
+        break;
+    }
+  }
+  registerRef(ref) {
+    if (ref) {
+      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(generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  breakSingleBlock(splitNode, startOffsetOfNode) {
+    const newParagraph = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: 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: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: 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 RTETextNode(generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildNodesAction(afterNodes));
+    return newParagraph['nodes'][0];
+  }
+  deleteNodeContent(action) {
+    const startContainerNode = action
+      .startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset === 1) {
+      const parentBlock = startContainerNode.parentBlock;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      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));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
+  }
+  /**
+   * 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) => RTETextNode.from(richText, listItemBlock));
+    if (block.children) {
+      listItemBlock.children = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  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;
+  }
+  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(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 ModifyContentActionType.DELETE_CHILD:
+        this.removeListChildNode(action);
+        break;
+      case ModifyContentActionType.DELETE_NEST_LIST:
+        this.removeNestList(action);
+        break;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildNodes(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.CLEAR_CHILD_NODES:
+        this.nodes = [];
+        break;
+      case ModifyContentActionType.SPLIT_BLOCK_WITH_NODE:
+        this.splitListItemBlock(action);
+        break;
+      case ModifyContentActionType.REPLACE_CHILD_NODES:
+        this.nodes = [];
+        this.appendChildNodes(action.newChildNodes);
+        break;
+      case ModifyContentActionType.REPLACE_NEST_LIST:
+        this.replaceNestList(action.newList);
+        break;
+      case ModifyContentActionType.MERGE_TWO_BLOCKS_NODES:
+        this.mergeTwoBlocksNodes(action.blockNeedToBeMerged);
+        break;
+      case ModifyContentActionType.BREAK_SINGLE_BLOCK:
+        action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK:
+        action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset);
+        break;
+      case ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS:
+        action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks);
+        break;
+      case ModifyContentActionType.DELETE_BLOCK_CONTENT:
+        this.deleteListNodeContent(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.parent.apply(action);
+        break;
+      case 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(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: 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(action) {
+    const startContainerNode = action.startContainerNode;
+    const listBlock = startContainerNode.parentBlock.parent;
+    this.deleteNodeContent(action);
+    if (listBlock.blocks.length === 0) {
+      listBlock.parent.apply(new RemoveChildAction(listBlock));
+    }
+  }
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation don't need inherited
+    textNode.annotationMap.delete(NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+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(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;
+  }
+  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 (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 ModifyContentActionType.DELETE_CHILD:
+        this.removeListItemBlock(action.entityToBeRemoved);
+        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;
+      case ModifyContentActionType.APPEND_CHILD_NODES:
+        this.appendChildBlocks(action.entityToBeAppended);
+        break;
+      case ModifyContentActionType.TRANSFORM_LIST_BLOCK:
+        this.convertToList(action);
+        break;
+      case ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK:
+        this.convertToParagraph(action);
+        break;
+      case ModifyContentActionType.INSERT_IMAGE_TO_BLOCK:
+        this.insertImage(action);
+        break;
+    }
+  }
+  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);
+    }
+  }
+  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 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 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: 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 };